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

package/popconfirm/index.tsx

@@ -1,249 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { noop, get } from 'lodash';
-import { cssClasses, numbers } from '@douyinfe/semi-foundation/popconfirm/constants';
-import PopconfirmFoundation, { PopconfirmAdapter } from '@douyinfe/semi-foundation/popconfirm/popconfirmFoundation';
-import { IconClose, IconAlertTriangle } from '@douyinfe/semi-icons';
-import BaseComponent from '../_base/baseComponent';
-import Popover, { PopoverProps } from '../popover';
-import { Position, Trigger } from '../tooltip';
-import Button, { ButtonProps } from '../button';
-import { Type as ButtonType } from '../button/Button';
-import ConfigContext, { ContextValue } from '../configProvider/context';
-import LocaleConsumer from '../locale/localeConsumer';
-import { Locale as LocaleObject } from '../locale/interface';
-import '@douyinfe/semi-foundation/popconfirm/popconfirm.scss';
-import { Motion } from '../_base/base';
-
-export interface PopconfirmProps extends PopoverProps {
-    cancelText?: string;
-    cancelButtonProps?: ButtonProps;
-    cancelType?: ButtonType;
-    content?: React.ReactNode;
-    defaultVisible?: boolean;
-    disabled?: boolean;
-    icon?: React.ReactNode;
-    okText?: string;
-    okType?: ButtonType;
-    okButtonProps?: ButtonProps;
-    motion?: Motion;
-    title?: React.ReactNode;
-    visible?: boolean;
-    prefixCls?: string;
-    zIndex?: number;
-    trigger?: Trigger;
-    position?: Position;
-    onCancel?: (e: React.MouseEvent) => void;
-    onConfirm?: (e: React.MouseEvent) => void;
-    onVisibleChange?: (visible: boolean) => void;
-    onClickOutSide?: (e: React.MouseEvent) => void;
-}
-
-export interface PopconfirmState {
-    visible: boolean;
-}
-
-interface PopProps {
-    [x: string]: any;
-}
-
-export default class Popconfirm extends BaseComponent<PopconfirmProps, PopconfirmState> {
-    static contextType = ConfigContext;
-    static propTypes = {
-        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-        disabled: PropTypes.bool,
-        content: PropTypes.any,
-        title: PropTypes.any,
-        prefixCls: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        okText: PropTypes.string,
-        okType: PropTypes.string,
-        cancelText: PropTypes.string,
-        cancelType: PropTypes.string,
-        onCancel: PropTypes.func,
-        onConfirm: PropTypes.func,
-        onClickOutSide: PropTypes.func,
-        onVisibleChange: PropTypes.func,
-        visible: PropTypes.bool,
-        defaultVisible: PropTypes.bool,
-        okButtonProps: PropTypes.object,
-        cancelButtonProps: PropTypes.object,
-        stopPropagation: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-        zIndex: PropTypes.number,
-        // private
-        trigger: PropTypes.string,
-        position: PropTypes.string,
-    };
-
-    static defaultProps = {
-        stopPropagation: true,
-        trigger: 'click',
-        // position: 'bottomLeft',
-        onVisibleChange: noop,
-        disabled: false,
-        icon: <IconAlertTriangle size="extra-large" />,
-        okType: 'primary',
-        cancelType: 'tertiary',
-        prefixCls: cssClasses.PREFIX,
-        zIndex: numbers.DEFAULT_Z_INDEX,
-        onCancel: noop,
-        onConfirm: noop,
-        onClickOutSide: noop,
-    };
-
-    constructor(props: PopconfirmProps) {
-        super(props);
-
-        this.state = {
-            visible: props.defaultVisible || false,
-        };
-
-        this.foundation = new PopconfirmFoundation(this.adapter);
-    }
-
-    context: ContextValue;
-
-    static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState) {
-        const willUpdateStates: Partial<PopconfirmState> = {};
-        const { hasOwnProperty } = Object.prototype;
-
-        if (hasOwnProperty.call(props, 'visible')) {
-            willUpdateStates.visible = props.visible;
-        }
-
-        return willUpdateStates;
-    }
-
-    get adapter(): PopconfirmAdapter<PopconfirmProps, PopconfirmState> {
-        return {
-            ...super.adapter,
-            setVisible: (visible: boolean): void => this.setState({ visible }),
-            notifyConfirm: (e: React.MouseEvent): void => this.props.onConfirm(e),
-            notifyCancel: (e: React.MouseEvent): void => this.props.onCancel(e),
-            notifyVisibleChange: (visible: boolean): void => this.props.onVisibleChange(visible),
-            notifyClickOutSide: (e: React.MouseEvent) => this.props.onClickOutSide(e),
-        };
-    }
-
-    handleCancel = (e: React.MouseEvent): void => this.foundation.handleCancel(e && e.nativeEvent);
-
-    handleConfirm = (e: React.MouseEvent): void => this.foundation.handleConfirm(e && e.nativeEvent);
-
-    handleVisibleChange = (visible: boolean): void => this.foundation.handleVisibleChange(visible);
-
-    handleClickOutSide = (e: React.MouseEvent) => this.foundation.handleClickOutSide(e);
-
-    stopImmediatePropagation = (e: React.SyntheticEvent): void => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
-
-    renderControls() {
-        const { okText, cancelText, okType, cancelType, cancelButtonProps, okButtonProps } = this.props;
-        return (
-            <LocaleConsumer componentName="Popconfirm">
-                {(locale: LocaleObject['Popconfirm'], localeCode: string) => (
-                    <>
-                        <Button type={cancelType} onClick={this.handleCancel} {...cancelButtonProps}>
-                            {cancelText || get(locale, 'cancel')}
-                        </Button>
-                        <Button type={okType} theme="solid" onClick={this.handleConfirm} {...okButtonProps}>
-                            {okText || get(locale, 'confirm')}
-                        </Button>
-                    </>
-                )}
-            </LocaleConsumer>
-        );
-    }
-
-    renderConfirmPopCard() {
-        const { content, title, className, style, cancelType, icon, prefixCls } = this.props;
-        const { direction } = this.context;
-        const popCardCls = cls(
-            prefixCls,
-            className,
-            {
-                [`${prefixCls}-rtl`]: direction === 'rtl',
-            }
-        );
-        const showTitle = title !== null && typeof title !== 'undefined';
-        const showContent = !(content === null || typeof content === 'undefined');
-
-        return (
-            <div className={popCardCls} onClick={this.stopImmediatePropagation} style={style}>
-                <div className={`${prefixCls}-inner`}>
-                    <div className={`${prefixCls}-header`}>
-                        <i className={`${prefixCls}-header-icon`} x-semi-prop="icon">
-                            {React.isValidElement(icon) ? icon : null}
-                        </i>
-                        <div className={`${prefixCls}-header-body`}>
-                            {showTitle ? (
-                                <div className={`${prefixCls}-header-title`} x-semi-prop="title">
-                                    {title}
-                                </div>
-                            ) : null}
-                        </div>
-                        <Button
-                            className={`${prefixCls}-btn-close`}
-                            icon={<IconClose />}
-                            size="small"
-                            theme={'borderless'}
-                            type={cancelType}
-                            onClick={this.handleCancel}
-                        />
-                    </div>
-                    {showContent ? (
-                        <div className={`${prefixCls}-body`} x-semi-prop="content">
-                            {content}
-                        </div>
-                    ) : null} 
-                    <div className={`${prefixCls}-footer`}>{this.renderControls()}</div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        // rtl changes the default position
-        const { direction } = this.context;
-        const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-        const {
-            className,
-            prefixCls,
-            disabled,
-            children,
-            style,
-            position = defaultPosition,
-            ...attrs
-        } = this.props;
-
-        if (disabled) {
-            return children;
-        }
-
-        const { visible } = this.state;
-        const popContent = this.renderConfirmPopCard();
-        const popProps: PopProps = {
-            onVisibleChange: this.handleVisibleChange,
-            className: cssClasses.POPOVER,
-            onClickOutSide: this.handleClickOutSide,
-        };
-
-        if (this.isControlled('visible')) {
-            popProps.trigger = 'custom';
-        }
-
-        return (
-            <Popover
-                {...attrs}
-                content={popContent}
-                visible={visible}
-                position={position}
-                {...popProps}
-            >
-                {children}
-            </Popover>
-        );
-    }
-}

