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

package/steps/fillStep.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import { isFunction } from 'lodash';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
-import { IconTickCircle, IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
-
-export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
-
-export interface FillStepProps {
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    status?: Status;
-    title?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    prefixCls?: string;
-    stepNumber?: string;
-    onChange?: () => void;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    "role"?: React.AriaRole;
-    "aria-label"?: React.AriaAttributes["aria-label"];
-}
-
-const FillStep = (props: FillStepProps) => {
-    const { prefixCls, className, title, description, status, style, onClick, icon, onChange, stepNumber, onKeyDown } = props;
-    const renderIcon = () => {
-        let inner, progress;
-
-        if ('icon' in props) {
-            inner = icon;
-        } else if ('status' in props) {
-            switch (status) {
-                case 'error':
-                    inner = <IconAlertCircle size="extra-large" />;
-                    break;
-                case 'wait':
-                    inner = stepNumber;
-                    break;
-                case 'process':
-                    inner = stepNumber;
-                    progress = true;
-                    break;
-                case 'finish':
-                    inner = <IconTickCircle size="extra-large" />;
-                    break;
-                case 'warning':
-                    inner = <IconAlertTriangle size="extra-large" />;
-                    break;
-                default:
-                    inner = null;
-                    break;
-            }
-        }
-        const cls = classnames({
-            [`${prefixCls}-left`]: true,
-            [`${prefixCls}-icon`]: 'icon' in props,
-            [`${prefixCls}-plain`]: !('icon' in props),
-            [`${prefixCls}-icon-process`]: progress,
-        });
-
-        return inner ? <div className={cls}>{inner}</div> : null;
-    };
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
-        }
-    };
-    return (
-        <div
-            role={props["role"]}
-            aria-label={props["aria-label"]}
-            aria-current="step"
-            tabIndex={0} 
-            className={classnames({
-                [prefixCls]: true,
-                [`${prefixCls}-${status}`]: Boolean(status),
-                [`${prefixCls}-clickable`]: onClick,
-            }, className)}
-            style={style}
-            onClick={e => {
-                handleClick(e);
-            }}
-            onKeyDown={handleKeyDown}
-        >
-            {renderIcon()}
-            <div className={`${prefixCls}-content`}>
-                <div className={`${prefixCls}-title`} title={typeof title === 'string' ? title : null}>
-                    <span className={`${prefixCls}-title-text`}>{title}</span>
-                </div>
-                <div
-                    className={`${prefixCls}-description`}
-                    title={typeof description === 'string' ? description : null}
-                >
-                    {description}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-FillStep.propTypes = {
-    prefixCls: PropTypes.string,
-    description: PropTypes.node,
-    icon: PropTypes.node,
-    status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning']),
-    title: PropTypes.node,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    onClick: PropTypes.func,
-};
-FillStep.defaultProps = {
-    prefixCls: css.ITEM,
-    status: 'wait',
-    className: '',
-};
-
-export default FillStep;

package/steps/fillSteps.tsx

@@ -1,98 +0,0 @@
-import React, { cloneElement, Children, useMemo, ReactElement, isValidElement } from 'react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
-import { Row, Col } from '../grid';
-
-export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
-export type Direction = 'horizontal' | 'vertical';
-export interface FillStepsProps {
-    prefixCls?: string;
-    className?: string;
-    current?: number;
-    direction?: Direction;
-    initial?: number;
-    status?: Status;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    onChange?: (current: number) => void;
-    "aria-label"?: string;
-}
-
-const Steps = (props: FillStepsProps) => {
-    const { current, status, children, prefixCls, initial, direction, className, style, onChange } = props;
-    const inner = useMemo(() => {
-        const filteredChildren = Children.toArray(children).filter(c => isValidElement(c)) as Array<ReactElement>;
-        const colStyle = direction === 'vertical' ? null : { width: `${100 / filteredChildren.length }%` };
-        const content = Children.map(filteredChildren, (child: ReactElement, index) => {
-            if (!child) {
-                return null;
-            }
-            const stepNumber = initial + index;
-            const childProps = {
-                stepNumber: `${stepNumber + 1}`,
-                direction,
-                ...child.props,
-            };
-
-            if (status === 'error' && index === current - 1) {
-                childProps.className = `${prefixCls}-next-error`;
-            }
-
-            if (!child.props.status) {
-                if (stepNumber === current) {
-                    childProps.status = status;
-                } else if (stepNumber < current) {
-                    childProps.status = 'finish';
-                } else {
-                    childProps.status = 'wait';
-                }
-            }
-            childProps.onChange = () => {
-                if (index !== current) {
-                    onChange(index + initial);
-                }
-            };
-            return <Col style={colStyle}>{cloneElement(child, { ...childProps })}</Col>;
-        });
-        return content;
-    }, [children, initial, prefixCls, direction, status, current, onChange]);
-
-    const wrapperCls = cls(className, {
-        [prefixCls]: true,
-        [`${prefixCls}-${ direction}`]: true
-    });
-
-    return (
-        <div
-            className={wrapperCls}
-            style={style}
-            aria-label={props["aria-label"]}
-        >
-            <Row type="flex" justify="start">
-                {inner}
-            </Row>
-        </div>
-
-    );
-};
-
-Steps.propTypes = {
-    prefixCls: PropTypes.string,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    current: PropTypes.number,
-    initial: PropTypes.number,
-    direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    status: PropTypes.oneOf(['wait', 'process', 'finish', 'error', 'warning'])
-};
-
-Steps.defaultProps = {
-    prefixCls: css.PREFIX,
-    current: 0,
-    direction: 'horizontal',
-    initial: 0,
-    status: 'process',
-};
-
-export default Steps;

package/steps/index.tsx

@@ -1,69 +0,0 @@
-import React, { Component } from 'react';
-import { noop } from 'lodash';
-import PropTypes from 'prop-types';
-import '@douyinfe/semi-foundation/steps/steps.scss';
-import Step from './step';
-import FillSteps, { FillStepsProps } from './fillSteps';
-import BasicSteps, { BasicStepsProps } from './basicSteps';
-import NavSteps, { NavStepsProps } from './navSteps';
-import Context from './context';
-
-export { Status, Size, BasicStepProps } from './basicStep';
-export { Direction, BasicStepsProps } from './basicSteps';
-export { FillStepProps } from './fillStep';
-export { FillStepsProps } from './fillSteps';
-export { NavStepProps } from './navStep';
-export { NavStepsProps } from './navSteps';
-export { StepProps } from './step';
-
-export interface FillStepsAllProps extends FillStepsProps {
-    type?: 'fill';
-}
-export interface BasicStepsAllProps extends BasicStepsProps {
-    type?: 'basic';
-}
-export interface NavStepsAllProps extends NavStepsProps {
-    type?: 'nav';
-}
-export type StepsProps = FillStepsAllProps | BasicStepsAllProps | NavStepsAllProps;
-
-class Steps extends Component<StepsProps> {
-    static Step = Step;
-
-    static propTypes = {
-        onChange: PropTypes.func,
-        type: PropTypes.oneOf(['fill', 'basic', 'nav']),
-        size: PropTypes.oneOf(['small', 'default'])
-    };
-
-    static defaultProps = {
-        onChange: noop,
-        type: 'fill',
-        size: 'default'
-    };
-
-    renderComponent() {
-        const { type, ...restProps } = this.props;
-        switch (type) {
-            case 'fill':
-                return <FillSteps {...restProps} />;
-            case 'basic':
-                return <BasicSteps {...restProps} />;
-            case 'nav':
-                return <NavSteps {...restProps} />;
-            default:
-                return null;
-        }
-    }
-
-    render() {
-        const { type } = this.props;
-        return (
-            <Context.Provider value={{ type }}>
-                {this.renderComponent()}
-            </Context.Provider>
-        );
-    }
-}
-
-export default Steps;

package/steps/navStep.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isFunction } from 'lodash';
-import classnames from 'classnames';
-import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
-import { IconChevronRight } from '@douyinfe/semi-icons';
-
-export interface NavStepProps {
-    title?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    index?: number;
-    active?: boolean;
-    total?: number;
-    prefixCls?: string;
-    onChange?: () => void;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    "role"?: React.AriaRole;
-    "aria-label"?: React.AriaAttributes["aria-label"];
-}
-
-const NavStep = (props: NavStepProps) => {
-    const { prefixCls, className, title, style, active, index, total, onClick, onKeyDown, onChange } = props;
-    const classString = classnames(prefixCls, {
-        [`${prefixCls}-active`]: active
-    }, className);
-    const handleClick = (e: React.MouseEvent) => {
-        if (isFunction(onClick)) {
-            onClick(e);
-        }
-        onChange();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === 'Enter') {
-            if (isFunction(onKeyDown)) {
-                onKeyDown(e);
-            }
-            onChange();
-        }
-    };
-    return (
-        <div role={props["role"]} aria-label={props["aria-label"]} aria-current="step" tabIndex={0} className={classString} style={style} onClick={e => handleClick(e)} onKeyDown={handleKeyDown}>
-            <div className={`${prefixCls}-container`}>
-                <div className={`${prefixCls}-content`}>
-                    <div className={`${prefixCls}-title`}>
-                        {title}
-                    </div>
-                </div>
-                {index !== total - 1 && (
-                    <div className={`${prefixCls}-icon`}>
-                        <IconChevronRight size="small" />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
-
-NavStep.propTypes = {
-    prefixCls: PropTypes.string,
-    title: PropTypes.node,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    onClick: PropTypes.func,
-    active: PropTypes.bool,
-};
-NavStep.defaultProps = {
-    prefixCls: css.ITEM,
-    active: false,
-    className: '',
-};
-
-export default NavStep;

package/steps/navSteps.tsx

@@ -1,74 +0,0 @@
-import React, { cloneElement, Children, useMemo, isValidElement, ReactElement } from 'react';
-import PropTypes from 'prop-types';
-import cls from 'classnames';
-import { stepsClasses as css } from '@douyinfe/semi-foundation/steps/constants';
-
-export type Size = 'default' | 'small';
-export interface NavStepsProps {
-    prefixCls?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    current?: number;
-    initial?: number;
-    size?: Size;
-    children?: React.ReactNode;
-    onChange?: (current: number) => void;
-    "aria-label"?: string;
-}
-
-const Steps = (props: NavStepsProps) => {
-    const { size, current, initial, children, prefixCls, className, style, onChange } = props;
-    const inner = useMemo(() => {
-        const filteredChildren = Children.toArray(children).filter(c => isValidElement(c)) as Array<ReactElement>;
-        const total = filteredChildren.length;
-        const content = Children.map(filteredChildren, (child: React.ReactElement, index) => {
-            if (!child) {
-                return null;
-            }
-            const childProps = {
-                index,
-                total,
-                ...child.props,
-            };
-            childProps.active = index === current;
-            childProps.onChange = () => {
-                if (index !== current) {
-                    onChange(index + initial);
-                }
-            };
-            return cloneElement(child, { ...childProps });
-        });
-        return content;
-    }, [children, prefixCls, current, size, initial, onChange]);
-
-    const wrapperCls = cls(className, {
-        [`${prefixCls}-nav`]: true,
-        [`${prefixCls}-${size}`]: size !== 'default',
-    });
-
-    return (
-        <div aria-label={props["aria-label"]} className={wrapperCls} style={style}>
-            {inner}
-        </div>
-    );
-};
-
-Steps.propTypes = {
-    prefixCls: PropTypes.string,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    current: PropTypes.number,
-    initial: PropTypes.number,
-    size: PropTypes.oneOf(['small', 'default']),
-};
-
-Steps.defaultProps = {
-    prefixCls: css.PREFIX,
-    current: 0,
-    direction: 'horizontal',
-    size: 'default',
-    initial: 0,
-    status: 'process',
-};
-
-export default Steps;

package/steps/step.tsx

@@ -1,37 +0,0 @@
-import React, { useContext } from 'react';
-import BasicStep from './basicStep';
-import FillStep from './fillStep';
-import NavStep from './navStep';
-import Context from './context';
-
-export type Status = 'wait' | 'process' | 'finish' | 'error' | 'warning';
-
-export interface StepProps {
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    status?: Status;
-    title?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-}
-
-const Step = (props: StepProps) => {
-    const { type } = useContext(Context);
-    const renderStep = () => {
-        switch (type) {
-            case 'fill':
-                return <FillStep {...props} />;
-            case 'basic':
-                return <BasicStep {...props} />;
-            case 'nav':
-                return <NavStep {...props} />;
-            default:
-                return null;
-        }
-    };
-
-    return renderStep();
-};
-
-export default Step;

package/switch/__test__/switch.test.js

@@ -1,128 +0,0 @@
-import Switch from '../index';
-// import { shallow, mount } from 'enzyme';
-// import Enzyme, { shallow, render, mount } from 'enzyme';
-// import Adapter from 'enzyme-adapter-react-16';
-// Enzyme.configure({
-//     adapter: new Adapter()
-// });
-
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-import { wrap } from 'lodash';
-
-let CHECKED_CLS = `.${BASE_CLASS_PREFIX}-switch-checked`;
-
-describe('Switch', () => {
-    it('switch with custom className & style', () => {
-        const wrapper = mount(<Switch className="test" style={{ color: 'red' }} />);
-        expect(wrapper.hasClass('test')).toEqual(true);
-        expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
-        wrapper
-        .find('input')
-        .first()
-        .simulate('change', {
-            target: {
-                checked: true,
-            },
-        });
-        wrapper.unmount();
-    });
-
-    it('switch checkedText / unchekcedText', () => {
-        const checkSwitch = mount(<Switch checkedText='semi' uncheckedText='design' checked={true} />);
-        const unCheckSwitch = mount(<Switch checkedText='semi' uncheckedText='design' />);
-        expect(checkSwitch.find('.semi-switch-checked-text').text()).toEqual('semi');
-        expect(unCheckSwitch.find('.semi-switch-unchecked-text').text()).toEqual('design');
-    });
-
-    it('switch disabled when props.disabled', () => {
-        const wrapperUnchecked = mount(<Switch disabled />);
-        expect(wrapperUnchecked.exists(`.semi-switch-disabled`)).toEqual(true);
-        expect(wrapperUnchecked.state('nativeControlDisabled')).toEqual(true);
-        wrapperUnchecked.setProps({ disabled: false });
-        wrapperUnchecked.update();
-        expect(wrapperUnchecked.exists(`.semi-switch-disabled`)).toEqual(false);
-        expect(wrapperUnchecked.state('nativeControlDisabled')).toEqual(false);
-
-        const wrapperChecked = mount(<Switch disabled defaultChecked />);
-        expect(wrapperChecked.exists(CHECKED_CLS)).toEqual(true);
-        expect(wrapperChecked.exists(`.semi-switch-disabled`)).toEqual(true);
-        expect(wrapperChecked.state('nativeControlDisabled')).toEqual(true);
-        wrapperChecked.setProps({ disabled: false })
-        wrapperChecked.update();
-        expect(wrapperChecked.exists(`.semi-switch-disabled`)).toEqual(false);
-        expect(wrapperChecked.state('nativeControlDisabled')).toEqual(false);
-    });
-
-    it('switch onChange', () => {
-        let onChange = () => {};
-        let spyChange = sinon.spy(onChange);
-        const wrapper = mount(<Switch onChange={spyChange} />);
-        let input = wrapper.find('input').first();
-        let event = { target: { checked: true }};
-        input.simulate('change', event)
-        expect(spyChange.calledOnce).toEqual(true);
-        expect(spyChange.calledWithMatch(true)).toEqual(true);
-    });
-
-    it('switch onMouseEnter / onMouseLeave', () => {
-        let onMouseEnter = () => {};
-        let onMouseLeave = () => {};
-        let spyEnter = sinon.spy(onMouseEnter);
-        let spyLeave = sinon.spy(onMouseLeave);
-        const wrapper = mount(<Switch defaultChecked onMouseEnter={spyEnter} onMouseLeave={spyLeave} />);
-        const div = wrapper.find('div.semi-switch').first();
-        div.simulate('mouseEnter', {});
-        expect(spyEnter.calledOnce).toEqual(true);
-        div.simulate('mouseLeave', {});
-        expect(spyLeave.calledOnce).toEqual(true);
-    });
-
-    it('switch size', () => {
-        const largeSwitch = shallow(<Switch size='large' />);
-        const defaultSwitch = shallow(<Switch size='default' />);
-        const smallSwitch = shallow(<Switch size='small' />);
-        expect(smallSwitch.exists('.semi-switch-small')).toEqual(true);
-        expect(defaultSwitch.exists('.semi-switch-small')).toEqual(false);
-        expect(defaultSwitch.exists('.semi-switch-large')).toEqual(false);
-        expect(largeSwitch.exists('.semi-switch-large')).toEqual(true);
-    });
-
-    it('switch controlled mode', () => {
-        let checked = false;
-
-        let onChange = val => {
-            checked = val;
-        };
-
-        const spy = sinon.spy(onChange);
-        let wrapper = mount(<Switch checked={checked} onChange={spy} />);
-        expect(wrapper.exists(CHECKED_CLS)).toEqual(false);
-
-        wrapper
-            .find('input')
-            .first()
-            .simulate('change', {
-                target: {
-                    checked: true,
-                },
-            });
-        expect(spy.calledOnce).toBe(true);
-        expect(checked === true).toEqual(true);
-
-        // !!!important，在回调函数中修改了props.checke的值，不会在已monted的wrapper中生效，需要手动更新一次
-        wrapper.setProps({ checked: true });
-        // 更新了props之后，实际上在Symbol(enzyme.__node__).rendered.instance.className已有对应的CHECKED_CLS存在，
-        // 但不知道为啥，必须手动触发一次update之后，调用exists后才是true，很奇怪
-        wrapper.update();
-
-        expect(wrapper.exists(CHECKED_CLS)).toEqual(true);
-    });
-
-    it('switch with loading', () => {
-        const wrapperLoading = shallow(<Switch loading />);
-        expect(wrapperLoading.exists(`.${BASE_CLASS_PREFIX}-switch-loading`)).toEqual(true);
-        const wrapper = shallow(<Switch />);
-        expect(wrapper.exists(`.${BASE_CLASS_PREFIX}-switch-loading`)).toEqual(false);
-    });
-
-});