@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/modal/Modal.js

@@ -1,18 +1,13 @@
 import _noop from "lodash/noop";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(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 */
-
-
 import React from 'react';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/modal/constants';
 import Button from '../button';
@@ -28,26 +23,21 @@ import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } f
 import useModal from './useModal';
 import CSSAnimation from "../_cssAnimation";
 export const destroyFns = [];
-
 class Modal extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.handleCancel = e => {
       this.foundation.handleCancel(e);
     };
-
     this.handleOk = e => {
       this.foundation.handleOk(e);
     };
-
     this.updateState = () => {
       const {
         visible
       } = this.props;
       this.foundation.toggleDisplayNone(!visible);
     };
-
     this.renderFooter = () => {
       const {
         okText,
@@ -57,7 +47,6 @@ class Modal extends BaseComponent {
         cancelLoading,
         hasCancel
       } = this.props;
-
       const getCancelButton = locale => {
         if (!hasCancel) {
           return null;
@@ -73,7 +62,6 @@ class Modal extends BaseComponent {
           }), cancelText || locale.cancel);
         }
       };
-
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Modal"
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", null, getCancelButton(locale), /*#__PURE__*/React.createElement(Button, Object.assign({
@@ -85,7 +73,8 @@ class Modal extends BaseComponent {
       }, this.props.okButtonProps, {
         "x-semi-children-alias": "okText"
       }), okText || locale.confirm)));
-    }; // getDialog = () => {
+    };
+    // getDialog = () => {
     //     const {
     //         footer,
     //         ...restProps
@@ -93,48 +82,39 @@ class Modal extends BaseComponent {
     //     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"]);
-
+        {
+          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();
       let wrapperStyle = {
         zIndex
       };
-
       if (getPopupContainer) {
         wrapperStyle = {
           zIndex,
           position: 'static'
         };
       }
-
       const classList = cls(className, {
         [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.displayNone
       });
-      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
-      /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
-      ;
-
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */;
       if (shouldRender) {
         this._haveRendered = true;
       }
-
       return /*#__PURE__*/React.createElement(CSSAnimation, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
@@ -179,7 +159,6 @@ class Modal extends BaseComponent {
         });
       });
     };
-
     this.state = {
       displayNone: !props.visible,
       isFullScreen: props.fullScreen
@@ -190,7 +169,6 @@ class Modal extends BaseComponent {
     this.scrollBarWidth = 0;
     this.originBodyWidth = '100%';
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getProps: () => this.props,
@@ -199,7 +177,6 @@ class Modal extends BaseComponent {
           getPopupContainer
         } = this.props;
         this.bodyOverflow = document.body.style.overflow || '';
-
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
           document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
@@ -209,7 +186,6 @@ class Modal extends BaseComponent {
         const {
           getPopupContainer
         } = this.props;
-
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = this.bodyOverflow;
           document.body.style.width = this.originBodyWidth;
@@ -240,59 +216,47 @@ class Modal extends BaseComponent {
       }
     });
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const newState = {};
-
     if (props.fullScreen !== prevState.isFullScreen) {
       newState.isFullScreen = props.fullScreen;
     }
-
     if (props.visible && prevState.displayNone) {
       newState.displayNone = false;
-    } //
+    }
+    //
     // if (!props.visible && !props.motion && !prevState.displayNone) {
     //     newState.displayNone = true;
     // }
-
-
     return newState;
   }
-
   static getScrollbarWidth() {
     if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
       return window.innerWidth - document.documentElement.clientWidth;
     }
-
     return 0;
   }
-
   componentDidMount() {
     this.scrollBarWidth = Modal.getScrollbarWidth();
     this.originBodyWidth = document.body.style.width;
-
     if (this.props.visible) {
       this.foundation.beforeShow();
     }
   }
-
   componentDidUpdate(prevProps, prevState, snapshot) {
     // hide => show
     if (!prevProps.visible && this.props.visible) {
       this.foundation.beforeShow();
     }
-
     if (!prevState.displayNone && this.state.displayNone) {
       this.foundation.afterHide();
     }
   }
