doui-react 1.0.0

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

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModal = useModal;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _form = require("../../form");
+var _delay = _interopRequireDefault(require("delay"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _utils = require("./utils");
+var _excluded = ["disableButtonOnValidateFailure"],
+  _excluded2 = ["onValidate"],
+  _excluded3 = ["context"],
+  _excluded4 = ["unmount", "onOk", "onCancel"];
+function useModalAndFormProps(props) {
+  var form = (0, _form.useForm)();
+  var _getModalAndFormProps = (0, _utils.getModalAndFormProps)(props),
+    _getModalAndFormProps2 = _getModalAndFormProps.modalProps,
+    disableButtonOnValidateFailure = _getModalAndFormProps2.disableButtonOnValidateFailure,
+    restModalProps = (0, _objectWithoutProperties2.default)(_getModalAndFormProps2, _excluded),
+    _getModalAndFormProps3 = _getModalAndFormProps.formProps,
+    onValidate = _getModalAndFormProps3.onValidate,
+    formProps = (0, _objectWithoutProperties2.default)(_getModalAndFormProps3, _excluded2);
+  var _useState = (0, _react.useState)(restModalProps),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    modalProps = _useState2[0],
+    setModalProps = _useState2[1];
+  var updateModalProps = (0, _react.useCallback)(function (parameter) {
+    setModalProps(function (oldProps) {
+      return _lodash.default.merge({}, oldProps, parameter);
+    });
+  }, []);
+  var handleValidate = function handleValidate(valid) {
+    var _modalProps$okButtonP;
+    var disabled = !(0, _utils.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: (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      form: form
+    }, formProps), {}, {
+      onValidate: handleValidate
+    }),
+    setModalProps: updateModalProps
+  };
+}
+function useModal(_ref) {
+  var outerContext = _ref.context,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+  var unmount = props.unmount,
+    onOk = props.onOk,
+    onCancel = props.onCancel,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded4);
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var values, res;
+      return (0, _regeneratorRuntime2.default)().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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      var res;
+      return (0, _regeneratorRuntime2.default)().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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(shouldClose) {
+      return (0, _regeneratorRuntime2.default)().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 (0, _delay.default)(150);
+          case 5:
+            unmount === null || unmount === void 0 || unmount();
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return _closeModal.apply(this, arguments);
+  }
+  var context = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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/lib/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/lib/open-modal/component/utils.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getModalAndFormProps = getModalAndFormProps;
+exports.shouldEnableButton = shouldEnableButton;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _css = require("@emotion/css");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _style = _interopRequireDefault(require("../style"));
+var _wrap = require("../style/wrap");
+var _constant = require("./constant");
+var _footer = require("./footer");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["children", "content"],
+  _excluded2 = ["top", "showCancel", "showOk", "bodyBottomMargin", "maskClosable", "titleCenter", "wrapStyle", "wrapClassName"];
+function getModalFormProps(props) {
+  var _ref = _lodash.default.pick(props, _constant.formPropsKeys),
+    children = _ref.children,
+    content = _ref.content,
+    formProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = children !== null && children !== void 0 ? children : content;
+  if (_lodash.default.isArray(Component)) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
+      items: Component
+    });
+  }
+  if (_lodash.default.isFunction(Component)) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
+      children: (0, _jsxRuntime.jsx)(Component, {})
+    });
+  }
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
+    children: Component
+  });
+}
+function getModalAndFormProps(props) {
+  // Form Props
+  var formProps = getModalFormProps(props);
+  if (formProps.footer) {
+    formProps.footer = (0, _jsxRuntime.jsx)(_footer.Footer, {
+      children: formProps.footer
+    });
+  }
+
+  // Modal Props
+  var _$omit = _lodash.default.omit(props, _constant.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 = (0, _objectWithoutProperties2.default)(_$omit, _excluded2);
+  var mergedModalProps = _lodash.default.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: _lodash.default.isNull(formProps.footer) ? null : undefined,
+    // 为 null 时，不显示 footer
+    css: _style.default.wrapper({
+      bodyBottomMargin: getBodyBottomMargin(bodyBottomMargin, formProps),
+      titleCenter: titleCenter
+    }),
+    style: modalProps.centered ? {} : {
+      top: top
+    },
+    wrapClassName: (0, _css.cx)((0, _wrap.getWrapStyle)(wrapStyle), wrapClassName)
+  }, modalProps);
+  return {
+    formProps: formProps,
+    modalProps: mergedModalProps
+  };
+}
+function getBodyBottomMargin(bodyBottomMargin, formProps) {
+  var _formProps$items;
+  if (!_lodash.default.isNil(bodyBottomMargin)) {
+    return (0, _api.transformValueWithStyleUnit)(bodyBottomMargin);
+  }
+  if ((_formProps$items = formProps.items) !== null && _formProps$items !== void 0 && _formProps$items.length) {
+    return '10px';
+  }
+}
+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/lib/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/lib/open-modal/hook/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ModalProvider: true,
+  useModalContext: true
+};
+exports.ModalProvider = ModalProvider;
+exports.useModalContext = useModalContext;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _useModal = require("./use-modal");
+Object.keys(_useModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useModal[key];
+    }
+  });
+});
+var _excluded = ["children"];
+var ModalCtx = /*#__PURE__*/(0, _react.createContext)({});
+function ModalProvider(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(ModalCtx.Provider, {
+    value: props,
+    children: children
+  });
+}
+function useModalContext() {
+  return (0, _react.useContext)(ModalCtx);
+}

