doui-react 1.0.0

package/es/form/component/form-list.d.ts

@@ -0,0 +1,36 @@
+import { FormInstance, FormListActionProps, FormListProps, FormValues } from "..";
+import { ErrorListProps } from 'antd/lib/form/ErrorList';
+import { FormListFieldData, FormListOperation } from 'antd/lib/form/FormList';
+import { NamePath } from 'rc-field-form/es/interface';
+import { StoreValue } from 'rc-field-form/lib/interface';
+import { ReactNode } from 'react';
+export declare function FormList(props: FormListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+interface FormListItemProps extends FormListProps {
+    name: NamePath;
+    fields: FormListFieldData[];
+    operation: FormListOperation;
+    meta: {
+        errors: ReactNode[];
+        warnings: ReactNode[];
+    };
+}
+interface ListOperationProps extends FormListItemProps {
+    form: FormInstance;
+    values: FormValues;
+}
+export declare function useListOperation({ fields, operation, values, ...restProps }: ListOperationProps): {
+    move: (from: number, to: number) => void;
+    add: (defaultValue?: StoreValue, insertIndex?: number) => Promise<void>;
+    remove: (index?: number | number[]) => void;
+    moveUp: (index: number) => void;
+    moveDown: (index: number) => void;
+    update: (index: number, newValue?: any) => void;
+};
+interface FormListActionReturn {
+    onClick: () => void;
+    disabled?: boolean;
+}
+export declare function useFormListAction({ operation, defaultValue, insertIndex, index, from, to, }: FormListActionProps): FormListActionReturn;
+export declare function FormListAction(props: FormListActionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FormListError(props: ErrorListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/es/form/component/form-list.js

@@ -0,0 +1,190 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["fields", "operation", "values"];
+import { executeFunction, mergeProps, renderComponentByType } from "../../api";
+import { Button } from "../../button";
+import { FormListProvider, useFormContext, useFormListContext } from "./..";
+import { isValidMoveAction, isValidMoveDownAction, isValidMoveUpAction } from "../../hooks";
+import { Form } from 'antd';
+import _ from 'lodash';
+import { Fragment } from 'react';
+import { useUnmount } from 'react-use';
+import { formListActionKeys } from "./constant";
+import { generateFormItem, generateListItemName, removePrefixNameIfNeed, scrollToFieldOnAdd } from "./utils";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function FormList(props) {
+  var _useFormContext = useFormContext(),
+    items = _useFormContext.items,
+    form = _useFormContext.form,
+    __removeCollect__ = _useFormContext.__removeCollect__;
+  var formListContext = useFormListContext();
+  var listProps = generateFormItem({
+    form: form,
+    item: props,
+    items: items,
+    formListContext: formListContext,
+    isFormList: true
+  });
+  var formListProps = _objectSpread(_objectSpread({}, listProps), {}, {
+    name: removePrefixNameIfNeed(formListContext, listProps.name)
+  });
+
+  // 删除当前 FormList 下的 Items
+  useUnmount(function () {
+    return __removeCollect__(listProps.name, {
+      isFormList: true
+    });
+  });
+  return _jsx(Form.List, _objectSpread(_objectSpread({}, formListProps), {}, {
+    children: function children(fields, operation, meta) {
+      return _jsx(FormListChildren, _objectSpread(_objectSpread({}, props), {}, {
+        name: listProps.name,
+        fields: fields,
+        operation: operation,
+        meta: meta
+      }));
+    }
+  }));
+}
+function FormListChildren(props) {
+  var name = props.name,
+    fields = props.fields,
+    meta = props.meta,
+    item = props.item,
+    children = props.children;
+  var _useFormContext2 = useFormContext(),
+    form = _useFormContext2.form,
+    values = _useFormContext2.values;
+  var operations = useListOperation(_objectSpread({
+    form: form,
+    values: values
+  }, props));
+  var commonProps = _objectSpread(_objectSpread({
+    values: values,
+    fields: fields
+  }, operations), meta);
+  var component = fields.map(function (_ref) {
+    var key = _ref.key,
+      index = _ref.name;
+    var itemComponent = renderComponentByType(item, _objectSpread(_objectSpread({}, commonProps), {}, {
+      index: index,
+      value: _.get(values, generateListItemName(name, index)),
+      onChange: function onChange(newValue) {
+        return operations.update(index, newValue);
+      }
+    }));
+    return _jsx(Fragment, {
+      children: itemComponent
+    }, key);
+  });
+  var providerProps = _objectSpread({
+    name: name
+  }, commonProps);
+  return _jsx(FormListProvider, _objectSpread(_objectSpread({}, providerProps), {}, {
+    children: children ? children(_objectSpread({
+      component: component
+    }, commonProps)) : component
+  }));
+}
+export function useListOperation(_ref2) {
+  var fields = _ref2.fields,
+    operation = _ref2.operation,
+    values = _ref2.values,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  var _add = operation.add,
+    move = operation.move,
+    _remove = operation.remove;
+  return {
+    move: move,
+    add: function add(defaultValue, insertIndex) {
+      _add(defaultValue, insertIndex);
+      return scrollToFieldOnAdd(_objectSpread({
+        insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : fields.length
+      }, restProps));
+    },
+    remove: function remove(index) {
+      var keys = index !== null && index !== void 0 ? index : _.map(fields, 'name');
+      _remove(keys);
+    },
+    moveUp: function moveUp(index) {
+      if (isValidMoveUpAction(index)) {
+        move(index, index - 1);
+      }
+    },
+    moveDown: function moveDown(index) {
+      if (isValidMoveDownAction(index, fields)) {
+        move(index, index + 1);
+      }
+    },
+    update: function update(index, newValue) {
+      var namePath = generateListItemName(restProps.name, index);
+      var value = _.get(values, namePath);
+      var patchValue = executeFunction(newValue, value);
+      restProps.form.setValue(namePath.join('.'), patchValue);
+    }
+  };
+}
+export function useFormListAction(_ref3) {
+  var operation = _ref3.operation,
+    defaultValue = _ref3.defaultValue,
+    insertIndex = _ref3.insertIndex,
+    index = _ref3.index,
+    _ref3$from = _ref3.from,
+    from = _ref3$from === void 0 ? 0 : _ref3$from,
+    _ref3$to = _ref3.to,
+    to = _ref3$to === void 0 ? 0 : _ref3$to;
+  var _useFormListContext = useFormListContext(),
+    fields = _useFormListContext.fields,
+    add = _useFormListContext.add,
+    remove = _useFormListContext.remove,
+    moveUp = _useFormListContext.moveUp,
+    moveDown = _useFormListContext.moveDown,
+    move = _useFormListContext.move;
+  var propsMap = {
+    add: {
+      loading: false,
+      onClick: function onClick() {
+        return add(defaultValue, insertIndex);
+      }
+    },
+    remove: {
+      onClick: function onClick() {
+        return remove(index);
+      }
+    },
+    moveUp: {
+      onClick: function onClick() {
+        return moveUp(index);
+      },
+      disabled: !isValidMoveUpAction(index)
+    },
+    moveDown: {
+      onClick: function onClick() {
+        return moveDown(index);
+      },
+      disabled: !isValidMoveDownAction(index, fields)
+    },
+    move: {
+      onClick: function onClick() {
+        return move(from, to);
+      },
+      disabled: !isValidMoveAction(from, to, fields)
+    }
+  };
+  return propsMap[operation];
+}
+export function FormListAction(props) {
+  var operationProps = useFormListAction(props);
+  var buttonProps = _.omit(props, formListActionKeys);
+  var mergedProps = mergeProps(operationProps, buttonProps);
+  return _jsx(Button, _objectSpread({}, mergedProps));
+}
+export function FormListError(props) {
+  var _useFormListContext2 = useFormListContext(),
+    errors = _useFormListContext2.errors,
+    warnings = _useFormListContext2.warnings;
+  return _jsx(Form.ErrorList, _objectSpread({
+    errors: errors,
+    warnings: warnings
+  }, props));
+}

package/es/form/component/form.d.ts

@@ -0,0 +1,2 @@
+import { FormProps } from "..";
+export declare function Form({ labelWidth, formItemMarginBottom, className, style, onValuesChange, ...props }: FormProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/es/form/component/form.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["labelWidth", "formItemMarginBottom", "className", "style", "onValuesChange"];
+import { mergeFunction } from "../../api";
+import { useForm } from "./..";
+import { Form as AntdForm } from 'antd';
+import { useUpdate } from 'react-use';
+import styles from "../style";
+import { FormContent } from "./form-content";
+import { getFormProps } from "./utils";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+function useInternalForm(props) {
+  var _props$form;
+  var internalForm = useForm();
+  (_props$form = props.form) !== null && _props$form !== void 0 ? _props$form : props.form = internalForm;
+  return getFormProps(props);
+}
+export function Form(_ref) {
+  var labelWidth = _ref.labelWidth,
+    formItemMarginBottom = _ref.formItemMarginBottom,
+    className = _ref.className,
+    style = _ref.style,
+    onValuesChange = _ref.onValuesChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var update = useUpdate();
+  var formProps = useInternalForm(props);
+  var css = styles.wrapper({
+    labelWidth: labelWidth,
+    formItemMarginBottom: formItemMarginBottom
+  });
+  return _jsx(AntdForm, _objectSpread(_objectSpread({}, formProps), {}, {
+    className: className,
+    style: style,
+    css: css,
+    onValuesChange: mergeFunction(onValuesChange, update),
+    children: _jsx(FormContent, _objectSpread(_objectSpread({}, props), {}, {
+      form: formProps.form
+    }))
+  }));
+}

package/es/form/component/index.d.ts

@@ -0,0 +1,15 @@
+import { Form as InternalForm } from './form';
+import { FormItem } from './form-item';
+import { FormList, FormListAction, FormListError } from './form-list';
+import { SubmitButton } from './submit-button';
+import { ValidatorItem } from './validator-item';
+type FormType = typeof InternalForm & {
+    FormItem: typeof FormItem;
+    SubmitButton: typeof SubmitButton;
+    ValidatorItem: typeof ValidatorItem;
+    FormList: typeof FormList;
+    FormListAction: typeof FormListAction;
+    FormListError: typeof FormListError;
+};
+export declare const Form: FormType;
+export {};

package/es/form/component/index.js

@@ -0,0 +1,14 @@
+import { Form as InternalForm } from "./form";
+import { FormItem } from "./form-item";
+import { FormList, FormListAction, FormListError } from "./form-list";
+import { SubmitButton } from "./submit-button";
+import { ValidatorItem } from "./validator-item";
+export var Form = InternalForm;
+Form.FormItem = FormItem;
+Form.SubmitButton = SubmitButton;
+Form.ValidatorItem = ValidatorItem;
+
+// List 相关
+Form.FormList = FormList;
+Form.FormListAction = FormListAction;
+Form.FormListError = FormListError;

package/es/form/component/submit-button.d.ts

@@ -0,0 +1,2 @@
+import { SubmitButtonProps } from "..";
+export declare function SubmitButton({ onClick, onValidate, disableOnValidateFailure, ...props }: SubmitButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/es/form/component/submit-button.js

@@ -0,0 +1,47 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onClick", "onValidate", "disableOnValidateFailure"];
+import { Button } from "../../button";
+import { useFormContext, useValidateForm } from "./..";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function SubmitButton(_ref) {
+  var onClick = _ref.onClick,
+    onValidate = _ref.onValidate,
+    _ref$disableOnValidat = _ref.disableOnValidateFailure,
+    disableOnValidateFailure = _ref$disableOnValidat === void 0 ? true : _ref$disableOnValidat,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useFormContext = useFormContext(),
+    form = _useFormContext.form;
+  var valid = useValidateForm({
+    onValidate: onValidate
+  });
+  function handleClick() {
+    return _handleClick.apply(this, arguments);
+  }
+  function _handleClick() {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var value;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return form.submit();
+          case 2:
+            value = _context.sent;
+            return _context.abrupt("return", onClick === null || onClick === void 0 ? void 0 : onClick(value, form));
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _handleClick.apply(this, arguments);
+  }
+  var disabled = disableOnValidateFailure && !valid;
+  return _jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
+    disabled: disabled,
+    onClick: handleClick
+  }));
+}

package/es/form/component/use-debug.d.ts

@@ -0,0 +1 @@
+export declare function useDebug(): void;

package/es/form/component/use-debug.js

@@ -0,0 +1,16 @@
+import { useFormContext } from "./..";
+import { useMount } from 'react-use';
+import { registerMethods } from "./constant";
+export function useDebug() {
+  var _useFormContext = useFormContext(),
+    form = _useFormContext.form,
+    debug = _useFormContext.debug;
+  useMount(function () {
+    if (!debug) {
+      return;
+    }
+    form.registerMethod(registerMethods.onValidateFailed, function (error) {
+      console.warn('Form validate failed: ', error);
+    });
+  });
+}

package/es/form/component/utils.d.ts

@@ -0,0 +1,95 @@
+/// <reference types="react" />
+import { CommonParams, FormInstance, FormItemContext, FormItemProps, FormItemPropsWithType, FormListContext, FormListProps, FormProps, FormValues } from "..";
+import { SelectOptions } from "../../select";
+import _ from 'lodash';
+import { NamePath, ValidateErrorEntity } from 'rc-field-form/es/interface';
+import { StoreValue } from 'rc-field-form/lib/interface';
+import { useSetState } from 'react-use';
+export declare function getFormProps(props: FormProps): FormProps;
+export declare function getFormItemProps(props: any): {
+    name: string | string[] | undefined;
+    tooltip: {
+        color?: string | undefined;
+        title?: import("react").ReactNode | import("antd/lib/tooltip").RenderFunction;
+        overlay?: import("react").ReactNode | import("antd/lib/tooltip").RenderFunction;
+        placement?: import("antd/lib/tooltip").TooltipPlacement | undefined;
+        builtinPlacements?: import("rc-trigger").BuildInPlacements | undefined;
+        openClassName?: string | undefined;
+        arrowPointAtCenter: boolean;
+        autoAdjustOverflow?: boolean | import("antd/lib/tooltip").AdjustOverflow | undefined;
+        getPopupContainer: typeof import("../../api").getPopupContainer;
+        children?: import("react").ReactNode;
+        visible?: boolean | undefined;
+        open?: boolean | undefined;
+        defaultVisible?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onVisibleChange?: ((visible: boolean) => void) | undefined;
+        onOpenChange?: ((visible: boolean) => void) | undefined;
+        afterVisibleChange?: ((visible: boolean) => void) | undefined;
+        afterOpenChange?: ((visible: boolean) => void) | undefined;
+        zIndex?: number | undefined;
+        animation?: string | undefined;
+        motion?: import("rc-motion").CSSMotionProps | undefined;
+        id?: string | undefined;
+        onPopupAlign?: ((element: HTMLElement, align: import("rc-trigger/lib/interface").AlignType) => void) | undefined;
+        trigger?: string | string[] | undefined;
+        transitionName?: string | undefined;
+        overlayStyle?: import("react").CSSProperties | undefined;
+        overlayClassName: string;
+        prefixCls?: string | undefined;
+        mouseEnterDelay?: number | undefined;
+        mouseLeaveDelay?: number | undefined;
+        getTooltipContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+        destroyTooltipOnHide?: boolean | {
+            keepParent?: boolean | undefined;
+        } | undefined;
+        align?: import("rc-trigger/lib/interface").AlignType | undefined;
+        showArrow?: boolean | undefined;
+        arrowContent?: import("react").ReactNode;
+        popupVisible?: boolean | undefined;
+        overlayInnerStyle?: import("react").CSSProperties | undefined;
+        icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    } | undefined;
+    initialValue: any;
+};
+export declare function getComponentProps(props: any): _.Omit<any, string>;
+interface GenerateFormItemProps extends CommonParams {
+    item: FormItemProps;
+    formListContext: FormListContext;
+    isFormList?: boolean;
+}
+export declare function generateFormItem(props: GenerateFormItemProps): FormItemPropsWithType;
+export declare function generateListItemName(listName?: string, name?: string | number): (string | number)[];
+export declare function removePrefixNameIfNeed(formListContext?: FormListContext, name?: string): string | string[] | undefined;
+export declare function isValueNotExistInOptions(value: any, options?: any): boolean;
+export declare function isEmpty(value: any): boolean;
+export declare function parseValueWhenLabelInValue(value: any): any[];
+interface UpdateNotExistValueProps extends FormItemProps {
+    form: FormInstance;
+    options?: SelectOptions;
+}
+export declare function updateNotExistValue({ form, value, name, options, filterNotExistValue, labelInValue, }: UpdateNotExistValueProps): true | undefined;
+export declare function validateFormOnMount({ form, items }: CommonParams, validateOnMount?: boolean): Promise<void>;
+export declare function transformNameToPath(name?: string | string[]): NamePath;
+export declare function transformPathToName(path?: NamePath): string | undefined;
+export declare function transformKeyToPath(params?: Record<string, any>): Record<string, any>;
+export declare function parseFormFailedError(error: ValidateErrorEntity): Record<string, string>;
+export declare function noStyle(item: FormItemProps): boolean;
+export declare function transformOptions(item: FormItemProps, values: FormValues, params: CommonParams): ((values: FormValues, params: import("..").OptionsParams) => import("../../api").FunctionReturn<SelectOptions>) | ((search?: string) => import("../../api").FunctionReturn<SelectOptions>) | import("../../api").FunctionReturn<SelectOptions> | undefined;
+interface FocusFirstInputParams extends CommonParams {
+    focusFirstOnMount: FormProps['focusFirstOnMount'];
+}
+export declare function focusFirstInput({ form, items, focusFirstOnMount }: FocusFirstInputParams): true | undefined;
+interface FocusFirstInputOnAddProps extends Omit<FormListProps, 'item'> {
+    insertIndex: number;
+    form?: FormInstance;
+}
+export declare function scrollToFieldOnAdd({ name, form, insertIndex, focusFirstOnAdd, }: FocusFirstInputOnAddProps): Promise<void>;
+export declare function setContextWrapper(setContext: ReturnType<typeof useSetState>[1]): (nameOrParams?: string | Record<string, StoreValue>, value?: StoreValue) => void;
+export declare function getContextWrapper(context: Record<string, any>): (name?: string) => any;
+export declare function generateCollectionKey(name?: string): string;
+export declare function removeFormListFormItems(name: string, collectionItems: Record<string, FormItemContext>): _.Dictionary<FormItemContext>;
+export declare function removeTableEditorFormItems(name: string, collectionItems: Record<string, FormItemContext>): _.Dictionary<FormItemContext>;
+export declare function getFormItemId(name: string, form: FormInstance): string;
+export declare function hasItemLoading(items: FormItemContext[]): boolean;
+export {};