@douyinfe/semi-ui 2.1.2 → 2.1.5

package/modal/Modal.tsx

@@ -0,0 +1,415 @@
+/* eslint-disable react/destructuring-assignment, prefer-const, @typescript-eslint/no-unused-vars */
+import React, { CSSProperties, LegacyRef, ReactNode } from 'react';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/modal/constants';
+import Button from '../button';
+import ModalFoundation, { ModalAdapter, ModalProps, ModalState } from '@douyinfe/semi-foundation/modal/modalFoundation';
+import ModalContent from './ModalContent';
+import Portal from '../_portal';
+import LocaleConsumer from '../locale/localeConsumer';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { noop } from 'lodash';
+import '@douyinfe/semi-foundation/modal/modal.scss';
+import BaseComponent from '../_base/baseComponent';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
+import { Locale } from '../locale/interface';
+import useModal from './useModal';
+import { ButtonProps } from '../button/Button';
+
+export const destroyFns: any[] = [];
+export type ConfirmType = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export type Directions = 'ltr' | 'rtl';
+
+export interface ModalReactProps extends ModalProps {
+    cancelButtonProps?: ButtonProps;
+    okButtonProps?: ButtonProps;
+    bodyStyle?: CSSProperties;
+    maskStyle?: CSSProperties;
+    style?: CSSProperties;
+    icon?: ReactNode;
+    closeIcon?: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
+    footer?: ReactNode;
+    header?: ReactNode;
+    onCancel?: (e: React.MouseEvent) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent) => void | Promise<any>;
+}
+
+export {
+    ModalState
+};
+
+class Modal extends BaseComponent<ModalReactProps, ModalState> {
+
+    static propTypes = {
+        mask: PropTypes.bool,
+        closable: PropTypes.bool,
+        centered: PropTypes.bool,
+        visible: PropTypes.bool,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        confirmLoading: PropTypes.bool,
+        cancelLoading: PropTypes.bool,
+        okText: PropTypes.string,
+        okType: PropTypes.string,
+        cancelText: PropTypes.string,
+        maskClosable: PropTypes.bool,
+        onCancel: PropTypes.func,
+        onOk: PropTypes.func,
+        afterClose: PropTypes.func,
+        okButtonProps: PropTypes.object,
+        cancelButtonProps: PropTypes.object,
+        style: PropTypes.object,
+        className: PropTypes.string,
+        maskStyle: PropTypes.object,
+        bodyStyle: PropTypes.object,
+        zIndex: PropTypes.number,
+        title: PropTypes.node,
+        icon: PropTypes.node,
+        header: PropTypes.node,
+        footer: PropTypes.node,
+        hasCancel: PropTypes.bool,
+        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
+        children: PropTypes.node,
+        getPopupContainer: PropTypes.func,
+        getContainerContext: PropTypes.func,
+        maskFixed: PropTypes.bool,
+        closeIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        closeOnEsc: PropTypes.bool,
+        size: PropTypes.oneOf(strings.SIZE),
+        keepDOM: PropTypes.bool,
+        lazyRender: PropTypes.bool,
+        direction: PropTypes.oneOf(strings.directions),
+        fullScreen: PropTypes.bool,
+    };
+
+
+    static defaultProps = {
+        zIndex: 1000,
+        motion: true,
+        mask: true,
+        centered: false,
+        closable: true,
+        visible: false,
+        confirmLoading: false,
+        cancelLoading: false,
+        okType: 'primary',
+        maskClosable: true,
+        hasCancel: true,
+        onCancel: noop,
+        onOk: noop,
+        afterClose: noop,
+        maskFixed: false,
+        closeOnEsc: false,
+        size: 'small',
+        keepDOM: false,
+        lazyRender: true,
+        fullScreen: false,
+    };
+    static useModal = useModal;
+    foundation: ModalFoundation;
+
+    private readonly modalRef: LegacyRef<ModalContent>;
+    private bodyOverflow: string;
+    private scrollBarWidth: number;
+    private originBodyWith: string;
+    private _active: boolean;
+
+    constructor(props: ModalReactProps) {
+        super(props);
+        this.state = {
+            hidden: !props.visible,
+            isFullScreen: props.fullScreen,
+        };
+        this.foundation = new ModalFoundation(this.adapter);
+        this.modalRef = React.createRef();
+        this.bodyOverflow = '';
+        this.scrollBarWidth = 0;
+        this.originBodyWith = '100%';
+    }
+
+    get adapter(): ModalAdapter {
+        return {
+            ...super.adapter,
+            getProps: () => this.props,
+            disabledBodyScroll: () => {
+                const { 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.originBodyWith || '100%'} - ${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: React.MouseEvent) => {
+                this.props.onCancel(e);
+            },
+            notifyOk: (e: React.MouseEvent) => {
+                this.props.onOk(e);
+            },
+            notifyClose: () => {
+                this.props.afterClose();
+            },
+            toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => {
+                if (hidden !== this.state.hidden) {
+                    this.setState({ hidden }, callback || noop);
+                }
+            },
+            notifyFullScreen: (isFullScreen: boolean) => {
+                if (isFullScreen !== this.state.isFullScreen) {
+                    this.setState({ isFullScreen });
+                }
+            },
+        };
+    }
+
+    static getDerivedStateFromProps(props: ModalReactProps, prevState: ModalState) {
+        const newState: Partial<ModalState> = {};
+
+        if (props.fullScreen !== prevState.isFullScreen) {
+            newState.isFullScreen = props.fullScreen;
+        }
+
+
+        return newState;
+    }
+
+    static getScrollbarWidth() {
+        if (globalThis && Object.prototype.toString.call(globalThis) === '[object Window]') {
+            return window.innerWidth - document.documentElement.clientWidth;
+        }
+        return 0;
+    }
+
+
+    static info = function (props: ModalReactProps) {
+        return confirm(withInfo(props));
+    };
+
+    static success = function (props: ModalReactProps) {
+        return confirm(withSuccess(props));
+    };
+
+    static error = function (props: ModalReactProps) {
+        return confirm(withError(props));
+    };
+
+    static warning = function (props: ModalReactProps) {
+        return confirm(withWarning(props));
+    };
+
+    static confirm = function (props: ModalReactProps) {
+        return confirm(withConfirm(props));
+    };
+
+    static destroyAll = function destroyAllFn() {
+        while (destroyFns.length) {
+            const close = destroyFns.pop();
+            if (close) {
+                close();
+            }
+        }
+    };
+
+
+    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: ModalReactProps, prevState: ModalState, snapshot: any) {
+        // 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();
+        }
+    }
+
+    handleCancel = (e: React.MouseEvent) => {
+        this.foundation.handleCancel(e);
+    };
+
+    handleOk = (e: React.MouseEvent) => {
+        this.foundation.handleOk(e);
+    };
+
+    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);
+        }
+    };
+
+    renderFooter = (): ReactNode => {
+        const {
+            okText,
+            okType,
+            cancelText,
+            confirmLoading,
+            cancelLoading,
+            hasCancel,
+        } = this.props;
+        const getCancelButton = (locale: Locale['Modal']) => {
+            if (!hasCancel) {
+                return null;
+            } else {
+                return (
+                    <Button
+                        onClick={this.handleCancel}
+                        loading={cancelLoading}
+                        type="tertiary"
+                        {...this.props.cancelButtonProps}
+                    >
+                        {cancelText || locale.cancel}
+                    </Button>
+                );
+            }
+        };
+
+        return (
+            <LocaleConsumer componentName="Modal">
+                {(locale: Locale['Modal'], localeCode: Locale['code']) => (
+                    <div>
+                        {getCancelButton(locale)}
+                        <Button
+                            type={okType}
+                            theme="solid"
+                            loading={confirmLoading}
+                            onClick={this.handleOk}
+                            {...this.props.okButtonProps}
+                        >
+                            {okText || locale.confirm}
+                        </Button>
+                    </div>
+                )}
+            </LocaleConsumer>
+        );
+    };
+
+    // getDialog = () => {
+    //     const {
+    //         footer,
+    //         ...restProps
+    //     } = this.props;
+    //     const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
+    //     return <ModalContent {...restProps} footer={renderFooter} onClose={this.handleCancel}/>;
+    // };
+
+    renderDialog = () => {
+        let {
+            footer,
+            className,
+            motion,
+            maskStyle: maskStyleFromProps,
+            keepDOM,
+            style: styleFromProps,
+            zIndex,
+            getPopupContainer,
+            visible,
+            ...restProps
+        } = this.props;
+        let style = styleFromProps;
+        const maskStyle = maskStyleFromProps;
+        const renderFooter = 'footer' in this.props ? footer : this.renderFooter();
+        if (this.props.centered) {
+            style = {
+                transform: 'translateY(-50%)',
+                top: '50%', ...style,
+            };
+        }
+        let wrapperStyle: {
+            zIndex?: CSSProperties['zIndex'];
+            position?: CSSProperties['position'];
+        } = {
+            zIndex,
+        };
+        if (getPopupContainer) {
+            wrapperStyle = {
+                zIndex,
+                position: 'static',
+            };
+        }
+
+        const classList = cls(className, {
+            [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.hidden && !visible,
+        });
+        const contentClassName = motion ? cls({
+            [`${cssClasses.DIALOG}-content-animate-hide`]: !visible,
+            [`${cssClasses.DIALOG}-content-animate-show`]: visible
+        }) : null;
+        const maskClassName = motion ? cls({
+            [`${cssClasses.DIALOG}-mask-animate-hide`]: !visible,
+            [`${cssClasses.DIALOG}-mask-animate-show`]: visible
+        }) : null;
+
+        return (
+            <Portal style={wrapperStyle} getPopupContainer={getPopupContainer}>
+                <ModalContent
+                    {...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}
+
+                />
+            </Portal>
+        );
+    };
+
+    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;
+    }
+
+
+}
+
+
+export default Modal;