package/popover/Arrow.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { get } from 'lodash';
-import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/popover/constants';
-
-export interface ArrowProps {
-    position?: string;
-    className?: string;
-    arrowStyle?: React.CSSProperties;
-    popStyle?: React.CSSProperties;
-}
-
-const Arrow: React.FC<ArrowProps> = (props = {}) => {
-    const { position = '', className, arrowStyle, popStyle, ...rest } = props;
-    const isVertical = position.indexOf('top') === 0 || position.indexOf('bottom') === 0;
-    const cls = classnames(className, cssClasses.ARROW);
-
-    const borderOpacity = get(arrowStyle, 'borderOpacity', strings.DEFAULT_ARROW_STYLE.borderOpacity);
-    const bgColor = get(
-        arrowStyle,
-        'backgroundColor',
-        get(popStyle, 'backgroundColor', strings.DEFAULT_ARROW_STYLE.backgroundColor)
-    );
-    const borderColor = get(
-        arrowStyle,
-        'borderColor',
-        get(popStyle, 'borderColor', strings.DEFAULT_ARROW_STYLE.borderColor)
-    );
-
-    const wrapProps = {
-        ...rest,
-        width: numbers.ARROW_BOUNDING.width,
-        height: numbers.ARROW_BOUNDING.height,
-        xmlns: 'http://www.w3.org/2000/svg',
-        className: cls,
-    };
-
-    return isVertical ? (
-        <svg {...wrapProps}>
-            <path
-                d="M0 0.5L0 1.5C4 1.5, 5.5 3, 7.5 5S10,8 12,8S14.5 7, 16.5 5S20,1.5 24,1.5L24 0.5L0 0.5z"
-                fill={borderColor}
-                opacity={borderOpacity}
-            />
-            <path d="M0 0L0 1C4 1, 5.5 2, 7.5 4S10,7 12,7S14.5  6, 16.5 4S20,1 24,1L24 0L0 0z" fill={bgColor} />
-        </svg>
-    ) : (
-        <svg {...wrapProps}>
-            <path
-                d="M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z"
-                fill={borderColor}
-                opacity={borderOpacity}
-            />
-            <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" fill={bgColor} />
-        </svg>
-    );
-};
-
-Arrow.propTypes = {
-    position: PropTypes.string,
-    className: PropTypes.string,
-    arrowStyle: PropTypes.object,
-    popStyle: PropTypes.object,
-};
-export default Arrow;

