@douyinfe/semi-ui 2.1.1 → 2.1.2

package/lib/cjs/modal/Modal.js

@@ -0,0 +1,437 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.destroyFns = exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _globalThis2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/global-this"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/modal/constants");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _modalFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation"));
+
+var _ModalContent = _interopRequireDefault(require("./ModalContent"));
+
+var _portal = _interopRequireDefault(require("../_portal"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _confirm = _interopRequireWildcard(require("../modal/confirm"));
+
+var _useModal = _interopRequireDefault(require("../modal/useModal"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable react/destructuring-assignment, prefer-const, @typescript-eslint/no-unused-vars */
+
+
+const destroyFns = [];
+exports.destroyFns = destroyFns;
+
+class Modal extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleCancel = e => {
+      this.foundation.handleCancel(e);
+    };
+
+    this.handleOk = e => {
+      this.foundation.handleOk(e);
+    };
+
+    this.updateHiddenState = () => {
+      const {
+        visible
+      } = this.props;
+      const {
+        hidden
+      } = this.state;
+
+      if (!visible && !hidden) {
+        this.foundation.toggleHidden(true, () => this.foundation.afterClose());
+      } else if (visible && this.state.hidden) {
+        this.foundation.toggleHidden(false);
+      }
+    };
+
+    this.renderFooter = () => {
+      const {
+        okText,
+        okType,
+        cancelText,
+        confirmLoading,
+        cancelLoading,
+        hasCancel
+      } = this.props;
+
+      const getCancelButton = locale => {
+        if (!hasCancel) {
+          return null;
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+            onClick: this.handleCancel,
+            loading: cancelLoading,
+            type: "tertiary"
+          }, this.props.cancelButtonProps), cancelText || locale.cancel);
+        }
+      };
+
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Modal"
+      }, (locale, localeCode) => /*#__PURE__*/_react.default.createElement("div", null, getCancelButton(locale), /*#__PURE__*/_react.default.createElement(_button.default, (0, _assign.default)({
+        type: okType,
+        theme: "solid",
+        loading: confirmLoading,
+        onClick: this.handleOk
+      }, this.props.okButtonProps), okText || locale.confirm)));
+    }; // getDialog = () => {
+    //     const {
+    //         footer,
+    //         ...restProps
+    //     } = this.props;
+    //     const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
+    //     return <ModalContent {...restProps} footer={renderFooter} onClose={this.handleCancel}/>;
+    // };
+
+
+    this.renderDialog = () => {
+      let _a = this.props,
+          {
+        footer,
+        className,
+        motion,
+        maskStyle: maskStyleFromProps,
+        keepDOM,
+        style: styleFromProps,
+        zIndex,
+        getPopupContainer,
+        visible
+      } = _a,
+          restProps = __rest(_a, ["footer", "className", "motion", "maskStyle", "keepDOM", "style", "zIndex", "getPopupContainer", "visible"]);
+
+      let style = styleFromProps;
+      const maskStyle = maskStyleFromProps;
+      const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
+
+      if (this.props.centered) {
+        style = (0, _assign.default)({
+          transform: 'translateY(-50%)',
+          top: '50%'
+        }, style);
+      }
+
+      let wrapperStyle = {
+        zIndex
+      };
+
+      if (getPopupContainer) {
+        wrapperStyle = {
+          zIndex,
+          position: 'static'
+        };
+      }
+
+      const classList = (0, _classnames.default)(className, {
+        ["".concat(_constants.cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.hidden && !visible
+      });
+      const contentClassName = motion ? (0, _classnames.default)({
+        ["".concat(_constants.cssClasses.DIALOG, "-content-animate-hide")]: !visible,
+        ["".concat(_constants.cssClasses.DIALOG, "-content-animate-show")]: visible
+      }) : null;
+      const maskClassName = motion ? (0, _classnames.default)({
+        ["".concat(_constants.cssClasses.DIALOG, "-mask-animate-hide")]: !visible,
+        ["".concat(_constants.cssClasses.DIALOG, "-mask-animate-show")]: visible
+      }) : null;
+      return /*#__PURE__*/_react.default.createElement(_portal.default, {
+        style: wrapperStyle,
+        getPopupContainer: getPopupContainer
+      }, /*#__PURE__*/_react.default.createElement(_ModalContent.default, (0, _assign.default)({}, restProps, {
+        isFullScreen: this.state.isFullScreen,
+        contentClassName: contentClassName,
+        maskClassName: maskClassName,
+        className: classList,
+        getPopupContainer: getPopupContainer,
+        maskStyle: maskStyle,
+        style: style,
+        ref: this.modalRef,
+        onAnimationEnd: () => {
+          this.updateHiddenState();
+        },
+        footer: renderFooter,
+        onClose: this.handleCancel
+      })));
+    };
+
+    this.state = {
+      hidden: !props.visible,
+      isFullScreen: props.fullScreen
+    };
+    this.foundation = new _modalFoundation.default(this.adapter);
+    this.modalRef = /*#__PURE__*/_react.default.createRef();
+    this.bodyOverflow = '';
+    this.scrollBarWidth = 0;
+    this.originBodyWith = '100%';
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      getProps: () => this.props,
+      disabledBodyScroll: () => {
+        const {
+          getPopupContainer
+        } = this.props;
+        this.bodyOverflow = document.body.style.overflow || '';
+
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          var _context;
+
+          document.body.style.overflow = 'hidden';
+          document.body.style.width = (0, _concat.default)(_context = "calc(".concat(this.originBodyWith || '100%', " - ")).call(_context, this.scrollBarWidth, "px)");
+        }
+      },
+      enabledBodyScroll: () => {
+        const {
+          getPopupContainer
+        } = this.props;
+
+        if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
+          document.body.style.overflow = this.bodyOverflow;
+          document.body.style.width = this.originBodyWith;
+        }
+      },
+      notifyCancel: e => {
+        this.props.onCancel(e);
+      },
+      notifyOk: e => {
+        this.props.onOk(e);
+      },
+      notifyClose: () => {
+        this.props.afterClose();
+      },
+      toggleHidden: (hidden, callback) => {
+        if (hidden !== this.state.hidden) {
+          this.setState({
+            hidden
+          }, callback || _noop2.default);
+        }
+      },
+      notifyFullScreen: isFullScreen => {
+        if (isFullScreen !== this.state.isFullScreen) {
+          this.setState({
+            isFullScreen
+          });
+        }
+      }
+    });
+  }
+
+  static getDerivedStateFromProps(props, prevState) {
+    const newState = {};
+
+    if (props.fullScreen !== prevState.isFullScreen) {
+      newState.isFullScreen = props.fullScreen;
+    }
+
+    return newState;
+  }
+
+  static getScrollbarWidth() {
+    if (_globalThis2.default && Object.prototype.toString.call(_globalThis2.default) === '[object Window]') {
+      return window.innerWidth - document.documentElement.clientWidth;
+    }
+
+    return 0;
+  }
+
+  componentDidMount() {
+    this.scrollBarWidth = Modal.getScrollbarWidth();
+    this.originBodyWith = document.body.style.width;
+
+    if (this.props.visible) {
+      this.foundation.beforeShow();
+      this._active = this._active || this.props.visible;
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // hide => show
+    if (!prevProps.visible && this.props.visible) {
+      this.foundation.beforeShow();
+    } // show => hide
+
+
+    if (prevProps.visible && !this.props.visible) {
+      this.foundation.afterHide();
+    }
+
+    if (!this.props.motion) {
+      this.updateHiddenState();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.visible) {
+      this.foundation.destroy();
+    }
+  }
+
+  render() {
+    const {
+      visible,
+      keepDOM,
+      lazyRender
+    } = this.props;
+    this._active = this._active || visible;
+    const shouldRender = (visible || keepDOM) && (!lazyRender || this._active) || !this.state.hidden;
+
+    if (shouldRender) {
+      return this.renderDialog();
+    }
+
+    return null;
+  }
+
+}
+
+Modal.propTypes = {
+  mask: _propTypes.default.bool,
+  closable: _propTypes.default.bool,
+  centered: _propTypes.default.bool,
+  visible: _propTypes.default.bool,
+  width: _propTypes.default.number,
+  height: _propTypes.default.number,
+  confirmLoading: _propTypes.default.bool,
+  cancelLoading: _propTypes.default.bool,
+  okText: _propTypes.default.string,
+  okType: _propTypes.default.string,
+  cancelText: _propTypes.default.string,
+  maskClosable: _propTypes.default.bool,
+  onCancel: _propTypes.default.func,
+  onOk: _propTypes.default.func,
+  afterClose: _propTypes.default.func,
+  okButtonProps: _propTypes.default.object,
+  cancelButtonProps: _propTypes.default.object,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  maskStyle: _propTypes.default.object,
+  bodyStyle: _propTypes.default.object,
+  zIndex: _propTypes.default.number,
+  title: _propTypes.default.node,
+  icon: _propTypes.default.node,
+  header: _propTypes.default.node,
+  footer: _propTypes.default.node,
+  hasCancel: _propTypes.default.bool,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  children: _propTypes.default.node,
+  getPopupContainer: _propTypes.default.func,
+  getContainerContext: _propTypes.default.func,
+  maskFixed: _propTypes.default.bool,
+  closeIcon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  closeOnEsc: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE),
+  keepDOM: _propTypes.default.bool,
+  lazyRender: _propTypes.default.bool,
+  direction: _propTypes.default.oneOf(_constants.strings.directions),
+  fullScreen: _propTypes.default.bool
+};
+Modal.defaultProps = {
+  zIndex: 1000,
+  motion: true,
+  mask: true,
+  centered: false,
+  closable: true,
+  visible: false,
+  confirmLoading: false,
+  cancelLoading: false,
+  okType: 'primary',
+  maskClosable: true,
+  hasCancel: true,
+  onCancel: _noop2.default,
+  onOk: _noop2.default,
+  afterClose: _noop2.default,
+  maskFixed: false,
+  closeOnEsc: false,
+  size: 'small',
+  keepDOM: false,
+  lazyRender: true,
+  fullScreen: false
+};
+Modal.useModal = _useModal.default;
+
+Modal.info = function (props) {
+  return (0, _confirm.default)((0, _confirm.withInfo)(props));
+};
+
+Modal.success = function (props) {
+  return (0, _confirm.default)((0, _confirm.withSuccess)(props));
+};
+
+Modal.error = function (props) {
+  return (0, _confirm.default)((0, _confirm.withError)(props));
+};
+
+Modal.warning = function (props) {
+  return (0, _confirm.default)((0, _confirm.withWarning)(props));
+};
+
+Modal.confirm = function (props) {
+  return (0, _confirm.default)((0, _confirm.withConfirm)(props));
+};
+
+Modal.destroyAll = function destroyAllFn() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+};
+
+var _default = Modal;
+exports.default = _default;

