yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-07-21 07:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #21163 from strapi/fix/custom-fields-backward-compatibility

Browse Source 
fix(content-manager): pass field to CustomField input to have backward compatibility
This commit is contained in:
Fernando Chávez 2024-09-13 11:16:28 +02:00 committed by GitHub
commit 25f8ab9fbc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/content-manager/admin/src/pages/EditView/components/InputRenderer.tsx
View File

@ -4,6 +4,7 @@ import {
useStrapiApp, useStrapiApp,
useForm, useForm,
InputRenderer as FormInputRenderer, InputRenderer as FormInputRenderer,
useField,
} from '@strapi/admin/strapi-admin'; } from '@strapi/admin/strapi-admin';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -63,6 +64,9 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }: InputRendererP
edit: { components }, edit: { components },
} = useDocLayout(); } = useDocLayout();
// We pass field in case of Custom Fields to keep backward compatibility
const field = useField(props.name);
if (!visible) { if (!visible) {
return null; return null;
} }
@ -86,7 +90,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }: InputRendererP
if (CustomInput) { if (CustomInput) {
// @ts-expect-error – TODO: fix this type error in the useLazyComponents hook. // @ts-expect-error – TODO: fix this type error in the useLazyComponents hook.
return <CustomInput {...props} hint={hint} disabled={fieldIsDisabled} />; return <CustomInput {...props} {...field} hint={hint} disabled={fieldIsDisabled} />;
} }
return ( return (

11
packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx
View File

@ -10,7 +10,7 @@ import {
useComposedRefs, useComposedRefs,
} from '@strapi/design-system'; } from '@strapi/design-system';
import { CaretDown } from '@strapi/icons'; import { CaretDown } from '@strapi/icons';
import { useField, type InputProps } from '@strapi/strapi/admin'; import { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';
import { HexColorPicker } from 'react-colorful'; import { HexColorPicker } from 'react-colorful';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { styled } from 'styled-components'; import { styled } from 'styled-components';
@ -73,13 +73,16 @@ const ColorPickerPopover = styled(Popover.Content)`
min-height: 270px; min-height: 270px;
`; `;
type ColorPickerInputProps = InputProps & { type ColorPickerInputProps = InputProps &
FieldValue & {
labelAction?: React.ReactNode; labelAction?: React.ReactNode;
}; };
export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>( export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(
({ hint, disabled = false, labelAction, label, name, required = false }, forwardedRef) => { (
const { onChange, value, error } = useField(name); { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },
forwardedRef
) => {
const [showColorPicker, setShowColorPicker] = React.useState(false); const [showColorPicker, setShowColorPicker] = React.useState(false);
const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!); const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();

14
packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx
View File

@ -7,7 +7,16 @@ import { IntlProvider } from 'react-intl';
import { ColorPickerInput } from '../ColorPickerInput'; import { ColorPickerInput } from '../ColorPickerInput';
const render = () => ({ const render = () => ({
...renderRTL(<ColorPickerInput name="color" label={'color-picker'} type="string" />, { ...renderRTL(
<ColorPickerInput
name="color"
label={'color-picker'}
type="string"
initialValue=""
value=""
onChange={() => {}}
/>,
{
wrapper: ({ children }) => { wrapper: ({ children }) => {
const locale = 'en'; const locale = 'en';
return ( return (
@ -20,7 +29,8 @@ const render = () => ({
</IntlProvider> </IntlProvider>
); );
}, },
}), }
),
user: userEvent.setup(), user: userEvent.setup(),
}); });