@douyinfe/semi-ui 2.1.0-next.0 → 2.1.0

package/lib/cjs/modal/Modal.js

@@ -1,437 +0,0 @@
-"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 _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"));
-
-var _lodashEs = require("lodash-es");
-
-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 || _lodashEs.noop);
-        }
-      },
-      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: _lodashEs.noop,
-  onOk: _lodashEs.noop,
-  afterClose: _lodashEs.noop,
-  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

@@ -1,38 +0,0 @@
-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;
-}