package/popover/__test__/popover.test.js

@@ -1,52 +0,0 @@
-import { clear } from 'jest-date-mock';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-import Popover from '../index';
-import { Button } from '../../index';
-
-import { genAfterEach, genBeforeEach, mount, sleep } from '../../_test_/utils';
-
-const wrapCls = `${BASE_CLASS_PREFIX}-popover`;
-const wrapSelector = `.${wrapCls}`;
-const triggerCls = 'trigger';
-
-describe(`Popover`, () => {
-    beforeEach(() => {
-        clear();
-        genBeforeEach()();
-    });
-
-    afterEach(genAfterEach());
-
-    it(`test appearance`, async () => {
-        const contentId = `content`;
-        const elem = mount(
-            <Popover trigger={'hover'} visible={true} content={<p id={contentId}>I'm content</p>} showArrow={true}>
-                <Button>Hover Me</Button>
-            </Popover>
-        );
-
-        // check if popover showed or not
-        expect(document.querySelectorAll(wrapSelector).length > 0).toBeTruthy();
-        expect(document.querySelectorAll(`#${contentId}`).length > 0).toBeTruthy();
-
-        // check if popover has arrow icon or not
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-popover-icon-arrow`).length > 0).toBeTruthy();
-    });
-
-    it(`test appearance without arrow`, async () => {
-        const contentId = `content`;
-        const elem = mount(
-            <Popover trigger={'hover'} visible={true} content={<p id={contentId}>I'm content</p>} spacing={0}>
-                <Button>Hover Me</Button>
-            </Popover>
-        );
-
-        // check if popover showed or not
-        expect(document.querySelectorAll(wrapSelector).length > 0).toBeTruthy();
-        expect(document.querySelectorAll(`#${contentId}`).length > 0).toBeTruthy();
-
-        // check if popover has arrow icon or not
-        expect(document.querySelectorAll(`.${BASE_CLASS_PREFIX}-popover-icon-arrow`).length === 0).toBeTruthy();
-    });
-});

package/popover/_story/ArrowPointAtCenter/index.jsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { Tag, Popover } from '../../../index';
-
-function Item(props = {}) {
-    const tops = [
-        ['topLeft', 'TL'],
-        ['top', 'Top'],
-        ['topRight', 'TR'],
-    ];
-    const lefts = [
-        ['leftTop', 'LT'],
-        ['left', 'Left'],
-        ['leftBottom', 'LB'],
-    ];
-    const rights = [
-        ['rightTop', 'RT'],
-        ['right', 'Right'],
-        ['rightBottom', 'RB'],
-    ];
-    const bottoms = [
-        ['bottomLeft', 'BL'],
-        ['bottom', 'Bottom'],
-        ['bottomRight', 'BR'],
-    ];
-
-    const { tagStyle, ...restProps } = props;
-
-    return (
-        <div style={{ paddingLeft: 40 }}>
-            <div style={{ marginLeft: 40, whiteSpace: 'nowrap' }}>
-                {tops.map((pos, index) => (
-                    <Popover
-                        content={(
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        )
-                        }
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        arrowPointAtCenter={true}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Popover>
-                ))}
-            </div>
-            <div style={{ width: 40, float: 'left' }}>
-                {lefts.map((pos, index) => (
-                    <Popover
-                        content={(
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        )}
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        arrowPointAtCenter={true}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Popover>
-                ))}
-            </div>
-            <div style={{ width: 40, marginLeft: 180 }}>
-                {rights.map((pos, index) => (
-                    <Popover
-                        content={(
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        )}
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        arrowPointAtCenter={true}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Popover>
-                ))}
-            </div>
-            <div style={{ marginLeft: 40, clear: 'both', whiteSpace: 'nowrap' }}>
-                {bottoms.map((pos, index) => (
-                    <Popover
-                        content={(
-                            <article>
-                                <p>hi bytedance</p>
-                                <p>hi bytedance</p>
-                            </article>
-                        )}
-                        position={Array.isArray(pos) ? pos[0] : pos}
-                        key={index}
-                        trigger={'click'}
-                        arrowPointAtCenter={true}
-                        {...restProps}
-                    >
-                        <Tag style={tagStyle}>{Array.isArray(pos) ? pos[1] : pos}</Tag>
-                    </Popover>
-                ))}
-            </div>
-        </div>
-    );
-}
-
-function Demo() {
-    return (
-        <div>
-            <div style={{ padding: 120 }}>
-                <Item showArrow />
-            </div>
-            <div style={{ padding: 120 }}>
-                <Item showArrow tagStyle={{ minHeight: 80, minWidth: 120 }} />
-            </div>
-            <div style={{ padding: 120 }}>
-                <Item showArrow tagStyle={{ minHeight: 80, minWidth: 120 }} style={{ backgroundColor: 'green' }} />
-            </div>
-            <div style={{ padding: 120 }}>
-                <Item
-                    showArrow
-                    tagStyle={{ minHeight: 80, minWidth: 120 }}
-                    style={{ backgroundColor: 'pink' }}
-                    content={null}
-                />
-            </div>
-            <div style={{ padding: 120 }}>
-                <Item showArrow content={null} style={{ backgroundColor: 'orange' }} />
-            </div>
-        </div>
-    );
-}
-
-export default Demo;

package/popover/_story/BtnClose/index.jsx

@@ -1,80 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Select, Popover, Tag, Button, Dropdown } from '@douyinfe/semi-ui';
-
-const { Option } = Select;
-
-const SelectSection = () => {
-    useEffect(() => {
-        console.log('SelectSection mounted');
-
-        return () => {
-            console.log('SelectSection unmounted');
-        };
-    }, []);
-
-    return (
-        <Select
-            defaultValue="abc"
-            style={{ width: 120 }}
-            getPopupContainer={() => document.querySelector('#popup-container')}
-        >
-            <Option value="abc">抖音</Option>
-            <Option value="hotsoon">火山</Option>
-            <Option value="pipixia" disabled>
-                皮皮虾
-            </Option>
-            <Option value="xigua">西瓜视频</Option>
-        </Select>
-    );
-};
-
-function Demo() {
-    const [popupVisible, setPopupVisible] = useState(false);
-    const [dropdownVisible, setDropdownVisible] = useState(false);
-    const cachedSelect = useMemo(() => <SelectSection />, []);
-
-    return (
-        <div style={{ margin: 50 }}>
-            <Popover
-                visible={popupVisible}
-                onVisibleChange={v => setPopupVisible(v)}
-                position={'bottomLeft'}
-                content={(
-                    <div style={{ padding: 20 }} id={'popup-container'}>
-                        <p>123456</p>
-                        <div>
-                            <Button onClick={() => setPopupVisible(false)}>关闭浮层</Button>
-                        </div>
-                        {cachedSelect}
-                        <div>
-                            <Dropdown
-                                trigger={'click'}
-                                position={'bottomLeft'}
-                                visible={dropdownVisible}
-                                onVisibleChange={v => setDropdownVisible(v)}
-                                getPopupContainer={() => document.querySelector('#popup-container')}
-                                render={(
-                                    <Dropdown.Menu>
-                                        {[1, 2, 3].map(index => (
-                                            <Dropdown.Item key={index} onClick={() => setDropdownVisible(false)}>
-                                                Menu Item {index}
-                                            </Dropdown.Item>
-                                        ))}
-                                    </Dropdown.Menu>
-                                )}
-                            >
-                                <Button>Click me</Button>
-                            </Dropdown>
-                        </div>
-                    </div>
-                )}
-                trigger="click"
-                showArrow
-            >
-                <Tag>点击此处</Tag>
-            </Popover>
-        </div>
-    );
-}
-
-export default Demo;

