doui-react 1.0.0

package/lib/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/lib/form/component/form-list.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormList = FormList;
+exports.FormListAction = FormListAction;
+exports.FormListError = FormListError;
+exports.useFormListAction = useFormListAction;
+exports.useListOperation = useListOperation;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _api = require("../../api");
+var _button = require("../../button");
+var _2 = require("./..");
+var _hooks = require("../../hooks");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactUse = require("react-use");
+var _constant = require("./constant");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["fields", "operation", "values"];
+function FormList(props) {
+  var _useFormContext = (0, _2.useFormContext)(),
+    items = _useFormContext.items,
+    form = _useFormContext.form,
+    __removeCollect__ = _useFormContext.__removeCollect__;
+  var formListContext = (0, _2.useFormListContext)();
+  var listProps = (0, _utils.generateFormItem)({
+    form: form,
+    item: props,
+    items: items,
+    formListContext: formListContext,
+    isFormList: true
+  });
+  var formListProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, listProps), {}, {
+    name: (0, _utils.removePrefixNameIfNeed)(formListContext, listProps.name)
+  });
+
+  // 删除当前 FormList 下的 Items
+  (0, _reactUse.useUnmount)(function () {
+    return __removeCollect__(listProps.name, {
+      isFormList: true
+    });
+  });
+  return (0, _jsxRuntime.jsx)(_antd.Form.List, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formListProps), {}, {
+    children: function children(fields, operation, meta) {
+      return (0, _jsxRuntime.jsx)(FormListChildren, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 = (0, _2.useFormContext)(),
+    form = _useFormContext2.form,
+    values = _useFormContext2.values;
+  var operations = useListOperation((0, _objectSpread2.default)({
+    form: form,
+    values: values
+  }, props));
+  var commonProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    values: values,
+    fields: fields
+  }, operations), meta);
+  var component = fields.map(function (_ref) {
+    var key = _ref.key,
+      index = _ref.name;
+    var itemComponent = (0, _api.renderComponentByType)(item, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commonProps), {}, {
+      index: index,
+      value: _lodash.default.get(values, (0, _utils.generateListItemName)(name, index)),
+      onChange: function onChange(newValue) {
+        return operations.update(index, newValue);
+      }
+    }));
+    return (0, _jsxRuntime.jsx)(_react.Fragment, {
+      children: itemComponent
+    }, key);
+  });
+  var providerProps = (0, _objectSpread2.default)({
+    name: name
+  }, commonProps);
+  return (0, _jsxRuntime.jsx)(_2.FormListProvider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, providerProps), {}, {
+    children: children ? children((0, _objectSpread2.default)({
+      component: component
+    }, commonProps)) : component
+  }));
+}
+function useListOperation(_ref2) {
+  var fields = _ref2.fields,
+    operation = _ref2.operation,
+    values = _ref2.values,
+    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _add = operation.add,
+    move = operation.move,
+    _remove = operation.remove;
+  return {
+    move: move,
+    add: function add(defaultValue, insertIndex) {
+      _add(defaultValue, insertIndex);
+      return (0, _utils.scrollToFieldOnAdd)((0, _objectSpread2.default)({
+        insertIndex: insertIndex !== null && insertIndex !== void 0 ? insertIndex : fields.length
+      }, restProps));
+    },
+    remove: function remove(index) {
+      var keys = index !== null && index !== void 0 ? index : _lodash.default.map(fields, 'name');
+      _remove(keys);
+    },
+    moveUp: function moveUp(index) {
+      if ((0, _hooks.isValidMoveUpAction)(index)) {
+        move(index, index - 1);
+      }
+    },
+    moveDown: function moveDown(index) {
+      if ((0, _hooks.isValidMoveDownAction)(index, fields)) {
+        move(index, index + 1);
+      }
+    },
+    update: function update(index, newValue) {
+      var namePath = (0, _utils.generateListItemName)(restProps.name, index);
+      var value = _lodash.default.get(values, namePath);
+      var patchValue = (0, _api.executeFunction)(newValue, value);
+      restProps.form.setValue(namePath.join('.'), patchValue);
+    }
+  };
+}
+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 = (0, _2.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: !(0, _hooks.isValidMoveUpAction)(index)
+    },
+    moveDown: {
+      onClick: function onClick() {
+        return moveDown(index);
+      },
+      disabled: !(0, _hooks.isValidMoveDownAction)(index, fields)
+    },
+    move: {
+      onClick: function onClick() {
+        return move(from, to);
+      },
+      disabled: !(0, _hooks.isValidMoveAction)(from, to, fields)
+    }
+  };
+  return propsMap[operation];
+}
+function FormListAction(props) {
+  var operationProps = useFormListAction(props);
+  var buttonProps = _lodash.default.omit(props, _constant.formListActionKeys);
+  var mergedProps = (0, _api.mergeProps)(operationProps, buttonProps);
+  return (0, _jsxRuntime.jsx)(_button.Button, (0, _objectSpread2.default)({}, mergedProps));
+}
+function FormListError(props) {
+  var _useFormListContext2 = (0, _2.useFormListContext)(),
+    errors = _useFormListContext2.errors,
+    warnings = _useFormListContext2.warnings;
+  return (0, _jsxRuntime.jsx)(_antd.Form.ErrorList, (0, _objectSpread2.default)({
+    errors: errors,
+    warnings: warnings
+  }, props));
+}