-
   componentWillUnmount() {
     if (this.props.visible) {
       this.foundation.destroy();
     }
   }
-
   render() {
     const {
       visible,
@@ -301,9 +265,7 @@ class Modal extends BaseComponent {
     } = this.props;
     return this.renderDialog();
   }
-
 }
-
 Modal.propTypes = {
   mask: PropTypes.bool,
   closable: PropTypes.bool,
@@ -366,35 +328,27 @@ Modal.defaultProps = {
   fullScreen: false
 };
 Modal.useModal = useModal;
-
 Modal.info = function (props) {
   return confirm(withInfo(props));
 };
-
 Modal.success = function (props) {
   return confirm(withSuccess(props));
 };
-
 Modal.error = function (props) {
   return confirm(withError(props));
 };
-
 Modal.warning = function (props) {
   return confirm(withWarning(props));
 };
-
 Modal.confirm = function (props) {
   return confirm(withConfirm(props));
 };
-
 Modal.destroyAll = function destroyAllFn() {
   while (destroyFns.length) {
     const close = destroyFns.pop();
-
     if (close) {
       close();
     }
   }
 };
-
 export default Modal;

package/lib/es/modal/ModalContent.js

@@ -1,20 +1,15 @@
 import _noop from "lodash/noop";
 import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable eqeqeq */
-
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
@@ -22,8 +17,8 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/modal/constants';
 import ConfigContext from '../configProvider/context';
 import Button from '../iconButton';
 import Typography from '../typography';
-import BaseComponent from '../_base/baseComponent'; // eslint-disable-next-line max-len
-
+import BaseComponent from '../_base/baseComponent';
+// eslint-disable-next-line max-len
 import ModalContentFoundation from '@douyinfe/semi-foundation/lib/es/modal/modalContentFoundation';
 import { IconClose } from '@douyinfe/semi-icons';
 import FocusTrapHandle from '@douyinfe/semi-foundation/lib/es/utils/FocusHandle';
@@ -31,40 +26,33 @@ let uuid = 0;
 export default class ModalContent extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.onKeyDown = e => {
       this.foundation.handleKeyDown(e);
-    }; // Record when clicking the modal box
-
-
+    };
+    // Record when clicking the modal box
     this.onDialogMouseDown = () => {
       this.foundation.handleDialogMouseDown();
-    }; // Cancel recording when clicking the modal box at the end
-
-
+    };
+    // Cancel recording when clicking the modal box at the end
     this.onMaskMouseUp = () => {
       this.foundation.handleMaskMouseUp();
-    }; // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
-
-
+    };
+    // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
     this.onMaskClick = e => {
       this.foundation.handleMaskClick(e);
     };
-
     this.close = e => {
       this.foundation.close(e);
     };
