fix: i18n duplicate field ui replication (#582)

KaneFreeman · web-flow · commit 0b451b1db78e · 2023-02-24T09:01:59.000-05:00
diff --git a/packages/core/src/components/Editor/EditorControlPane/EditorControl.tsx b/packages/core/src/components/Editor/EditorControlPane/EditorControl.tsx
@@ -21,6 +21,7 @@ import { borders, colors, lengths, transitions } from '@staticcms/core/component
 import { transientOptions } from '@staticcms/core/lib';
 import useMemoCompare from '@staticcms/core/lib/hooks/useMemoCompare';
 import useUUID from '@staticcms/core/lib/hooks/useUUID';
+import { isFieldDuplicate, isFieldHidden } from '@staticcms/core/lib/i18n';
 import { resolveWidget } from '@staticcms/core/lib/registry';
 import { getFieldLabel } from '@staticcms/core/lib/util/field.util';
 import { isNotNullish } from '@staticcms/core/lib/util/null.util';
@@ -144,10 +145,11 @@ const EditorControl = ({
   fieldsErrors,
   submitted,
   getAsset,
-  isDisabled,
-  isFieldDuplicate,
-  isFieldHidden,
-  isHidden = false,
+  isDisabled = false,
+  isParentDuplicate = false,
+  isFieldDuplicate: deprecatedIsFieldDuplicate,
+  isParentHidden = false,
+  isFieldHidden: deprecatedIsFieldHidden,
   locale,
   mediaPaths,
   openMediaLibrary,
@@ -191,6 +193,15 @@ const EditorControl = ({
     [collection],
   );
 
+  const isDuplicate = useMemo(
+    () => isParentDuplicate || isFieldDuplicate(field, locale, i18n?.defaultLocale),
+    [field, i18n?.defaultLocale, isParentDuplicate, locale],
+  );
+  const isHidden = useMemo(
+    () => isParentHidden || isFieldHidden(field, locale, i18n?.defaultLocale),
+    [field, i18n?.defaultLocale, isParentHidden, locale],
+  );
+
   useEffect(() => {
     if ((!dirty && !submitted) || isHidden) {
       return;
@@ -257,9 +268,11 @@ const EditorControl = ({
             fieldsErrors,
             submitted,
             getAsset: handleGetAsset,
-            isDisabled: isDisabled ?? false,
-            isFieldDuplicate,
-            isFieldHidden,
+            isDisabled: isDisabled || isDuplicate,
+            isDuplicate,
+            isFieldDuplicate: deprecatedIsFieldDuplicate,
+            isHidden,
+            isFieldHidden: deprecatedIsFieldHidden,
             label: getFieldLabel(field, t),
             locale,
             mediaPaths,
@@ -330,9 +343,16 @@ interface EditorControlOwnProps {
   fieldsErrors: FieldsErrors;
   submitted: boolean;
   isDisabled?: boolean;
+  isParentDuplicate?: boolean;
+  /**
+   * @deprecated use isDuplicate instead
+   */
   isFieldDuplicate?: (field: Field) => boolean;
+  isParentHidden?: boolean;
+  /**
+   * @deprecated use isHidden instead
+   */
   isFieldHidden?: (field: Field) => boolean;
-  isHidden?: boolean;
   locale?: string;
   parentPath: string;
   value: ValueOrNestedValue;
diff --git a/packages/core/src/components/Editor/EditorControlPane/EditorControlPane.tsx b/packages/core/src/components/Editor/EditorControlPane/EditorControlPane.tsx
@@ -195,8 +195,6 @@ const EditorControlPane = ({
       ) : null}
       {fields.map(field => {
         const isTranslatable = isFieldTranslatable(field, locale, i18n?.defaultLocale);
-        const isDuplicate = isFieldDuplicate(field, locale, i18n?.defaultLocale);
-        const isHidden = isFieldHidden(field, locale, i18n?.defaultLocale);
         const key = i18n ? `field-${locale}_${field.name}` : `field-${field.name}`;
 
         return (
@@ -206,8 +204,6 @@ const EditorControlPane = ({
             value={getFieldValue(field, entry, isTranslatable, locale)}
             fieldsErrors={fieldsErrors}
             submitted={submitted}
-            isDisabled={isDuplicate}
-            isHidden={isHidden}
             isFieldDuplicate={field => isFieldDuplicate(field, locale, i18n?.defaultLocale)}
             isFieldHidden={field => isFieldHidden(field, locale, i18n?.defaultLocale)}
             locale={locale}
diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts
@@ -235,7 +235,7 @@ export interface DisplayURLState {
 export type TranslatedProps<T> = T & ReactPolyglotTranslateProps;
 
 /**
- * @deprecated Should use `useMediaAsset` React hook instead
+ * @deprecated Use `useMediaAsset` React hook instead. Will be removed in v2.0.0
  */
 export type GetAssetFunction<F extends BaseField = UnknownField> = (
   path: string,
@@ -251,11 +251,19 @@ export interface WidgetControlProps<T, F extends BaseField = UnknownField> {
   submitted: boolean;
   forList: boolean;
   /**
-   * @deprecated Should use `useMediaAsset` React hook instead
+   * @deprecated Use `useMediaAsset` React hook instead. Will be removed in v2.0.0
    */
   getAsset: GetAssetFunction<F>;
   isDisabled: boolean;
+  isDuplicate: boolean;
+  /**
+   * @deprecated Use `isDuplicate` instead. Will be removed in v2.0.0
+   */
   isFieldDuplicate: EditorControlProps['isFieldDuplicate'];
+  isHidden: boolean;
+  /**
+   * @deprecated Use `isHidden` instead. Will be removed in v2.0.0
+   */
   isFieldHidden: EditorControlProps['isFieldHidden'];
   label: string;
   locale: string | undefined;
diff --git a/packages/core/src/lib/test-utils/ControlWrapper.tsx b/packages/core/src/lib/test-utils/ControlWrapper.tsx
@@ -38,7 +38,9 @@ const createControlWrapper = <V = unknown, F extends BaseField = UnknownField>({
       return Promise.resolve(null) as any;
     },
     isDisabled = false,
+    isDuplicate = false,
     isFieldDuplicate = () => false,
+    isHidden = false,
     isFieldHidden = () => false,
     label = defaultLabel,
     locale = 'en',
@@ -75,7 +77,9 @@ const createControlWrapper = <V = unknown, F extends BaseField = UnknownField>({
         forList={forList}
         getAsset={getAsset}
         isDisabled={isDisabled}
+        isDuplicate={isDuplicate}
         isFieldDuplicate={isFieldDuplicate}
+        isHidden={isHidden}
         isFieldHidden={isFieldHidden}
         label={label}
         locale={locale}
diff --git a/packages/core/src/widgets/boolean/BooleanControl.tsx b/packages/core/src/widgets/boolean/BooleanControl.tsx
@@ -1,18 +1,23 @@
 import { red } from '@mui/material/colors';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import type { BooleanField, WidgetControlProps } from '@staticcms/core/interface';
 import type { ChangeEvent, FC } from 'react';
 
 const BooleanControl: FC<WidgetControlProps<boolean, BooleanField>> = ({
   value,
   label,
+  isDuplicate,
   onChange,
   hasErrors,
 }) => {
-  const [internalValue, setInternalValue] = useState(value);
+  const [internalRawValue, setInternalValue] = useState(value);
+  const internalValue = useMemo(
+    () => (isDuplicate ? value : internalRawValue),
+    [internalRawValue, isDuplicate, value],
+  );
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/core/src/widgets/code/CodeControl.tsx b/packages/core/src/widgets/code/CodeControl.tsx
@@ -60,6 +60,7 @@ function valueToOption(val: string | { name: string; label?: string }): {
 
 const CodeControl: FC<WidgetControlProps<string | { [key: string]: string }, CodeField>> = ({
   field,
+  isDuplicate,
   onChange,
   hasErrors,
   value,
@@ -77,7 +78,12 @@ const CodeControl: FC<WidgetControlProps<string | { [key: string]: string }, Cod
 
   const valueIsMap = useMemo(() => Boolean(!field.output_code_only), [field.output_code_only]);
 
-  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [internalRawValue, setInternalValue] = useState(value ?? '');
+  const internalValue = useMemo(
+    () => (isDuplicate ? value ?? '' : internalRawValue),
+    [internalRawValue, isDuplicate, value],
+  );
+
   const [lang, setLang] = useState<ProcessedCodeLanguage | null>(null);
   const [collapsed, setCollapsed] = useState(false);
 
diff --git a/packages/core/src/widgets/colorstring/ColorControl.tsx b/packages/core/src/widgets/colorstring/ColorControl.tsx
@@ -3,7 +3,7 @@ import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { ChromePicker } from 'react-color';
 import validateColor from 'validate-color';
 
@@ -104,6 +104,7 @@ const ClickOutsideDiv = styled('div')`
 
 const ColorControl: FC<WidgetControlProps<string, ColorField>> = ({
   field,
+  isDuplicate,
   onChange,
   value,
   hasErrors,
@@ -116,7 +117,11 @@ const ColorControl: FC<WidgetControlProps<string, ColorField>> = ({
   }, [collapsed]);
 
   const [showColorPicker, setShowColorPicker] = useState(false);
-  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [internalRawValue, setInternalValue] = useState(value ?? '');
+  const internalValue = useMemo(
+    () => (isDuplicate ? value ?? '' : internalRawValue),
+    [internalRawValue, isDuplicate, value],
+  );
 
   // show/hide color picker
   const handleClick = useCallback(() => {
diff --git a/packages/core/src/widgets/datetime/DateTimeControl.tsx b/packages/core/src/widgets/datetime/DateTimeControl.tsx
@@ -62,6 +62,7 @@ const DateTimeControl: FC<WidgetControlProps<string, DateTimeField>> = ({
   value,
   t,
   isDisabled,
+  isDuplicate,
   onChange,
   hasErrors,
 }) => {
@@ -118,7 +119,11 @@ const DateTimeControl: FC<WidgetControlProps<string, DateTimeField>> = ({
       : field.default;
   }, [field.default, field.picker_utc, format, inputFormat, timezoneOffset]);
 
-  const [internalValue, setInternalValue] = useState(value);
+  const [internalRawValue, setInternalValue] = useState(value);
+  const internalValue = useMemo(
+    () => (isDuplicate ? value : internalRawValue),
+    [internalRawValue, isDuplicate, value],
+  );
 
   const dateValue: Date = useMemo(() => {
     let valueToParse = internalValue;
diff --git a/packages/core/src/widgets/file/withFileControl.tsx b/packages/core/src/widgets/file/withFileControl.tsx
@@ -213,6 +213,7 @@ const withFileControl = ({ forImage = false }: WithFileControlProps = {}) => {
       collection,
       field,
       entry,
+      isDuplicate,
       onChange,
       openMediaLibrary,
       clearMediaControl,
@@ -222,7 +223,11 @@ const withFileControl = ({ forImage = false }: WithFileControlProps = {}) => {
     }) => {
       const controlID = useUUID();
       const [collapsed, setCollapsed] = useState(false);
-      const [internalValue, setInternalValue] = useState(value ?? '');
+      const [internalRawValue, setInternalValue] = useState(value ?? '');
+      const internalValue = useMemo(
+        () => (isDuplicate ? value ?? '' : internalRawValue),
+        [internalRawValue, isDuplicate, value],
+      );
 
       const handleOnChange = useCallback(
         (newValue: string | string[]) => {
diff --git a/packages/core/src/widgets/list/ListControl.tsx b/packages/core/src/widgets/list/ListControl.tsx
@@ -68,7 +68,9 @@ interface SortableItemProps {
   field: ListField;
   fieldsErrors: FieldsErrors;
   submitted: boolean;
+  isDuplicate: boolean;
   isFieldDuplicate: ((field: Field<UnknownField>) => boolean) | undefined;
+  isHidden: boolean;
   isFieldHidden: ((field: Field<UnknownField>) => boolean) | undefined;
   locale: string | undefined;
   path: string;
@@ -86,7 +88,9 @@ const SortableItem: FC<SortableItemProps> = ({
   field,
   fieldsErrors,
   submitted,
+  isDuplicate,
   isFieldDuplicate,
+  isHidden,
   isFieldHidden,
   locale,
   path,
@@ -118,7 +122,9 @@ const SortableItem: FC<SortableItemProps> = ({
         field={field}
         fieldsErrors={fieldsErrors}
         submitted={submitted}
+        isDuplicate={isDuplicate}
         isFieldDuplicate={isFieldDuplicate}
+        isHidden={isHidden}
         isFieldHidden={isFieldHidden}
         locale={locale}
         path={path}
@@ -188,7 +194,9 @@ const ListControl: FC<WidgetControlProps<ValueOrNestedValue[], ListField>> = ({
   field,
   fieldsErrors,
   submitted,
+  isDuplicate,
   isFieldDuplicate,
+  isHidden,
   isFieldHidden,
   locale,
   onChange,
@@ -356,7 +364,9 @@ const ListControl: FC<WidgetControlProps<ValueOrNestedValue[], ListField>> = ({
                     field={field}
                     fieldsErrors={fieldsErrors}
                     submitted={submitted}
+                    isDuplicate={isDuplicate}
                     isFieldDuplicate={isFieldDuplicate}
+                    isHidden={isHidden}
                     isFieldHidden={isFieldHidden}
                     locale={locale}
                     path={path}
diff --git a/packages/core/src/widgets/list/ListItem.tsx b/packages/core/src/widgets/list/ListItem.tsx
@@ -93,7 +93,9 @@ interface ListItemProps
     | 'field'
     | 'fieldsErrors'
     | 'submitted'
+    | 'isDuplicate'
     | 'isFieldDuplicate'
+    | 'isHidden'
     | 'isFieldHidden'
     | 'locale'
     | 'path'
@@ -114,7 +116,9 @@ const ListItem: FC<ListItemProps> = ({
   field,
   fieldsErrors,
   submitted,
+  isDuplicate,
   isFieldDuplicate,
+  isHidden,
   isFieldHidden,
   locale,
   path,
@@ -197,9 +201,6 @@ const ListItem: FC<ListItemProps> = ({
     [collapsed],
   );
 
-  const isDuplicate = isFieldDuplicate && isFieldDuplicate(field);
-  const isHidden = isFieldHidden && isFieldHidden(field);
-
   const finalValue = useMemo(() => {
     if (field.fields && field.fields.length === 1) {
       return {
@@ -232,8 +233,9 @@ const ListItem: FC<ListItemProps> = ({
             submitted={submitted}
             parentPath={path}
             isDisabled={isDuplicate}
-            isHidden={isHidden}
+            isParentDuplicate={isDuplicate}
             isFieldDuplicate={isFieldDuplicate}
+            isParentHidden={isHidden}
             isFieldHidden={isFieldHidden}
             locale={locale}
             i18n={i18n}
diff --git a/packages/core/src/widgets/markdown/withMarkdownControl.tsx b/packages/core/src/widgets/markdown/withMarkdownControl.tsx
@@ -39,9 +39,14 @@ export interface WithMarkdownControlProps {
 
 const withMarkdownControl = ({ useMdx }: WithMarkdownControlProps) => {
   const MarkdownControl: FC<WidgetControlProps<string, MarkdownField>> = controlProps => {
-    const { label, value, onChange, hasErrors, collection, entry, field } = controlProps;
+    const { label, value, isDuplicate, onChange, hasErrors, collection, entry, field } =
+      controlProps;
 
-    const [internalValue, setInternalValue] = useState(value ?? '');
+    const [internalRawValue, setInternalValue] = useState(value ?? '');
+    const internalValue = useMemo(
+      () => (isDuplicate ? value ?? '' : internalRawValue),
+      [internalRawValue, isDuplicate, value],
+    );
     const [hasFocus, setHasFocus] = useState(false);
     const debouncedFocus = useDebounce(hasFocus, 150);
 
diff --git a/packages/core/src/widgets/number/NumberControl.tsx b/packages/core/src/widgets/number/NumberControl.tsx
@@ -1,5 +1,5 @@
 import TextField from '@mui/material/TextField';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import type { FieldError, NumberField, WidgetControlProps } from '@staticcms/core/interface';
 import type { ChangeEvent, FC } from 'react';
@@ -62,10 +62,15 @@ const NumberControl: FC<WidgetControlProps<string | number, NumberField>> = ({
   label,
   field,
   value,
+  isDuplicate,
   onChange,
   hasErrors,
 }) => {
-  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [internalRawValue, setInternalValue] = useState(value ?? '');
+  const internalValue = useMemo(
+    () => (isDuplicate ? value ?? '' : internalRawValue),
+    [internalRawValue, isDuplicate, value],
+  );
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
diff --git a/packages/core/src/widgets/object/ObjectControl.tsx b/packages/core/src/widgets/object/ObjectControl.tsx
diff --git a/packages/core/src/widgets/relation/RelationControl.tsx b/packages/core/src/widgets/relation/RelationControl.tsx
diff --git a/packages/core/src/widgets/select/SelectControl.tsx b/packages/core/src/widgets/select/SelectControl.tsx
diff --git a/packages/core/src/widgets/string/StringControl.tsx b/packages/core/src/widgets/string/StringControl.tsx
diff --git a/packages/core/src/widgets/text/TextControl.tsx b/packages/core/src/widgets/text/TextControl.tsx
diff --git a/packages/docs/content/docs/custom-widgets.mdx b/packages/docs/content/docs/custom-widgets.mdx
