doui-react 1.0.0

package/es/open-modal/component/title.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+interface TitleProps {
+    children: ReactNode;
+}
+export declare function Title({ children }: TitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/es/open-modal/component/title.js

@@ -0,0 +1,12 @@
+import { Portal } from "../../portal";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function Title(_ref) {
+  var children = _ref.children;
+  return _jsx(Portal, {
+    container: function container(current) {
+      var _current$closest;
+      return (_current$closest = current.closest('.ant-modal-content')) === null || _current$closest === void 0 ? void 0 : _current$closest.querySelector('.ant-modal-title');
+    },
+    children: children
+  });
+}

package/es/open-modal/component/use-modal.d.ts

@@ -0,0 +1,14 @@
+import { OpenModalProps } from "..";
+export declare function useModal({ context: outerContext, ...props }: OpenModalProps): {
+    open: boolean;
+    context: {
+        form: any;
+        confirmLoading: boolean;
+        isValidForm: boolean;
+        setModalProps: (parameter: Partial<OpenModalProps>) => void;
+        close: () => Promise<void>;
+        ok: () => Promise<void>;
+    };
+    modalProps: any;
+    formProps: any;
+};

package/es/open-modal/component/use-modal.js

@@ -0,0 +1,177 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["disableButtonOnValidateFailure"],
+  _excluded2 = ["onValidate"],
+  _excluded3 = ["context"],
+  _excluded4 = ["unmount", "onOk", "onCancel"];
+import { useForm } from "../../form";
+import delay from 'delay';
+import _ from 'lodash';
+import { useCallback, useState } from 'react';
+import { getModalAndFormProps, shouldEnableButton } from "./utils";
+function useModalAndFormProps(props) {
+  var form = useForm();
+  var _getModalAndFormProps = getModalAndFormProps(props),
+    _getModalAndFormProps2 = _getModalAndFormProps.modalProps,
+    disableButtonOnValidateFailure = _getModalAndFormProps2.disableButtonOnValidateFailure,
+    restModalProps = _objectWithoutProperties(_getModalAndFormProps2, _excluded),
+    _getModalAndFormProps3 = _getModalAndFormProps.formProps,
+    onValidate = _getModalAndFormProps3.onValidate,
+    formProps = _objectWithoutProperties(_getModalAndFormProps3, _excluded2);
+  var _useState = useState(restModalProps),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalProps = _useState2[0],
+    setModalProps = _useState2[1];
+  var updateModalProps = useCallback(function (parameter) {
+    setModalProps(function (oldProps) {
+      return _.merge({}, oldProps, parameter);
+    });
+  }, []);
+  var handleValidate = function handleValidate(valid) {
+    var _modalProps$okButtonP;
+    var disabled = !shouldEnableButton({
+      disabled: disableButtonOnValidateFailure,
+      valid: valid,
+      form: form,
+      onValidate: onValidate
+    });
+
+    // 优化：减少 render 次数
+    if (disabled !== ((_modalProps$okButtonP = modalProps.okButtonProps) === null || _modalProps$okButtonP === void 0 ? void 0 : _modalProps$okButtonP.disabled)) {
+      updateModalProps({
+        okButtonProps: {
+          disabled: disabled
+        }
+      });
+    }
+  };
+  return {
+    modalProps: modalProps,
+    formProps: _objectSpread(_objectSpread({
+      form: form
+    }, formProps), {}, {
+      onValidate: handleValidate
+    }),
+    setModalProps: updateModalProps
+  };
+}
+export function useModal(_ref) {
+  var outerContext = _ref.context,
+    props = _objectWithoutProperties(_ref, _excluded3);
+  var unmount = props.unmount,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
+    restProps = _objectWithoutProperties(props, _excluded4);
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    confirmLoading = _useState6[0],
+    setConfirmLoading = _useState6[1];
+  var _useModalAndFormProps = useModalAndFormProps(restProps),
+    modalProps = _useModalAndFormProps.modalProps,
+    formProps = _useModalAndFormProps.formProps,
+    setModalProps = _useModalAndFormProps.setModalProps;
+  var form = formProps.form;
+  function handleOk() {
+    return _handleOk.apply(this, arguments);
+  }
+  function _handleOk() {
+    _handleOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var values, res;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return form.submit();
+          case 3:
+            values = _context.sent;
+            setConfirmLoading(true);
+            _context.next = 7;
+            return onOk === null || onOk === void 0 ? void 0 : onOk(values, form);
+          case 7:
+            res = _context.sent;
+            closeModal(res);
+          case 9:
+            _context.prev = 9;
+            setConfirmLoading(false);
+            return _context.finish(9);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0,, 9, 12]]);
+    }));
+    return _handleOk.apply(this, arguments);
+  }
+  function handleCancel() {
+    return _handleCancel.apply(this, arguments);
+  } // 内部方法: 关闭Modal
+  function _handleCancel() {
+    _handleCancel = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var res;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+          case 2:
+            res = _context2.sent;
+            closeModal(res);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _handleCancel.apply(this, arguments);
+  }
+  function closeModal(_x) {
+    return _closeModal.apply(this, arguments);
+  }
+  function _closeModal() {
+    _closeModal = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(shouldClose) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(shouldClose === false)) {
+              _context3.next = 2;
+              break;
+            }
+            return _context3.abrupt("return");
+          case 2:
+            setOpen(false);
+            // 等待动画结束，再卸载DOM
+            _context3.next = 5;
+            return delay(150);
+          case 5:
+            unmount === null || unmount === void 0 || unmount();
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return _closeModal.apply(this, arguments);
+  }
+  var context = _objectSpread(_objectSpread({}, outerContext), {}, {
+    form: form,
+    confirmLoading: confirmLoading,
+    isValidForm: !modalProps.okButtonProps.disabled,
+    setModalProps: setModalProps,
+    close: handleCancel,
+    ok: handleOk
+  });
+  return {
+    open: open,
+    context: context,
+    modalProps: modalProps,
+    formProps: formProps
+  };
+}

