49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { ParamsSchema } from '@/pages/playground/config/types';
|
|
import { useIntl } from '@umijs/max';
|
|
import React, { useCallback, useMemo } from 'react';
|
|
import LabelInfo from './components/label-info';
|
|
import componentsMap from './config/components';
|
|
|
|
const FieldComponent: React.FC<ParamsSchema> = (props) => {
|
|
const intl = useIntl();
|
|
const { type, label, attrs, style, value, ...rest } = props;
|
|
const renderChild = useCallback(
|
|
(type: string) => {
|
|
switch (type) {
|
|
case 'Checkbox':
|
|
return (
|
|
<LabelInfo
|
|
required={props.required}
|
|
label={
|
|
label.isLocalized
|
|
? intl.formatMessage({ id: label.text })
|
|
: label.text
|
|
}
|
|
></LabelInfo>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
[intl, type]
|
|
);
|
|
const checkboxAttrs = useMemo(() => {
|
|
return type === 'Checkbox' ? { checked: value } : { value: value };
|
|
}, [type, value]);
|
|
return React.createElement(
|
|
componentsMap[type],
|
|
{
|
|
...rest,
|
|
...attrs,
|
|
...checkboxAttrs,
|
|
style: { ...style, width: '100%' },
|
|
label: label.isLocalized
|
|
? intl.formatMessage({ id: label.text })
|
|
: label.text
|
|
},
|
|
renderChild(type)
|
|
);
|
|
};
|
|
|
|
export default React.memo(FieldComponent);
|