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

package/checkbox/_story/checkbox.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Demo from './Demo';
+
+const stories = storiesOf('Checkbox', module);
+
+stories.add('Checkbox', () => <Demo />);

package/checkbox/checkbox.tsx

@@ -0,0 +1,203 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { checkboxClasses as css } from '@douyinfe/semi-foundation/checkbox/constants';
+import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObject, BaseCheckboxProps } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
+import CheckboxInner from './checkboxInner';
+import BaseComponent from '../_base/baseComponent';
+import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
+import { Context } from './context';
+import { isUndefined, isBoolean, noop } from 'lodash';
+export type CheckboxEvent = BasicCheckboxEvent;
+export type TargetObject = BasicTargetObject;
+
+export interface CheckboxProps extends BaseCheckboxProps {
+    onChange?: (e: CheckboxEvent) => any;
+    // TODO, docs
+    style?: React.CSSProperties;
+    onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
+    extra?: React.ReactNode;
+}
+interface CheckboxState {
+    checked: boolean;
+}
+class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
+    static contextType = Context;
+
+    static propTypes = {
+        // Specifies whether it is currently selected
+        checked: PropTypes.bool,
+        // Initial check
+        defaultChecked: PropTypes.bool,
+        // Failure state
+        disabled: PropTypes.bool,
+        // Set indeterminate state, only responsible for style control
+        indeterminate: PropTypes.bool,
+        // Callback function when changing
+        onChange: PropTypes.func,
+        value: PropTypes.any,
+        style: PropTypes.object,
+        className: PropTypes.string,
+        prefixCls: PropTypes.string,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        extra: PropTypes.node,
+    };
+
+    static defaultProps = {
+        defaultChecked: false,
+        indeterminate: false,
+        onChange: noop,
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+    };
+    checkboxEntity: CheckboxInner;
+
+    get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState> {
+        return {
+            ...super.adapter,
+            setNativeControlChecked: checked => {
+                this.setState({ checked });
+            },
+            notifyChange: cbContent => {
+                const { onChange } = this.props;
+                onChange && onChange(cbContent);
+            },
+            getIsInGroup: () => this.isInGroup(),
+            getGroupValue: () => (this.context && this.context.checkboxGroup.value) || [],
+            notifyGroupChange: cbContent => {
+                this.context.checkboxGroup.onChange(cbContent);
+            },
+            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled)
+        };
+    }
+
+    constructor(props: CheckboxProps) {
+        super(props);
+
+        const checked = false;
+
+        this.state = {
+            checked: props.checked || props.defaultChecked || checked,
+        };
+
+        this.checkboxEntity = null;
+        this.foundation = new CheckboxFoundation(this.adapter);
+    }
+
+    componentDidUpdate(prevProps: CheckboxProps) {
+        if (this.props.checked !== prevProps.checked) {
+            if (isUndefined(this.props.checked)) {
+                this.foundation.setChecked(false);
+            } else if (isBoolean(this.props.checked)) {
+                this.foundation.setChecked(this.props.checked);
+            }
+        }
+    }
+
+    isInGroup() {
+        return this.context && this.context.checkboxGroup;
+    }
+
+    focus() {
+        this.checkboxEntity && this.checkboxEntity.focus();
+    }
+
+    blur() {
+        this.checkboxEntity && this.checkboxEntity.blur();
+    }
+
+    handleChange: React.MouseEventHandler<HTMLSpanElement> = e => this.foundation.handleChange(e);
+
+    render() {
+        const {
+            disabled,
+            style,
+            prefixCls,
+            className,
+            indeterminate,
+            children,
+            onMouseEnter,
+            onMouseLeave,
+            extra,
+            value,
+            id,
+        } = this.props;
+        const { checked } = this.state;
+        const props: Record<string, any> = {
+            checked,
+            disabled,
+        };
+
+        if (this.isInGroup()) {
+            if (this.context.checkboxGroup.value) {
+                const realChecked = (this.context.checkboxGroup.value || []).includes(value);
+                props.checked = realChecked;
+            }
+            if (this.context.checkboxGroup.disabled) {
+                props.disabled = this.context.checkboxGroup.disabled || this.props.disabled;
+            }
+            const { isCardType, isPureCardType } = this.context.checkboxGroup;
+            props.isCardType = isCardType;
+            props.isPureCardType = isPureCardType;
+        }
+
+        const prefix = prefixCls || css.PREFIX;
+
+        const wrapper = classnames(prefix, {
+            [`${prefix}-disabled`]: props.disabled,
+            [`${prefix}-indeterminate`]: indeterminate,
+            [`${prefix}-checked`]: props.checked,
+            [`${prefix}-unChecked`]: !props.checked,
+            [`${prefix}-cardType`]: props.isCardType,
+            [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
+            [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
+            [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+            [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
+            [className]: Boolean(className),
+        });
+
+        const extraCls = classnames(`${prefix}-extra`, {
+            [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children,
+        });
+
+        const name = this.isInGroup() && this.context.checkboxGroup.name;
+
+        const renderContent = () => (
+            <>
+                {children ? <span className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div className={extraCls}>{extra}</div> : null}
+            </>
+        );
+        return (
+            <span
+                style={style}
+                className={wrapper}
+                id={id}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+                onClick={this.handleChange}
+            >
+                <CheckboxInner
+                    {...this.props}
+                    {...props}
+                    name={name}
+                    isPureCardType={props.isPureCardType}
+                    ref={ref => {
+                        this.checkboxEntity = ref;
+                    }}
+                />
+                {
+                    props.isCardType ?
+                        <div>{renderContent()}</div> :
+                        renderContent()
+                }
+            </span>
+        );
+    }
+}
+
+
+export default Checkbox;

package/checkbox/checkboxGroup.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { checkboxGroupClasses as css, strings } from '@douyinfe/semi-foundation/checkbox/constants';
+import CheckboxGroupFoudation, { CheckboxGroupAdapter } from '@douyinfe/semi-foundation/checkbox/checkboxGroupFoundation';
+import BaseComponent from '../_base/baseComponent';
+import { Context } from './context';
+import { isEqual } from 'lodash';
+import Checkbox, { CheckboxEvent } from './checkbox';
+
+export type CheckboxDirection = 'horizontal' | 'vertical';
+export type CheckboxType = 'default' | 'card' | 'pureCard';
+
+export type CheckboxGroupProps = {
+    defaultValue?: any[];
+    disabled?: boolean;
+    name?: string;
+    options?: any[];
+    value?: any[];
+    onChange?: (value: any[]) => void;
+    children?: React.ReactNode;
+    prefixCls?: string;
+    direction?: CheckboxDirection;
+    style?: React.CSSProperties;
+    className?: string;
+    type?: CheckboxType;
+    id?: string;
+};
+
+export type CheckboxGroupState = {
+    value?: any[];
+};
+class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState> {
+
+    static propTypes = {
+        defaultValue: PropTypes.array,
+        disabled: PropTypes.bool,
+        name: PropTypes.string,
+        options: PropTypes.array,
+        value: PropTypes.array,
+        onChange: PropTypes.func,
+        children: PropTypes.node,
+        prefixCls: PropTypes.string,
+        direction: PropTypes.oneOf<CheckboxGroupProps['direction']>(strings.DIRECTION_SET),
+        className: PropTypes.string,
+        type: PropTypes.oneOf([strings.TYPE_DEFAULT, strings.TYPE_CARD, strings.TYPE_PURECARD]),
+        style: PropTypes.object,
+    };
+
+    static defaultProps: Partial<CheckboxGroupProps> = {
+        disabled: false,
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange: () => {},
+        type: strings.TYPE_DEFAULT,
+        defaultValue: [] as any,
+        direction: strings.DEFAULT_DIRECTION,
+    };
+
+    get adapter(): CheckboxGroupAdapter {
+        return {
+            ...super.adapter,
+            updateGroupValue: value => {
+                this.setState({ value });
+            },
+            notifyChange: evt => {
+                this.props.onChange && this.props.onChange(evt);
+            },
+        };
+    }
+
+    constructor(props: CheckboxGroupProps) {
+        super(props);
+        this.state = {
+            value: props.value || props.defaultValue,
+        };
+        this.foundation = new CheckboxGroupFoudation(this.adapter);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    componentDidMount() {
+        this.foundation.init();
+    }
+
+    componentDidUpdate(prevProps: CheckboxGroupProps) {
+        if (!isEqual(prevProps.value, this.props.value)) {
+            this.foundation.handlePropValueChange(this.props.value);
+        }
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+    }
+
+    onChange(evt: CheckboxEvent) {
+        this.foundation.handleChange(evt);
+    }
+
+    render() {
+        const { children, options, prefixCls, direction, className, id, style, type } = this.props;
+
+        const isPureCardType = type === strings.TYPE_PURECARD;
+        const isCardType = type === strings.TYPE_CARD || isPureCardType;
+
+        const prefix = prefixCls || css.PREFIX;
+        const prefixClsDisplay = classnames({
+            [prefix as string]: true,
+            [`${prefix }-wrapper`]: true,
+            [`${prefix }-${ direction}`]: direction,
+            [`${prefix}-${direction}-cardType`]: direction && isCardType,
+        }, className);
+
+        const realValue = this.state.value.slice();
+
+        let inner;
+
+        if (options) {
+            inner = (options || []).map((option, index) => {
+                if (typeof option === 'string') {
+                    return (
+                        <Checkbox
+                            key={index}
+                            disabled={this.props.disabled}
+                            value={option}
+                            prefixCls={prefixCls}
+                        >
+                            {option}
+                        </Checkbox>
+                    );
+                } else {
+                    return (
+                        <Checkbox
+                            key={index}
+                            disabled={option.disabled || this.props.disabled}
+                            value={option.value}
+                            prefixCls={prefixCls}
+                            extra={option.extra}
+                            className={option.className}
+                            style={option.style}
+                            onChange={option.onChange}
+                        >
+                            {option.label}
+                        </Checkbox>
+                    );
+                }
+            });
+        } else if (children) {
+            inner = (React.Children.toArray(children) as React.ReactElement[]).map((itm, index) => React.cloneElement(itm, { key: index }));
+        }
+
+        return (
+            <div className={prefixClsDisplay} style={style} id={id}>
+                <Context.Provider
+                    value={{
+                        checkboxGroup: {
+                            onChange: this.onChange,
+                            value: realValue,
+                            disabled: this.props.disabled,
+                            name: this.foundation.getFormatName(),
+                            isCardType,
+                            isPureCardType,
+                        },
+                    }}
+                >
+                    {inner}
+                </Context.Provider>
+            </div>
+        );
+    }
+}
+
+export default CheckboxGroup;

package/checkbox/checkboxInner.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable no-nested-ternary */
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { noop } from 'lodash';
+import { checkboxClasses as css } from '@douyinfe/semi-foundation/checkbox/constants';
+import { Context } from './context';
+import { IconCheckboxTick, IconCheckboxIndeterminate } from '@douyinfe/semi-icons';
+
+export interface CheckboxInnerProps {
+    indeterminate?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    prefixCls?: string;
+    name?: string;
+    isPureCardType?: boolean;
+    ref?: React.MutableRefObject<CheckboxInner> | ((ref: CheckboxInner) => void);
+}
+
+class CheckboxInner extends PureComponent<CheckboxInnerProps> {
+    static contextType = Context;
+
+    static propTypes = {
+        checked: PropTypes.bool,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
+        children: PropTypes.node,
+        grouped: PropTypes.bool,
+        value: PropTypes.any,
+        isPureCardType: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        onChange: noop,
+    };
+    inputEntity: HTMLInputElement;
+
+    blur() {
+        this.inputEntity.blur();
+    }
+
+    focus() {
+        this.inputEntity.focus();
+    }
+
+    render() {
+        const { indeterminate, checked, disabled, prefixCls, name, isPureCardType } = this.props;
+        const prefix = prefixCls || css.PREFIX;
+
+        const wrapper = classnames(
+            {
+                [`${prefix}-inner`]: true,
+                [`${prefix}-inner-checked`]: Boolean(checked),
+                [`${prefix}-inner-pureCardType`]: isPureCardType,
+            },
+            css.WRAPPER
+        );
+
+        const inner = classnames({
+            [`${prefix}-inner-display`]: true,
+        });
+
+        const icon = checked ? (
+            <IconCheckboxTick />
+        ) : indeterminate ? (
+            <IconCheckboxIndeterminate />
+        ) : null;
+
+        return (
+            <span className={wrapper}>
+                <input
+                    ref={ref => {
+                        this.inputEntity = ref;
+                    }}
+                    type="checkbox"
+                    className={css.INPUT}
+                    onChange={noop}
+                    checked={checked}
+                    disabled={disabled}
+                    name={name}
+                />
+                <span className={inner}>{icon}</span>
+            </span>
+        );
+    }
+}
+
+export default CheckboxInner;

package/checkbox/context.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import {  BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
+type CheckboxContext = {
+    checkboxGroup?: {
+        onChange: (evt: BasicCheckboxEvent) => void;
+        value: any[];
+        disabled: boolean;
+        name: any;
+        isCardType: boolean;
+        isPureCardType: boolean;
+    };
+};
+const Context = React.createContext<CheckboxContext>({});
+export { Context };

package/checkbox/index.tsx

@@ -0,0 +1,19 @@
+import Checkbox, { CheckboxProps, CheckboxEvent } from './checkbox';
+import Group, { CheckboxGroupProps, CheckboxType, CheckboxDirection } from './checkboxGroup';
+
+export { CheckboxInnerProps } from './checkboxInner';
+class CheckboxWithGroup extends Checkbox {
+    static Group = Group;
+}
+
+export {
+    CheckboxWithGroup,
+    Checkbox,
+    CheckboxProps,
+    CheckboxGroupProps,
+    CheckboxEvent,
+    CheckboxType,
+    CheckboxDirection
+};
+
+export default CheckboxWithGroup;

package/collapse/__test__/collapse.test.js

@@ -0,0 +1,148 @@
+import { Collapse } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants'; // import toJson from 'enzyme-to-json';
+
+import { IconPlus, IconMinus, IconCopy } from '@douyinfe/semi-icons';
+
+let getCollapse = collapseProps => {
+    let props = collapseProps ? collapseProps : {};
+    return (
+        <Collapse {...collapseProps}>
+            <Collapse.Panel header="This is panel header 1" itemKey="1">
+                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+            </Collapse.Panel>
+            <Collapse.Panel header="This is panel header 2" itemKey="2">
+                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+            </Collapse.Panel>
+            <Collapse.Panel header="This is panel header 3" itemKey="3">
+                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+            </Collapse.Panel>
+        </Collapse>
+    );
+};
+
+let collapseCls = `.${BASE_CLASS_PREFIX}-collapse`;
+let expandAttr = 'aria-expanded';
+describe('Collapse', () => {
+    it('Collapse with custom className & style', () => {
+        let props = {
+            className: 'test',
+            style: {
+                color: 'red',
+            },
+        };
+        const collapse = shallow(getCollapse(props));
+        expect(collapse.exists('.test')).toEqual(true);
+        expect(collapse.find('div.test')).toHaveStyle('color', 'red');
+    });
+    it('Collapse with defaultActiveKey', () => {
+        // 直接测试对应dom是否有对应的attribute
+        let oneExpandProps = {
+            defaultActiveKey: '1',
+        };
+        let moreExpandProps = {
+            defaultActiveKey: ['1', '2'],
+        };
+        const oneExpand = mount(getCollapse(oneExpandProps));
+        const moreExpand = mount(getCollapse(moreExpandProps));
+
+        const oneExpandHeaders = oneExpand.find('.semi-collapse-header');
+        expect(oneExpandHeaders.at(0).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+        expect(oneExpandHeaders.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+        expect(oneExpandHeaders.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+
+        const moreExpandHeaders = moreExpand.find('.semi-collapse-header')
+        expect(moreExpandHeaders.at(0).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+        expect(moreExpandHeaders.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+        expect(moreExpandHeaders.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+    });
+    it('Collapse with custom expandIcon / collapseIcon', () => {
+        let plusIcon = <IconPlus />;
+        let minIcon = <IconMinus />;
+        let props = {
+            expandIcon: plusIcon,
+            collapseIcon: minIcon,
+        };
+        let collapse = mount(getCollapse(props));
+        expect(collapse.props().expandIcon).toEqual(plusIcon);
+        expect(collapse.props().collapseIcon).toEqual(minIcon);
+        expect(collapse.contains(plusIcon)).toEqual(true);
+        expect(collapse.contains(minIcon)).toEqual(false);
+        collapse
+            .find(`.${BASE_CLASS_PREFIX}-collapse-header`)
+            .at(0)
+            .simulate('click');
+        expect(collapse.contains(minIcon)).toEqual(true);
+    });
+    it('Collapse with custom extra content', () => {
+        let extra1 = '1234';
+        let extra2 = <IconCopy />;
+        let collapse = mount(
+            <Collapse>
+                <Collapse.Panel header="This is panel header 1" itemKey="1" extra={extra1}>
+                    <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+                </Collapse.Panel>
+                <Collapse.Panel header="This is panel header 2" itemKey="2" extra={extra2}>
+                    <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
+                </Collapse.Panel>
+            </Collapse>
+        );
+        let panels = collapse.find(`.${BASE_CLASS_PREFIX}-collapse-header-right`);
+        let panel1 = panels.at(0);
+        let panel2 = panels.at(1);
+        expect(panel1.contains(extra1)).toEqual(true);
+        expect(panel1.contains(extra1)).toEqual(true);
+    });
+    it('Collapse onChange', () => {
+        let onChange = value => {};
+
+        let spyOnChange = sinon.spy(onChange);
+        let props = {
+            onChange: spyOnChange,
+        };
+        const collapse = mount(getCollapse(props));
+        collapse
+            .find(`.${BASE_CLASS_PREFIX}-collapse-header`)
+            .at(2)
+            .simulate('click');
+        expect(spyOnChange.calledWithMatch(['3'])).toBe(true);
+        expect(spyOnChange.calledOnce).toBe(true);
+    });
+    it('expand more than one panel', () => {
+        const collapse = mount(getCollapse());
+        collapse
+            .find(`.${BASE_CLASS_PREFIX}-collapse-header`)
+            .at(1)
+            .simulate('click');
+        collapse
+            .find(`.${BASE_CLASS_PREFIX}-collapse-header`)
+            .at(2)
+            .simulate('click');
+        let activeSet = [...collapse.state().activeSet];
+        expect(JSON.stringify(activeSet)).toEqual('["2","3"]');
+        const headers = collapse.find('.semi-collapse-header');
+        expect(headers.at(0).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+        expect(headers.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+        expect(headers.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+    });
+
+    it('accordion, Only one expansion is allowed', () => {
+        let props = {
+            accordion: true,
+            defaultActiveKey: ['1', '2'],
+        };
+        const collapse = mount(getCollapse(props));
+        let activeSet = [...collapse.state().activeSet];
+        expect(activeSet[0]).toEqual('1');
+        // only first key active when accordion is true & defaultActiveKey set more than one key
+        const headers = collapse.find('.semi-collapse-header');
+        expect(headers.at(0).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+        expect(headers.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+        // simulate click panel-3
+        collapse.find(`.${BASE_CLASS_PREFIX}-collapse-header`).at(2).simulate('click');
+        activeSet = [...collapse.state().activeSet];
+        expect(activeSet[0]).toEqual('3');
+        expect(headers.at(0).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+        expect(headers.at(1).getDOMNode().getAttribute(expandAttr)).toEqual("false");
+        expect(headers.at(2).getDOMNode().getAttribute(expandAttr)).toEqual("true");
+    });
+});

package/collapse/_story/Demo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Collapse from '../index';
+
+const Demo = () => {
+    return (
+        <div>
+            <Collapse accordion defaultActiveKey="byte" onChange={ (val: any) => { console.log(val) } }>
+                <Collapse.Panel itemKey="semi">
+                    <p>
+                        semi-ui
+                    </p>
+                </Collapse.Panel>
+                <Collapse.Panel itemKey="byte">
+                    <p>
+                        byte
+                    </p>
+                </Collapse.Panel>
+                <Collapse.Panel itemKey="dance">
+                    <p>
+                        dance
+                    </p>
+                </Collapse.Panel>
+            </Collapse>
+        </div>
+    )
+}
+
+export default Demo