封装 组件集

二次封装 ant-pro DatePicker 各类选择器合集

import {
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDateTimePicker,
  ProFormDateTimeRangePicker,
  ProFormTimePicker,
} from '@ant-design/pro-form';
import type { FieldProps, ProFormFieldItemProps } from '@ant-design/pro-form/lib/interface';
import type {
  DatePickerProps,
  MonthPickerProps,
  RangePickerProps,
  WeekPickerProps,
} from 'antd/lib/date-picker';

type Data = {
  type?:
    | 'date' // 日期
    | 'dateRange' // 日期区间
    | 'datetime' // 日期时间
    | 'dateTimeRange' // 日期时间区间
    | 'yearRange' // 年区间
    | 'dateYear' // 年
    | 'dateQuarter' // 季度
    | 'dateMonth' // 月
    | 'monthRange' // 月区间
    | 'dateWeek' // 周
    | 'time' // 时间
    | 'timeRange'; // 时间区间
  fieldProps?: FieldProps &
    (DatePickerProps | WeekPickerProps | MonthPickerProps | RangePickerProps);
};
type IProps = {
  formProps?: ProFormFieldItemProps<DatePickerProps>;
  className?: string;
} & Data;

const MyProFormDatePicker: React.FC<IProps> = (props) => {
  const createEl = () => {
    const { formProps, fieldProps, className } = props;
    const obj = {
      name: props.type || 'date',
      className: `${className}`,
      ...formProps,
      fieldProps: {
        ...fieldProps,
      },
    };
    if (props.type === 'yearRange') {
      Object.assign(obj.fieldProps, {
        picker: 'year',
        format: 'YYYY',
      });
    }
    if (props.type === 'monthRange') {
      Object.assign(obj.fieldProps, {
        picker: 'month',
        format: 'YYYY-MM',
      });
    }
    switch (props.type) {
      case 'date':
        return <ProFormDatePicker {...obj} />;
      case 'dateYear':
        return <ProFormDatePicker.Year {...obj} />;
      case 'dateQuarter':
        return <ProFormDatePicker.Quarter {...obj} />;
      case 'dateMonth':
        return <ProFormDatePicker.Month {...obj} />;
      case 'dateWeek':
        return <ProFormDatePicker.Week {...obj} />;
      case 'time':
        return <ProFormTimePicker {...obj} />;
      case 'datetime':
        return <ProFormDateTimePicker {...obj} />;
      case 'dateTimeRange':
        return <ProFormDateTimeRangePicker {...obj} />;
      case 'dateRange':
        return <ProFormDateRangePicker {...obj} />;
      case 'timeRange':
        return <ProFormTimePicker.RangePicker {...obj} />;
      case 'yearRange':
        return <ProFormDateRangePicker {...obj} />;
      case 'monthRange':
        return <ProFormDateRangePicker {...obj} />;
      default:
        return <ProFormDatePicker {...obj} />;
    }
  };

  return createEl();
};

export default MyProFormDatePicker;

ProFormCheckbox 的二次封装

import { ProFormCheckbox } from '@ant-design/pro-form';
import type {
  ProFormCheckboxGroupProps,
  ProFormCheckboxProps,
} from '@ant-design/pro-form/lib/components/Checkbox';
import type { FieldProps } from '@ant-design/pro-form/lib/interface';
import type { CheckboxGroupProps, CheckboxProps } from 'antd/lib/checkbox';
interface IProps {
  fieldProps?: FieldProps & CheckboxProps;
  formProps?: ProFormCheckboxProps;
  className?: string;
  children: any;
}
interface IPropsGroup {
  fieldProps?: FieldProps & CheckboxGroupProps;
  formProps?: ProFormCheckboxGroupProps;
  className?: string;
}

const MyProFormCheckbox = (props: IProps) => {
  const { formProps, fieldProps, className } = props;
  const obj = {
    fieldProps: {
      className: `${className}`,
      ...fieldProps,
    },
    ...formProps,
  };
  return <ProFormCheckbox {...obj}>{props.children}</ProFormCheckbox>;
};

MyProFormCheckbox.Group = (IPropsGroup: IPropsGroup) => {
  const { formProps, fieldProps, className } = IPropsGroup;
  const obj = {
    fieldProps: {
      className: `${className}`,
      ...fieldProps,
    },
    ...formProps,
  };
  return <ProFormCheckbox.Group {...obj} />;
};

export default MyProFormCheckbox;

ProFormDigit

interface IProps {
  className?: string; // 类名
  disabled?: boolean;
  label?: string;
  name?: string;
  min?: number; //最小值
  max?: number; //最大值
  fieldProps?: (FieldProps & InputNumberProps<string | number>) | undefined;
  placeholder?: string; //提示文字
}
const MyProFormDigit: React.FC<IProps> = (props) => {
  const createEl = () => {
    // const { label, name, placeholder, min, max, disabled, fieldProps } = props;
    const el = (
      <ProFormDigit
        {...props}
        // label={label}
        // name={name}
        // placeholder={placeholder}
        // min={min}
        // max={max}
        // disabled={disabled}
        // fieldProps={{ ...fieldProps }}
      />
    );
    return el;
  };
  return createEl();
};
export default MyProFormDigit;

react-audio-player

import React from 'react';
import ReactAudioPlayer from 'react-audio-player';
interface IProps {
  // 音频来源src 必传
  src: string;
  // id
  id?: string;
  // 是否自动播放
  autoPlay?: boolean;
  // 是否可控
  controls?: boolean;
  // 样式
  style?: object;
}
const MyAudioPlayer: React.FC<IProps> = (props) => {
  const { id, src, autoPlay, controls, style } = props;
  console.log('style:,', style);

  return (
    <ReactAudioPlayer
      id={id || ''}
      style={style || { width: '800px', height: '100px' }}
      src={src}
      autoPlay={autoPlay || false}
      controls={controls || true}
    />
  );
};
export default MyAudioPlayer;

griffith 封装

import React from 'react';
import Player from 'griffith';
interface IProps {
  // id
  id: string;
  // 音频来源
  sources: string;
  // sources={{
  //     hd: {
  //         play_url: string,
  //     },
  // }}
  // 是否自动播放
  autoplay?: boolean | undefined;
}
const MyVideoPlayer: React.FC<IProps> = (props) => {
  const { id, sources, autoplay } = props;
  console.log('sources:', sources);
  console.log('autoplay:', autoplay);
  return (
    <Player
      id={id}
      autoplay={autoplay}
      // sources={sources}
      sources={{
        hd: {
          play_url: sources,
        },
      }}
    />
  );
};
export default MyVideoPlayer;

react-file-viewer 支持word pdf 等文件

import React from 'react';
// import FileViewer from 'react-file-viewer';
import { useRef, useEffect, useState } from 'react';

interface IProps {
  // 文件类型
  fileType: string;
  // 文件地址src
  filePath: string;
}
const MyOffice: React.FC<IProps> = (props) => {
  const { fileType, filePath } = props;
  const ComP = useRef();
  const [, render] = useState(1);
  useEffect(() => {
    import(/* webpackChunkName: "FileViewer" */ 'react-file-viewer').then((module) => {
      ComP.current = module.default;
      render(Math.random());
    });
  }, []);

  if (ComP.current) {
    return (
      <ComP.current
        fileType={fileType}
        filePath={filePath}
        // onError={onError}
        errorComponent={Error}
        unsupportedComponent={Error}
      ></ComP.current>
    );
  }

  return null;

};
export default MyOffice;