package/modal/ModalContent.tsx

@@ -0,0 +1,276 @@
+/* eslint-disable eqeqeq */
+import React, { CSSProperties } from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/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 ModalContentFoundation, {
+    ModalContentAdapter,
+    ModalContentProps,
+    ModalContentState
+} from '@douyinfe/semi-foundation/modal/modalContentFoundation';
+import { noop } from 'lodash';
+import { IconClose } from '@douyinfe/semi-icons';
+
+let uuid = 0;
+
+export default class ModalContent extends BaseComponent<ModalContentProps, ModalContentState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        close: PropTypes.func,
+        getContainerContext: PropTypes.func,
+        contentClassName: PropTypes.string,
+        maskClassName: PropTypes.string,
+        onAnimationEnd: PropTypes.func
+    };
+
+    static defaultProps = {
+        close: noop,
+        getContainerContext: noop,
+        contentClassName: '',
+        maskClassName: ''
+    };
+    dialogId: string;
+    private timeoutId: NodeJS.Timeout;
+
+
+    constructor(props: ModalContentProps) {
+        super(props);
+        this.state = {
+            dialogMouseDown: false,
+        };
+        this.foundation = new ModalContentFoundation(this.adapter);
+        this.dialogId = `dialog-${uuid++}`;
+    }
+
+    get adapter(): ModalContentAdapter {
+        return {
+            ...super.adapter,
+            notifyClose: (e: React.MouseEvent) => {
+                this.props.onClose(e);
+            },
+            notifyDialogMouseDown: () => {
+                this.setState({ dialogMouseDown: true });
+            },
+            notifyDialogMouseUp: () => {
+                if (this.state.dialogMouseDown) {
+                    // Not setting setTimeout triggers close when modal external mouseUp
+                    this.timeoutId = setTimeout(() => {
+                        this.setState({ dialogMouseDown: false });
+                    }, 0);
+                }
+            },
+            addKeyDownEventListener: () => {
+                if (this.props.closeOnEsc) {
+                    document.addEventListener('keydown', this.foundation.handleKeyDown.bind(this.foundation));
+                }
+            },
+            removeKeyDownEventListener: () => {
+                if (this.props.closeOnEsc) {
+                    document.removeEventListener('keydown', this.foundation.handleKeyDown.bind(this.foundation));
+                }
+            },
+            getMouseState: () => this.state.dialogMouseDown,
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.handleKeyDownEventListenerMount();
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeoutId);
+        this.foundation.destroy();
+    }
+
+    onKeyDown = (e: React.MouseEvent) => {
+        this.foundation.handleKeyDown(e);
+    };
+
+    // Record when clicking the modal box
+    onDialogMouseDown = () => {
+        this.foundation.handleDialogMouseDown();
+    };
+
+    // Cancel recording when clicking the modal box at the end
+    onMaskMouseUp = () => {
+        this.foundation.handleMaskMouseUp();
+    };
+
+    // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
+    onMaskClick = (e: React.MouseEvent) => {
+        this.foundation.handleMaskClick(e);
+    };
+
+    close = (e: React.MouseEvent) => {
+        this.foundation.close(e);
+    };
+
+    getMaskElement = () => {
+        const { ...props } = this.props;
+        const { mask, maskClassName } = props;
+        if (mask) {
+            const className = cls(`${cssClasses.DIALOG}-mask`, {
+                // [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+            });
+            return <div key="mask" className={cls(className, maskClassName)} style={props.maskStyle}/>;
+        }
+        return null;
+    };
+
+    renderCloseBtn = () => {
+        const {
+            closable,
+            closeIcon,
+        } = this.props;
+        let closer;
+        if (closable) {
+            const iconType = closeIcon || <IconClose/>;
+            closer = (
+                <Button
+                    className={`${cssClasses.DIALOG}-close`}
+                    key="close-btn"
+                    onClick={this.close}
+                    type="tertiary"
+                    icon={iconType}
+                    theme="borderless"
+                    size="small"
+                />
+            );
+        }
+        return closer;
+    };
+
+    renderIcon = () => {
+        const { icon } = this.props;
+        return icon ? <span className={`${cssClasses.DIALOG}-icon-wrapper`}>{icon}</span> : null;
+    };
+
+    renderHeader = () => {
+        if ('header' in this.props) {
+            return this.props.header;
+        }
+        const { title } = this.props;
+        const closer = this.renderCloseBtn();
+        const icon = this.renderIcon();
+        return (title === null || title === undefined) ?
+            null :
+            (
+                <div className={`${cssClasses.DIALOG}-header`}>
+                    {icon}
+                    <Typography.Title heading={5} className={`${cssClasses.DIALOG}-title`}>{title}</Typography.Title>
+                    {closer}
+                </div>
+            );
+    };
+
+    renderBody = () => {
+        const {
+            bodyStyle,
+            children,
+            title,
+        } = this.props;
+        const bodyCls = cls(`${cssClasses.DIALOG}-body`, {
+            [`${cssClasses.DIALOG}-withIcon`]: this.props.icon,
+        });
+        const closer = this.renderCloseBtn();
+        const icon = this.renderIcon();
+        const hasHeader = title !== null && title !== undefined || 'header' in this.props;
+        return hasHeader ?
+            <div className={bodyCls} style={bodyStyle}>{children}</div> :
+            (
+                <div className={`${cssClasses.DIALOG}-body-wrapper`}>
+                    {icon}
+                    <div className={bodyCls} style={bodyStyle}>{children}</div>
+                    {closer}
+                </div>
+            );
+
+    };
+
+    getDialogElement = () => {
+        const { ...props } = this.props;
+        const style: CSSProperties = {};
+        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 ? <div className={`${cssClasses.DIALOG}-footer`}>{props.footer}</div> : null;
+        const dialogElement = (
+            <div
+                key="dialog-element"
+                className={digCls}
+                onMouseDown={this.onDialogMouseDown}
+                style={{ ...props.style, ...style }}
+                id={this.dialogId}
+            >
+                <div
+                    onAnimationEnd={props.onAnimationEnd}
+                    className={cls([`${cssClasses.DIALOG}-content`,
+                        props.contentClassName,
+                        {[`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen }])}>
+                    {header}
+                    {body}
+                    {footer}
+                </div>
+            </div>
+        );
+        // return props.visible ? dialogElement : null;
+        return dialogElement;
+    };
+
+    render() {
+        const {
+            maskClosable,
+            className,
+            getPopupContainer,
+            maskFixed,
+            getContainerContext,
+        } = this.props;
+        const { direction } = this.context;
+        const classList = cls(className, {
+            [`${cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
+            [`${cssClasses.DIALOG}-fixed`]: maskFixed,
+            [`${cssClasses.DIALOG}-rtl`]: direction === 'rtl',
+        });
+
+        const containerContext = getContainerContext();
+
+        const elem = (
+            <div className={classList}>
+                {this.getMaskElement()}
+                <div
+                    role="modal"
+                    tabIndex={-1}
+                    className={`${cssClasses.DIALOG}-wrap`}
+                    onClick={maskClosable ? this.onMaskClick : null}
+                    onMouseUp={maskClosable ? this.onMaskMouseUp : null}
+                >
+                    {this.getDialogElement()}
+                </div>
+            </div>
+        );
+
+        // @ts-ignore Unreachable branch
+        // eslint-disable-next-line max-len
+        return containerContext && containerContext.Provider ?
+            <containerContext.Provider value={containerContext.value}>{elem}</containerContext.Provider> : elem;
+    }
+}