react-antd-xform 1.0.0

package/dist/form/form-item.js

@@ -0,0 +1,286 @@
+import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import require$$0, { useLayoutEffect, useEffect } from "react";
+import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import pick from "../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/pick.js";
+import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
+import stringifyObject from "../node_modules/.pnpm/stringify-object@5.0.0/node_modules/stringify-object/index.js";
+import { toJS, reaction, runInAction } from "mobx";
+import { FieldType } from "./enum.js";
+import { Field } from "./model.js";
+import { useModel } from "./context/modelContext.js";
+import { useFormEnv } from "./context/formEnvContext.js";
+import { ALL_COMPONENTS } from "../form-ui/default-component.js";
+import { isFalsyOrEmptyArray, composeValue, asCSSLength } from "./common-utils.js";
+import { observer } from "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
+function processCreationOptions(options) {
+  const render = options.render ?? ((props) => require$$0.createElement(options.component, props));
+  return {
+    name: options.name,
+    hidden: options.hidden,
+    withField: Boolean(options.withField),
+    statusPropName: composeValue(options.statusPropName, "state"),
+    valuePropName: composeValue(options.valuePropName, "value"),
+    hasIntrinsicWidth: options.hasIntrinsicWidth !== false,
+    defaultValue: Object.keys(options).includes("defaultValue") ? options.defaultValue : null,
+    isEmpty: options.isEmpty ?? isFalsyOrEmptyArray,
+    render,
+    renderPreview: options.renderPreview ?? render
+  };
+}
+function resolveField(fieldProp, model, name, valueProp) {
+  let field;
+  if (fieldProp != null) {
+    field = fieldProp;
+  } else if (name === "&") {
+    field = model._asField();
+  } else if (name != null) {
+    field = model.getField(name);
+  } else {
+    field = new Field({
+      fieldType: FieldType.readonly,
+      value: valueProp,
+      name: "(readonly)",
+      forkName: Field.ORIGINAL,
+      parent: model
+    });
+  }
+  return field;
+}
+function FormItemView({
+  htmlId,
+  label = "",
+  help,
+  tip,
+  asterisk,
+  error,
+  children,
+  className,
+  style,
+  labelWidth,
+  controlWidth,
+  rightNode,
+  labelStyle,
+  controlStyle
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      "data-xform-id": htmlId,
+      className: cx("form-item", className),
+      style: {
+        "--label-width": asCSSLength(labelWidth),
+        "--control-width": asCSSLength(controlWidth),
+        ...style
+      },
+      children: [
+        label == null && tip == null ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "form-item-label", htmlFor: htmlId, style: labelStyle, children: [
+          asterisk && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "required-indicator" }),
+          label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "form-item-label-text", children: label })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "form-item-control", style: controlStyle, children: [
+          children,
+          help && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "help", children: help }),
+          error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", children: error })
+        ] }),
+        rightNode
+      ]
+    }
+  );
+}
+function createFormItem(inputOptions) {
+  const options = processCreationOptions(inputOptions);
+  function FormItemComponent({
+    defaultValue: defaultValueProp,
+    isEmpty = options.isEmpty,
+    renderPreview = options.renderPreview,
+    componentProps: componentPropsProp,
+    name,
+    field: fieldProp,
+    ...props
+  }) {
+    const formEnv = useFormEnv();
+    const model = useModel();
+    const field = resolveField(fieldProp, model, name, props.value);
+    const isPreview = composeValue(props.isPreview, formEnv.isPreview);
+    const error = composeValue(props.error, field.state.error);
+    const defaultValue = composeValue(defaultValueProp, options.defaultValue);
+    const value = toJS(composeValue(field.value, defaultValue));
+    const htmlId = Field.getHtmlId(formEnv.htmlIdPrefix, field);
+    const componentProps = {
+      id: htmlId,
+      ...isPreview ? { isPreview: true } : null,
+      // dataSource, readOnly, disabled,options 允许直接透传
+      ...pick(props, ["dataSource", "readOnly", "disabled", "options"]),
+      ...componentPropsProp,
+      // status 优先用 prop 中的值，然后再根据 error 自动判断
+      [options.statusPropName]: composeValue(
+        componentPropsProp == null ? void 0 : componentPropsProp[options.statusPropName],
+        composeValue(props[options.statusPropName], error ? "error" : void 0)
+      ),
+      [options.valuePropName]: composeValue(props[options.valuePropName], value),
+      onChange: composeValue(props.onChange, field.handleChange),
+      onFocus: composeValue(props.onFocus, field.handleFocus),
+      onBlur: composeValue(props.onBlur, field.handleBlur)
+    };
+    if (options.withField) {
+      componentProps.field = field;
+    }
+    const fieldConfig = {
+      htmlId,
+      valueProp: props[options.valuePropName],
+      defaultValue,
+      defaultValueProp,
+      isEmpty,
+      validateOnChange: formEnv.validateOnChange,
+      validateOnBlur: formEnv.validateOnBlur,
+      validateOnMount: formEnv.validateOnMount,
+      writeDefaultValueToModel: formEnv.writeDefaultValueToModel,
+      autoUnmount: formEnv.autoUnmount,
+      ...props
+    };
+    useLayoutEffect(() => field._track(fieldConfig));
+    useLayoutEffect(() => {
+      if (fieldConfig.writeDefaultValueToModel === "force") {
+        return reaction(
+          () => field.value,
+          () => {
+            if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
+              field.value = fieldConfig.defaultValueProp;
+            }
+          },
+          { fireImmediately: true }
+        );
+      } else if (fieldConfig.writeDefaultValueToModel) {
+        if (field.value === void 0 && fieldConfig.defaultValueProp !== void 0) {
+          runInAction(() => {
+            field.value = fieldConfig.defaultValueProp;
+          });
+        }
+      }
+      return () => {
+        if (fieldConfig.autoUnmount) {
+          field.clear();
+        }
+      };
+    }, []);
+    useEffect(() => {
+      if (fieldConfig.validateOnMount) {
+        field.validate("mount");
+        const cancel = field.state.cancelValidation;
+        return () => {
+          cancel == null ? void 0 : cancel();
+        };
+      }
+    }, []);
+    if (options.hidden) {
+      if (props.renderHiddenFormItemView === false) {
+        return null;
+      }
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FormItemView,
+      {
+        htmlId,
+        label: props.label,
+        help: props.help,
+        asterisk: props.asterisk ?? props.required,
+        error,
+        tip: props.tip,
+        style: props.style,
+        className: cx(props.className, {
+          "form-item-hidden": options.hidden,
+          "form-item-preview": isPreview,
+          "auto-control-width": options.hasIntrinsicWidth
+        }),
+        labelWidth: props.labelWidth,
+        labelStyle: props.labelStyle,
+        controlWidth: props.controlWidth,
+        controlStyle: props.controlStyle,
+        rightNode: props.rightNode,
+        children: isPreview ? renderPreview(componentProps) : options.render(componentProps)
+      }
+    );
+  }
+  FormItemComponent.displayName = `FormItem__${options.name}`;
+  return observer(FormItemComponent);
+}
+const COMPONENT_DICT = {};
+for (const config of ALL_COMPONENTS) {
+  const Component = createFormItem(config);
+  COMPONENT_DICT[config.name] = Component;
+}
+const AnonymousFormItem = createFormItem({
+  name: "anonymous",
+  render({ $Component: Component, ...props }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props });
+  }
+});
+const NotFound = createFormItem({
+  name: "notFound",
+  isEmpty: () => false,
+  render({ $Component }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        style: {
+          border: "1px dashed red",
+          fontSize: 14,
+          padding: 4,
+          color: "red"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { children: [
+            "<FormItem component='",
+            $Component,
+            "' />"
+          ] }),
+          " ",
+          "没有找到对应组件，请检查组件名称是否拼写正确"
+        ]
+      }
+    );
+  }
+});
+const Hidden = createFormItem({
+  name: "hidden",
+  hidden: true,
+  hasIntrinsicWidth: false,
+  defaultValue: void 0,
+  isEmpty() {
+    return false;
+  },
+  render({ id, value }) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", value: stringifyObject(value), id });
+  }
+});
+function FormItem({ use, component, ...props }) {
+  if (use === false) {
+    return null;
+  }
+  if (component == null) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: { $Component: String(component) } });
+  } else if (typeof component === "string") {
+    if (component === "hidden") {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Hidden, { ...props });
+    }
+    const Comp = COMPONENT_DICT[component];
+    if (Comp == null) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(NotFound, { ...props, componentProps: { $Component: component } });
+    }
+    return require$$0.createElement(Comp, props);
+  } else {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AnonymousFormItem,
+      {
+        ...props,
+        componentProps: { ...props.componentProps, $Component: component }
+      }
+    );
+  }
+}
+export {
+  AnonymousFormItem,
+  FormItem,
+  FormItemView,
+  createFormItem
+};

