Merge pull request #1314 from p3ol/feature/priority-override

✨ feat(react): add priority override for settings
p3ol · Nov 24, 2023 · 3a97bbe · 3a97bbe
2 parents 857732f + 13ac8c4
commit 3a97bbe
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/packages/core/lib/types.d.ts b/packages/core/lib/types.d.ts
@@ -100,6 +100,7 @@ export declare interface SettingOverrideObject {
   default?: any;
   displayable?: boolean;
   valueType?: string;
+  priority?: number;
   fields?: Array<ComponentSettingsFieldObject>;
   props?: object;
   condition: (element: Element | ElementObject, opts?: {
@@ -120,6 +121,7 @@ export declare class SettingOverride {
   default: any;
   displayable: boolean;
   valueType: string;
+  priority: number;
   fields: Array<ComponentSettingsField>;
   props: object;
   condition: (element: Element | ElementObject, opts?: {

diff --git a/packages/react/lib/DisplayableSettings/index.js b/packages/react/lib/DisplayableSettings/index.js
@@ -8,11 +8,24 @@ import Property from './Property';
 const DisplayableSettings = ({ className, element, component, override }) => {
   const { builder } = useBuilder();
 
+  const getSettingPriority = setting => {
+    const fieldOverride = {
+      ...builder.getOverride('setting', element.type, { setting }),
+      ...builder.getOverride('component', element.type, {
+        output: 'field', setting,
+      }),
+    };
+
+    return Number.isSafeInteger(fieldOverride?.priority)
+      ? fieldOverride.priority
+      : setting.priority || 0;
+  };
+
   const displayableSettings = useMemo(() => (
     builder
       .getComponentDisplayableSettings(element, { component })
       .filter(s => !s.condition || s.condition(element))
-      .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+      .sort((a, b) => getSettingPriority(b) - getSettingPriority(a))
   ), [element, component]);
 
   if (displayableSettings.length <= 0) {

diff --git a/packages/react/lib/Editable/Form.js b/packages/react/lib/Editable/Form.js
@@ -60,6 +60,19 @@ const Form = ({
     onCancel();
   };
 
+  const getFieldPriority = field => {
+    const fieldOverride = {
+      ...builder.getOverride('setting', element.type, { setting: field }),
+      ...builder.getOverride('component', element.type, {
+        output: 'field', setting: field,
+      }),
+    };
+
+    return Number.isSafeInteger(fieldOverride?.priority)
+      ? fieldOverride.priority
+      : field.priority || 0;
+  };
+
   const hasSubfields = setting =>
     Array.isArray(setting.fields) && setting.fields.length > 0;
 
@@ -92,14 +105,11 @@ const Form = ({
           .map((tab, t) => (
             <Tab key={tab.id || t} title={<Text>{ tab.title }</Text>}>
               <div className="fields oak-flex oak-flex-col oak-gap-4">
-                { tab
-                  .fields
-                  .concat(
-                    (component.settings?.fields || [])
-                      .filter(field => (tab.id === 'general' && !field.tab) ||
-                        field.tab === tab.id)
-                  )
-                  .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+                { (component.settings?.fields || [])
+                  .filter(field => (tab.id === 'general' && !field.tab) ||
+                    field.tab === tab.id)
+                  .concat(tab.fields)
+                  .sort((a, b) => getFieldPriority(b) - getFieldPriority(a))
                   .filter(f =>
                     !f.condition ||
                     f.condition(state.element, { component, builder })

diff --git a/packages/react/lib/index.stories.js b/packages/react/lib/index.stories.js
@@ -167,6 +167,13 @@ export const withMultipleCustomSettings = () => {
             fields: [{
               key: 'headingLevel',
               options: ['t1', 't2', 't3', 't4', 't5', 't6'],
+              priority: 3,
+            }, {
+              key: 'settings.foo',
+              priority: 1,
+            }, {
+              key: 'settings.bar',
+              priority: 2,
             }],
           }, {
             id: 'classNameOverride',