@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/toast/__test__/toast-command-call.test.js

@@ -0,0 +1,63 @@
+import { Toast, Icon, Button } from '../../index';
+import { advanceBy, advanceTo, clear } from 'jest-date-mock';
+import sleep from '@douyinfe/semi-ui/_test_/utils/function/sleep';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+import { JSDOM } from 'jsdom';
+import { mount } from 'enzyme';
+
+describe('Toast - 2', () => {
+    beforeEach(() => {
+        // semi-animation会使用Date.now()，所以这里需要clear掉全局的advanceTo对Date的修改
+        clear();
+        const tw = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-wrapper`);
+        if (tw) {
+            tw.innerHTML = '';
+        }
+    });
+
+    afterEach(() => {});
+
+    it('close via command call & duration = 0', async () => {
+        let opts = {
+            content: 'close by manual',
+            duration: 0,
+        };
+        let id = Toast.info(opts);
+        let toast = document.getElementsByClassName(`${BASE_CLASS_PREFIX}-toast-info`);
+        expect(toast.length).toEqual(1);
+        Toast.close(id);
+        // wait, make sure react had update render content
+        await sleep(400);
+        expect(toast.length).toEqual(0);
+    });
+
+    it('different type toast', () => {
+        Toast.info({ content: 'info' });
+        Toast.success({ content: 'success' });
+        Toast.warning({ content: 'warning' });
+        Toast.error({ content: 'error' });
+        expect(document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info .${BASE_CLASS_PREFIX}-toast-content-text`).innerHTML).toEqual('info');
+        expect(document.querySelector(`.${BASE_CLASS_PREFIX}-toast-success .${BASE_CLASS_PREFIX}-toast-content-text`).innerHTML).toEqual('success');
+        expect(document.querySelector(`.${BASE_CLASS_PREFIX}-toast-warning .${BASE_CLASS_PREFIX}-toast-content-text`).innerHTML).toEqual('warning');
+        expect(document.querySelector(`.${BASE_CLASS_PREFIX}-toast-error .${BASE_CLASS_PREFIX}-toast-content-text`).innerHTML).toEqual('error');
+    });
+
+    it('top/bottom/right/left', () => {
+        let opts = {
+            content: 'Hi, Bytedance dance dance',
+            duration: 0,
+            top: 500,
+            left: 20,
+            bottom: 30,
+            right: 40,
+        };
+        Toast.info(opts);
+        let toastWrapper = document.getElementsByClassName(`${BASE_CLASS_PREFIX}-toast-wrapper`)[0];
+        let style = toastWrapper.style;
+        expect(style.top).toEqual('500px');
+        expect(style.left).toEqual('20px');
+        expect(style.bottom).toEqual('30px');
+        expect(style.right).toEqual('40px');
+    });
+});

package/toast/__test__/toast.test.js