package/es/open-modal/component/utils.d.ts

@@ -0,0 +1,11 @@
+import { FormInstance, FormProps } from "../../form";
+import { OpenModalProps } from '../type';
+export declare function getModalAndFormProps(props: OpenModalProps): any;
+interface EnableButtonProps {
+    valid: boolean;
+    form: FormInstance;
+    onValidate?: FormProps['onValidate'];
+    disabled?: boolean;
+}
+export declare function shouldEnableButton({ disabled, onValidate, valid, form }: EnableButtonProps): boolean;
+export {};

package/es/open-modal/component/utils.js

@@ -0,0 +1,109 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "content"],
+  _excluded2 = ["top", "showCancel", "showOk", "bodyBottomMargin", "maskClosable", "titleCenter", "wrapStyle", "wrapClassName"];
+import { transformValueWithStyleUnit } from "../../api";
+import { cx } from '@emotion/css';
+import _ from 'lodash';
+import style from "../style";
+import { getWrapStyle } from "../style/wrap";
+import { formPropsKeys } from "./constant";
+import { Footer } from "./footer";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+function getModalFormProps(props) {
+  var _ref = _.pick(props, formPropsKeys),
+    children = _ref.children,
+    content = _ref.content,
+    formProps = _objectWithoutProperties(_ref, _excluded);
+  var Component = children !== null && children !== void 0 ? children : content;
+  if (_.isArray(Component)) {
+    return _objectSpread(_objectSpread({}, formProps), {}, {
+      items: Component
+    });
+  }
+  if (_.isFunction(Component)) {
+    return _objectSpread(_objectSpread({}, formProps), {}, {
+      children: _jsx(Component, {})
+    });
+  }
+  return _objectSpread(_objectSpread({}, formProps), {}, {
+    children: Component
+  });
+}
+export function getModalAndFormProps(props) {
+  // Form Props
+  var formProps = getModalFormProps(props);
+  if (formProps.footer) {
+    formProps.footer = _jsx(Footer, {
+      children: formProps.footer
+    });
+  }
+
+  // Modal Props
+  var _$omit = _.omit(props, formPropsKeys),
+    top = _$omit.top,
+    _$omit$showCancel = _$omit.showCancel,
+    showCancel = _$omit$showCancel === void 0 ? true : _$omit$showCancel,
+    _$omit$showOk = _$omit.showOk,
+    showOk = _$omit$showOk === void 0 ? true : _$omit$showOk,
+    bodyBottomMargin = _$omit.bodyBottomMargin,
+    _$omit$maskClosable = _$omit.maskClosable,
+    maskClosable = _$omit$maskClosable === void 0 ? false : _$omit$maskClosable,
+    titleCenter = _$omit.titleCenter,
+    wrapStyle = _$omit.wrapStyle,
+    wrapClassName = _$omit.wrapClassName,
+    modalProps = _objectWithoutProperties(_$omit, _excluded2);
+  var mergedModalProps = _.merge({
+    okButtonProps: {
+      disabled: true,
+      style: {
+        display: showOk ? 'unset' : 'none'
+      }
+    },
+    cancelButtonProps: {
+      style: {
+        display: showCancel ? 'unset' : 'none',
+        color: '#44566c'
+      }
+    },
+    maskClosable: maskClosable,
+    keyboard: maskClosable,
+    autoFocusButton: null,
+    focusTriggerAfterClose: false,
+    footer: _.isNull(formProps.footer) ? null : undefined,
+    // 为 null 时，不显示 footer
+    css: style.wrapper({
+      bodyBottomMargin: getBodyBottomMargin(bodyBottomMargin, formProps),
+      titleCenter: titleCenter
+    }),
+    style: modalProps.centered ? {} : {
+      top: top
+    },
+    wrapClassName: cx(getWrapStyle(wrapStyle), wrapClassName)
+  }, modalProps);
+  return {
+    formProps: formProps,
+    modalProps: mergedModalProps
+  };
+}
+function getBodyBottomMargin(bodyBottomMargin, formProps) {
+  var _formProps$items;
+  if (!_.isNil(bodyBottomMargin)) {
+    return transformValueWithStyleUnit(bodyBottomMargin);
+  }
+  if ((_formProps$items = formProps.items) !== null && _formProps$items !== void 0 && _formProps$items.length) {
+    return '10px';
+  }
+}
+export function shouldEnableButton(_ref2) {
+  var _onValidate;
+  var disabled = _ref2.disabled,
+    onValidate = _ref2.onValidate,
+    valid = _ref2.valid,
+    form = _ref2.form;
+  if (disabled === false) {
+    return true;
+  }
+  var isValid = (_onValidate = onValidate === null || onValidate === void 0 ? void 0 : onValidate(valid, form)) !== null && _onValidate !== void 0 ? _onValidate : true;
+  return isValid && valid;
+}