package/dist/form/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { FormModel } from './model';
+import { FormProps, FormArrayProps } from './type';
+import { FormSubmit } from '../form-ui/default-button';
+export declare function Form({ model: modelProp, defaultValue, children, className, style, layout, containerProps, htmlIdPrefix: htmlIdPrefixProp, ...restEnvProps }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var Submit: typeof FormSubmit;
+    var ModelConsumer: (({ children }: React.ConsumerProps<FormModel<any>>) => React.ReactElement) & {
+        displayName: string;
+    };
+    var ModelProvider: React.Provider<FormModel<any>>;
+    var Array: (<T extends unknown>({ name, children, layout, arrayModel: arrayModelProp, use, }: FormArrayProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+    var Object: (({ name, children, use }: {
+        children: React.ReactNode;
+        name: string;
+        use?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        displayName: string;
+    };
+}

package/dist/form/index.js

@@ -0,0 +1,73 @@
+import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/index.js";
+import { useState } from "react";
+import { FormModel } from "./model.js";
+import { useHtmlIdPrefix, composeValue, range } from "./common-utils.js";
+import { FormEnvProvider } from "./context/formEnvContext.js";
+import { ModelProvider, useModel } from "./context/modelContext.js";
+import { FormLayout } from "./layout.js";
+import { FormSubmit } from "../form-ui/default-button.js";
+import { arrayHelpers } from "./array-helper.js";
+import { observer } from "../node_modules/.pnpm/mobx-react-lite@4.1.0_mobx@6.13.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/mobx-react-lite/es/observer.js";
+function Form({
+  model: modelProp,
+  defaultValue,
+  children,
+  className,
+  style,
+  layout,
+  containerProps,
+  htmlIdPrefix: htmlIdPrefixProp,
+  ...restEnvProps
+}) {
+  const [_model] = useState(() => new FormModel(defaultValue));
+  const model = composeValue(modelProp, _model);
+  const htmlIdPrefix = useHtmlIdPrefix(htmlIdPrefixProp);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FormEnvProvider, { htmlIdPrefix, ...restEnvProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style, className, containerProps, ...layout, children }) }) });
+}
+const FormModelConsumer = observer(({ children }) => {
+  const model = useModel();
+  return children(model);
+});
+const defaultArrayLayout = ({ arrayModel, itemContent, itemCount }) => {
+  return range(itemCount).map(
+    (itemIndex) => arrayHelpers.renderArrayItem(arrayModel, itemIndex, itemContent)
+  );
+};
+const FormArray = observer(
+  ({
+    name,
+    children,
+    layout,
+    arrayModel: arrayModelProp,
+    use
+  }) => {
+    var _a;
+    const parent = useModel();
+    if (use === false) {
+      return null;
+    }
+    const arrayModel = arrayModelProp ?? (name === "&" ? parent : parent.getSubModel(name));
+    const itemCount = ((_a = arrayModel.values) == null ? void 0 : _a.length) ?? 0;
+    const itemContent = typeof children === "function" ? children : () => children;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: arrayModel, children: (layout ?? defaultArrayLayout)({ arrayModel, itemCount, itemContent }) });
+  }
+);
+const FormObject = observer(
+  ({ name, children, use }) => {
+    const parent = useModel();
+    if (use === false) {
+      return null;
+    }
+    const model = name === "&" ? parent : parent.getSubModel(name);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelProvider, { value: model, children });
+  }
+);
+Form.Submit = FormSubmit;
+Form.ModelConsumer = FormModelConsumer;
+Form.ModelProvider = ModelProvider;
+Form.Array = FormArray;
+Form.Object = FormObject;
+export {
+  Form
+};

