yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 06:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move custom field input to GenericInput

Browse Source
This commit is contained in:
Rémi de Juvigny 2022-08-17 14:49:59 +02:00
parent 11eee5c9f5
commit cd7c339445
2 changed files with 44 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
packages/core/admin/admin/src/content-manager/components/Inputs/index.js
View File

@ -218,83 +218,48 @@ function Inputs({
);
}
const customInputs = {
json: InputJSON,
uid: InputUID,
media: fields.media,
wysiwyg: Wysiwyg,
...fields,
};
if (customFieldUid) {
const customField = customFieldsRegistry.get(customFieldUid);
const CustomFieldInput = React.lazy(customField.components.Input);
return (
<Suspense fallback="loading...">
<CustomFieldInput
attribute={fieldSchema}
autoComplete="new-password"
intlLabel={{ id: label, defaultMessage: label }}
// in case the default value of the boolean is null, attribute.default doesn't exist
isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
description={description ? { id: description, defaultMessage: description } : null}
disabled={shouldDisableField}
error={error}
labelAction={labelAction}
contentTypeUID={currentContentTypeLayout.uid}
customFieldUid={customFieldUid}
customInputs={{
json: InputJSON,
uid: InputUID,
media: fields.media,
wysiwyg: Wysiwyg,
...fields,
}}
multiple={fieldSchema.multiple || false}
name={keys}
onChange={args => {
console.log('on change', args);
onChange(args);
}}
options={options}
placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
required={fieldSchema.required || false}
step={step}
type={inputType}
// validations={validations}
value={inputValue}
withDefaultValue={false}
/>
</Suspense>
);
customInputs[customFieldUid] = CustomFieldInput;
}
return (
<GenericInput
attribute={fieldSchema}
autoComplete="new-password"
intlLabel={{ id: label, defaultMessage: label }}
// in case the default value of the boolean is null, attribute.default doesn't exist
isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
description={description ? { id: description, defaultMessage: description } : null}
disabled={shouldDisableField}
error={error}
labelAction={labelAction}
contentTypeUID={currentContentTypeLayout.uid}
customFieldUid={customFieldUid}
customInputs={{
json: InputJSON,
uid: InputUID,
media: fields.media,
wysiwyg: Wysiwyg,
...fields,
}}
multiple={fieldSchema.multiple || false}
name={keys}
onChange={onChange}
options={options}
placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
required={fieldSchema.required || false}
step={step}
type={inputType}
// validations={validations}
value={inputValue}
withDefaultValue={false}
/>
<Suspense fallback="loading...">
<GenericInput
attribute={fieldSchema}
autoComplete="new-password"
intlLabel={{ id: label, defaultMessage: label }}
// in case the default value of the boolean is null, attribute.default doesn't exist
isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
description={description ? { id: description, defaultMessage: description } : null}
disabled={shouldDisableField}
error={error}
labelAction={labelAction}
contentTypeUID={currentContentTypeLayout.uid}
customFieldUid={customFieldUid}
customInputs={customInputs}
multiple={fieldSchema.multiple || false}
name={keys}
onChange={onChange}
options={options}
placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
required={fieldSchema.required || false}
step={step}
type={inputType}
// validations={validations}
value={inputValue}
withDefaultValue={false}
/>
</Suspense>
);
}

9
packages/core/helper-plugin/lib/src/components/GenericInput/index.js
View File

@ -25,6 +25,7 @@ import NotSupported from './NotSupported';
const GenericInput = ({
autoComplete,
customFieldUid,
customInputs,
description,
disabled,
@ -45,7 +46,11 @@ const GenericInput = ({
const { formatMessage } = useIntl();
const [showPassword, setShowPassword] = useState(false);
const CustomInput = customInputs ? customInputs[type] : null;
let CustomInput = null;
if (customInputs) {
CustomInput = customInputs[customFieldUid || type];
}
// the API always returns null, which throws an error in React,
// therefore we cast this case to undefined
@ -437,6 +442,7 @@ const GenericInput = ({
GenericInput.defaultProps = {
autoComplete: undefined,
customInputs: null,
customFieldUid: null,
description: null,
disabled: false,
error: '',
@ -452,6 +458,7 @@ GenericInput.defaultProps = {
GenericInput.propTypes = {
autoComplete: PropTypes.string,
customInputs: PropTypes.object,
customFieldUid: PropTypes.string,
description: PropTypes.shape({
id: PropTypes.string.isRequired,
defaultMessage: PropTypes.string.isRequired,