package/lib/cjs/modal/ModalContent.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent from '../_base/baseComponent';
+import { ModalContentAdapter, ModalContentProps, ModalContentState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation';
+export default class ModalContent extends BaseComponent<ModalContentProps, ModalContentState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static propTypes: {
+        close: PropTypes.Requireable<(...args: any[]) => any>;
+        getContainerContext: PropTypes.Requireable<(...args: any[]) => any>;
+        contentClassName: PropTypes.Requireable<string>;
+        maskClassName: PropTypes.Requireable<string>;
+        onAnimationEnd: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        close: (...args: any[]) => void;
+        getContainerContext: (...args: any[]) => void;
+        contentClassName: string;
+        maskClassName: string;
+    };
+    dialogId: string;
+    private timeoutId;
+    constructor(props: ModalContentProps);
+    get adapter(): ModalContentAdapter;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onKeyDown: (e: React.MouseEvent) => void;
+    onDialogMouseDown: () => void;
+    onMaskMouseUp: () => void;
+    onMaskClick: (e: React.MouseEvent) => void;
+    close: (e: React.MouseEvent) => void;
+    getMaskElement: () => JSX.Element;
+    renderCloseBtn: () => any;
+    renderIcon: () => JSX.Element;
+    renderHeader: () => any;
+    renderBody: () => JSX.Element;
+    getDialogElement: () => JSX.Element;
+    render(): JSX.Element;
+}