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

package/progress/index.tsx

@@ -1,283 +0,0 @@
-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 {
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-valuetext'?: string | undefined;
-    className?: string;
-    direction?: 'horizontal' | 'vertical';
-    format?: (percent: number) => React.ReactNode;
-    id?: string;
-    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 = {
-        'aria-label': PropTypes.string,
-        'aria-labelledby': PropTypes.string,
-        'aria-valuetext': PropTypes.string,
-        className: PropTypes.string,
-        direction: PropTypes.oneOf(strings.directions),
-        format: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-        id: PropTypes.string,
-        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, id } = this.props;
-        const ariaLabel = this.props['aria-label'];
-        const ariaLabelledBy = this.props['aria-labelledby'];
-        const ariaValueText = this.props['aria-valuetext'];
-        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
-                id={id}
-                className={classNames.wrapper} 
-                style={style} 
-                role='progressbar' 
-                aria-valuemin={0} 
-                aria-valuemax={100}
-                aria-valuenow={percNumber}
-                aria-labelledby={ariaLabelledBy}
-                aria-label={ariaLabel}
-                aria-valuetext={ariaValueText}
-            >
-                <svg key={size} className={classNames.svg} height={width} width={width} aria-hidden>
-                    <circle
-                        strokeDashoffset={0}
-                        strokeWidth={strokeWidth}
-                        strokeDasharray={strokeDasharray}
-                        strokeLinecap={strokeLinecap}
-                        fill="transparent"
-                        stroke={orbitStroke}
-                        r={radius}
-                        cx={cx}
-                        cy={cy}
-                        aria-hidden
-                    />
-                    <circle
-                        className={classNames.circle}
-                        strokeDashoffset={strokeDashoffset}
-                        strokeWidth={strokeWidth}
-                        strokeDasharray={strokeDasharray}
-                        strokeLinecap={strokeLinecap}
-                        fill="transparent"
-                        stroke={stroke}
-                        r={radius}
-                        cx={cx}
-                        cy={cy}
-                        aria-hidden
-                    />
-                </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, id } = this.props;
-        const ariaLabel = this.props['aria-label'];
-        const ariaLabelledBy = this.props['aria-labelledby'];
-        const ariaValueText = this.props['aria-valuetext'];
-        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> = {
-            background: stroke
-        };
-        if (direction === strings.DEFAULT_DIRECTION) {
-            innerStyle.width = `${perc}%`;
-        } else {
-            innerStyle.height = `${perc}%`;
-        }
-
-        const text = format(percNumber);
-
-        return (
-            <div
-                id={id}
-                className={progressWrapperCls}
-                style={style}
-                role='progressbar'
-                aria-valuemin={0}
-                aria-valuemax={100}
-                aria-valuenow={perc}
-                aria-labelledby={ariaLabelledBy}
-                aria-label={ariaLabel}
-                aria-valuetext={ariaValueText}
-            >
-                <div className={progressTrackCls} style={orbitStroke ? { backgroundColor: orbitStroke } : {}} aria-hidden>
-                    <div className={innerCls} style={innerStyle} aria-hidden />
-                </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

@@ -1,91 +0,0 @@
-/* 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);
-    });
-});

package/radio/__test__/radioGroup.test.jsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import Radio from '../index';
-import RadioGroup from '../radioGroup';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-// eslint-disable-next-line max-lines-per-function
-describe('RadioGroup', () => {
-    function createRadioGroup(props) {
-        return (
-            <RadioGroup {...props}>
-                <Radio value="A">A</Radio>
-                <Radio value="B">B</Radio>
-                <Radio value="C">C</Radio>
-            </RadioGroup>
-        );
-    }
-
-    function createRadioGroupByOption(props) {
-        const options = [
-            { label: 'A', value: 'A' },
-            { label: 'B', value: 'B' },
-            { label: 'C', value: 'C' },
-        ];
-
-        return <RadioGroup {...props} options={options} />;
-    }
-    it('fire change events when value changes', () => {
-        const onChange = jest.fn();
-
-        const wrapper = mount(
-            createRadioGroup({
-                onChange,
-            })
-        );
-        const radios = wrapper.find('input');
-
-        // uncontrolled component
-        wrapper.setState({ value: 'B' });
-        radios.at(0).simulate('change');
-        expect(onChange.mock.calls.length).toBe(1);
-
-        // controlled component
-        wrapper.setProps({ value: 'A' });
-        radios.at(1).simulate('change');
-        expect(onChange.mock.calls.length).toBe(2);
-    });
-    it('both of radio and radioGroup will trigger onchange event when they exists', () => {
-        const onChange = jest.fn();
-        const onChangeRadioGroup = jest.fn();
-
-        const wrapper = mount(
-            <RadioGroup onChange={onChangeRadioGroup}>
-                <Radio value="A" onChange={onChange}>
-                    A
-                </Radio>
-                <Radio value="B" onChange={onChange}>
-                    B
-                </Radio>
-                <Radio value="C" onChange={onChange}>
-                    C
-                </Radio>
-            </RadioGroup>
-        );
-        const radios = wrapper.find('input');
-
-        // uncontrolled component
-        wrapper.setState({ value: 'B' });
-        radios.at(0).simulate('change');
-        expect(onChange.mock.calls.length).toBe(1);
-        expect(onChangeRadioGroup.mock.calls.length).toBe(1);
-
-        // controlled component
-        wrapper.setProps({ value: 'A' });
-        radios.at(1).simulate('change');
-        expect(onChange.mock.calls.length).toBe(2);
-    });
-
-    it('should only trigger once when in group with options', () => {
-        const onChange = jest.fn();
-        const options = [{ label: 'Bamboo', value: 'Bamboo' }];
-        const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
-
-        wrapper.find('input').simulate('change');
-        expect(onChange).toHaveBeenCalledTimes(1);
-    });
-
-    it("won't fire change events when value not changes", () => {
-        const onChange = jest.fn();
-
-        const wrapper = mount(
-            createRadioGroup({
-                onChange,
-            })
-        );
-        const radios = wrapper.find('input');
-
-        // uncontrolled component
-        wrapper.setState({ value: 'B' });
-        radios.at(1).simulate('change');
-        expect(onChange.mock.calls.length).toBe(0);
-
-        // controlled component
-        wrapper.setProps({ value: 'A' });
-        radios.at(0).simulate('change');
-        expect(onChange.mock.calls.length).toBe(0);
-    });
-
-    it('optional should correct render', () => {
-        const wrapper = mount(createRadioGroupByOption());
-        const radios = wrapper.find('input');
-
-        expect(radios.length).toBe(3);
-    });
-
-    it('all children should have a name property', () => {
-        const GROUP_NAME = 'radiogroup';
-        const wrapper = mount(createRadioGroup({ name: GROUP_NAME }));
-
-        wrapper.find('input[type="radio"]').forEach(el => {
-            expect(el.props().name).toEqual(GROUP_NAME);
-        });
-    });
-
-    it('radioGroup button style', () => {
-        const radio = mount(
-            createRadioGroup({ type: 'button' })
-        );
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-buttonRadioGroup`)).toEqual(true);
-        expect(radio.exists(`.${BASE_CLASS_PREFIX}-radio-inner-buttonRadio`)).toEqual(true);
-    });
-
-    it('radioGroup card style', () => {
-        const radioGroup = mount(
-            createRadioGroup({ type: 'card' })
-        );
-        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
-        radioGroup.unmount();
-
-        const disabledRadioGroup = mount(
-            createRadioGroup({ type: 'card', disabled: true, defaultValue: 'A' })
-        );
-        expect(
-            disabledRadioGroup
-                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
-                .at(0)
-                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
-        ).toEqual(true);
-        expect(
-            disabledRadioGroup
-                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
-                .at(1)
-                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
-        ).toEqual(false);
-        disabledRadioGroup.unmount();
-    });
-
-    it('radioGroup pure card style', () => {
-        const radioGroup = mount(
-            createRadioGroup({ type: 'pureCard' })
-        );
-        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)).toEqual(true);
-        expect(radioGroup.exists(`.${BASE_CLASS_PREFIX}-radio-inner-pureCardRadio`)).toEqual(true);
-        radioGroup.unmount();
-
-        const disabledRadioGroup = mount(
-            createRadioGroup({ type: 'pureCard', disabled: true, defaultValue: 'A' })
-        );
-        expect(
-            disabledRadioGroup
-                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
-                .at(0)
-                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
-        ).toEqual(true);
-        expect(
-            disabledRadioGroup
-                .find(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup`)
-                .at(1)
-                .exists(`.${BASE_CLASS_PREFIX}-radio-cardRadioGroup_checked_disabled`)
-        ).toEqual(false);
-        disabledRadioGroup.unmount();
-    });
-
-    it('The buttonSize of the button type radio', () => {
-        const smallRadio = mount(
-            createRadioGroup({ type: 'button', buttonSize: 'small' })
-        );
-        const middleRadio = mount(
-            createRadioGroup({ type: 'button', buttonSize: 'middle' })
-        );
-        const largeRadio = mount(
-            createRadioGroup({ type: 'button', buttonSize: 'large' })
-        );
-
-        expect(smallRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-small`)).toEqual(true);
-        expect(middleRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-middle`)).toEqual(true);
-        expect(largeRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-large`)).toEqual(true);
-    });
-
-    it('does not trigger Maximum update exceeded when setting radio-group\'s value to NaN', () => {
-        const radioGroup = mount(
-            createRadioGroup({ value: NaN }),
-        );
-
-        expect(radioGroup.exists(`${BASE_CLASS_PREFIX}-radio-checked`)).toEqual(false);
-    });
-});

package/radio/_story/Demo.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import Radio from '../index';
-import RadioGroup from '../radioGroup';
-
-const Demo = (): React.ReactElement => (
-    <div>
-        <Radio extra="checked" checked>Radio</Radio>
-        <Radio extra="advanced" mode="advanced">Radio</Radio>
-        <hr />
-        <RadioGroup
-            onChange={(e: { target: { value: number } }): void => {
-                console.log(e.target && e.target.value);
-            }}
-            buttonSize="small"
-        >
-            <Radio value={1}>A</Radio>
-            <Radio value={2}>B</Radio>
-            <Radio value={3}>C</Radio>
-            <Radio value={4}>D</Radio>
-        </RadioGroup>
-        <RadioGroup
-            onChange={(e: { target: { value: number } }): void => {
-                console.log(e.target && e.target.value);
-            }}
-            buttonSize="large"
-        >
-            <Radio value={1}>X</Radio>
-            <Radio value={2}>Y</Radio>
-            <Radio value={3}>X</Radio>
-        </RadioGroup>
-    </div>
-);
-
-export default Demo;

package/radio/_story/radio.scss

@@ -1,4 +0,0 @@
-.block-radio-wrapper {
-    padding: 12px;
-    border: 1px solid var(--semi-color-primary);
-}