Merge pull request #1499 from p3ol/fix/styles-key-on-fields-overrides

🐛fix(fields-setting): remove key from file override
p3ol · Oct 9, 2024 · b042486 · b042486
2 parents f7b932a + 98a1d5e
commit b042486
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/packages/react/lib/Editable/Field.tsx b/packages/react/lib/Editable/Field.tsx
@@ -1,6 +1,3 @@
-import type {
-  SpecialComponentPropsWithoutRef,
-} from '@junipero/react';
 import {
   type MutableRefObject,
   useMemo,
@@ -14,6 +11,10 @@ import {
   type SettingOverride,
   assignDefined,
 } from '@oakjs/core';
+import {
+  type SpecialComponentPropsWithoutRef,
+  omit,
+} from '@junipero/react';
 
 import type { EditableRef } from './index';
 import { useBuilder } from '../hooks';
@@ -56,15 +57,19 @@ const Field = ({
   const setting = useMemo(() => assignDefined<typeof fieldSetting>(
     { type: fieldSetting.type },
     fieldSetting,
-    overrides.settings?.toObject?.() || overrides.settings || {},
-    overrides.field?.toObject?.() || overrides.field || {},
+    omit(overrides.settings?.toObject?.() || overrides.settings || {}, ['key']),
+    omit(overrides.field?.toObject?.() || overrides.field || {}, ['key']),
   ), [fieldSetting, overrides, addons]);
 
   const fieldProps = {
     id: setting.id,
     name: setting.name,
     disabled: setting.disabled,
-    value: builder.getElementSettings(element, setting.key, setting.default),
+    value: builder.getElementSettings(
+      element,
+      fieldSetting.key,
+      setting.default
+    ),
     required: setting.required,
     onChange: (overrides?.field as FieldOverride)?.onChange
       ? onCustomChange.bind(null, setting.key, overrides.field)
@@ -80,7 +85,7 @@ const Field = ({
 
   return (
     (overrides.field as FieldOverride)?.render || field?.render)?.(fieldProps, {
-    onChange: onChange.bind(null, setting.key),
+    onChange: onChange.bind(null, fieldSetting.key),
     field,
     setting,
     overrides: overrides.field,

diff --git a/packages/react/lib/index.stories.tsx b/packages/react/lib/index.stories.tsx
@@ -506,3 +506,23 @@ export const withMultipleEditableTabs = () => (
     onChange={action('change')}
   />
 );
+
+export const withImageUpdload = () => (
+  <Builder
+    onImageUpload={
+      (e: Event) => {
+        action('upload')(e);
+
+        return {
+          name: 'capture.png',
+          // eslint-disable-next-line max-len
+          url: 'https://storage.googleapis.com/poool-dev-cdn/uploads/57f3c14d0b26241cde521669/original/Capture%20d%E2%80%99e%CC%81cran%202023-03-16%20a%CC%80%2010.32.11.png',
+        };
+      }
+    }
+    addons={[baseAddon()]}
+    value={baseContent}
+    options={{ debug: true }}
+    onChange={action('change')}
+  />
+);