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

package/notification/index.tsx

@@ -0,0 +1,265 @@
+import React, { CSSProperties } from 'react';
+import ReactDOM from 'react-dom';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import ConfigContext from '../configProvider/context';
+import NotificationListFoundation, {
+    ConfigProps, NotificationListAdapter,
+    NotificationListProps,
+    NotificationListState
+} from '@douyinfe/semi-foundation/notification/notificationListFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/notification/constants';
+import Notice from './notice';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/notification/notification.scss';
+import NoticeTransition from './NoticeTransition';
+import getUuid from '@douyinfe/semi-foundation/utils/uuid';
+import useNotification from './useNotification';
+import { NoticeInstance, NoticePosition, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/notification/notificationFoundation';
+// TODO: Automatic folding + unfolding function when there are more than N
+
+export { NoticeTransitionProps } from './NoticeTransition';
+export interface NoticeReactProps extends NoticeProps{
+    style?: CSSProperties;
+}
+
+export {
+    NoticeState,
+    NotificationListProps,
+    NotificationListState,
+    ConfigProps
+};
+
+export type NoticesInPosition = { top: NoticeInstance[];
+    topLeft: NoticeInstance[];
+    topRight: NoticeInstance[];
+    bottom: NoticeInstance[];
+    bottomLeft: NoticeInstance[];
+    bottomRight: NoticeInstance[];
+};
+
+
+let ref: NotificationList = null;
+const defaultConfig = {
+    duration: 3,
+    position: 'topRight' as NoticePosition,
+    motion: true,
+    content: '',
+    title: '',
+    zIndex: 1010,
+};
+
+class NotificationList extends BaseComponent<NotificationListProps, NotificationListState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        style: PropTypes.object,
+        className: PropTypes.string,
+        direction: PropTypes.oneOf(strings.directions),
+    };
+    static defaultProps = {};
+    static useNotification: typeof useNotification;
+    private static wrapperId: string;
+    private noticeStorage: NoticeInstance[];
+    private removeItemStorage: NoticeInstance[];
+
+
+    constructor(props: NotificationListProps) {
+        super(props);
+        this.state = {
+            notices: [],
+            removedItems: [],
+        };
+        this.noticeStorage = [];
+        this.removeItemStorage = [];
+
+        this.foundation = new NotificationListFoundation(this.adapter);
+    }
+
+    get adapter(): NotificationListAdapter {
+        return {
+            ...super.adapter,
+            updateNotices: (notices: NoticeInstance[], removedItems: NoticeInstance[] = []) => {
+                this.noticeStorage = [...notices];
+                this.removeItemStorage = [...removedItems];
+                // setState is async sometimes and react often merges state, so use "this" , make sure other code always get right data.
+                this.setState({ notices, removedItems });
+            },
+            getNotices: () => this.noticeStorage,
+        };
+    }
+
+    static addNotice(notice: NoticeProps) {
+        const id = getUuid('notification');
+        if (!ref) {
+            const { getPopupContainer } = notice;
+            const div = document.createElement('div');
+            if (!this.wrapperId) {
+                this.wrapperId = getUuid('notification-wrapper').slice(0, 32);
+            }
+            div.className = cssClasses.WRAPPER;
+            div.id = this.wrapperId;
+            div.style.zIndex = String(typeof notice.zIndex === 'number' ? notice.zIndex : defaultConfig.zIndex);
+            if (getPopupContainer) {
+                const container = getPopupContainer();
+                container.appendChild(div);
+            } else {
+                document.body.appendChild(div);
+            }
+            ReactDOM.render(React.createElement(NotificationList, { ref: instance => (ref = instance) }), div, () => {
+                ref.add({ ...notice, id });
+            });
+        } else {
+            ref.add({ ...notice, id });
+        }
+        return id;
+    }
+
+    static removeNotice(id: string) {
+        if (ref) {
+            ref.remove(id);
+        }
+
+        return id;
+    }
+
+    static info(opts: NoticeProps) {
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'info' });
+    }
+
+    static success(opts: NoticeProps) {
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'success' });
+    }
+
+    static error(opts: NoticeProps) {
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'error' });
+    }
+
+    static warning(opts: NoticeProps) {
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'warning' });
+    }
+
+    static open(opts: NoticeProps) {
+        return this.addNotice({ ...defaultConfig, ...opts, type: 'default' });
+    }
+
+    static close(id: string) {
+        return this.removeNotice(id);
+    }
+
+    static destroyAll() {
+        if (ref) {
+            ref.destroyAll();
+            const wrapper = document.querySelector(`#${this.wrapperId}`);
+            ReactDOM.unmountComponentAtNode(wrapper);
+            wrapper && wrapper.parentNode.removeChild(wrapper);
+            ref = null;
+            this.wrapperId = null;
+        }
+    }
+
+    static config(opts: ConfigProps) {
+        ['top', 'left', 'bottom', 'right'].map(pos => {
+            if (pos in opts) {
+                defaultConfig[pos] = opts[pos];
+            }
+        });
+
+        if (typeof opts.zIndex === 'number') {
+            defaultConfig.zIndex = opts.zIndex;
+        }
+        if (typeof opts.duration === 'number') {
+            defaultConfig.duration = opts.duration;
+        }
+        if (typeof opts.position === 'string') {
+            defaultConfig.position = opts.position as NoticePosition;
+        }
+    }
+
+    add = (noticeOpts: NoticeProps) => this.foundation.addNotice(noticeOpts);
+
+    remove = (id: string | number) => {
+        this.foundation.removeNotice(String(id));
+    };
+
+    destroyAll = () => this.foundation.destroyAll();
+
+    renderNoticeInPosition = (
+        notices: NoticeInstance[],
+        position: NoticePosition,
+        removedItems: NoticeInstance[] = []
+    ) => {
+        const className = cls(cssClasses.LIST);
+        // TODO notifyOnClose
+        if (notices.length) {
+            const style = this.setPosInStyle(notices[0]);
+            return (
+                // @ts-ignore
+                <div placement={position} key={position} className={className} style={style}>
+                    {notices.map((notice, index) =>
+                        (notice.motion ? (
+                            <NoticeTransition key={notice.id || index} position={position} motion={notice.motion}>
+                                {removedItems.find(item => item.id === notice.id) ?
+                                    null :
+                                    transitionStyle => (
+                                        <Notice
+                                            {...notice}
+                                            style={{ ...transitionStyle, ...notice.style }}
+                                            key={notice.id}
+                                            close={this.remove}
+                                        />
+                                    )}
+                            </NoticeTransition>
+                        ) : (
+                            <Notice {...notice} style={{ ...notice.style }} key={notice.id} close={this.remove} />
+                        ))
+                    )}
+                </div>
+            );
+        }
+        return null;
+    };
+
+    setPosInStyle(noticeInstance: NoticeInstance) {
+        const style = {};
+        ['top', 'left', 'bottom', 'right'].forEach(pos => {
+            if (pos in noticeInstance) {
+                const val = noticeInstance[pos];
+                style[pos] = typeof val === 'number' ? `${val}px` : val;
+            }
+        });
+        return style;
+    }
+
+    render() {
+        let { notices } = this.state;
+        const { removedItems } = this.state;
+        notices = Array.from(new Set([...notices, ...removedItems]));
+        const noticesInPosition: NoticesInPosition = {
+            top: [],
+            topLeft: [],
+            topRight: [],
+            bottom: [],
+            bottomLeft: [],
+            bottomRight: [],
+        };
+        notices.forEach(notice => {
+            const direction = notice.direction || this.context.direction;
+            const defaultPosition = direction === 'rtl' ? 'topLeft' : 'topRight';
+            const position = notice.position || defaultPosition;
+            noticesInPosition[position].push(notice);
+        });
+        const noticesList = Object.entries(noticesInPosition).map(obj => {
+            const pos = obj[0];
+            const noticesInPos = obj[1];
+            return this.renderNoticeInPosition(noticesInPos, pos as NoticePosition, removedItems);
+        });
+
+        return <React.Fragment>{noticesList}</React.Fragment>;
+    }
+
+
+}
+
+NotificationList.useNotification = useNotification;
+
+export default NotificationList;

