fix(autoform): showIf does not work if custom component is specified (react-page#1189)

macrozone · web-flow · commit 629f52897833 · 2022-05-17T00:12:16.000+02:00
fixes react-page#1187 the solution works around the problem, that if you set `props.component` any custom componentDetector is bypassed. also fixes a type error where the props that are passed to showIf had the wrong type. showIf always receives the base object.
diff --git a/examples/plugins/customContentPlugin.tsx b/examples/plugins/customContentPlugin.tsx
@@ -2,22 +2,45 @@ import type { CellPlugin } from '@react-page/editor';
 import { ColorPickerField } from '@react-page/editor';
 import React from 'react';
 
+type Palette = {
+  variant: 'default' | 'highlight' | 'custom';
+  customTextColor: string;
+  customBackgroundColor: string;
+};
+
+const getTextColor = (palette: Palette) => {
+  if (palette?.variant === 'custom') {
+    return palette.customTextColor;
+  }
+  if (palette?.variant === 'highlight') {
+    return 'white';
+  }
+  return 'black';
+};
+const getBackgroundColor = (palette: Palette) => {
+  if (palette?.variant === 'custom') {
+    return palette.customBackgroundColor;
+  }
+  if (palette?.variant === 'highlight') {
+    return '#3f51b5';
+  }
+  return 'white';
+};
 const customContentPlugin: CellPlugin<{
   title: string;
   firstName: string;
   lastName: string;
   age: number;
   style: {
-    backgroundColor: string;
-    textColor: string;
+    pallete: Palette;
     padding: number;
   };
 }> = {
   Renderer: ({ data }) => (
     <div
       style={{
-        backgroundColor: data.style?.backgroundColor,
-        color: data?.style?.textColor,
+        backgroundColor: getBackgroundColor(data?.style?.pallete),
+        color: getTextColor(data?.style?.pallete),
         padding: data?.style?.padding,
       }}
     >
@@ -66,19 +89,33 @@ const customContentPlugin: CellPlugin<{
             style: {
               type: 'object',
               required: [],
+
               properties: {
-                backgroundColor: {
-                  type: 'string',
-                  default: 'white',
-                  uniforms: {
-                    component: ColorPickerField,
-                  },
-                },
-                textColor: {
-                  type: 'string',
-                  default: 'black',
-                  uniforms: {
-                    component: ColorPickerField,
+                pallete: {
+                  type: 'object',
+                  properties: {
+                    variant: {
+                      type: 'string',
+                      enum: ['default', 'highlight', 'custom'],
+                    },
+                    customBackgroundColor: {
+                      type: 'string',
+                      default: 'white',
+                      uniforms: {
+                        component: ColorPickerField,
+                        showIf: (data) =>
+                          data.style?.pallete?.variant === 'custom',
+                      },
+                    },
+                    customTextColor: {
+                      type: 'string',
+                      default: 'black',
+                      uniforms: {
+                        component: ColorPickerField,
+                        showIf: (data) =>
+                          data.style?.pallete?.variant === 'custom',
+                      },
+                    },
                   },
                 },
 
diff --git a/packages/editor/src/core/types/jsonSchema.ts b/packages/editor/src/core/types/jsonSchema.ts
@@ -1,32 +1,41 @@
 import type React from 'react';
 import type { DataTType } from '.';
 
-type UniformsProps<Data> = Record<string, unknown> & {
+type UniformsProps<FullData> = Record<string, unknown> & {
   label?: string;
   placeholder?: string;
   multiline?: boolean;
   component?: React.ComponentType<{ name: string }>;
   /**
    * whether to show the field
    */
-  showIf?: (data: Data) => boolean;
+  showIf?: (data: FullData) => boolean;
 };
-type CommonPropertyProps<Data> = {
+
+type WithEnum<FieldT> = {
+  /**
+   * If you want to show a list of possible values, specify the enum prop.
+   * The values will be shown in a select field
+   */
+  enum?: FieldT[];
+};
+type CommonPropertyProps<FullData> = {
   /**
    * title to display
    */
   title?: string;
   /**
    * uniforms properties, passed to the form field
    */
-  uniforms?: UniformsProps<Data>;
+  uniforms?: UniformsProps<FullData>;
+
   /**
    * additionl props
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
 };
-type BooleanType<Data> = {
+type BooleanType<FullData> = {
   /**
    * boolean type is for checkboxes
    */
@@ -35,9 +44,9 @@ type BooleanType<Data> = {
    * default value
    */
   default?: boolean;
-} & CommonPropertyProps<Data>;
+} & CommonPropertyProps<FullData>;
 
-type StringProperty<Data> = {
+type StringProperty<FullData> = {
   /**
    * string type is for strings and render an input field
    */
@@ -58,9 +67,10 @@ type StringProperty<Data> = {
    * regex pattern to validate, e.g. for email adresses
    */
   pattern?: string;
-} & CommonPropertyProps<Data>;
+} & CommonPropertyProps<FullData> &
+  WithEnum<string>;
 
-type NumberProperty<Data> = {
+type NumberProperty<FullData> = {
   /**
    * type number is for float numbers, integer is for integers only
    */
@@ -85,10 +95,37 @@ type NumberProperty<Data> = {
    * maximum but value has to be strictly smaller than this maximum
    */
   exclusiveMaximum?: boolean;
-} & CommonPropertyProps<Data>;
+} & CommonPropertyProps<FullData> &
+  WithEnum<number>;
 
-type ObjectProperty<T extends Record<string, unknown>, Data> = JsonSchema<T> &
-  CommonPropertyProps<Data>;
+type BaseObjectProps<FieldData extends Record<string, unknown>, FullData> = {
+  title?: string;
+  /**
+   * type object is for a nested object
+   */
+  type?: 'object';
+  /**
+   * the default value
+   */
+  default?: FieldData;
+  /**
+   * child properties of this object
+   */
+  properties: {
+    [Field in keyof FieldData]?: JsonSchemaProperty<FieldData[Field], FullData>;
+  };
+  // required: string[];
+  /* union to tuple conversion is expensive, we do a poor mans version here */
+  /**
+   * required fields
+   */
+  required?: Array<keyof FieldData>;
+};
+
+type ObjectProperty<
+  FieldData extends Record<string, unknown>,
+  FullData
+> = BaseObjectProps<FieldData, FullData> & CommonPropertyProps<FullData>;
 type ArrayProperty<Field, Data> = {
   /**
    * array type is for array objects
@@ -111,24 +148,4 @@ export type JsonSchemaProperty<Field, Data> = Field extends (infer U)[]
   ? BooleanType<Data>
   : never;
 
-export type JsonSchema<Data extends DataTType> = {
-  title?: string;
-  /**
-   * type object is for a nested object
-   */
-  type?: 'object';
-  /**
-   * the default value
-   */
-  default?: Data;
-  /**
-   * child properties of this object
-   */
-  properties: { [Field in keyof Data]?: JsonSchemaProperty<Data[Field], Data> };
-  // required: string[];
-  /* union to tuple conversion is expensive, we do a poor mans version here */
-  /**
-   * required fields
-   */
-  required?: Array<keyof Data>;
-};
+export type JsonSchema<Data extends DataTType> = BaseObjectProps<Data, Data>;
diff --git a/packages/editor/src/ui/AutoformControls/AutoFieldContext.tsx b/packages/editor/src/ui/AutoformControls/AutoFieldContext.tsx
@@ -5,10 +5,14 @@ const AutofieldContextProvider: React.FC = ({ children }) => (
   <AutoField.componentDetectorContext.Provider
     value={(props, uniforms) => {
       const show = props.showIf?.(uniforms.model) ?? true;
+      if (!show) return () => null;
 
-      return show
-        ? AutoField.defaultComponentDetector(props, uniforms)
-        : () => null;
+      // see https://github.com/react-page/react-page/issues/1187
+      // we remap props.component to props._customComponent to avoid the underlying issue in uniforms
+      if (props._customComponent) {
+        return props._customComponent;
+      }
+      return AutoField.defaultComponentDetector(props, uniforms);
     }}
   >
     {children}
diff --git a/packages/editor/src/ui/AutoformControls/makeUniformsSchema.ts b/packages/editor/src/ui/AutoformControls/makeUniformsSchema.ts
@@ -25,7 +25,21 @@ function makeUniformsSchema<T extends DataTType>(
     type: 'object',
     ...jsonSchema,
   };
-  return new JSONSchemaBridge(fullSchema, createValidator(fullSchema));
+  const bridge = new JSONSchemaBridge(fullSchema, createValidator(fullSchema));
+
+  // see https://github.com/react-page/react-page/issues/1187
+  // we remap props.component to props._customComponent to avoid the underlying issue in uniforms
+  //
+  const getPropsOrg = bridge.getProps;
+  bridge.getProps = function (name: string) {
+    const { component, ...props } = getPropsOrg.call(this, name);
+
+    return {
+      _customComponent: component,
+      ...props,
+    };
+  };
+  return bridge;
 }
 
 export default makeUniformsSchema;
