@plasmicpkgs/antd5 0.0.56 → 0.0.59

package/skinny/registerForm.esm.js

@@ -1,8 +1,14 @@
 import { usePlasmicCanvasContext, DataProvider, repeatedElement } from '@plasmicapp/host';
-import { Form } from 'antd';
+import { Form, Input, InputNumber, Checkbox, Select, Radio } from 'antd';
 import equal from 'fast-deep-equal';
 import React, { isValidElement, cloneElement } from 'react';
 import classNames from 'classnames';
+import { buttonComponentName } from './registerButton.esm.js';
+import { checkboxComponentName } from './registerCheckbox.esm.js';
+import { inputComponentName, textAreaComponentName, inputNumberComponentName, passwordComponentName } from './registerInput.esm.js';
+import { radioGroupComponentName } from './registerRadio.esm.js';
+import { selectComponentName } from './registerSelect.esm.js';
+import { switchComponentName } from './registerSwitch.esm.js';
 import { u as usePrevious, r as registerComponentHelper } from './utils-d0e80a56.esm.js';
 import '@plasmicapp/host/registerComponent';
 import '@plasmicapp/host/registerGlobalContext';
@@ -139,16 +145,47 @@ function ensureArray(x) {
 }
 const FormItem = Form.Item;
 const FormList = Form.List;
