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

package/popover/index.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import ConfigContext from '../configProvider/context';
+import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/popover/constants';
+import Tooltip, { ArrowBounding, Position, Trigger } from '../tooltip/index';
+import Arrow from './Arrow';
+import '@douyinfe/semi-foundation/popover/popover.scss';
+import { BaseProps } from '../_base/baseComponent';
+import { Motion } from '../_base/base';
+import { noop } from 'lodash';
+
+export { ArrowProps } from './Arrow';
+declare interface ArrowStyle {
+    borderColor?: string;
+    backgroundColor?: string;
+    borderOpacity?: string | number;
+}
+
+export interface PopoverProps extends BaseProps {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    visible?: boolean;
+    autoAdjustOverflow?: boolean;
+    motion?: Motion;
+    position?: Position;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    trigger?: Trigger;
+    contentClassName?: string | any[];
+    onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
+    showArrow?: boolean;
+    spacing?: number;
+    stopPropagation?: boolean | string;
+    arrowStyle?: ArrowStyle;
+    arrowBounding?: ArrowBounding;
+    arrowPointAtCenter?: boolean;
+    prefixCls?: string;
+    rePosKey?: string | number;
+    getPopupContainer?: () => HTMLElement;
+    zIndex?: number;
+}
+
+export interface PopoverState {
+    popConfirmVisible: boolean;
+}
+const positionSet = strings.POSITION_SET;
+const triggerSet = strings.TRIGGER_SET;
+
+class Popover extends React.PureComponent<PopoverProps, PopoverState> {
+    static contextType = ConfigContext;
+    static propTypes = {
+        children: PropTypes.node,
+        content: PropTypes.node,
+        visible: PropTypes.bool,
+        autoAdjustOverflow: PropTypes.bool,
+        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+        position: PropTypes.oneOf(positionSet),
+        // getPopupContainer: PropTypes.func,
+        mouseEnterDelay: PropTypes.number,
+        mouseLeaveDelay: PropTypes.number,
+        trigger: PropTypes.oneOf(triggerSet).isRequired,
+        contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+        onVisibleChange: PropTypes.func,
+        onClickOutSide: PropTypes.func,
+        style: PropTypes.object,
+        spacing: PropTypes.number,
+        zIndex: PropTypes.number,
+        showArrow: PropTypes.bool,
+        arrowStyle: PropTypes.shape({
+            borderColor: PropTypes.string,
+            backgroundColor: PropTypes.string,
+            borderOpacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        }),
+        arrowPointAtCenter: PropTypes.bool,
+        arrowBounding: PropTypes.object,
+        prefixCls: PropTypes.string,
+    };
+
+    static defaultProps = {
+        arrowBounding: numbers.ARROW_BOUNDING,
+        showArrow: false,
+        autoAdjustOverflow: true,
+        zIndex: numbers.DEFAULT_Z_INDEX,
+        motion: true,
+        trigger: 'hover',
+        cancelText: 'No',
+        okText: 'Yes',
+        position: 'bottom',
+        prefixCls: cssClasses.PREFIX,
+        onClickOutSide: noop,
+    };
+
+    renderPopCard() {
+        const { content, contentClassName, prefixCls } = this.props;
+        const { direction } = this.context;
+        const popCardCls = classNames(
+            prefixCls,
+            contentClassName,
+            {
+                [`${prefixCls}-rtl`]: direction === 'rtl',
+            }
+        );
+        return (
+            <div className={popCardCls}>
+                <div className={`${prefixCls}-content`}>{content}</div>
+            </div>
+        );
+    }
+
+    render() {
+        const {
+            children,
+            prefixCls,
+            showArrow,
+            arrowStyle = {},
+            arrowBounding,
+            position,
+            style,
+            ...attr
+        } = this.props;
+        let { spacing } = this.props;
+        const popContent = this.renderPopCard();
+
+        const arrowProps = {
+            position,
+            className: '',
+            popStyle: style,
+            arrowStyle,
+        };
+
+        const arrow = showArrow ? <Arrow {...arrowProps} /> : false;
+
+        if (typeof spacing !== 'number') {
+            spacing = showArrow ? numbers.SPACING_WITH_ARROW : numbers.SPACING;
+        }
+
+        return (
+            <Tooltip
+                {...(attr as any)}
+                position={position}
+                style={style}
+                content={popContent}
+                prefixCls={prefixCls}
+                spacing={spacing}
+                showArrow={arrow}
+                arrowBounding={arrowBounding}
+            >
+                {children}
+            </Tooltip>
+        );
+    }
+}
+
+export default Popover;