package/lib/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/lib/open-modal/hook/use-modal.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useModal = useModal;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _usePatchElement3 = _interopRequireDefault(require("antd/lib/_util/hooks/usePatchElement"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _component = require("../component");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function useModal() {
+  var _usePatchElement = (0, _usePatchElement3.default)(),
+    _usePatchElement2 = (0, _slicedToArray2.default)(_usePatchElement, 2),
+    component = _usePatchElement2[0],
+    patchElement = _usePatchElement2[1];
+  function open(props) {
+    var close = undefined;
+    var modal = (0, _jsxRuntime.jsx)(_component.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      unmount: function unmount() {
+        var _close;
+        return (_close = close) === null || _close === void 0 ? void 0 : _close();
+      }
+    }), _lodash.default.uniqueId());
+    close = patchElement(modal);
+    return close;
+  }
+  return {
+    component: component,
+    open: open
+  };
+}

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

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

package/lib/open-modal/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _component = require("./component");
+Object.keys(_component).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _component[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _component[key];
+    }
+  });
+});
+var _hook = require("./hook");
+Object.keys(_hook).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _hook[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hook[key];
+    }
+  });
+});
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/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/lib/open-modal/style/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _api = require("../../api");
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3;
+function titleStyle(titleCenter) {
+  if (titleCenter) {
+    return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      text-align: center;\n    "])));
+  }
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding-right: 20px;\n  "])));
+}
+var style = {
+  wrapper: function wrapper(_ref) {
+    var bodyBottomMargin = _ref.bodyBottomMargin,
+      titleCenter = _ref.titleCenter;
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n\n    .ant-modal-title {\n      font-weight: 600;\n      ", "\n    }\n\n    .ant-modal-body {\n      padding-bottom: ", ";\n    }\n  "])), _api.commonFontFamily, titleStyle(titleCenter), bodyBottomMargin);
+  }
+};
+var _default = exports.default = style;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWrapStyle = getWrapStyle;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _css = require("@emotion/css");
+var _templateObject;
+function getWrapStyle(wrapStyle) {
+  return (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.ant-modal-centered .ant-select-dropdown {\n      text-align: left;\n    }\n\n    ", "\n  "])), wrapStyle);
+}

package/lib/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/lib/open-modal/type/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Portal = Portal;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _api = require("../../api");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _reactUse = require("react-use");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function Portal(_ref) {
+  var children = _ref.children,
+    container = _ref.container;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    to = _useState2[0],
+    setTo = _useState2[1];
+  (0, _reactUse.useMount)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+    var target, el, to;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return (0, _api.executeFunction)(container, ref.current);
+        case 2:
+          target = _context.sent;
+          el = target || document.body;
+          to = _lodash.default.isString(el) ? (0, _api.$)(el) : el;
+          setTo(to);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    children: to && /*#__PURE__*/(0, _reactDom.createPortal)(children, to)
+  });
+}

package/lib/portal/index.d.ts

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