+var InputType = /* @__PURE__ */ ((InputType2) => {
+  InputType2["Text"] = "Text";
+  InputType2["TextArea"] = "Text Area";
+  InputType2["Password"] = "Password";
+  InputType2["Number"] = "Number";
+  InputType2["Select"] = "Select";
+  InputType2["Option"] = "Option";
+  InputType2["OptionGroup"] = "Option Group";
+  InputType2["Radio"] = "Radio";
+  InputType2["RadioGroup"] = "Radio Group";
+  InputType2["Checkbox"] = "Checkbox";
+  return InputType2;
+})(InputType || {});
 const PathContext = React.createContext({ relativePath: [], fullPath: [] });
 const InternalFormInstanceContext = React.createContext(void 0);
 const FormLayoutContext = React.createContext(void 0);
 const Internal = (props) => {
-  var _b, _c, _d;
+  var _b, _c, _d, _e;
   const [form] = Form.useForm();
   const values = form.getFieldsValue(true);
   const lastValue = React.useRef(values);
   const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest(_a, ["extendedOnValuesChange", "setRemountKey"]);
-  const childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
+  let childrenNode;
+  if (props.mode !== "simplified") {
+    childrenNode = typeof props.children === "function" ? props.children(values, form) : props.children;
+  } else {
+    childrenNode = /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = props.formItems) != null ? _b : []).map((formItem) => /* @__PURE__ */ React.createElement(
+      FormItemWrapper,
+      __spreadProps(__spreadValues({}, formItem), {
+        noLabel: formItem.inputType === "Checkbox" /* Checkbox */ || formItem.noLabel,
+        style: { width: "100%" }
+      }),
+      formItem.inputType === "Text" /* Text */ ? /* @__PURE__ */ React.createElement(Input, null) : formItem.inputType === "Password" /* Password */ ? /* @__PURE__ */ React.createElement(Input.Password, null) : formItem.inputType === "Text Area" /* TextArea */ ? /* @__PURE__ */ React.createElement(Input.TextArea, null) : formItem.inputType === "Number" /* Number */ ? /* @__PURE__ */ React.createElement(InputNumber, null) : formItem.inputType === "Checkbox" /* Checkbox */ ? /* @__PURE__ */ React.createElement(Checkbox, null, formItem.label) : formItem.inputType === "Select" /* Select */ ? /* @__PURE__ */ React.createElement(Select, { options: formItem.options }) : formItem.inputType === "Radio" /* Radio */ ? /* @__PURE__ */ React.createElement(
+        Radio.Group,
+        {
+          options: formItem.options,
+          optionType: formItem.optionType
+        }
+      ) : null
+    )), props.submitSlot);
+  }
   const fireOnValuesChange = React.useCallback(() => {
     const values2 = form.getFieldsValue(true);
     if (!equal(values2, lastValue.current)) {
@@ -167,7 +204,7 @@ const Internal = (props) => {
         labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
       };
     },
-    [props.layout, (_b = props.labelCol) == null ? void 0 : _b.span]
+    [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
   );
   return /* @__PURE__ */ React.createElement(
     InternalFormInstanceContext.Provider,
@@ -188,8 +225,8 @@ const Internal = (props) => {
           extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
         },
         form,
-        labelCol: ((_c = props.labelCol) == null ? void 0 : _c.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
-        wrapperCol: ((_d = props.wrapperCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+        labelCol: ((_d = props.labelCol) == null ? void 0 : _d.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+        wrapperCol: ((_e = props.wrapperCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
       }),
       /* @__PURE__ */ React.createElement("style", null, `
           .ant-form-item-explain + div, .ant-form-item-margin-offset {
@@ -213,7 +250,7 @@ function FormWrapper(props) {
 const COMMON_ACTIONS = [
   {
     type: "button-action",
-    label: "Append new Form Item",
+    label: "Append new Form Field",
     onClick: ({ studioOps }) => {
       studioOps.appendToSlot(
         {
@@ -222,11 +259,12 @@ const COMMON_ACTIONS = [
         },
         "children"
       );
-    }
+    },
+    hidden: (props) => props.mode !== "advanced"
   }
   // {
   //   type: "button-action" as const,
-  //   label: "Append new Form Group",
+  //   label: "Append new Form Field Group",
   //   onClick: ({ studioOps }: ActionProps<any>) => {
   //     studioOps.appendToSlot(
   //       {
@@ -279,21 +317,102 @@ const colProp = (displayName, defaultValue, description) => ({
   description,
   defaultValue
 });
+const formComponentName = "plasmic-antd5-form";
 function registerForm(loader) {
   registerComponentHelper(loader, FormWrapper, {
-    name: "plasmic-antd5-form",
+    name: formComponentName,
     displayName: "Form",
     defaultStyles: {
       layout: "vbox",
       alignItems: "flex-start"
     },
     props: {
+      mode: "controlMode",
+      formItems: {
+        type: "array",
+        itemType: {
+          type: "object",
+          fields: __spreadValues({
+            label: "string",
+            inputType: {
+              type: "choice",
+              options: Object.values(InputType),
+              defaultValue: "Text" /* Text */
+            },
+            options: {
+              type: "array",
+              itemType: {
+                type: "object",
+                fields: {
+                  type: {
+                    type: "choice",
+                    options: [
+                      { value: "option", label: "Option" },
+                      { value: "option-group", label: "Option Group" }
+                    ],
+                    defaultValue: "option"
+                  },
+                  label: "string",
+                  value: {
+                    type: "string",
+                    hidden: (ps) => ps.type !== "option-group"
+                  },
+                  options: {
+                    type: "array",
+                    itemType: {
+                      type: "object",
+                      nameFunc: (item) => item.label || item.value,
+                      fields: {
+                        value: "string",
+                        label: "string"
+                      }
+                    }
+                  }
+                },
+                nameFunc: (item) => item == null ? void 0 : item.label
+              },
+              hidden: (ps) => !["Select" /* Select */, "Radio" /* Radio */].includes(ps.inputType)
+            },
+            optionType: {
+              type: "choice",
+              options: [
+                { value: "default", label: "Radio" },
+                { value: "button", label: "Button" }
+              ],
+              hidden: (ps) => "Radio" /* Radio */ !== ps.inputType,
+              defaultValueHint: "Radio",
+              displayName: "Option Type"
+            }
+          }, commonFormItemProps),
+          nameFunc: (item) => item.label
+        },
+        hidden: (props) => props.mode === "advanced"
+      },
+      submitSlot: __spreadValues({
+        type: "slot",
+        hidden: () => true,
+        defaultValue: {
+          type: "component",
+          name: buttonComponentName,
+          props: {
+            type: "primary",
+            submitsForm: true,
+            children: {
+              type: "text",
+              value: "Submit"
+            }
+          }
+        }
+      }, {
+        mergeWithParent: () => true,
+        hiddenMergedProps: (ps) => !ps.mode
+      }),
       children: {
         type: "slot",
         defaultValue: [
           {
             type: "component",
-            name: "plasmic-antd5-form-item",
+            name: formItemComponentName,
             props: {
               label: {
                 type: "text",
@@ -302,13 +421,13 @@ function registerForm(loader) {
               name: "name",
               children: {
                 type: "component",
-                name: "plasmic-antd5-input"
+                name: inputComponentName
               }
             }
           },
           {
             type: "component",
-            name: "plasmic-antd5-form-item",
+            name: formItemComponentName,
             props: {
               label: {
                 type: "text",
@@ -317,30 +436,24 @@ function registerForm(loader) {
               name: "message",
               children: {
                 type: "component",
-                name: "plasmic-antd5-textarea"
+                name: textAreaComponentName
               }
             }
           },
           {
             type: "component",
-            name: "plasmic-antd5-form-item",
+            name: buttonComponentName,
             props: {
-              noLabel: true,
               children: {
-                type: "component",
-                name: "plasmic-antd5-button",
-                props: {
-                  children: {
-                    type: "text",
-                    value: "Submit"
-                  },
-                  type: "primary",
-                  submitsForm: true
-                }
-              }
+                type: "text",
+                value: "Submit"
+              },
+              type: "primary",
+              submitsForm: true
             }
           }
-        ]
+        ],
+        hidden: (props) => props.mode !== "advanced"
       },
       initialValues: {
         type: "object"
@@ -586,11 +699,38 @@ function FormItemWrapper(props) {
       extra: description,
       help: hideValidationMessage ? "" : props.help,
       colon: noLabel ? false : void 0,
+      valuePropName: deriveValuePropName(props),
       wrapperCol: (layoutContext == null ? void 0 : layoutContext.layout) === "horizontal" && noLabel && alignLabellessWithControls && layoutContext.labelSpan ? { offset: layoutContext.labelSpan } : void 0
     }),
-    props.customizeProps ? /* @__PURE__ */ React.createElement(FormItemForwarder, { formItemProps: props }) : props.children
+    /* @__PURE__ */ React.createElement(FormItemForwarder, { formItemProps: props })
   );
 }
+function deriveValuePropName(props) {
+  if (props.valuePropName) {
+    return props.valuePropName;
+  }
+  const valueProps = React.Children.map(props.children, (child) => {
+    var _a;
+    if (React.isValidElement(child)) {
+      const childType = child.type;
+      if (childType) {
+        const x = (_a = childType.__plasmicFormFieldMeta) == null ? void 0 : _a.valueProp;
+        if (x) {
+          return x;
+        }
+        const plumeType = childType.__plumeType;
+        if (plumeType && (plumeType === "checkbox" || plumeType === "switch")) {
+          return "isChecked";
+        }
+      }
+    }
+    return void 0;
+  }).filter((x) => !!x);
+  if (valueProps.length > 0) {
+    return valueProps[0];
+  }
+  return void 0;
+}
 function FormItemForwarder(_a) {
   var _b = _a, { formItemProps } = _b, props = __objRest(_b, ["formItemProps"]);
   var _a2;
@@ -605,23 +745,124 @@ function FormItemForwarder(_a) {
   });
   return React.Children.map(formItemProps.children, (child, i) => {
     var _a3;
-    const baseProps = __spreadValues(__spreadValues({}, (_a3 = child.props) != null ? _a3 : {}), props);
-    return i === 0 && isValidElement(child) ? cloneElement(
-      child,
-      mergeProps(baseProps, formItemProps.customizeProps(data, baseProps))
-    ) : child;
+    let newProps = __spreadProps(__spreadValues(__spreadValues({}, (_a3 = child.props) != null ? _a3 : {}), props), {
+      __plasmicFormField: true
+    });
+    if (formItemProps.customizeProps) {
+      newProps = mergeProps(
+        newProps,
+        formItemProps.customizeProps(data, newProps)
+      );
+    }
+    return i === 0 && isValidElement(child) ? cloneElement(child, newProps) : child;
   });
 }
+const commonFormItemProps = {
+  name: {
+    type: "string"
+  },
+  initialValue: {
+    type: "string"
+  },
+  rules: {
+    type: "formValidationRules"
+  },
+  valuePropName: {
+    type: "string",
+    advanced: true,
+    defaultValueHint: "value",
+    description: "The prop name for specifying the value of the form control component"
+  },
+  noLabel: {
+    type: "boolean",
+    advanced: true
+  },
+  alignLabellessWithControls: {
+    type: "boolean",
+    displayName: "Align with controls?",
+    description: "Aligns the content with form controls in the grid",
+    hidden: (ps, ctx) => {
+      var _a;
+      return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+    },
+    defaultValueHint: true
+  },
+  colon: {
+    type: "boolean",
+    defaultValueHint: true,
+    advanced: true,
+    hidden: () => true
+  },
+  labelAlign: {
+    type: "choice",
+    options: ["left", "right"],
+    advanced: true,
+    hidden: (ps, ctx) => {
+      var _a;
+      return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+    }
+  },
+  hidden: {
+    type: "boolean",
+    advanced: true
+  },
+  validateTrigger: {
+    type: "choice",
+    options: ["onSubmit", "onChange", "onBlur"],
+    multiSelect: true,
+    advanced: true
+  },
+  shouldUpdate: {
+    type: "boolean",
+    advanced: true,
+    displayName: "Always re-render",
+    description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
+  },
+  dependencies: {
+    type: "array",
+    advanced: true,
+    displayName: "Dependencies",
+    description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
+  },
+  hideValidationMessage: {
+    type: "boolean",
+    displayName: "Hide validation message?",
+    description: "If true, will hide the validation error message",
+    defaultValueHint: false,
+    advanced: true
+  },
+  customizeProps: {
+    type: "function",
+    description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
+    argNames: ["fieldData"],
+    argValues: (_ps, ctx) => {
+      var _a;
+      return [
+        {
+          status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
+        }
+      ];
+    },
+    advanced: true
+  },
+  noStyle: {
+    type: "boolean",
+    displayName: "Field control only",
+    description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
+    advanced: true
+  }
+};
+const formItemComponentName = "plasmic-antd5-form-item";
 function registerFormItem(loader) {
   registerComponentHelper(loader, FormItemWrapper, __spreadValues({
-    name: "plasmic-antd5-form-item",
-    displayName: "Form Item",
-    parentComponentName: "plasmic-antd5-form",
+    name: formItemComponentName,
+    displayName: "Form Field",
+    parentComponentName: formComponentName,
     defaultStyles: {
       marginBottom: "24px",
       width: "stretch"
     },
-    props: {
+    props: __spreadValues({
       label: __spreadValues({
         type: "slot",
         defaultValue: {
@@ -634,107 +875,10 @@ function registerFormItem(loader) {
         type: "slot",
         defaultValue: {
           type: "component",
-          name: "plasmic-antd5-input"
-        }
-      }, { mergeWithParent: true }),
-      name: {
-        type: "string"
-      },
-      initialValue: {
-        type: "string"
-      },
-      rules: {
-        type: "formValidationRules"
-      },
-      valuePropName: {
-        type: "string",
-        advanced: true,
-        defaultValueHint: "value",
-        description: "The prop name for specifying the value of the form control component"
-      },
-      noLabel: {
-        type: "boolean",
-        advanced: true
-      },
-      alignLabellessWithControls: {
-        type: "boolean",
-        displayName: "Align with controls?",
-        description: "Aligns the content with form controls in the grid",
-        hidden: (ps, ctx) => {
-          var _a;
-          return !ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
-        },
-        defaultValueHint: true
-      },
-      colon: {
-        type: "boolean",
-        defaultValueHint: true,
-        advanced: true,
-        hidden: () => true
-      },
-      labelAlign: {
-        type: "choice",
-        options: ["left", "right"],
-        advanced: true,
-        hidden: (ps, ctx) => {
-          var _a;
-          return !!ps.noLabel || ((_a = ctx == null ? void 0 : ctx.internalFormCtx) == null ? void 0 : _a.layout.layout) !== "horizontal";
+          name: inputComponentName
         }
-      },
-      hidden: {
-        type: "boolean",
-        advanced: true
-      },
-      validateTrigger: {
-        type: "choice",
-        options: ["onSubmit", "onChange", "onBlur"],
-        multiSelect: true,
-        advanced: true
-      },
-      shouldUpdate: {
-        type: "boolean",
-        advanced: true,
-        displayName: "Always re-render",
-        description: "Form items normally only re-render when the corresponding form value changes, for performance. This forces it to always re-render."
-      },
-      dependencies: {
-        type: "array",
-        advanced: true,
-        displayName: "Dependencies",
-        description: "Form items can depend on other form items. This forces it to reevaluate the validation rules when the other form item changes."
-      },
-      hideValidationMessage: {
-        type: "boolean",
-        displayName: "Hide validation message?",
-        description: "If true, will hide the validation error message",
-        defaultValueHint: false,
-        advanced: true
-      },
-      description: {
-        type: "slot",
-        hidePlaceholder: true
-      },
-      customizeProps: {
-        type: "function",
-        description: "Customize the props passed into the wrapped field component. Takes the current status ('success', 'warning', 'error', or 'validating').)",
-        argNames: ["fieldData"],
-        argValues: (_ps, ctx) => {
-          var _a;
-          return [
-            {
-              status: (_a = ctx == null ? void 0 : ctx.status) == null ? void 0 : _a.status
-            }
-          ];
-        },
-        advanced: true
-      },
-      noStyle: {
-        type: "boolean",
-        displayName: "Field control only",
-        description: "Don't render anything but the field control - so no label, help text, validation error, etc.",
-        advanced: true
-      }
-    },
+      }, { mergeWithParent: true })
+    }, commonFormItemProps),
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
     importName: "FormItemWrapper",
     templates: {
@@ -742,7 +886,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-input"
+            name: inputComponentName
           }
         }
       },
@@ -750,7 +894,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-textarea"
+            name: textAreaComponentName
           }
         }
       },
@@ -758,7 +902,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-select"
+            name: selectComponentName
           }
         }
       },
@@ -766,7 +910,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-input-number"
+            name: inputNumberComponentName
           }
         }
       },
@@ -774,9 +918,17 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-checkbox"
+            name: checkboxComponentName
+          },
+          noLabel: true
+        }
+      },
+      Switch: {
+        props: {
+          children: {
+            type: "component",
+            name: switchComponentName
           },
-          valuePropName: "checked",
           noLabel: true
         }
       },
@@ -784,7 +936,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-radio-group"
+            name: radioGroupComponentName
           }
         }
       },
@@ -792,7 +944,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-input-password"
+            name: passwordComponentName
           }
         }
       },
@@ -800,7 +952,7 @@ function registerFormItem(loader) {
         props: {
           children: {
             type: "component",
-            name: "plasmic-antd5-button",
+            name: buttonComponentName,
             props: {
               type: "primary"
             }
@@ -824,11 +976,12 @@ function FormGroup(props) {
     props.children
   );
 }
+const formGroupComponentName = "plasmic-antd5-form-group";
 function registerFormGroup(loader) {
   registerComponentHelper(loader, FormGroup, {
-    name: "plasmic-antd5-form-group",
-    displayName: "Form Group",
-    parentComponentName: "plasmic-antd5-form",
+    name: formGroupComponentName,
+    displayName: "Form Field Group",
+    parentComponentName: formComponentName,
     actions: COMMON_ACTIONS,
     props: {
       name: {
@@ -906,10 +1059,11 @@ const FormListWrapper = React.forwardRef(function FormListWrapper2(props, ref) {
     ));
   });
 });
+const formListComponentName = "plasmic-antd5-form-list";
 function registerFormList(loader) {
   registerComponentHelper(loader, FormListWrapper, {
-    name: "plasmic-antd5-form-list",
-    parentComponentName: "plasmic-antd5-form",
+    name: formListComponentName,
+    parentComponentName: formComponentName,
     displayName: "Form List",
     actions: COMMON_ACTIONS,
     props: {
@@ -921,7 +1075,7 @@ function registerFormList(loader) {
             children: [
               {
                 type: "component",
-                name: "plasmic-antd5-form-item",
+                name: formItemComponentName,
                 props: {
                   name: "firstName",
                   label: {
@@ -936,7 +1090,7 @@ function registerFormList(loader) {
               },
               {
                 type: "component",
-                name: "plasmic-antd5-form-item",
+                name: formItemComponentName,
                 props: {
                   name: "lastName",
                   label: {
@@ -1018,5 +1172,5 @@ function registerFormList(loader) {
   });
 }
 
-export { FormGroup, FormItemWrapper, FormListWrapper, FormWrapper, registerForm, registerFormGroup, registerFormItem, registerFormList };
+export { FormGroup, FormItemWrapper, FormListWrapper, FormWrapper, InputType, formComponentName, formGroupComponentName, formItemComponentName, formListComponentName, registerForm, registerFormGroup, registerFormItem, registerFormList };
 //# sourceMappingURL=registerForm.esm.js.map