feat(react): add priority override for settings

p3ol · Nov 21, 2023 · 0720afb · 0720afb
1 parent 857732f
commit 0720afb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git a/packages/core/lib/Builder/index.js b/packages/core/lib/Builder/index.js
@@ -134,9 +134,9 @@ export default class Builder extends Emitter {
 
   getComponentDisplayableSettings (element, { component }) {
     return [
+      ...this.#settings.getDisplayable?.(element) || [],
       ...this.#components
         .getDisplayableSettings?.(element, { component }) || [],
-      ...this.#settings.getDisplayable?.(element) || [],
     ];
   }
 

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;
 
@@ -99,7 +112,7 @@ const Form = ({
                       .filter(field => (tab.id === 'general' && !field.tab) ||
                         field.tab === tab.id)
                   )
-                  .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+                  .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',