package/progress/__test__/progress.test.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import Progress from '../index';
+
+const getProgress = (props = {}) => mount(<Progress {...props} />);
+
+describe('Progress', () => {
+
+    it('percent pass invalid value like NaN', () => {
+        const p = getProgress({ percent: 30 });
+        function testNaN() {
+            p.setProps({ percent: NaN });
+        }
+        expect(testNaN).toThrow('');
+    });
+
+    it('render successfully', () => {
+        const p = getProgress();
+        const node = p.find(`.${BASE_CLASS_PREFIX}-progress`);
+        expect(node.length).toEqual(1);
+    });
+    it('render circle progress', () => {
+        const p = getProgress({ type: 'circle' });
+        const node = p.find(`svg.${BASE_CLASS_PREFIX}-progress-circle-ring`);
+        expect(node.length).toEqual(1);
+    });
+    it('process change success', () => {
+        const p = getProgress({ type: 'circle', percent: 30 });
+        p.setProps({ percent: 50 });
+        const percentNumber = p.state('percentNumber');
+        setTimeout(() => {
+            expect(percentNumber).toEqual(50);
+        }, 500);
+    });
+
+
+    it('classname & style', () => {
+        const p = getProgress({ className: 'test', color: 'red' });
+        const node = p.find(`.${BASE_CLASS_PREFIX}-progress`);
+        expect(node.length).toEqual(1);
+    });
+    it('showInfo', () => {
+        const p = getProgress({ showInfo: true, percent: 50 });
+        expect(p.exists('.semi-progress-line-text')).toEqual(true);
+    });
+
+    it('stroke & size & orbitStroke', () => {
+        let props = {
+            stroke: '#fc8800',
+            size: 'small',
+            orbitStroke: '#f93920'
+        };
+        const p = getProgress(props);
+        expect(p.exists('.semi-progress-large'))
+    });
+
+    it('direction', () => {
+        const p = getProgress({ direction: 'vertical' });
+        expect(p.exists('.semi-progress-vertical')).toEqual(true);
+    });
+
+    it('format', () => {
+        let props = {
+            percent: 70,
+            showInfo: true,
+            format: () => 'semi',
+            type: 'circle',
+        };
+        const p = getProgress(props);
+        expect(p.find('.semi-progress-circle-text').text()).toEqual('semi');
+    });
+
+    it('strokeLinecap & strokeWidth', () => {
+        let props = {
+            percent: 70,
+            strokeLinecap: 'square',
+            type: 'circle',
+            strokeWidth: 10,
+        };
+        const p = getProgress(props);
+        let firstCircle = p.find('circle').at(0).getDOMNode();
+        expect(firstCircle.getAttribute('stroke-linecap')).toEqual('square');
+        expect(firstCircle.getAttribute('stroke-width')).toEqual('10');
+    });
+
+    it('width', () => {
+        let props = {
+            width: 120,
+            type: 'circle'
+        }
+        const p = getProgress(props);
+        let svgRing = p.find('.semi-progress-circle-ring').at(0).getDOMNode();
+        expect(svgRing.getAttribute('width')).toEqual('120');
+    });
+
+    it('motion = false', () => {
+        let props = {
+            motion: false,
+            percent: 70,
+            showInfo: true
+        }
+        const p = getProgress(props);
+        expect(p.find('.semi-progress-line-text').text()).toEqual('70%');
+        p.setProps({ percent: 80 });
+        p.update();
+        expect(p.find('.semi-progress-line-text').text()).toEqual('80%');
+        p.unmount();
+    });
+
+    it('pass invalid percent like 101, -1', () => {
+        let props = {
+            percent: 101,
+            showInfo: true,
+        };
+        const p = getProgress(props);
+        expect(p.find('.semi-progress-line-text').text()).toEqual('100%');
+
+        let minProps = {
+            percent: -2,
+            showInfo: true,
+        };
+        const minp = getProgress(minProps);
+        expect(minp.find('.semi-progress-line-text').text()).toEqual('0%');
+    });
+});
+

