@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/toast/index.tsx

@@ -1,234 +0,0 @@
-/* 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

@@ -1,152 +0,0 @@
-/* eslint-disable max-len */
-import React, { CSSProperties } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import ConfigContext, { ContextValue } 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);
-    }
-
-    context: ContextValue;
-
-    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
-                role="alert"
-                aria-label={`${type ? type : 'default'} type`}
-                className={toastCls}
-                style={style}
-                onMouseEnter={this.clearCloseTimer}
-                onMouseLeave={this.startCloseTimer}
-            >
-                <div className={`${prefixCls}-content`}>
-                    {this.renderIcon()}
-                    <span className={`${prefixCls}-content-text`} style={textStyle} x-semi-prop="content">
-                        {content}
-                    </span>
-                    {showClose && (
-                        <div className={`${prefixCls}-close-button`}>
-                            <Button
-                                onClick={e => this.close(e)}
-                                type="tertiary"
-                                icon={<IconClose x-semi-prop="icon" />}
-                                theme={btnTheme}
-                                size={btnSize}
-                            />
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Toast;

package/toast/useToast/HookToast.tsx

@@ -1,35 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Toast from '../toast';
-import { ToastInstance } from '@douyinfe/semi-foundation/toast/toastFoundation';
-
-interface HookToastProps extends ToastInstance{
-    afterClose: (id: string) => void;
-}
-
-const HookToast = ({ afterClose, ...config }: HookToastProps, ref: React.Ref<any>) => {
-    const [visible, setVisible] = useState(true);
-    const close = () => {
-        setVisible(false);
-    };
-
-    React.useImperativeHandle(ref, () => ({
-        close: () => {
-            setVisible(false);
-        }
-    }));
-
-    useEffect(() => {
-        if (!visible) {
-            afterClose(config.id);
-        }
-    }, [visible]);
-
-    return visible ? (
-        <Toast
-            {...config}
-            close={close}
-        />
-    ) : null;
-};
-
-export default React.forwardRef(HookToast);

package/toast/useToast/index.tsx

@@ -1,79 +0,0 @@
-import React, { ReactElement } from 'react';
-import getUuid from '@douyinfe/semi-foundation/utils/uuid';
-import HookToast from './HookToast';
-import { ToastInstance, ToastProps } from '@douyinfe/semi-foundation/toast/toastFoundation';
-
-// const ref = null;
-// TODO: toast larger than N bars, automatic folding, allowing expansion, N configurable
-
-const defaultOpts = {
-    motion: true,
-    zIndex: 1010,
-    duration: 3,
-};
-
-function usePatchElement(): [any, typeof patchElement] {
-    const [elements, setElements] = React.useState([]);
-
-    function patchElement(element: ReactElement, config: ToastInstance) {
-        setElements(originElements => [{ element, config }, ...originElements]);
-
-        return (id: string) => {
-            setElements(originElements =>
-                originElements.filter(({ config: configOfCurrentElement }) => configOfCurrentElement.id !== id));
-        };
-    }
-
-    return [elements, patchElement];
-}
-
-export default function useToast() {
-    const [elements, patchElement] = usePatchElement();
-    const toastRef = new Map<string, { close: () => void } & ReactElement>();
-
-    const addToast = (config: ToastProps) => {
-        const id = getUuid('semi_toast_');
-        const mergeConfig = {
-            ...config,
-            id,
-        };
-        // eslint-disable-next-line prefer-const
-        let closeFunc: ReturnType<typeof patchElement>;
-        const ref = (ele: { close: () => void } & ReactElement) => {
-            toastRef.set(id, ele);
-        };
-        const toast = (
-            <HookToast
-                {...mergeConfig}
-                key={id}
-                afterClose={instanceId => closeFunc(instanceId)}
-                ref={ref}
-            />
-        );
-        closeFunc = patchElement(toast, { ...mergeConfig });
-        return id;
-    };
-
-    const removeElement = (id: string) => {
-        const ele = toastRef.get(id);
-        ele && ele.close();
-    };
-
-    return [
-        {
-            success: (config: ToastProps) => addToast({ ...defaultOpts, ...config, type: 'success' }),
-            info: (config: ToastProps) => addToast({ ...defaultOpts, ...config, type: 'info' }),
-            error: (config: ToastProps) => addToast({ ...defaultOpts, ...config, type: 'error' }),
-            warning: (config: ToastProps) => addToast({ ...defaultOpts, ...config, type: 'warning' }),
-            open: (config: ToastProps) => addToast({ ...defaultOpts, ...config, type: 'default' }),
-            close: (id: string) => removeElement(id)
-        },
-        <>
-            {
-                Array.isArray(elements) && elements.length ?
-                    <>{elements.map(item => item.element)}</> :
-                    null
-            }
-        </>,
-    ];
-}

package/tooltip/ArrowBoundingShape.ts

@@ -1,8 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default PropTypes.shape({
-    offsetX: PropTypes.number,
-    offsetY: PropTypes.number,
-    width: PropTypes.number, // This value is swapped with height when position is leftXXX or rightXXX
-    height: PropTypes.number,
-});

package/tooltip/TooltipStyledTransition.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-shadow */
-import { StyledTransition } from '@douyinfe/semi-animation-react';
-import React from 'react';
-import { cssClasses } from '@douyinfe/semi-foundation/tooltip/constants';
-import getMotionObjFromProps from '@douyinfe/semi-foundation/utils/getMotionObjFromProps';
-import { Motion } from '../_base/base';
-
-const enterCls = `${cssClasses.PREFIX}-bounceIn`;
-const leaveCls = `${cssClasses.PREFIX}-zoomOut`;
-
-export interface TooltipTransitionProps {
-    [key: string]: any;
-    children?: (arg: any) => React.ReactNode;
-    motion?: Motion<TooltipTransitionProps>;
-}
-const TooltipTransition: React.FC<TooltipTransitionProps> = (props = {}) => {
-    const { children } = props;
-    const motion = getMotionObjFromProps(props);
-
-    //  add fillMode forwards to fix issue 715, tooltip close will flashing under react 18
-    return (
-        <StyledTransition {...props} enter={enterCls} leave={leaveCls} duration={'100ms'} {...motion} fillMode='forwards'>
-            {typeof children === 'function' ?
-                ({ animateCls, animateEvents, animateStyle }: any) => children({ animateCls, animateEvents, animateStyle }) :
-                children}
-        </StyledTransition>
-    );
-};
-
-export default TooltipTransition;

package/tooltip/TriangleArrow.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const TriangleArrow: React.FC<{ [key: string]: any }> = props => {
-    const { className, style, ...restProps } = props;
-    return (
-        <svg aria-hidden className={className} style={style} {...restProps} width="24" height="7" viewBox="0 0 24 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <path d="M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z" />
-        </svg>
-    );
-};
-
-export default TriangleArrow;

package/tooltip/TriangleArrowVertical.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-const TriangleArrowVertical: React.FC<{ [key: string]: any }> = props => {
-    const { className, style, ...restProps } = props;
-    return (
-        <svg aria-hidden className={className} style={style} {...restProps} width="7" height="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-            <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" />
-        </svg>
-    );
-};
-
-export default TriangleArrowVertical;