@@ -0,0 +1,104 @@
+import { Toast, Icon, Button, ToastFactory } from '../../index';
+import { advanceBy, advanceTo, clear } from 'jest-date-mock';
+import ToastItem from '../toast';
+import sleep from '@douyinfe/semi-ui/_test_/utils/function/sleep';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { IconWifi } from '@douyinfe/semi-icons';
+describe('Toast', () => {
+    beforeEach(async () => {
+        // semi-animation会使用Date.now()，所以这里需要clear掉全局的advanceTo对Date的修改
+        clear();
+        const tw = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-wrapper`);
+
+        if (tw) {
+            tw.innerHTML = '';
+        }
+    });
+    afterEach(async () => {
+        // await sleep(500);
+    });
+    it('basically show toast, test content', () => {
+        Toast.info('semi');
+        let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`);
+        expect(toast.textContent).toEqual('semi');
+    });
+    it('theme: light', () => {
+        Toast.info({
+            content: 'semi',
+            theme: 'light',
+        });
+        let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`);
+        expect(toast.classList.contains(`${BASE_CLASS_PREFIX}-toast-light`)).toEqual(true);
+    });
+    it('duration, >0', done => {
+        let opts = {
+            duration: 1,
+            content: 'dur1',
+        };
+        Toast.info(opts);
+        let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`);
+        expect(toast.textContent).toEqual('dur1');
+        setTimeout(() => {
+            let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`); // expect toast had been remove
+
+            expect(toast).toEqual(null);
+            done();
+        }, 1500);
+    });
+    it('should trigger onClose after duration', done => {
+        let spyOnClose = sinon.spy(() => {});
+        let opts = {
+            onClose: spyOnClose,
+            content: 'bytedance',
+            duration: 0.8,
+        };
+        Toast.info(opts);
+        let toast = document.querySelector(`.${BASE_CLASS_PREFIX}-toast-info`);
+        setTimeout(() => {
+            expect(spyOnClose.calledOnce).toEqual(true);
+            done();
+        }, 1000);
+    });
+    it('should trigger onClose when click close btn', () => {
+        let spyOnClose = sinon.spy(() => {});
+        let opts = {
+            onClose: spyOnClose,
+            content: 'bytedance',
+        };
+        let toast = mount(<ToastItem {...opts} />);
+        let closeBtn = toast.find(`.${BASE_CLASS_PREFIX}-toast-close-button .${BASE_CLASS_PREFIX}-button`);
+        closeBtn.simulate('click', {});
+        expect(spyOnClose.calledOnce).toEqual(true);
+    });
+    it('showClear = false', () => {
+        let opts = {
+            showClose: false,
+            duration: 1,
+            content: 'showCloseToast',
+        };
+        let toast = mount(<ToastItem {...opts} />);
+        expect(toast.exists(`.${BASE_CLASS_PREFIX}-toast-close-button`)).toEqual(false);
+    });
+    it('custom icon', () => {
+        let customIcon = <IconWifi />;
+        let opts = {
+            icon: customIcon,
+            content: 'semi',
+        };
+        let toast = mount(<ToastItem {...opts} />);
+        expect(toast.exists(`.${BASE_CLASS_PREFIX}-icon-wifi`)).toEqual(true);
+    });
+    it('specific getPopupContainer', () => {
+        const container = document.createElement('div');
+        container.id = 'toast-container';
+        document.body.appendChild(container);
+        const ContainerToast = ToastFactory.create({
+            getPopupContainer: () => document.querySelector(`#toast-container`),
+        });
+        ContainerToast.info('specific getPopupContainer');
+        expect(
+            document.querySelector(`#${ContainerToast.getWrapperId()}`).parentNode ===
+                document.querySelector(`#toast-container`)
+        ).toEqual(true);
+    });
+});

package/toast/_story/Demo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Toast from '../index';
+import Button from '../../button/index';
+
+const Demo: React.FunctionComponent = () => (
+    <div>
+        <Button onClick={(): string => Toast.info('info')}>
+            Info
+        </Button>
+        <Button onClick={(): string => Toast.success('success')}>
+            Success
+        </Button>
+        <Button onClick={(): string => Toast.warning('warning')}>
+            Warning
+        </Button>
+        <Button onClick={(): string => Toast.error('error')}>
+            Error
+        </Button>
+    </div>
+);
+
+export default Demo;