package/progress/_story/progress.stories.js

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { Progress, IconButton } from '../../index';
+
+export default {
+  title: 'Progress'
+}
+
+export const _Progress = () => (
+  <div style={{ width: 200 }}>
+    {/* <Progress percent={10} style= {{ height: 10 }}/> */}
+    <Progress percent={25} />
+    <Progress percent={50} />
+    <Progress percent={80} />
+  </div>
+);
+
+_Progress.story = {
+  name: 'progress',
+};
+
+export const Vertical = () => (
+  <div style={{ height: 200 }}>
+    <Progress percent={10} direction="vertical" style={{ width: 10 }} />
+    <Progress percent={25} direction="vertical" />
+    <Progress percent={50} direction="vertical" />
+    <Progress percent={80} direction="vertical" />
+  </div>
+);
+
+Vertical.story = {
+  name: 'vertical',
+};
+
+export const CircleProgress = () => (
+  <React.Fragment>
+    <Progress percent={10} type="circle" />
+    <Progress percent={25} type="circle" />
+    <Progress percent={50} type="circle" />
+    <Progress percent={80} type="circle" />
+  </React.Fragment>
+);
+
+CircleProgress.story = {
+  name: 'circle progress',
+};
+
+export const CircleProgressSmall = () => (
+  <React.Fragment>
+    <Progress percent={10} type="circle" size="small" />
+    <Progress percent={25} type="circle" size="small" />
+    <Progress percent={50} type="circle" size="small" />
+    <Progress percent={80} type="circle" size="small" />
+  </React.Fragment>
+);
+
+CircleProgressSmall.story = {
+  name: 'circle progress small',
+};
+
+export const ProgressShowInfo = () => (
+  <div style={{ width: 200 }}>
+    {/* <Progress percent={10} style= {{ height: 10 }}/> */}
+    <Progress percent={25} showInfo />
+    <Progress percent={50} showInfo />
+    <Progress percent={80} showInfo />
+  </div>
+);
+
+ProgressShowInfo.story = {
+  name: 'progress showInfo',
+};

package/progress/_story/progress.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Progress from '../index';
+
+const stories = storiesOf('Progress', module);
+
+stories.add('Progress default', () => (
+    <>
+        <Progress direction='horizontal' percent={50} />
+    </>
+));

package/progress/index.tsx

