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

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

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