package/es/open-modal/hook/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ModalContext } from '../type';
+export * from './use-modal';
+export declare function ModalProvider({ children, ...props }: ModalContext & {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useModalContext(): ModalContext;

package/es/open-modal/hook/index.js

@@ -0,0 +1,17 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import { createContext, useContext } from 'react';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export * from "./use-modal";
+var ModalCtx = /*#__PURE__*/createContext({});
+export function ModalProvider(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(ModalCtx.Provider, {
+    value: props,
+    children: children
+  });
+}
+export function useModalContext() {
+  return useContext(ModalCtx);
+}

package/es/open-modal/hook/use-modal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { OpenModalProps } from '../type';
+export declare function useModal(): {
+    component: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+    open: (props: OpenModalProps) => Function;
+};

package/es/open-modal/hook/use-modal.js

@@ -0,0 +1,27 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import usePatchElement from 'antd/lib/_util/hooks/usePatchElement';
+import _ from 'lodash';
+import { Modal } from "../component";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function useModal() {
+  var _usePatchElement = usePatchElement(),
+    _usePatchElement2 = _slicedToArray(_usePatchElement, 2),
+    component = _usePatchElement2[0],
+    patchElement = _usePatchElement2[1];
+  function open(props) {
+    var close = undefined;
+    var modal = _jsx(Modal, _objectSpread(_objectSpread({}, props), {}, {
+      unmount: function unmount() {
+        var _close;
+        return (_close = close) === null || _close === void 0 ? void 0 : _close();
+      }
+    }), _.uniqueId());
+    close = patchElement(modal);
+    return close;
+  }
+  return {
+    component: component,
+    open: open
+  };
+}

package/es/open-modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './hook';
+export * from './type';

package/es/open-modal/index.js

@@ -0,0 +1,3 @@
+export * from "./component";
+export * from "./hook";
+export * from "./type";

package/es/open-modal/style/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenModalProps } from "..";
+declare const style: {
+    wrapper: ({ bodyBottomMargin, titleCenter }: OpenModalProps) => import("@emotion/react").SerializedStyles;
+};
+export default style;

package/es/open-modal/style/index.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { commonFontFamily } from "../../api";
+import { css } from '@emotion/react';
+function titleStyle(titleCenter) {
+  if (titleCenter) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      text-align: center;\n    "])));
+  }
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-right: 20px;\n  "])));
+}
+var style = {
+  wrapper: function wrapper(_ref) {
+    var bodyBottomMargin = _ref.bodyBottomMargin,
+      titleCenter = _ref.titleCenter;
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n\n    .ant-modal-title {\n      font-weight: 600;\n      ", "\n    }\n\n    .ant-modal-body {\n      padding-bottom: ", ";\n    }\n  "])), commonFontFamily, titleStyle(titleCenter), bodyBottomMargin);
+  }
+};
+export default style;

package/es/open-modal/style/wrap.d.ts

@@ -0,0 +1,2 @@
+import { CSSObject } from '@emotion/react';
+export declare function getWrapStyle(wrapStyle?: CSSObject): string;

