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

package/steps/fillSteps.tsx

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

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

@@ -0,0 +1,63 @@
+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>;
+}
+
+const NavStep = (props: NavStepProps) => {
+    const { prefixCls, className, title, style, active, index, total, onClick, onChange, ...restProps } = props;
+    const classString = classnames(prefixCls, className, {
+        [`${prefixCls}-active`]: active
+    });
+    const handleClick = (e: React.MouseEvent) => {
+        if (isFunction(onClick)) {
+            onClick(e);
+        }
+        onChange();
+    };
+    return (
+        <div {...restProps} className={classString} style={style} onClick={e => handleClick(e)}>
+            <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

@@ -0,0 +1,73 @@
+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;
+}
+
+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]);
+
+    const wrapperCls = cls(className, {
+        [`${prefixCls}-nav`]: true,
+        [`${prefixCls}-${size}`]: size !== 'default',
+    });
+
+    return (
+        <div 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

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

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

package/switch/_story/switch.stories.js

@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+
+import { Button } from '@douyinfe/semi-ui/';
+import { Switch } from '../../index';
+
+export default {
+  title: 'Switch'
+}
+
+export const _Switch = () => (
+  <div>
+    <Switch onChange={(v, e) => console.log(v)}></Switch>
+    <Switch defaultChecked={true} onChange={(v, e) => console.log(v)}></Switch>
+  </div>
+);
+
+_Switch.story = {
+  name: 'switch',
+};
+
+export const SwitchSize = () => (
+  <div>
+    <Switch onChange={(v, e) => console.log(v)}></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="small"></Switch>
+    <Switch onChange={(v, e) => console.log(v)} size="large"></Switch>
+  </div>
+);
+
+SwitchSize.story = {
+  name: 'switch size',
+};
+
+export const SwitchCheckedTextUncheckedText = () => (
+  <div>
+    <Switch defaultChecked checkedText="开" uncheckedText="关" />
+    <Switch checkedText={'|'} uncheckedText="〇" />
+    <br />
+    <br />
+    <Switch checkedText="开" uncheckedText="关" />
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" />
+    <br />
+    <br />
+    <Switch checkedText="开" uncheckedText="关" size="large" />
+    <Switch checkedText="｜" uncheckedText="〇" size="large" />
+    <br />
+    <br />
+    <Switch defaultChecked checkedText="开" uncheckedText="关" size="large" />
+    <Switch defaultChecked checkedText="｜" uncheckedText="〇" size="large" />
+  </div>
+);
+
+SwitchCheckedTextUncheckedText.story = {
+  name: 'switch checkedText &  uncheckedText',
+};
+
+export const SwitchDisabled = () => (
+  <>
+    <Switch disabled>disabled</Switch>
+
+    <Switch disabled checked={true} onChange={(v, e) => console.log(v)}></Switch>
+  </>
+);
+
+SwitchDisabled.story = {
+  name: 'switch disabled',
+};
+
+const ControledSwitch = () => {
+  const [checked, onChange] = useState(true);
+  return <Switch checked={checked} onChange={(v, e) => onChange(v)} />;
+};
+export const SwitchCheckedOnChange = () => <ControledSwitch />;
+
+SwitchCheckedOnChange.story = {
+  name: 'switch checked + onChange',
+};
+
+const UnControledSwitch = () => {
+  const onChange = checked => {
+    console.log(checked);
+  };
+  return (
+    <>
+      {/* <Switch onChange={onChange} defaultChecked={false}/> */}
+      <Switch onChange={onChange} defaultChecked={true} />
+    </>
+  );
+};
+export const SwitchDefaultCheckedOnChange = () => <UnControledSwitch />;
+
+SwitchDefaultCheckedOnChange.story = {
+  name: 'switch defaultChecked + onChange',
+};
+
+class LoadingDemo extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      checked: true,
+      loading: false,
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+  onChange(checked) {
+    this.setState({ checked });
+  }
+  render() {
+    return (
+      <>
+        <Button
+          onClick={() => {
+            this.setState({ checked: true });
+          }}
+        >
+          checked
+        </Button>
+        <br />
+        <br />
+        <Button
+          onClick={() => {
+            this.setState({ checked: false });
+          }}
+        >
+          unchecked
+        </Button>
+        <br />
+        <br />
+        <Button
+          onClick={() => {
+            this.setState({ loading: !this.state.loading });
+          }}
+        >
+          loading
+        </Button>
+        <br />
+        <br />
+        <Switch
+          checked={this.state.checked}
+          onChange={this.onChange}
+          loading={this.state.loading}
+        ></Switch>
+        <br />
+        <br />
+        <hr />
+        <Switch loading disabled />
+        <br />
+        <br />
+        <Switch loading disabled defaultChecked />
+        <br />
+        <br />
+      </>
+    );
+  }
+}
+
+export const Loading = () => <LoadingDemo />;
+
+Loading.story = {
+  name: 'loading',
+};