-
     this.getMaskElement = () => {
       const props = __rest(this.props, []);
-
       const {
         mask,
         maskClassName
       } = props;
-
       if (mask) {
-        const className = cls(`${cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = cls(`${cssClasses.DIALOG}-mask`, {
+          // [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/React.createElement("div", Object.assign({
           key: "mask"
@@ -73,17 +61,14 @@ export default class ModalContent extends BaseComponent {
           style: props.maskStyle
         }));
       }
-
       return null;
     };
-
     this.renderCloseBtn = () => {
       const {
         closable,
         closeIcon
       } = this.props;
       let closer;
-
       if (closable) {
         const iconType = closeIcon || /*#__PURE__*/React.createElement(IconClose, {
           "x-semi-prop": "closeIcon"
@@ -99,10 +84,8 @@ export default class ModalContent extends BaseComponent {
           size: "small"
         });
       }
-
       return closer;
     };
-
     this.renderIcon = () => {
       const {
         icon
@@ -112,12 +95,10 @@ export default class ModalContent extends BaseComponent {
         "x-semi-prop": "icon"
       }, icon) : null;
     };
-
     this.renderHeader = () => {
       if ('header' in this.props) {
         return this.props.header;
       }
-
       const {
         title
       } = this.props;
@@ -132,7 +113,6 @@ export default class ModalContent extends BaseComponent {
         "x-semi-prop": "title"
       }, title), closer);
     };
-
     this.renderBody = () => {
       const {
         bodyStyle,
@@ -158,30 +138,24 @@ export default class ModalContent extends BaseComponent {
         "x-semi-prop": "children"
       }, children), closer);
     };
-
     this.getDialogElement = () => {
       const props = __rest(this.props, []);
-
       const style = {};
       const digCls = cls(`${cssClasses.DIALOG}`, {
         [`${cssClasses.DIALOG}-centered`]: props.centered,
         [`${cssClasses.DIALOG}-${props.size}`]: props.size
       });
-
       if (props.width) {
         style.width = props.width;
       }
-
       if (props.height) {
         style.height = props.height;
       }
-
       if (props.isFullScreen) {
         style.width = '100%';
         style.height = '100%';
         style.margin = 'unset';
       }
-
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
@@ -207,11 +181,10 @@ export default class ModalContent extends BaseComponent {
         className: cls([`${cssClasses.DIALOG}-content`, props.contentClassName, {
           [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
         }])
-      }, header, body, footer)); // return props.visible ? dialogElement : null;
-
+      }, header, body, footer));
+      // return props.visible ? dialogElement : null;
       return dialogElement;
     };
-
     this.state = {
       dialogMouseDown: false,
       prevFocusElement: FocusTrapHandle.getActiveElement()
@@ -220,7 +193,6 @@ export default class ModalContent extends BaseComponent {
     this.dialogId = `dialog-${uuid++}`;
     this.modalDialogRef = /*#__PURE__*/React.createRef();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       notifyClose: e => {
@@ -254,12 +226,10 @@ export default class ModalContent extends BaseComponent {
       getMouseState: () => this.state.dialogMouseDown,
       modalDialogFocus: () => {
         var _a, _b, _c;
-
         const {
           preventScroll
         } = this.props;
         let activeElementInDialog;
-
         if (this.modalDialogRef) {
           const activeElement = FocusTrapHandle.getActiveElement();
           activeElementInDialog = this.modalDialogRef.current.contains(activeElement);
@@ -268,7 +238,6 @@ export default class ModalContent extends BaseComponent {
             preventScroll
           });
         }
-
         if (!activeElementInDialog) {
           (_c = (_b = this.modalDialogRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus({
             preventScroll
@@ -277,7 +246,6 @@ export default class ModalContent extends BaseComponent {
       },
       modalDialogBlur: () => {
         var _a, _b;
-
         (_a = this.modalDialogRef) === null || _a === void 0 ? void 0 : _a.current.blur();
         (_b = this.focusTrapHandle) === null || _b === void 0 ? void 0 : _b.destroy();
       },
@@ -288,34 +256,27 @@ export default class ModalContent extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         const focus = _get(prevFocusElement, 'focus');
-
         _isFunction(focus) && prevFocusElement.focus({
           preventScroll
         });
       }
     });
   }
-
   componentDidMount() {
     var _a;
-
     this.foundation.handleKeyDownEventListenerMount();
     this.foundation.modalDialogFocus();
     const nodes = FocusTrapHandle.getFocusableElements(this.modalDialogRef.current);
-
     if (!this.modalDialogRef.current.contains(document.activeElement)) {
       // focus on first focusable element
       (_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
-
   componentWillUnmount() {
     clearTimeout(this.timeoutId);
     this.foundation.destroy();
   }
-
   render() {
     const {
       maskClosable,
@@ -343,13 +304,12 @@ export default class ModalContent extends BaseComponent {
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null
-    }, this.props.contentExtraProps), this.getDialogElement())); // eslint-disable-next-line max-len
-
+    }, this.props.contentExtraProps), this.getDialogElement()));
+    // eslint-disable-next-line max-len
     return containerContext && containerContext.Provider ? /*#__PURE__*/React.createElement(containerContext.Provider, {
       value: containerContext.value
     }, elem) : elem;
   }
-
 }
 ModalContent.contextType = ConfigContext;
 ModalContent.propTypes = {

package/lib/es/modal/confirm.d.ts

@@ -156,6 +156,7 @@ export declare function withError(props: ModalReactProps): {
     visible?: boolean;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     zIndex?: number;
     closeOnEsc?: boolean;
     preventScroll?: boolean;
@@ -166,7 +167,6 @@ export declare function withError(props: ModalReactProps): {
     closeIcon?: React.ReactNode;
     bodyStyle?: React.CSSProperties;
     closable?: boolean;
-    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     maskClosable?: boolean;
     cancelButtonProps?: import("../button").BaseButtonProps;
     centered?: boolean;
@@ -210,6 +210,7 @@ export declare function withError(props: ModalReactProps): {
         slot?: string;
         hidden?: boolean;
         color?: string;
+        content?: string;
         onChange?: React.FormEventHandler<HTMLButtonElement>;
         defaultChecked?: boolean;
         defaultValue?: string | number | readonly string[];
@@ -227,10 +228,11 @@ export declare function withError(props: ModalReactProps): {
         lang?: string;
         translate?: "no" | "yes";
         prefix?: string;
+        role?: React.AriaRole;
         contentEditable?: "inherit" | (boolean | "false" | "true");
         inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
+        nonce?: string;
         tabIndex?: number;
-        role?: React.AriaRole;
         onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
         onFocus?: React.FocusEventHandler<HTMLButtonElement>;
@@ -248,7 +250,9 @@ export declare function withError(props: ModalReactProps): {
         datatype?: string;
         inlist?: any;
         property?: string;
+        rel?: string;
         resource?: string;
+        rev?: string;
         typeof?: string;
         vocab?: string;
         autoCapitalize?: string;
@@ -307,7 +311,7 @@ export declare function withError(props: ModalReactProps): {
         'aria-valuenow'?: number;
         'aria-valuetext'?: string;
         dangerouslySetInnerHTML?: {
-            __html: string;
+            __html: string | TrustedHTML;
         };
         onCopy?: React.ClipboardEventHandler<HTMLButtonElement>;
         onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement>;
@@ -373,6 +377,8 @@ export declare function withError(props: ModalReactProps): {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement>;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement>;
+        onResize?: React.ReactEventHandler<HTMLButtonElement>;
+        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement>;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement>;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement>;

package/lib/es/modal/confirm.js

@@ -10,29 +10,25 @@ export default function confirm(props) {
   const div = document.createElement('div');
   document.body.appendChild(div);
   let currentConfig = Object.assign({}, props);
-
   const destroy = () => {
     const unmountResult = ReactDOM.unmountComponentAtNode(div);
-
     if (unmountResult && div.parentNode) {
       div.parentNode.removeChild(div);
     }
-
     for (let i = 0; i < destroyFns.length; i++) {
-      const fn = destroyFns[i]; // eslint-disable-next-line @typescript-eslint/no-use-before-define
-
+      const fn = destroyFns[i];
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       if (fn === close) {
         destroyFns.splice(i, 1);
         break;
       }
     }
   };
-
   function render(renderProps) {
     const {
       afterClose
-    } = renderProps; //@ts-ignore
-
+    } = renderProps;
+    //@ts-ignore
     ReactDOM.render( /*#__PURE__*/React.createElement(ConfirmModal, Object.assign({}, renderProps, {
       afterClose: function () {
         //@ts-ignore
@@ -42,19 +38,16 @@ export default function confirm(props) {
       motion: props.motion
     })), div);
   }
-
   function close() {
     currentConfig = Object.assign(Object.assign({}, currentConfig), {
       visible: false
     });
     render(currentConfig);
   }
-
   function update(newConfig) {
     currentConfig = Object.assign(Object.assign({}, currentConfig), newConfig);
     render(currentConfig);
   }
-
   render(currentConfig);
   destroyFns.push(close);
   return {

package/lib/es/modal/index.d.ts

@@ -3,6 +3,6 @@ import { ModalState } from '@douyinfe/semi-foundation/lib/es/modal/modalFoundati
 import Modal from './Modal';
 import { ModalReactProps } from './Modal';
 export type { ConfirmProps } from './confirm';
-export declare type Directions = 'ltr' | 'rtl';
+export type Directions = 'ltr' | 'rtl';
 export type { ModalReactProps, ModalState };
 export default Modal;