@@ -0,0 +1,245 @@
+import React, { ReactNode, Component } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/progress/constants';
+import '@douyinfe/semi-foundation/progress/progress.scss';
+import { Animation } from '@douyinfe/semi-animation';
+import { Motion } from '../_base/base';
+
+const prefixCls = cssClasses.PREFIX;
+
+export interface ProgressProps {
+    className?: string;
+    direction?: 'horizontal' | 'vertical';
+    format?: (percent: number) => React.ReactNode;
+    motion?: Motion;
+    orbitStroke?: string;
+    percent?: number;
+    showInfo?: boolean;
+    size?: 'default' | 'small' | 'large';
+    stroke?: string;
+    strokeLinecap?: 'round' | 'square';
+    strokeWidth?: number;
+    style?: React.CSSProperties;
+    type?: 'line' | 'circle';
+    width?: number;
+}
+
+export interface ProgressState {
+    percentNumber: number;
+}
+
+class Progress extends Component<ProgressProps, ProgressState> {
+    static propTypes = {
+        className: PropTypes.string,
+        direction: PropTypes.oneOf(strings.directions),
+        format: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
+        orbitStroke: PropTypes.string,
+        percent: PropTypes.number,
+        scale: PropTypes.number,
+        showInfo: PropTypes.bool,
+        size: PropTypes.oneOf(strings.sizes),
+        stroke: PropTypes.string,
+        strokeLinecap: PropTypes.oneOf(strings.strokeLineCap),
+        strokeWidth: PropTypes.number,
+        style: PropTypes.object,
+        type: PropTypes.oneOf(strings.types),
+        width: PropTypes.number,
+    };
+
+    static defaultProps = {
+        className: '',
+        direction: strings.DEFAULT_DIRECTION,
+        format: (text: string): string => `${text }%`,
+        motion: true,
+        orbitStroke: 'var(--semi-color-fill-0)',
+        percent: 0,
+        showInfo: false,
+        size: strings.DEFAULT_SIZE,
+        stroke: 'var(--semi-color-success)',
+        strokeLinecap: strings.DEFAULT_LINECAP,
+        strokeWidth: 4,
+        style: {},
+        type: strings.DEFAULT_TYPE,
+    };
+
+    _mounted: boolean = true;
+
+    animation: Animation;
+
+    constructor(props: ProgressProps) {
+        super(props);
+        this._mounted = true;
+        this.state = {
+            percentNumber: this.props.percent // Specially used for animation of numbers
+        };
+    }
+    componentDidUpdate(prevProps: ProgressProps): void {
+        if (isNaN(this.props.percent) || isNaN(prevProps.percent)) {
+            throw new Error('[Semi Progress]:percent can not be NaN');
+            return;
+        }
+
+        if (prevProps.percent !== this.props.percent) {
+            if (!this.props.motion) {
+                // eslint-disable-next-line
+                this.setState({ percentNumber: this.props.percent });
+                return;
+            }
+            if (this.animation && this.animation.destroy) {
+                this.animation.destroy();
+            }
+            this.animation = new Animation({
+                from: { value: prevProps.percent },
+                to: { value: this.props.percent }
+            }, {
+                // easing: 'cubic-bezier(0, .68, .3, 1)'
+                easing: 'linear',
+                duration: 300
+            });
+            this.animation.on('frame', (props: any) => {
+                // prevent setState while component is unmounted but this timer is called
+                if (this._mounted === false) {
+                    return;
+                }
+                // let percentNumber = Number.isInteger(props.value) ? props.value : Math.floor(props.value * 100) / 100;
+                const percentNumber = parseInt(props.value);
+                this.setState({ percentNumber });
+            });
+            this.animation.on('rest', () => {
+                // prevent setState while component is unmounted but this timer is called
+                if (this._mounted === false) {
+                    return;
+                }
+                this.setState({ percentNumber: this.props.percent });
+            });
+            this.animation.start();
+        }
+    }
+
+    componentWillUnmount(): void {
+        this.animation && this.animation.destroy();
+        this._mounted = false;
+    }
+
+    renderCircleProgress(): ReactNode {
+        const { strokeLinecap, style, className, strokeWidth, format, size, stroke, showInfo, percent, orbitStroke } = this.props;
+        const { percentNumber } = this.state;
+        const classNames = {
+            wrapper: cls(`${prefixCls }-circle`, className),
+            svg: cls(`${prefixCls }-circle-ring`),
+            circle: cls(`${prefixCls }-circle-ring-inner`)
+        };
+        const perc = this.calcPercent(percent);
+        const percNumber = this.calcPercent(percentNumber);
+
+        let width;
+        if (this.props.width) {
+            width = this.props.width;
+        } else {
+            size === strings.DEFAULT_SIZE ? width = 72 : width = 24;
+        }
+
+        // cx, cy is circle center
+        const cy = width / 2;
+        const cx = width / 2;
+        const radius = (width - strokeWidth) / 2; // radius
+        const circumference = radius * 2 * Math.PI;
+        const strokeDashoffset = (1 - perc / 100) * circumference; // Offset
+        const strokeDasharray = `${circumference} ${circumference}`;
+
+        const text = format(percNumber);
+
+        return (
+            <div className={classNames.wrapper} style={style}>
+                <svg key={size} className={classNames.svg} height={width} width={width}>
+                    <circle
+                        strokeDashoffset={0}
+                        strokeWidth={strokeWidth}
+                        strokeDasharray={strokeDasharray}
+                        strokeLinecap={strokeLinecap}
+                        fill="transparent"
+                        stroke={orbitStroke}
+                        r={radius}
+                        cx={cx}
+                        cy={cy}
+                    />
+                    <circle
+                        className={classNames.circle}
+                        strokeDashoffset={strokeDashoffset}
+                        strokeWidth={strokeWidth}
+                        strokeDasharray={strokeDasharray}
+                        strokeLinecap={strokeLinecap}
+                        fill="transparent"
+                        stroke={stroke}
+                        r={radius}
+                        cx={cx}
+                        cy={cy}
+                    />
+                </svg>
+                {showInfo && size !== 'small' ? (<span className={`${prefixCls }-circle-text`}>{text}</span>) : null}
+            </div>
+        );
+    }
+
+    calcPercent(percent: number): number {
+        let perc;
+        if (percent > 100) {
+            perc = 100;
+        } else if (percent < 0) {
+            perc = 0;
+        } else {
+            perc = percent;
+        }
+        return perc;
+    }
+
+    renderLineProgress(): ReactNode {
+        const { className, style, stroke, direction, format, showInfo, size, percent, orbitStroke } = this.props;
+        const { percentNumber } = this.state;
+        const progressWrapperCls = cls(prefixCls, className, {
+            [`${prefixCls }-horizontal`]: direction === strings.DEFAULT_DIRECTION,
+            [`${prefixCls }-vertical`]: direction !== strings.DEFAULT_DIRECTION,
+            [`${prefixCls }-large`]: size === 'large',
+        });
+        const progressTrackCls = cls({
+            [`${prefixCls }-track`]: true,
+        });
+        const innerCls = cls(`${prefixCls }-track-inner`);
+
+        const perc = this.calcPercent(percent);
+        const percNumber = this.calcPercent(percentNumber);
+
+        const innerStyle: Record<string, any> = {
+            backgroundColor: stroke
+        };
+        if (direction === strings.DEFAULT_DIRECTION) {
+            innerStyle.width = `${perc }%`;
+        } else {
+            innerStyle.height = `${perc }%`;
+        }
+
+        const text = format(percNumber);
+
+        return (
+            <div className={progressWrapperCls} style={style}>
+                <div className={progressTrackCls} style={orbitStroke ? { backgroundColor: orbitStroke } : {}}>
+                    <div className={innerCls} style={innerStyle} />
+                </div>
+                {showInfo ? <div className={`${prefixCls }-line-text`}>{text}</div> : null}
+            </div>
+        );
+    }
+
+    render(): ReactNode {
+        const { type } = this.props;
+        if (type === 'line') {
+            return this.renderLineProgress();
+        } else {
+            return this.renderCircleProgress();
+        }
+    }
+}
+
+export default Progress;

