【Aling】是我自建的组件库，完全从零开始配置环境并搭建，并未使用任何脚手架工具。该组件库收集了我工作或学习中封装的一些较为通用的react组件或者hook并具有完全的typescript支持，基于ant-design,如过你使用过antd@5.x组件库那么使用本库基本上没有门槛。

• 本库需要您的项目中安装antd和mui
• 源码地址==>您可在此获取仓库源码并修改调试组件。
• 仓库地址==>您可在此查看发布版本

shell
npm i aling

#组件

#WxUploader

Uploader 微信风格的文件上传。

#代码演示

该组件基于Uploader封装，因此支持原有使用方法。

typescript
import { WxUploader } from "aling"

...

() => ( <WxUploader></WxUploader> )

#在变化前修改数据

typescript
<WxUploader
  maxCount={1}
  onChange={(list, info) => {
    console.log("list:", list, info)
  }}
  beformOnChange={(fileList: any) => {
    //format your data
    return formatter(fileList)
  }}
  //multiple
  accept="audio/*"
></WxUploader>

#修改文件的预览

组件目前支持并提供了音乐，图片和视频的预览，如下图所示:

依次上传了图片，音频和视频

通过filePreview你可以定制自己的文件预览形式，

typescript
<WxUploader
  multiple
  filePreview={(dom, file) => {
    return '这是一个未知文件'
  }}
></WxUploader>

#类型声明

typescript
import { Upload, UploadFile, UploadProps } from "antd";
import { Box, SxProps } from "@mui/system";

export interface WxFilePreviewProps extends PropsWithChildren {
  fileInfo: UploadFile<any> | string;
  filePreview?: (dom: React.LazyExoticComponent<React.ComponentType<any>>, file: UploadFile<any> | string) => React.ReactNode; //自定义预览
}

export interface WxUploaderProps extends Omit<UploadProps, "onChange" | "fileList" | "listType">, Pick<WxFilePreviewProps, "filePreview"> {
  uploadIcon?: React.ReactNode;
  value?: UploadFile<any>[];
  sx?: SxProps;
  onChange?: (list: (UploadFile | string)[], info: UploadChangeParam<UploadFile<any>> | undefined) => void;
  beformOnChange?: (fileList: (UploadFile<any> | string)[], info: UploadChangeParam<UploadFile<any>> | undefined) => any[]; //onChange之前调用，作为表单组件时可用于格式化提交到表单的组件
}

#props

属性	描述	类型	默认值
uploadIcon	上传点击元素	ReactNode	-
value	受控的文件列表	UploadFile[]	-
sx	-	SxProps	-
onChange	上传文件改变时的回调，上传每个阶段都会触发该事件。详见onChange	function	-
beformOnChange	onChange事件触发之前调用，您可在此格式化返回的数据	function	-
filePreview	定义如何渲染文件	function	-

#WxButton

微信风格的按钮组件，支持多种定制。

#代码演示

该组件基于Button封装，因此支持原有使用方法。

typescript
import { WxButton } from "aling"

...

() => ( <WxButton ></ WxButton > )

#受控的按钮

typescript
<Form.Item
  className="memory-location"
  name={"location"}
  required
  rules={[
    {
      required: true,
      message: "请选择您的地址",
    },
  ]}
>
  <WxButton 
    loading={locationLoading}
    onClick={onLocationClick}
    placeholder="所在位置"
  ></WxButton >
</Form.Item>

value为字符串或者数组，数组则会通过 • 拼接为字符串显示，就像上面的定位一样。

#类型声明

typescript
import { ButtonProps} from "antd";
interface WxButton extends ButtonProps {
  value?: any[];
  onChange?: any;
  onClick?: () => void;
  placeholder?: string;
  prevIcon?: React.ReactElement | null;
  backIcon?: React.ReactElement | null;
}

#props

属性	描述	类型	默认值
value	作为受控组件的值	-	-
onClick	当按钮点击时	function	-
placeholder	按钮的占位文本	string	-
onChange	按钮值变化时	function	-
prevIcon	前缀图标	React.ReactElement	-
backIcon	后缀图标	React.ReactElement	-

#待续...