package/dist/form/layout.d.ts

@@ -0,0 +1,4 @@
+import { FormLayoutProps, FormItemGroupProps } from './type';
+export declare function FormLayout({ children, className, style, labelPosition, labelWidth, formItemGap, controlWidth, defaultLabelTopPosition, inlineError, containerProps, }: FormLayoutProps): import("react/jsx-runtime").JSX.Element;
+/** @deprecated 请使用 Form.ItemView 代替 ItemGroup */
+export declare const FormItemGroup: ({ label, asterisk, tip, children, labelWidth, controlWidth, className, style, inline, }: FormItemGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/form/layout.js

@@ -0,0 +1,180 @@
+import { j as jsxRuntimeExports } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import cx from "../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
+import styled from "styled-components";
+import { asCSSLength } from "./common-utils.js";
+const FormLayoutContainer = styled.div`
+  --label-width: auto;
+  --control-width: auto;
+  --form-item-gap: 0;
+  --form-item-label-top-position: 0;
+
+  .form-item {
+    margin-bottom: var(--form-item-gap);
+    line-height: 1.5;
+
+    &.auto-control-width {
+      --control-width: auto;
+    }
+  }
+
+  .form-item-label {
+    display: block;
+  }
+
+  .form-item-label-text {
+    color: #666;
+  }
+
+  .form-item.minimal {
+    margin-bottom: 0;
+
+    > .error-message,
+    > .form-item-label {
+      display: none;
+    }
+  }
+
+  &.horizontal {
+    .form-item {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .form-item-label {
+      flex: 0 0 var(--label-width);
+      padding-top: var(--form-item-label-top-position);
+      padding-right: 12px;
+      text-align: right;
+    }
+  }
+
+  .form-item.form-item-hidden {
+    display: none;
+  }
+
+  &.vertical {
+    .form-item-label {
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+  }
+
+  &.inline-error .error-message {
+    position: absolute;
+    right: 0;
+    top: -24px;
+  }
+
+  .form-item-preview {
+    > .form-item-label {
+      padding-top: 0;
+    }
+  }
+
+  .required-indicator {
+    margin-right: 4px;
+    color: #eb4141;
+  }
+
+  .required-indicator::before {
+    content: '*';
+  }
+
+  .error-message {
+    margin-top: 2px;
+    color: #eb4141;
+  }
+
+  .tip {
+    margin-left: 4px;
+    color: #999;
+  }
+
+  .help {
+    color: #999999;
+    margin-top: 4px;
+  }
+
+  .form-item-control {
+    position: relative;
+    width: var(--control-width);
+
+    > .next-input,
+    > .next-select {
+      width: 100%;
+    }
+
+    > .next-range {
+      margin: 8px 0;
+    }
+
+    > .next-rating {
+      margin-top: 4px;
+      margin-bottom: 2px;
+    }
+
+    > .next-checkbox-group,
+    > .next-radio-group,
+    > .next-checkbox-wrapper {
+      display: inline-block;
+      line-height: 18px;
+    }
+  }
+
+  &.horizontal .form-item-control {
+    > .next-checkbox-group,
+    > .next-radio-group,
+    > .next-checkbox-wrapper {
+      padding-top: 8px;
+    }
+  }
+`;
+function FormLayout({
+  children,
+  className,
+  style,
+  labelPosition = "left",
+  labelWidth = labelPosition === "left" ? 120 : "auto",
+  formItemGap = labelPosition === "left" ? 12 : 16,
+  controlWidth = 320,
+  defaultLabelTopPosition = 4,
+  inlineError,
+  containerProps
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FormLayoutContainer,
+    {
+      style: {
+        "--label-width": asCSSLength(labelWidth),
+        "--control-width": asCSSLength(controlWidth),
+        "--form-item-gap": asCSSLength(formItemGap),
+        "--form-item-label-top-position": asCSSLength(defaultLabelTopPosition),
+        ...style
+      },
+      className: cx(
+        "xform-container",
+        {
+          horizontal: labelPosition === "left",
+          vertical: labelPosition === "top",
+          "inline-error": labelPosition === "top" && inlineError
+        },
+        className
+      ),
+      ...containerProps,
+      children
+    }
+  );
+}
+styled.div`
+  ${FormLayoutContainer}.horizontal & {
+    display: flex;
+  }
+  &.inline {
+    .form-item-group-content {
+      display: flex;
+    }
+  }
+`;
+export {
+  FormLayout
+};

package/dist/form/model-utils.d.ts

@@ -0,0 +1,23 @@
+import { Field, FormModel } from './model';
+import { FieldValidateTrigger, FormEnvContextType, SubmitOptions } from './type';
+export declare const modelUtils: {
+    clearError: <T>(model: FormModel<T>) => void;
+    scrollToFirstError(errorFields: Field[]): void;
+    animateErrorFields(errorFields: Field[]): void;
+    validateAll: <T>(model: FormModel<T>, trigger?: FieldValidateTrigger) => Promise<{
+        hasError: boolean;
+        errors: any;
+        errorFields: Field<unknown>[];
+    }>;
+    submit: <T>(model: FormModel<T>, options?: SubmitOptions) => Promise<void>;
+    reset: <T>(model: FormModel<T>, { onReset }?: Pick<FormEnvContextType, "onReset">) => void;
+    acceptValuesFormView: (model: FormModel, opts?: {
+        mergeDefaultValue?: boolean;
+    }) => void;
+    mergeValuesFromViewToView: typeof _mergeValuesFromViewToTarget;
+};
+/** 遍历 model 下当前挂载的 field 对象，将字段值或字段默认值写入到 target 中 */
+declare function _mergeValuesFromViewToTarget(target: any, model: FormModel, { mergeDefaultValue }?: {
+    mergeDefaultValue?: boolean;
+}): void;
+export {};