package/radio/__test__/radio.test.jsx

@@ -0,0 +1,91 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { mount } from 'enzyme';
+import Radio from '../index';
+import RadioInner from '../radioInner';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+describe('radio', () => {
+
+    it('radio should work basically', () => {
+        const radio = mount(
+            <Radio />
+        );
+        const radioDOM = radio.find('input');
+
+        expect(radioDOM.exists()).toEqual(true);
+        expect(Boolean(radioDOM.checked)).toEqual(false);
+        expect(Boolean(radioDOM.disabled)).toEqual(false);
+
+    });
+
+    it('radio default checked', () => {
+        const radio = mount(
+            <Radio checked />
+        );
+
+        const radioDOM = radio.find('input').getDOMNode();
+
+        expect(Boolean(radioDOM.checked)).toEqual(true);
+
+    });
+
+    it('radio default disabled', () => {
+        const radio = mount(
+            <Radio disabled />
+        );
+
+        const radioDOM = radio.find('input').getDOMNode();
+
+        expect(Boolean(radioDOM.disabled)).toEqual(true);
+
+    });
+
+    it('radio onChange', () => {
+        const onChange = sinon.spy(value => {});
+        const onChange2 = sinon.spy(value => {});
+        const radio = mount(<Radio onChange={onChange} />);
+        const advancedRadio = mount(<Radio mode="advanced" onChange={onChange2} />);
+
+        // 普通 Radio
+        const elem = radio.find('input');
+        elem.simulate('change', { target: { checked: true } });
+        expect(onChange.calledOnce).toBe(true);
+        expect(onChange.getCall(0).args[0].target.checked).toBe(true);
+
+        // mode=advanced Radio
+        const elem2 = advancedRadio.find('input');
+        elem2.simulate('change', { target: { checked: true } });
+        expect(onChange2.calledOnce).toBe(true);
+        // 验证是否能正确获取参数
+        expect(onChange2.getCall(0).args[0].target.checked).toBe(true);
+    });
+
+    it('radio advanced mode', () => {
+        // Radio即使不是mode=advanced测试时也可以通过调用onChange修改选中状态
+        // 而用户点击时，由于input的type为radio，用户点击这时不会触发onChange
+        // 这个用例用于验证onChange是否能跑通
+        const onChange = sinon.spy(value => {});
+        const wrapper = mount(<Radio mode="advanced" onChange={onChange}>允许取消选择</Radio>);
+
+        const radioInner = wrapper.find(RadioInner);
+        wrapper
+            .find('input')
+            .first()
+            .simulate('change', { target: { checked: true, stopPropagation: () => {}, preventDefault: () => {} } });
+        expect(radioInner.state().checked).toBe(true);
+
+        wrapper
+            .find('input')
+            .first()
+            .simulate('change', { target: { checked: false, stopPropagation: () => {}, preventDefault: () => {} } });
+        expect(radioInner.state().checked).toBe(false);
+    });
+
+    it('radio button style', () => {
+        const radio = mount(
+            <Radio type="button" />
+        );
+        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-buttonRadioComponent`)).toEqual(true);
+    });
+});