package/toast/_story/toast.stories.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Toast, ToastFactory } from '../../index';
+
+import Button from '@douyinfe/semi-ui/button/index';
+
+export default {
+  title: 'Toast',
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+}
+
+const ToastInContainer = ToastFactory.create({
+  getPopupContainer: () => document.getElementById('popup-container'),
+});
+
+
+function getContent() {
+  let n = Math.random() * 10;
+  return Array.from({ length: n }, (v, i) => 'dance').join(' ');
+}
+
+let opts = {
+  title: 'Title ies',
+  content: 'Hi,Bytedance dance dance',
+  duration: 3000,
+};
+
+let multiOpts = Object.assign({}, opts, {
+  content: 'Hi,Bytedance dance dance, dance dance,dance dance,dance dance',
+});
+
+export const _Toast = () => (
+  <>
+    <div style={{ margin: '10px' }}>
+      <Button type="primary" onClick={() => Toast.create({ ...opts })}>
+        default
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="warning" onClick={() => Toast.warning({ ...opts })}>
+        warning
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="warning" onClick={() => Toast.success('here')}>
+        success
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="warning" onClick={() => Toast.error({ ...opts })}>
+        error
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="default" onClick={() => Toast.info({ ...opts, duration: 0 })}>
+        not auto close
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="default" onClick={() => Toast.destroyAll()}>
+        destroyAll
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button type="default" onClick={() => Toast.info({ ...multiOpts, duration: 0 })}>
+        not auto close with muti-line content
+      </Button>
+    </div>
+    <div style={{ margin: '10px' }}>
+      <Button
+        type="danger"
+        onClick={() => {
+          Toast.error({ ...opts, content: 'i am content' });
+        }}
+      >
+        After 3s
+      </Button>
+    </div>
+    <div style={{ width: '300px', height: '300px', background: '#cccccc' }} id="popup-container">
+      popup-container
+    </div>
+    <div>
+      <Button
+        type="primary"
+        onClick={() => {
+          ToastInContainer.info({ content: 'Toast in popup-container' });
+        }}
+      >
+        Toast in popup-container
+      </Button>
+    </div>
+  </>
+);
+
+_Toast.story = {
+  name: 'toast',
+};

package/toast/_story/toast.stories.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Demo from './Demo';
+import { storiesOf } from '@storybook/react';
+
+const stories = storiesOf('Toast', module);
+
+stories.add('Toast', () => <Demo />);

package/toast/index.tsx

