半点心-草蜢

Recently listening to this song

【Aling】 is my self-built component library, configured and built entirely from scratch without using any scaffolding tools. This component library collects some relatively universal React components or hooks that I have encapsulated during work or study, with full TypeScript support. It is based on ant-design. If you have used the antd@5.x component library, then using this library basically has no barrier.

• This library requires your project to install antd and mui
• Source code address ==> You can get the repository source code here and modify or debug components.
• Repository address ==> You can view published versions here.

shell
npm i aling

#Components

#WxUploader

Uploader — WeChat-style file upload.

#### Code Demo

This component is encapsulated based on Uploader, so it supports the original usage methods.

typescript
import { WxUploader } from "aling"

...

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

#Modify data before change

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>

#Modify file preview

The component currently supports and provides previews for music, images, and videos, as shown below:

Uploaded an image, audio, and video in sequence

You can customize your own file preview via filePreview,

typescript
<WxUploader
  multiple
  filePreview={(dom, file) => {
    return 'This is an unknown file'
  }}
></WxUploader>

#### Type Declaration

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; // custom preview
}

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[]; // called before onChange, can be used to format data submitted to the form when used as a form component
}

#Props

PropertyDescriptionTypeDefaultuploadIconClickable element for uploadReactNode-valueControlled file listUploadFile[]-sx-SxProps-onChangeCallback when uploaded files change; triggered at each stage of upload. See onChangefunction-beformOnChangeCalled before the onChange event; you can format returned data herefunction-filePreviewDefine how to render the filefunction-

#WxButton

WeChat-style button component, supporting various customizations.

#### Code Demo

This component is encapsulated based on Button, so it supports the original usage methods.

typescript
import { WxButton } from "aling"

...

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

#Controlled button

typescript
<Form.Item
  className="memory-location"
  name={"location"}
  required
  rules={[
    {
      required: true,
      message: "Please select your address",
    },
  ]}
>
  <WxButton 
    loading={locationLoading}
    onClick={onLocationClick}
    placeholder="Location"
  ></WxButton >
</Form.Item>

value can be a string or array; if it's an array, it will be joined into a string with • for display, just like the location above.

:::info
Why can't we customize button children and active color?
If you need a React WeChat-style button, the current implementation already meets the demand. You can directly copy the source code to customize your own component.
:::

#Type Declaration

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

PropertyDescriptionTypeDefaultvalueValue as controlled prop--onClickWhen the button is clickedfunction-placeholderPlaceholder text of buttonstring-onChangeWhen button value changesfunction-prevIconPrefix iconReact.ReactElement-backIconSuffix iconReact.ReactElement-

#To be continued...