package/popover/_story/NestedPopover/index.js

@@ -1,41 +0,0 @@
-import React, { useState } from 'react';
-import Popover from '../../index';
-import Tooltip from '../../../tooltip/index';
-import Popconfirm from '../../../popconfirm/index';
-import Icon from '../../../icons';
-import { IconAlertTriangle, IconDelete } from '@douyinfe/semi-icons';
-export default function Demo() {
-    const [popoverVisible, setPopoverVisible] = useState(false);
-    return (
-        <div
-            style={{
-                padding: 50,
-            }}
-        >
-            <Popconfirm
-                visible={popoverVisible}
-                trigger="custom"
-                title="确定是否要删除此标签"
-                content="此修改将不可逆"
-                okType="danger"
-                icon={(
-                    <Icon
-                        style={{
-                            color: '#fa392f',
-                        }}
-                        type={<IconAlertTriangle />}
-                        size="extra-large"
-                    />
-                )}
-                onConfirm={e => setPopoverVisible(false)}
-                onCancel={e => setPopoverVisible(false)}
-            >
-                <span>
-                    <Tooltip content="删除标签">
-                        <Icon type={<IconDelete />} onClick={e => setPopoverVisible(!popoverVisible)} />
-                    </Tooltip>
-                </span>
-            </Popconfirm>
-        </div>
-    );
-}

package/popover/_story/PopRight/index.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Tag, Popover } from '@douyinfe/semi-ui';
-
-import './index.scss';
-
-export default function Demo() {
-    return (
-        <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
-            <Popover
-                trigger="click"
-                position="bottomRight"
-                content={(
-                    <div className={'popText'}>
-                        <div className={'item'}>
-                            <span className={'label'}>获得奖励：</span>
-                            <span className={'value'}>火力</span>
-                        </div>
-                    </div>
-                )}
-            >
-                <Tag>Click Me</Tag>
-            </Popover>
-        </div>
-    );
-}

package/popover/_story/PopRight/index.scss

@@ -1,25 +0,0 @@
-.popText {
-    padding: 8px 12px;
-
-    .item {
-        display: flex;
-        word-break: keep-all;
-        margin-bottom: 8px;
-        font-size: 12px;
-        font-weight: bold;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-
-        .label {
-            color: #9b9ea0;
-            flex-shrink: 0;
-        }
-
-        .value {
-            color: #272829;
-            flex-shrink: 0;
-        }
-    }
-}