二次封装 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 el = (
<ProFormDigit
{...props}
/>
);
return el;
};
return createEl();
};
export default MyProFormDigit;
react-audio-player
import React from 'react';
import ReactAudioPlayer from 'react-audio-player';
interface IProps {
src: string;
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: string;
sources: 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={{
hd: {
play_url: sources,
},
}}
/>
);
};
export default MyVideoPlayer;
react-file-viewer 支持word pdf 等文件
import React from 'react';
import { useRef, useEffect, useState } from 'react';
interface IProps {
fileType: string;
filePath: string;
}
const MyOffice: React.FC<IProps> = (props) => {
const { fileType, filePath } = props;
const ComP = useRef();
const [, render] = useState(1);
useEffect(() => {
import( 'react-file-viewer').then((module) => {
ComP.current = module.default;
render(Math.random());
});
}, []);
if (ComP.current) {
return (
<ComP.current
fileType={fileType}
filePath={filePath}
errorComponent={Error}
unsupportedComponent={Error}
></ComP.current>
);
}
return null;
};
export default MyOffice;