@@ -0,0 +1,234 @@
+/* eslint-disable no-param-reassign */
+import React, { CSSProperties } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import ToastListFoundation, {
+    ToastListAdapter,
+    ToastListProps,
+    ToastListState
+} from '@douyinfe/semi-foundation/toast/toastListFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/toast/constants';
+import BaseComponent from '../_base/baseComponent';
+import Toast from './toast';
+import '@douyinfe/semi-foundation/toast/toast.scss';
+import ToastTransition from './ToastTransition';
+import getUuid from '@douyinfe/semi-foundation/utils/uuid';
+import useToast from './useToast';
+import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/semi-foundation/toast/toastFoundation';
+import { Motion } from '../_base/base';
+
+export { ToastTransitionProps } from './ToastTransition';
+export interface ToastReactProps extends ToastProps{
+    style?: CSSProperties;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+
+export {
+    ConfigProps,
+    ToastListProps,
+    ToastListState,
+    ToastState
+};
+
+const createBaseToast = () => class ToastList extends BaseComponent<ToastListProps, ToastListState> {
+    static ref: ToastList;
+    static useToast: typeof useToast;
+    static defaultOpts: ToastReactProps & { motion: Motion } = {
+        motion: true,
+        zIndex: 1010,
+        content: '',
+    };
+    static propTypes = {
+        content: PropTypes.node,
+        duration: PropTypes.number,
+        onClose: PropTypes.func,
+        icon: PropTypes.node,
+        direction: PropTypes.oneOf(strings.directions),
+    };
+
+    static defaultProps = {};
+    static wrapperId: null | string;
+
+    constructor(props: ToastListProps) {
+        super(props);
+        this.state = {
+            list: [],
+            removedItems: [],
+        };
+        this.foundation = new ToastListFoundation(this.adapter);
+    }
+
+    get adapter(): ToastListAdapter {
+        return {
+            ...super.adapter,
+            updateToast: (list: ToastInstance[], removedItems: ToastInstance[]) => {
+                this.setState({ list, removedItems });
+            },
+        };
+    }
+
+    static create(opts: ToastReactProps) {
+        const id = getUuid('toast');
+        // this.id = id;
+        if (!ToastList.ref) {
+            const div = document.createElement('div');
+            if (!this.wrapperId) {
+                this.wrapperId = getUuid('toast-wrapper').slice(0, 26);
+            }
+            div.className = cssClasses.WRAPPER;
+            div.id = this.wrapperId;
+            div.style.zIndex = String(typeof opts.zIndex === 'number' ?
+                opts.zIndex : ToastList.defaultOpts.zIndex);
+            ['top', 'left', 'bottom', 'right'].map(pos => {
+                if (pos in ToastList.defaultOpts || pos in opts) {
+                    const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
+                    div.style[pos] = typeof val === 'number' ? `${val}px` : val;
+                }
+            });
+            // document.body.appendChild(div);
+            if (ToastList.defaultOpts.getPopupContainer) {
+                const container = ToastList.defaultOpts.getPopupContainer();
+                container.appendChild(div);
+            } else {
+                document.body.appendChild(div);
+            }
+            ReactDOM.render(React.createElement(
+                ToastList,
+                { ref: instance => (ToastList.ref = instance) }
+            ),
+            div,
+            () => {
+                ToastList.ref.add({ ...opts, id });
+            });
+        } else {
+            const node = document.querySelector(`#${this.wrapperId}`) as HTMLElement;
+            ['top', 'left', 'bottom', 'right'].map(pos => {
+                if (pos in opts) {
+                    node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
+                }
+            });
+            ToastList.ref.add({ ...opts, id });
+        }
+        return id;
+    }
+
+    static close(id: string) {
+        if (ToastList.ref) {
+            ToastList.ref.remove(id);
+        }
+    }
+
+    static destroyAll() {
+        if (ToastList.ref) {
+            ToastList.ref.destroyAll();
+            const wrapper = document.querySelector(`#${this.wrapperId}`);
+            ReactDOM.unmountComponentAtNode(wrapper);
+            wrapper && wrapper.parentNode.removeChild(wrapper);
+            ToastList.ref = null;
+            this.wrapperId = null;
+        }
+    }
+    static getWrapperId() {
+        return this.wrapperId;
+    }
+    static info(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'info' });
+    }
+
+    static warning(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'warning' });
+    }
+
+    static error(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'error' });
+    }
+
+    static success(opts: Omit<ToastReactProps, 'type'> | string) {
+        if (typeof opts === 'string') {
+            opts = { content: opts };
+        }
+        return this.create({ ...ToastList.defaultOpts, ...opts, type: 'success' });
+    }
+
+    static config(opts: ConfigProps) {
+        ['top', 'left', 'bottom', 'right'].forEach(pos => {
+            if (pos in opts) {
+                ToastList.defaultOpts[pos] = opts[pos];
+            }
+        });
+
+        if (typeof opts.zIndex === 'number') {
+            ToastList.defaultOpts.zIndex = opts.zIndex;
+        }
+        if (typeof opts.duration === 'number') {
+            ToastList.defaultOpts.duration = opts.duration;
+        }
+        if (typeof opts.getPopupContainer === 'function') {
+            ToastList.defaultOpts.getPopupContainer = opts.getPopupContainer;
+        }
+    }
+
+    add(opts: ToastInstance) {
+        return this.foundation.addToast(opts);
+    }
+
+    remove(id: string) {
+        return this.foundation.removeToast(id);
+    }
+
+    destroyAll() {
+        return this.foundation.destroyAll();
+    }
+
+    render() {
+        let { list } = this.state;
+        const { removedItems } = this.state;
+        list = Array.from(new Set([...list, ...removedItems]));
+
+        return (
+            <React.Fragment>
+                {list.map((item, index) =>
+                    (item.motion ? (
+                        <ToastTransition key={item.id || index} motion={item.motion}>
+                            {removedItems.find(removedItem => removedItem.id === item.id) ?
+                                null :
+                                transitionStyle => (
+                                    <Toast
+                                        {...item}
+                                        style={{ ...transitionStyle, ...item.style }}
+                                        close={id => this.remove(id)}
+                                    />
+                                )}
+                        </ToastTransition>
+                    ) : (
+                        <Toast {...item} style={{ ...item.style }} close={id => this.remove(id)} />
+                    ))
+                )}
+            </React.Fragment>
+        );
+    }
+
+
+};
+
+
+export class ToastFactory {
+    static create(config?: ConfigProps): ReturnType<typeof createBaseToast> {
+        const newToast = createBaseToast();
+        newToast.useToast = useToast;
+        config && newToast.config(config);
+        return newToast;
+
+    }
+}
+export default ToastFactory.create();

