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

package/popconfirm/index.tsx

@@ -0,0 +1,239 @@
+/* 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 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);
+    }
+
+    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`}>
+                            {React.isValidElement(icon) ? icon : null}
+                        </i>
+                        <div className={`${prefixCls}-header-body`}>
+                            {showTitle ? <div className={`${prefixCls}-header-title`}>{title}</div> : null}
+                            {showContent ? <div className={`${prefixCls}-header-content`}>{content}</div> : null}
+                        </div>
+                        <Button
+                            className={`${prefixCls}-btn-close`}
+                            icon={<IconClose />}
+                            size="small"
+                            theme={'borderless'}
+                            type={cancelType}
+                            onClick={this.handleCancel}
+                        />
+                    </div>
+                    <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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,25 @@
+.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;
+        }
+    }
+}