@plasmicpkgs/antd5 0.0.83 → 0.0.84

package/dist/antd.esm.js

@@ -68,6 +68,16 @@ function capitalize(value) {
 function ensureArray(x) {
   return Array.isArray(x) ? x : [x];
 }
+function setFieldsToUndefined(obj) {
+  if (typeof obj === "object" && obj !== null) {
+    for (const key in obj) {
+      if (typeof obj[key] === "object") {
+        setFieldsToUndefined(obj[key]);
+      }
+      obj[key] = void 0;
+    }
+  }
+}
 
 var __defProp$e = Object.defineProperty;
 var __defProps$b = Object.defineProperties;
@@ -2402,93 +2412,132 @@ var InputType = /* @__PURE__ */ ((InputType2) => {
 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, _e;
-  const [form] = Form.useForm();
-  const values = form.getFieldsValue(true);
-  const lastValue = React.useRef(values);
-  const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$3(_a, ["extendedOnValuesChange", "setRemountKey"]);
-  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$3(__spreadValues$4({}, 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 === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React.createElement(DatePicker, null) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React.createElement(
-        Radio.Group,
-        {
-          options: formItem.options,
-          optionType: formItem.optionType,
-          style: { padding: "8px" }
-        }
-      ) : null
-    )), props.submitSlot);
-  }
-  const fireOnValuesChange = React.useCallback(() => {
-    const values2 = form.getFieldsValue(true);
-    if (!equal(values2, lastValue.current)) {
-      extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
-      lastValue.current = values2;
+const Internal = React.forwardRef(
+  (props, ref) => {
+    var _b, _c, _d, _e, _f;
+    const [form] = Form.useForm();
+    const values = form.getFieldsValue(true);
+    const lastValue = React.useRef(values);
+    const _a = props, { extendedOnValuesChange, setRemountKey } = _a, rest = __objRest$3(_a, ["extendedOnValuesChange", "setRemountKey"]);
+    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$3(__spreadValues$4({}, 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 === "DatePicker" /* DatePicker */ ? /* @__PURE__ */ React.createElement(DatePicker, null) : formItem.inputType === "Radio Group" /* RadioGroup */ ? /* @__PURE__ */ React.createElement(
+          Radio.Group,
+          {
+            options: formItem.options,
+            optionType: formItem.optionType,
+            style: { padding: "8px" }
+          }
+        ) : null
+      )), props.submitSlot);
     }
-  }, [form, lastValue]);
-  React.useEffect(() => {
-    fireOnValuesChange();
-  }, []);
-  const formLayout = React.useMemo(
-    () => {
-      var _a2;
-      return {
-        layout: props.layout,
-        labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
-      };
-    },
-    [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
-  );
-  return /* @__PURE__ */ React.createElement(
-    InternalFormInstanceContext.Provider,
-    {
-      value: {
-        layout: formLayout,
-        fireOnValuesChange,
-        forceRemount: () => setRemountKey((k) => k + 1)
+    const fireOnValuesChange = React.useCallback(() => {
+      const values2 = form.getFieldsValue(true);
+      if (!equal(values2, lastValue.current)) {
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(values2);
+        lastValue.current = values2;
       }
-    },
-    /* @__PURE__ */ React.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React.createElement(
-      Form,
-      __spreadProps$3(__spreadValues$4({}, rest), {
-        key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
-        onValuesChange: (...args) => {
-          var _a2;
-          (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
-          extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
-        },
-        form,
-        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, `
+    }, [form, lastValue]);
+    React.useEffect(() => {
+      fireOnValuesChange();
+    }, []);
+    const formLayout = React.useMemo(
+      () => {
+        var _a2;
+        return {
+          layout: props.layout,
+          labelSpan: (_a2 = props.labelCol) == null ? void 0 : _a2.span
+        };
+      },
+      [props.layout, (_c = props.labelCol) == null ? void 0 : _c.span]
+    );
+    (_d = props.setControlContextData) == null ? void 0 : _d.call(props, { formInstance: form });
+    React.useImperativeHandle(ref, () => ({
+      formInstance: form,
+      setFieldsValue: (newValues) => {
+        form.setFieldsValue(newValues);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      setFieldValue: (namePath, value) => {
+        form.setFieldValue(namePath, value);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      resetFields: () => {
+        form.resetFields();
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      },
+      clearFields: () => {
+        const values2 = form.getFieldsValue(true);
+        setFieldsToUndefined(values2);
+        form.setFieldsValue(values2);
+        extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(form.getFieldsValue(true));
+      }
+    }));
+    return /* @__PURE__ */ React.createElement(
+      InternalFormInstanceContext.Provider,
+      {
+        value: {
+          layout: formLayout,
+          fireOnValuesChange,
+          forceRemount: () => setRemountKey((k) => k + 1)
+        }
+      },
+      /* @__PURE__ */ React.createElement(FormLayoutContext.Provider, { value: formLayout }, /* @__PURE__ */ React.createElement(
+        Form,
+        __spreadProps$3(__spreadValues$4({}, rest), {
+          key: props.initialValues ? JSON.stringify(props.initialValues) : void 0,
+          onValuesChange: (...args) => {
+            var _a2;
+            (_a2 = props.onValuesChange) == null ? void 0 : _a2.call(props, ...args);
+            extendedOnValuesChange == null ? void 0 : extendedOnValuesChange(args[1]);
+          },
+          form,
+          labelCol: ((_e = props.labelCol) == null ? void 0 : _e.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.labelCol,
+          wrapperCol: ((_f = props.wrapperCol) == null ? void 0 : _f.horizontalOnly) && props.layout !== "horizontal" ? void 0 : props.wrapperCol
+        }),
+        /* @__PURE__ */ React.createElement("style", null, `
           .ant-form-item-explain + div, .ant-form-item-margin-offset {
             display: none;
           }
           `),
-      childrenNode
-    ))
-  );
-};
-function FormWrapper(props) {
-  const [remountKey, setRemountKey] = React.useState(0);
-  const previousInitialValues = usePrevious(props.initialValues);
-  React.useEffect(() => {
-    if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
-      setRemountKey((k) => k + 1);
-    }
-  }, [previousInitialValues, props.initialValues]);
-  return /* @__PURE__ */ React.createElement(Internal, __spreadProps$3(__spreadValues$4({ key: remountKey }, props), { setRemountKey }));
-}
+        childrenNode
+      ))
+    );
+  }
+);
+const FormWrapper = React.forwardRef(
+  (props, ref) => {
+    const [remountKey, setRemountKey] = React.useState(0);
+    const previousInitialValues = usePrevious(props.initialValues);
+    const wrapperRef = React.useRef(null);
+    React.useEffect(() => {
+      if (previousInitialValues !== props.initialValues && JSON.stringify(previousInitialValues) !== JSON.stringify(props.initialValues)) {
+        setRemountKey((k) => k + 1);
+      }
+    }, [previousInitialValues, props.initialValues]);
+    React.useImperativeHandle(
+      ref,
+      () => wrapperRef.current ? __spreadValues$4({}, wrapperRef.current) : {}
+    );
+    return /* @__PURE__ */ React.createElement(
+      Internal,
+      __spreadProps$3(__spreadValues$4({
+        key: remountKey
+      }, props), {
+        setRemountKey,
+        ref: wrapperRef
+      })
+    );
+  }
+);
 const COMMON_ACTIONS = [
   {
     type: "button-action",
@@ -2559,6 +2608,16 @@ const colProp = (displayName, defaultValue, description) => ({
   description,
   defaultValue
 });
+const formHelpers = {
+  states: {
+    value: {
+      onMutate: (value, $ref) => {
+        var _a;
+        (_a = $ref == null ? void 0 : $ref.formInstance) == null ? void 0 : _a.setFieldsValue(value);
+      }
+    }
+  }
+};
 const formComponentName = "plasmic-antd5-form";
 function registerForm(loader) {
   registerComponentHelper(loader, FormWrapper, {
@@ -2816,6 +2875,54 @@ function registerForm(loader) {
         onChangeProp: "extendedOnValuesChange"
       }
     },
+    componentHelpers: {
+      helpers: formHelpers,
+      importName: "formHelpers",
+      importPath: "@plasmicpkgs/antd5/skinny/registerForm"
+    },
+    refActions: {
+      setFieldsValue: {
+        displayName: "Set multiple fields",
+        argTypes: [
+          {
+            name: "newValues",
+            displayName: "New Values",
+            type: "exprEditor"
+          }
+        ]
+      },
+      setFieldValue: {
+        displayName: "Set field",
+        argTypes: [
+          {
+            name: "namePath",
+            displayName: "Name Path",
+            type: {
+              type: "dataSelector",
+              data: (_, ctx) => {
+                if (!(ctx == null ? void 0 : ctx.formInstance)) {
+                  return {};
+                }
+                return ctx.formInstance.getFieldsValue(true);
+              }
+            }
+          },
+          {
+            name: "value",
+            displayName: "New Value",
+            type: "exprEditor"
+          }
+        ]
+      },
+      resetFields: {
+        displayName: "Reset fields to initial value",
+        argTypes: []
+      },
+      clearFields: {
+        displayName: "Clear fields",
+        argTypes: []
+      }
+    },
     importPath: "@plasmicpkgs/antd5/skinny/registerForm",
     importName: "FormWrapper"
   });