package/toast/toast.tsx

@@ -0,0 +1,148 @@
+/* eslint-disable max-len */
+import React, { CSSProperties } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import ConfigContext from '../configProvider/context';
+import ToastFoundation, { ToastAdapter, ToastState, ToastProps } from '@douyinfe/semi-foundation/toast/toastFoundation';
+import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/toast/constants';
+import BaseComponent from '../_base/baseComponent';
+import Button from '../iconButton/index';
+import { IconClose, IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { noop } from 'lodash';
+import { isSemiIcon } from '../_utils';
+
+const prefixCls = cssClasses.PREFIX;
+
+export interface ToastReactProps extends ToastProps {
+    style?: CSSProperties;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+
+class Toast extends BaseComponent<ToastReactProps, ToastState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        onClose: PropTypes.func,
+        content: PropTypes.node,
+        close: PropTypes.func,
+        duration: PropTypes.number,
+        theme: PropTypes.oneOf(strings.themes),
+        type: PropTypes.oneOf(strings.types),
+        textMaxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        style: PropTypes.object,
+        className: PropTypes.string,
+        showClose: PropTypes.bool,
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+        direction: PropTypes.oneOf(strings.directions),
+    };
+
+    static defaultProps = {
+        onClose: noop,
+        content: '',
+        close: noop,
+        duration: numbers.duration,
+        textMaxWidth: 450,
+        showClose: true,
+        theme: 'normal'
+    };
+
+    constructor(props: ToastReactProps) {
+        super(props);
+        this.state = {};
+        this.foundation = new ToastFoundation(this.adapter);
+    }
+
+    get adapter(): ToastAdapter {
+        return {
+            ...super.adapter,
+            notifyWrapperToRemove: (id: string) => {
+                this.props.close(id);
+            },
+            notifyClose: () => {
+                this.props.onClose();
+            },
+        };
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    close(e: React.MouseEvent) {
+        this.foundation.close(e);
+    }
+
+    clearCloseTimer = () => {
+        this.foundation.clearCloseTimer_();
+    };
+
+    startCloseTimer = () => {
+        this.foundation.startCloseTimer_();
+    };
+
+    renderIcon() {
+        const { type, icon } = this.props;
+        const iconMap = {
+            warning: <IconAlertTriangle />,
+            success: <IconTickCircle />,
+            info: <IconInfoCircle />,
+            error: <IconAlertCircle />
+        };
+        const iconType = iconMap[type];
+        const iconSize = 'large';
+        const iconCls = cls(`${prefixCls}-icon`, `${prefixCls}-icon-${type}`);
+        if (icon) {
+            return isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: iconSize, className: `${prefixCls}-icon` }) : icon;
+        }
+        if (type && iconType) {
+            return React.cloneElement(iconType, { size: iconSize, className: iconCls });
+        }
+        return null;
+    }
+
+    render() {
+        const { content, type, theme, showClose, textMaxWidth, className, style } = this.props;
+        const direction = this.props.direction || this.context.direction;
+        const toastCls = cls(prefixCls, className, {
+            [`${prefixCls}-${type}`]: true,
+            [`${prefixCls}-${theme}`]: theme === 'light',
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+        });
+        const textStyle: CSSProperties = {};
+        textStyle.maxWidth = textMaxWidth;
+        const btnTheme = 'borderless';
+        const btnSize = 'small';
+        return (
+            <div
+                className={toastCls}
+                style={style}
+                onMouseEnter={this.clearCloseTimer}
+                onMouseLeave={this.startCloseTimer}
+            >
+                <div className={`${prefixCls}-content`}>
+                    {this.renderIcon()}
+                    <span className={`${prefixCls}-content-text`} style={textStyle}>
+                        {content}
+                    </span>
+                    {showClose && (
+                        <div className={`${prefixCls}-close-button`}>
+                            <Button
+                                onClick={e => this.close(e)}
+                                type="tertiary"
+                                icon={<IconClose />}
+                                theme={btnTheme}
+                                size={btnSize}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Toast;