package/notification/notice.tsx

@@ -0,0 +1,185 @@
+/* eslint-disable no-unreachable */
+import React from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import ConfigContext from '../configProvider/context';
+import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/notification/constants';
+import NotificationFoundation, {
+    NoticeAdapter,
+    NoticeState,
+    NoticeProps
+} from '@douyinfe/semi-foundation/notification/notificationFoundation';
+import Button from '../iconButton';
+import BaseComponent from '../_base/baseComponent';
+import { isSemiIcon } from '../_utils';
+import { noop } from 'lodash';
+import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconAlertCircle, IconClose } from '@douyinfe/semi-icons';
+
+export interface NoticeReactProps extends NoticeProps{
+    style?: React.CSSProperties;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: (e: React.MouseEvent) => void;
+}
+
+const prefixCls = cssClasses.NOTICE;
+const { duration } = numbers;
+const { types, themes, directions } = strings;
+
+class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        duration: PropTypes.number,
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        title: PropTypes.node,
+        content: PropTypes.node, // strings、numbers、array、element
+        type: PropTypes.oneOf(types),
+        theme: PropTypes.oneOf(themes),
+        icon: PropTypes.node,
+        onClick: PropTypes.func,
+        onClose: PropTypes.func,
+        onCloseClick: PropTypes.func,
+        showClose: PropTypes.bool,
+        // private props
+        close: PropTypes.func,
+        direction: PropTypes.oneOf(directions),
+    };
+
+    static defaultProps = {
+        duration,
+        id: '',
+        close: noop,
+        onClose: noop,
+        onClick: noop,
+        onCloseClick: noop,
+        content: '',
+        title: '',
+        showClose: true,
+        theme: 'normal',
+    };
+
+    get adapter(): NoticeAdapter {
+        return {
+            ...super.adapter,
+            notifyWrapperToRemove: (id: string) => {
+                this.props.close(id);
+            },
+            notifyClose: () => {
+                this.props.onClose();
+                this.props.onHookClose && this.props.onHookClose();
+            },
+        };
+    }
+
+    constructor(props: NoticeReactProps) {
+        super(props);
+        this.state = {
+            visible: true,
+        };
+
+        this.foundation = new NotificationFoundation(this.adapter);
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    renderTypeIcon() {
+        const { type, icon } = this.props;
+        const iconMap = {
+            warning: <IconAlertTriangle size="large" />,
+            success: <IconTickCircle size="large" />,
+            info: <IconInfoCircle size="large" />,
+            error: <IconAlertCircle size="large" />,
+        };
+        let iconType = iconMap[type];
+        const iconCls = cls({
+            [`${prefixCls }-icon`]: true,
+            [`${prefixCls }-${ type}`]: true,
+        });
+        if (icon) {
+            iconType = icon;
+        }
+        if (iconType) {
+            return (
+                <div className={iconCls}>
+                    {isSemiIcon(iconType) ? React.cloneElement(iconType, {size : iconType.props.size || 'large'}): iconType}
+                </div>
+            );
+        }
+        return null;
+    }
+
+    clearCloseTimer = () => {
+        this.foundation._clearCloseTimer();
+    };
+
+    startCloseTimer = () => {
+        this.foundation._startCloseTimer();
+    };
+
+    close = (e: React.MouseEvent) => {
+        this.props.onCloseClick(this.props.id);
+        this.foundation.close(e);
+    };
+
+    notifyClick = (e: React.MouseEvent) => {
+        this.props.onClick(e);
+    };
+
+    render() {
+        const direction = this.props.direction || this.context.direction;
+        const defaultPosition = direction === 'rtl' ? 'topLeft' : 'topRight';
+        const {
+            content,
+            title,
+            theme,
+            position = defaultPosition,
+            type,
+            id,
+            onCloseClick,
+            className,
+            showClose,
+            style,
+            ...attr
+        } = this.props;
+        const { visible } = this.state;
+        const wrapper = cls(prefixCls, className, {
+            [`${prefixCls}-close`]: !visible,
+            [`${prefixCls}-icon-show`]: types.includes(type),
+            [`${prefixCls}-${type}`]: true,
+            [`${prefixCls}-${theme}`]: theme === 'light',
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+        });
+        return (
+            <div
+                className={wrapper}
+                style={style}
+                onMouseEnter={this.clearCloseTimer}
+                onMouseLeave={this.startCloseTimer}
+                onClick={this.notifyClick}
+            >
+                <div>{this.renderTypeIcon()}</div>
+                <div className={`${prefixCls}-inner`}>
+                    <div className={`${prefixCls}-content-wrapper`}>
+                        {title ? <div className={`${prefixCls}-title`}>{title}</div> : ''}
+                        {content ? <div className={`${prefixCls}-content`}>{content}</div> : ''}
+                    </div>
+                    {showClose && (
+                        <Button
+                            className={`${prefixCls}-icon-close`}
+                            type="tertiary"
+                            icon={<IconClose />}
+                            theme="borderless"
+                            size="small"
+                            onClick={this.close}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Notice;

package/notification/useNotification/HookNotice.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import Notice from '../notice';
+import { NoticeInstance } from '@douyinfe/semi-foundation/notification/notificationFoundation';
+
+export interface HookNoticeProps extends NoticeInstance{
+    afterClose: (id: string) => void;
+}
+
+const HookNotice = ({ afterClose, ...config }: HookNoticeProps, ref: React.Ref<any>) => {
+    const [visible, setVisible] = useState(true);
+
+    const close = () => {
+        setVisible(false);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        close: () => {
+            setVisible(false);
+        }
+    }));
+
+    useEffect(() => {
+        if (!visible) {
+            afterClose(String(config.id));
+        }
+    }, [visible]);
+
+    return visible ? (
+        <Notice
+            {...config}
+            onHookClose={close}
+        />
+    ) : null;
+};
+
+export default React.forwardRef(HookNotice);

package/notification/useNotification/index.tsx

@@ -0,0 +1,94 @@
+import React, { ReactElement, ReactNode, useState } from 'react';
+import cls from 'classnames';
+import { cssClasses } from '@douyinfe/semi-foundation/notification/constants';
+import HookNotice from './HookNotice';
+import '@douyinfe/semi-foundation/notification/notification.scss';
+import getUuid from '@douyinfe/semi-foundation/utils/uuid';
+import { NoticeInstance, NoticePosition, NoticeProps } from '@douyinfe/semi-foundation/notification/notificationFoundation';
+import { NoticesInPosition } from '@douyinfe/semi-ui/notification/index';
+// TODO: Automatic folding + unfolding function when there are more than N
+
+const defaultConfig = {
+    duration: 3,
+    position: 'topRight' as NoticePosition,
+    motion: true,
+    content: '',
+    title: '',
+    zIndex: 1010,
+};
+
+function usePatchElement(): [ReactNode[], typeof patchElement] {
+    const [elements, setElements] = useState([]);
+
+    function patchElement(element: ReactElement, config: NoticeInstance) {
+        setElements(originElements => [{ element, config }, ...originElements]);
+
+        return (id: string) => {
+            setElements(originElements => originElements.filter(({ config: configOfCurrentElement }) => configOfCurrentElement.id !== id));
+        };
+    }
+
+    function renderList() {
+        const noticesInPosition: NoticesInPosition = {
+            top: [],
+            topLeft: [],
+            topRight: [],
+            bottom: [],
+            bottomLeft: [],
+            bottomRight: [],
+        };
+        elements.forEach(({ element, config }) => {
+            const { position } = config;
+            noticesInPosition[position].push(element);
+        });
+        return Object.entries(noticesInPosition).map(obj => {
+            const pos = obj[0];
+            const notices = obj[1];
+            // @ts-ignore
+            return Array.isArray(notices) && notices.length ? <div key={pos} className={cls(cssClasses.LIST)} placement={pos}>{notices}</div> : null;
+        });
+    }
+
+    return [
+        renderList(),
+        patchElement,
+    ];
+}
+
+export default function useNotification() {
+    const [elements, patchElement] = usePatchElement();
+    const noticeRef = new Map<string, { close: () => void } & ReactElement>();
+
+    const id = getUuid('semi_notice_');
+    const addNotice = (config: NoticeProps) => {
+        const mergeConfig = {
+            ...config,
+            id,
+        };
+        // eslint-disable-next-line prefer-const
+        let closeFunc: ReturnType<typeof patchElement>;
+        const ref = (ele: { close: () => void } & ReactElement) => {
+            noticeRef.set(id, ele);
+        };
+        const notice = <HookNotice key={id} {...mergeConfig} afterClose={(instanceID: string) => closeFunc(instanceID)} ref={ref} />;
+        closeFunc = patchElement(notice, { ...mergeConfig });
+        return id;
+    };
+
+    const removeElement = (instanceID: string) => {
+        const ele = noticeRef.get(instanceID);
+        ele && ele.close();
+    };
+
+    return [
+        {
+            success: (config: NoticeProps) => addNotice({ ...defaultConfig, ...config, type: 'success' }),
+            info: (config: NoticeProps) => addNotice({ ...defaultConfig, ...config, type: 'info' }),
+            error: (config: NoticeProps) => addNotice({ ...defaultConfig, ...config, type: 'error' }),
+            warning: (config: NoticeProps) => addNotice({ ...defaultConfig, ...config, type: 'warning' }),
+            open: (config: NoticeProps) => addNotice({ ...defaultConfig, ...config, type: 'default' }),
+            close: removeElement,
+        },
+        <>{elements}</>,
+    ];
+}

package/overflowList/__test__/overflowList.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
+import OverflowList from '../index';
+
+describe('OverflowList', () => {
+    it('render basic', () => {
+        const node = mount(
+            <OverflowList
+                items={[{ key: 'alarm' }, { key: 'bookmark' }, { key: 'camera' }, { key: 'duration' }]}
+                visibleItemRenderer={item => <div>{item.key}</div>}
+                overflowRenderer={() => null}
+            />
+        );
+        expect(node.find(`.${BASE_CLASS_PREFIX}-overflow-list`).exists()).toEqual(true);
+        expect(node.find(`.${BASE_CLASS_PREFIX}-overflow-list-spacer`).exists()).toEqual(true);
+    });
+    it('render scroll', () => {
+        const node = mount(
+            <OverflowList
+                items={[{ key: 'alarm' }, { key: 'bookmark' }, { key: 'camera' }, { key: 'duration' }]}
+                visibleItemRenderer={item => <div>{item.key}</div>}
+                overflowRenderer={() => [null, null]}
+                renderMode="scroll"
+            />
+        );
+        expect(node.find(`.${BASE_CLASS_PREFIX}-overflow-list`).exists()).toEqual(true);
+        expect(node.find(`.${BASE_CLASS_PREFIX}-overflow-list-scroll-wrapper`).exists()).toEqual(true);
+        node.unmount();
+    });
+});

package/overflowList/_story/Demo.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import OverflowList from '../index';
+import { Icon, Tag } from '../../index';
+
+const ITEMS = [
+    { icon: "folder-close", key: "All" },
+    { icon: "folder-close", key: "Users" },
+    { icon: "folder-close", key: "Janet" },
+    { href: "#", icon: "folder-close", key: "Photos" },
+    { href: "#", icon: "folder-close", key: "Wednesday" },
+    { icon: "document", key: "image", current: true },
+];
+class Demo extends React.Component {
+    renderOverflow = (items: any[]) => {
+        // console.log('overflow items: ', items);
+        return (<Tag>{items.length}</Tag>)
+    }
+    renderItem = (item: any, ind: number) => {
+        // console.log('visible item: ', item);
+        return (<span key={item.key} style={{ marginRight: 8 }}>{item.key}</span>)
+    }
+    render() {
+        return (
+            <div style={{ width: '30%' }}>
+                <OverflowList
+                    items={ITEMS}
+                    onOverflow={(item => console.log(item))}
+                    overflowRenderer={items => this.renderOverflow(items)}
+                    visibleItemRenderer={this.renderItem}
+                />
+            </div>
+        );
+    }
+}
+
+export default Demo