package/lib/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/lib/form/component/form.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = Form;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _ = require("./..");
+var _antd = require("antd");
+var _reactUse = require("react-use");
+var _style = _interopRequireDefault(require("../style"));
+var _formContent = require("./form-content");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["labelWidth", "formItemMarginBottom", "className", "style", "onValuesChange"];
+function useInternalForm(props) {
+  var _props$form;
+  var internalForm = (0, _.useForm)();
+  (_props$form = props.form) !== null && _props$form !== void 0 ? _props$form : props.form = internalForm;
+  return (0, _utils.getFormProps)(props);
+}
+function Form(_ref) {
+  var labelWidth = _ref.labelWidth,
+    formItemMarginBottom = _ref.formItemMarginBottom,
+    className = _ref.className,
+    style = _ref.style,
+    onValuesChange = _ref.onValuesChange,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var update = (0, _reactUse.useUpdate)();
+  var formProps = useInternalForm(props);
+  var css = _style.default.wrapper({
+    labelWidth: labelWidth,
+    formItemMarginBottom: formItemMarginBottom
+  });
+  return (0, _jsxRuntime.jsx)(_antd.Form, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
+    className: className,
+    style: style,
+    css: css,
+    onValuesChange: (0, _api.mergeFunction)(onValuesChange, update),
+    children: (0, _jsxRuntime.jsx)(_formContent.FormContent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      form: formProps.form
+    }))
+  }));
+}

package/lib/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/lib/form/component/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = void 0;
+var _form = require("./form");
+var _formItem = require("./form-item");
+var _formList = require("./form-list");
+var _submitButton = require("./submit-button");
+var _validatorItem = require("./validator-item");
+var Form = exports.Form = _form.Form;
+Form.FormItem = _formItem.FormItem;
+Form.SubmitButton = _submitButton.SubmitButton;
+Form.ValidatorItem = _validatorItem.ValidatorItem;
+
+// List 相关
+Form.FormList = _formList.FormList;
+Form.FormListAction = _formList.FormListAction;
+Form.FormListError = _formList.FormListError;

package/lib/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/lib/form/component/submit-button.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubmitButton = SubmitButton;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _button = require("../../button");
+var _ = require("./..");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["onClick", "onValidate", "disableOnValidateFailure"];
+function SubmitButton(_ref) {
+  var onClick = _ref.onClick,
+    onValidate = _ref.onValidate,
+    _ref$disableOnValidat = _ref.disableOnValidateFailure,
+    disableOnValidateFailure = _ref$disableOnValidat === void 0 ? true : _ref$disableOnValidat,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useFormContext = (0, _.useFormContext)(),
+    form = _useFormContext.form;
+  var valid = (0, _.useValidateForm)({
+    onValidate: onValidate
+  });
+  function handleClick() {
+    return _handleClick.apply(this, arguments);
+  }
+  function _handleClick() {
+    _handleClick = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var value;
+      return (0, _regeneratorRuntime2.default)().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 (0, _jsxRuntime.jsx)(_button.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    disabled: disabled,
+    onClick: handleClick
+  }));
+}

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDebug = useDebug;
+var _ = require("./..");
+var _reactUse = require("react-use");
+var _constant = require("./constant");
+function useDebug() {
+  var _useFormContext = (0, _.useFormContext)(),
+    form = _useFormContext.form,
+    debug = _useFormContext.debug;
+  (0, _reactUse.useMount)(function () {
+    if (!debug) {
+      return;
+    }
+    form.registerMethod(_constant.registerMethods.onValidateFailed, function (error) {
+      console.warn('Form validate failed: ', error);
+    });
+  });
+}

package/lib/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;
+        prefixCls?: 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;
+        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 {};