package/es/open-modal/style/wrap.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { css } from '@emotion/css';
+export function getWrapStyle(wrapStyle) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.ant-modal-centered .ant-select-dropdown {\n      text-align: left;\n    }\n\n    ", "\n  "])), wrapStyle);
+}

package/es/open-modal/type/index.d.ts

@@ -0,0 +1,91 @@
+import { FunctionReturn } from "../../api";
+import { FormInstance, FormItemProps, FormProps, FormValues } from "../../form";
+import { CSSObject } from '@emotion/react';
+import { ModalProps as AntdModalProps } from 'antd/lib/modal/Modal';
+import { ReactNode } from 'react';
+type AntdComponentProps = Omit<AntdModalProps, 'onOk' | 'children'> & Omit<FormProps, 'children' | 'content' | 'title'>;
+/**
+ * @noExtends
+ */
+export interface OpenModalProps extends AntdComponentProps {
+    /**
+     * @description 弹窗内容，当该值为数组时，会自动显示为表单
+     * @link FormItemProps: /components/form#formitem
+     * @default (必选)
+     */
+    children?: FormItemProps[] | ReactNode | (() => ReactNode);
+    content?: OpenModalProps['children'];
+    /**
+     * @description 是否显示取消按钮
+     * @default true
+     */
+    showCancel?: boolean;
+    /**
+     * @description 是否显示确定按钮
+     * @default true
+     */
+    showOk?: boolean;
+    /**
+     * @description 顶部距离
+     * @default 100px
+     */
+    top?: string | number;
+    disableButtonOnValidateFailure?: boolean;
+    title?: ReactNode;
+    titleCenter?: boolean;
+    /**
+     * 打开弹框时，是否禁用页面滚动
+     */
+    hideBodyScroll?: boolean;
+    /**
+     * @description 底部边距
+     * @default 24px
+     */
+    bodyBottomMargin?: number | string;
+    /**
+     * @description 对话框外层容器的样式
+     */
+    wrapStyle?: CSSObject;
+    /**
+     * @description 点击取消按钮的回调
+     */
+    onCancel?(): FunctionReturn<boolean | void>;
+    /**
+     * @description 点击确定按钮的回调
+     * @link FormInstance: /components/form#forminstance
+     */
+    onOk?(values: FormValues, form: FormInstance): FunctionReturn<boolean | void>;
+    /**
+     * @description 关闭弹框时的回调
+     */
+    unmount?: () => void;
+}
+export interface ModalContext {
+    /**
+     * @description 表单实例
+     * @link FormInstance: /components/form#forminstance
+     */
+    form: FormInstance;
+    /**
+     * @description 表单是否校验通过
+     */
+    isValidForm: boolean;
+    /**
+     * @description 确认按钮加载状态
+     */
+    confirmLoading: boolean;
+    /**
+     * @description 确认弹窗
+     */
+    ok(): void;
+    /**
+     * @description 关闭弹窗
+     */
+    close(): void;
+    /**
+     * @description 设置弹窗属性
+     * @link OpenModalProps: #api
+     */
+    setModalProps(props: Partial<OpenModalProps>): void;
+}
+export {};

package/es/open-modal/type/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import { PortalProps } from "..";
+export declare function Portal({ children, container }: PortalProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/es/portal/component/index.js

@@ -0,0 +1,40 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { $, executeFunction } from "../../api";
+import _ from 'lodash';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMount } from 'react-use';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export function Portal(_ref) {
+  var children = _ref.children,
+    container = _ref.container;
+  var ref = useRef(null);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    to = _useState2[0],
+    setTo = _useState2[1];
+  useMount( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var target, el, to;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return executeFunction(container, ref.current);
+        case 2:
+          target = _context.sent;
+          el = target || document.body;
+          to = _.isString(el) ? $(el) : el;
+          setTo(to);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  return _jsx("div", {
+    ref: ref,
+    children: to && /*#__PURE__*/createPortal(children, to)
+  });
+}

package/es/portal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './type';

package/es/portal/index.js

@@ -0,0 +1,2 @@
+export * from "./component";
+export * from "./type";

package/es/portal/type/index.d.ts

@@ -0,0 +1,13 @@
+import { FunctionReturn } from "../../api";
+import { ReactNode } from 'react';
+type Container = Element | string | null | undefined;
+export interface PortalProps {
+    children: ReactNode;
+    /**
+     * @description 渲染位置
+     * @default document.body
+     * @replaceAll string | Element
+     */
+    container?: Container | ((current: HTMLElement) => FunctionReturn<Container>);
+}
+export {};

package/es/portal/type/index.js

@@ -0,0 +1 @@
+export {};