@douyinfe/semi-ui 2.1.2 → 2.1.5

package/cascader/item.tsx

@@ -0,0 +1,304 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
+import { includes } from 'lodash';
+import ConfigContext from '../configProvider/context';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
+import { Locale } from '../locale/interface';
+import Spin from '../spin';
+import Checkbox, { CheckboxEvent } from '../checkbox';
+import {
+    BasicCascaderData,
+    BasicEntity,
+    ShowNextType,
+    BasicData
+} from '@douyinfe/semi-foundation/cascader/foundation';
+
+export interface CascaderData extends BasicCascaderData {
+    label: React.ReactNode;
+}
+
+export interface Entity extends BasicEntity {
+    /* children list */
+    children?: Array<Entity>;
+    /* treedata */
+    data: CascaderData;
+    /* parent data */
+    parent?: Entity;
+}
+
+export interface Entities {
+    [idx: string]: Entity;
+}
+
+export interface Data extends BasicData {
+    data: CascaderData;
+    searchText: React.ReactNode[];
+}
+
+export interface CascaderItemProps {
+    activeKeys: Set<string>;
+    selectedKeys: Set<string>;
+    loadedKeys: Set<string>;
+    loadingKeys: Set<string>;
+    onItemClick: (e: React.MouseEvent, item: Entity | Data) => void;
+    onItemHover: (e: React.MouseEvent, item: Entity) => void;
+    showNext: ShowNextType;
+    onItemCheckboxClick: (item: Entity | Data) => void;
+    onListScroll: (e: React.UIEvent<HTMLUListElement, UIEvent>, ind: number) => void;
+    searchable: boolean;
+    keyword: string;
+    empty: boolean;
+    emptyContent: React.ReactNode;
+    loadData: (selectOptions: CascaderData[]) => Promise<void>;
+    data: Array<Data | Entity>;
+    multiple: boolean;
+    checkedKeys: Set<string>;
+    halfCheckedKeys: Set<string>;
+}
+
+const prefixcls = cssClasses.PREFIX_OPTION;
+
+export default class Item extends PureComponent<CascaderItemProps> {
+    static contextType = ConfigContext;
+
+    static propTypes = {
+        data: PropTypes.array,
+        emptyContent: PropTypes.node,
+        searchable: PropTypes.bool,
+        onItemClick: PropTypes.func,
+        onItemHover: PropTypes.func,
+        multiple: PropTypes.bool,
+        showNext: PropTypes.oneOf([strings.SHOW_NEXT_BY_CLICK, strings.SHOW_NEXT_BY_HOVER]),
+        checkedKeys: PropTypes.object,
+        halfCheckedKeys: PropTypes.object,
+        onItemCheckboxClick: PropTypes.func,
+        keyword: PropTypes.string
+    };
+
+    static defaultProps = {
+        empty: false,
+    };
+
+    onClick = (e: React.MouseEvent, item: Entity | Data) => {
+        const { onItemClick } = this.props;
+        if (item.data.disabled || ('disabled' in item && item.disabled)) {
+            return;
+        }
+        onItemClick(e, item);
+    };
+
+    onHover = (e: React.MouseEvent, item: Entity) => {
+        const { showNext, onItemHover } = this.props;
+        if (item.data.disabled) {
+            return;
+        }
+        if (showNext === strings.SHOW_NEXT_BY_HOVER) {
+            onItemHover(e, item);
+        }
+    };
+
+    onCheckboxChange = (e: CheckboxEvent, item: Entity | Data) => {
+        const { onItemCheckboxClick } = this.props;
+        // Prevent Checkbox's click event bubbling to trigger the li click event
+        e.stopPropagation();
+        if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+            e.nativeEvent.stopImmediatePropagation();
+        }
+        onItemCheckboxClick(item);
+    };
+
+    getItemStatus = (key: string) => {
+        const { activeKeys, selectedKeys, loadedKeys, loadingKeys } = this.props;
+        const state = { active: false, selected: false, loading: false };
+        if (activeKeys.has(key)) {
+            state.active = true;
+        }
+        if (selectedKeys.has(key)) {
+            state.selected = true;
+        }
+        if (loadingKeys.has(key) && !loadedKeys.has(key)) {
+            state.loading = true;
+        }
+        return state;
+    };
+
+    renderIcon = (type: string) => {
+        switch (type) {
+            case 'child':
+                return (<IconChevronRight className={`${prefixcls}-icon ${prefixcls}-icon-expand`} />);
+            case 'tick':
+                return (<IconTick className={`${prefixcls}-icon ${prefixcls}-icon-active`} />);
+            case 'loading':
+                return <Spin wrapperClassName={`${prefixcls}-spin-icon`} />;
+            case 'empty':
+                return (<span className={`${prefixcls}-icon ${prefixcls}-icon-empty`} />);
+            default:
+                return null;
+        }
+    };
+
+    highlight = (searchText: React.ReactNode[]) => {
+        const content: React.ReactNode[] = [];
+        const { keyword } = this.props;
+        searchText.forEach((item, idx) => {
+            if (typeof item === 'string' && includes(item, keyword)) {
+                item.split(keyword).forEach((node, index) => {
+                    if (index > 0) {
+                        content.push(
+                            <span className={`${prefixcls}-label-highlight`} key={`${index}-${idx}`}>
+                                {keyword}
+                            </span>
+                        );
+                    }
+                    content.push(node);
+                });
+            } else {
+                content.push(item);
+            }
+            if (idx !== searchText.length - 1) {
+                content.push(' / ');
+            }
+        });
+        return content;
+    };
+
+    renderFlattenOption = (data: Data[]) => {
+        const { multiple, checkedKeys, halfCheckedKeys } = this.props;
+        const content = (
+            <ul className={`${prefixcls}-list`} key={'flatten-list'}>
+                {data.map(item => {
+                    const { searchText, key, disabled } = item;
+                    const className = cls(prefixcls, {
+                        [`${prefixcls}-flatten`]: true,
+                        [`${prefixcls}-disabled`]: disabled
+                    });
+                    return (
+                        <li
+                            className={className}
+                            key={key}
+                            onClick={e => {
+                                this.onClick(e, item);
+                            }}
+                        >
+                            <span className={`${prefixcls}-label`}>
+                                {!multiple && this.renderIcon('empty')}
+                                {multiple && (
+                                    <Checkbox
+                                        onChange={(e: CheckboxEvent) => this.onCheckboxChange(e, item)}
+                                        disabled={disabled}
+                                        indeterminate={halfCheckedKeys.has(item.key)}
+                                        checked={checkedKeys.has(item.key)}
+                                        className={`${prefixcls}-label-checkbox`}
+                                    />
+                                )}
+                                {this.highlight(searchText)}
+                            </span>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+        return content;
+    };
+
+    renderItem(renderData: Array<Entity>, content: Array<React.ReactNode> = []) {
+        const { multiple, checkedKeys, halfCheckedKeys } = this.props;
+        let showChildItem: Entity;
+        const ind = content.length;
+        content.push(
+            <ul className={`${prefixcls}-list`} key={renderData[0].key} onScroll={e => this.props.onListScroll(e, ind)}>
+                {renderData.map(item => {
+                    const { data, key } = item;
+                    const { children, label, disabled, isLeaf } = data;
+                    const { active, selected, loading } = this.getItemStatus(key);
+                    const hasChild = Boolean(children) && children.length;
+                    const showExpand = hasChild || (this.props.loadData && !isLeaf);
+                    if (active && hasChild) {
+                        showChildItem = item;
+                    }
+                    const className = cls(prefixcls, {
+                        [`${prefixcls}-active`]: active && !selected,
+                        [`${prefixcls}-select`]: selected && !multiple,
+                        [`${prefixcls}-disabled`]: disabled
+                    });
+                    return (
+                        <li
+                            className={className}
+                            key={key}
+                            onClick={e => {
+                                this.onClick(e, item);
+                            }}
+                            onMouseEnter={e => {
+                                this.onHover(e, item);
+                            }}
+                        >
+                            <span className={`${prefixcls}-label`}>
+                                {selected && !multiple && this.renderIcon('tick')}
+                                {!selected && !multiple && this.renderIcon('empty')}
+                                {multiple && (
+                                    <Checkbox
+                                        onChange={(e: CheckboxEvent) => this.onCheckboxChange(e, item)}
+                                        disabled={disabled}
+                                        indeterminate={halfCheckedKeys.has(item.key)}
+                                        checked={checkedKeys.has(item.key)}
+                                        className={`${prefixcls}-label-checkbox`}
+                                    />
+                                )}
+                                <span>{label}</span>
+                            </span>
+                            {showExpand ? this.renderIcon(loading ? 'loading' : 'child') : null}
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+        if (showChildItem) {
+            content.concat(this.renderItem(showChildItem.children, content));
+        }
+        return content;
+    }
+
+    renderEmpty() {
+        const { emptyContent } = this.props;
+        return (
+            <LocaleConsumer componentName="Cascader">
+                {(locale: Locale['Cascader']) => (
+                    <ul className={`${prefixcls} ${prefixcls}-empty`} key={'empty-list'}>
+                        <span className={`${prefixcls}-label`}>
+                            {emptyContent || locale.emptyText}
+                        </span>
+                    </ul>
+                )}
+            </LocaleConsumer>
+        );
+    }
+
+    render() {
+        const { data, searchable } = this.props;
+        const { direction } = this.context;
+        const isEmpty = !data || !data.length;
+        let content;
+        const listsCls = cls({
+            [`${prefixcls}-lists`]: true,
+            [`${prefixcls}-lists-rtl`]: direction === 'rtl',
+            [`${prefixcls}-lists-empty`]: isEmpty,
+        });
+
+        if (isEmpty) {
+            content = this.renderEmpty();
+        } else {
+            content = searchable ?
+                this.renderFlattenOption(data as Data[]) :
+                this.renderItem(data as Entity[]);
+        }
+        return (
+            <div className={listsCls}>
+                {content}
+            </div>
+        );
+    }
+}
+

package/checkbox/__test__/checkbox.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Checkbox } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+function getCb(props) {
+    return mount(<Checkbox children={'Semi Design'} {...props} />);
+}
+
+describe('checkbox', () => {
+    it('className & style', () => {
+        const checkbox = getCb({
+            className: 'test',
+            style: { color: 'red' },
+        });
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox.test`)).toEqual(true);
+        expect(checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox.test`)).toHaveStyle('color', 'red');
+    });
+
+    it('should work basically & click behaviour', () => {
+        const checkbox = getCb();
+        let checkboxDOM = checkbox.find('input');
+        expect(checkboxDOM.exists()).toEqual(true);
+        expect(checkbox.state().checked).toEqual(false);
+        expect(!!checkboxDOM.disabled).toEqual(false);
+        checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox`).simulate('click', {});
+        expect(checkbox.state().checked).toEqual(true);
+    });
+
+    it('defaultChecked', () => {
+        const checkbox = getCb({ defaultChecked: true });
+        const checkboxDOM = checkbox.find('input').getDOMNode();
+        expect(!!checkboxDOM.checked).toEqual(true);
+    });
+
+    it('checked, controlled mode', () => {
+        const checkbox = getCb({ checked: true });
+        expect(checkbox.state().checked).toEqual(true);
+        expect(checkbox.find('input').getDOMNode().checked).toEqual(true);
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-checked`)).toEqual(true);
+
+        checkbox.setProps({ checked: false });
+        checkbox.update();
+        expect(checkbox.state().checked).toEqual(false);
+        expect(checkbox.find('input').getDOMNode().checked).toEqual(false);
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-checked`)).toEqual(false);
+
+        checkbox.setProps({ checked: true }) 
+        checkbox.update();
+        expect(checkbox.state().checked).toEqual(true);
+        expect(checkbox.find('input').getDOMNode().checked).toEqual(true);
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-checked`)).toEqual(true);
+
+        // case like formApi.reset() will case checked  true => undefined
+        // can't setProps({}) here, otherwise props compare can't work
+        checkbox.setProps({ checked: undefined });
+        checkbox.update();
+        expect(checkbox.state().checked).toEqual(false);
+        expect(checkbox.find('input').getDOMNode().checked).toEqual(false);
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-checked`)).toEqual(false);
+    });
+ 
+    it('disabled', () => {
+        const checkbox = getCb({ disabled: true });
+        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-disabled`)).toEqual(true);
+        expect(checkbox.state().checked).toEqual(false);
+        checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox`).simulate('click', {});
+        expect(checkbox.state().checked).toEqual(false);
+    });
+
+    it('onChange', () => {
+        const onChange = sinon.spy(value => {});
+        const checkbox = mount(<Checkbox onChange={onChange} />);
+        checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox`).simulate('click', {});
+        expect(onChange.getCall(0).args[0].target.checked).toEqual(true);
+        checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox`).simulate('click', {});
+        expect(onChange.getCall(1).args[0].target.checked).toEqual(false);
+    });
+
+    it('extra', () => {
+        let text = 'abcd';
+        const checkbox = getCb({ extra: text });
+        expect(checkbox.find(`.${BASE_CLASS_PREFIX}-checkbox-extra`).text()).toEqual(text);
+    });
+});

package/checkbox/__test__/checkboxGroup.test.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+import { Checkbox, CheckboxGroup } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+const options = [
+    { label: 'Abc', value: 'abc' },
+    { label: 'Hotsoon', value: 'hotsoon' },
+    { label: 'Pipixia', value: 'pipixia' },
+    { label: 'Toutiao', value: 'toutiao' },
+];
+
+function getCG(props) {
+    if (!props.children && !props.options) {
+        props.options = options;
+    }
+    return mount(<CheckboxGroup {...props} />);
+}
+
+describe('CheckboxGroup', () => {
+    it('className & style', () => {
+        let checkboxGroup = getCG({
+            style: { color: 'red' },
+            className: 'cbg-test',
+        });
+    });
+
+    it('declare via options', () => {
+        let checkboxGroup = getCG({});
+        let group = checkboxGroup.find(`div.${BASE_CLASS_PREFIX}-checkboxGroup`);
+        expect(group.children().length).toEqual(4);
+        let labels = checkboxGroup.find(`.${BASE_CLASS_PREFIX}-checkbox-addon`);
+        expect(labels.at(0).text()).toEqual('Abc');
+        expect(labels.at(1).text()).toEqual('Hotsoon');
+        expect(labels.at(2).text()).toEqual('Pipixia');
+        expect(labels.at(3).text()).toEqual('Toutiao');
+    });
+
+    it('declare via children', () => {
+        let children = options.map(item => <Checkbox value={item.value}>{item.label}</Checkbox>);
+        let props = {
+            children,
+        };
+        let checkboxGroup = getCG(props);
+        let group = checkboxGroup.find(`div.${BASE_CLASS_PREFIX}-checkboxGroup`);
+        expect(group.children().length).toEqual(4);
+        let labels = checkboxGroup.find(`.${BASE_CLASS_PREFIX}-checkbox-addon`);
+        expect(labels.at(0).text()).toEqual('Abc');
+        expect(labels.at(1).text()).toEqual('Hotsoon');
+        expect(labels.at(2).text()).toEqual('Pipixia');
+        expect(labels.at(3).text()).toEqual('Toutiao');
+    });
+
+    it('direction', () => {
+        let props = {
+            direction: 'horizontal',
+        };
+        let checkboxgroup = getCG(props);
+        expect(checkboxgroup.exists(`div.${BASE_CLASS_PREFIX}-checkboxGroup-horizontal`)).toEqual(true);
+    });
+
+    it('name', () => {
+        // all children should have a name property
+        const wrapper = mount(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
+        wrapper.find('input[type="checkbox"]').forEach(el => {
+            expect(el.props().name).toEqual('checkboxgroup');
+        });
+    });
+
+    it('group - onChange', () => {
+        let onChange = checkedValue => { };
+        let spyOnChange = sinon.spy(onChange);
+        let props = {
+            onChange: spyOnChange,
+        };
+        let cg = getCG(props);
+        let checkboxs = cg.find(`.${BASE_CLASS_PREFIX}-checkbox-inner`);
+        checkboxs.at(0).simulate('click', {});
+        expect(spyOnChange.getCall(0).calledWithMatch(['abc'])).toEqual(true);
+        checkboxs.at(1).simulate('click', {});
+        expect(spyOnChange.getCall(1).calledWithMatch(['abc', 'hotsoon'])).toEqual(true);
+        checkboxs.at(2).simulate('click', {});
+        expect(spyOnChange.getCall(2).calledWithMatch(['abc', 'hotsoon', 'pipixia'])).toEqual(true);
+        expect(spyOnChange.callCount).toEqual(3);
+    });
+
+    it('disabled', () => {
+        let spyOnChange = sinon.spy(() => { });
+
+        let props = {
+            onChange: spyOnChange,
+            disabled: true,
+        };
+        let cg = getCG(props);
+        // does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled
+        expect(cg.find(`.${BASE_CLASS_PREFIX}-checkbox-disabled`).length).toEqual(4);
+        let checkboxs = cg.find(`.${BASE_CLASS_PREFIX}-checkbox-inner`);
+        checkboxs.at(0).simulate('click', {});
+        expect(spyOnChange.callCount).toEqual(0);
+    });
+
+    it('defaultValue', () => {
+        let spyOnChange = sinon.spy(ca => { });
+        let props = {
+            onChange: spyOnChange,
+            defaultValue: ['hotsoon'],
+        };
+        let cg = getCG(props);
+        let checkboxs = cg.find(`.${BASE_CLASS_PREFIX}-checkbox-inner`);
+        expect(checkboxs.at(1).hasClass(`${BASE_CLASS_PREFIX}-checkbox-inner-checked`)).toEqual(true);
+        checkboxs.at(0).simulate('click', {});
+        expect(spyOnChange.calledOnceWith(['hotsoon', 'abc'])).toEqual(true);
+    });
+
+    it('should be controlled by value', () => {
+        const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
+
+        const wrapper = getCG({ options });
+        expect(wrapper.instance().state.value).toEqual([]);
+        wrapper.setProps({ value: ['Apple'] });
+        expect(wrapper.instance().state.value).toEqual(['Apple']);
+    });
+
+    it('should trigger onChange in sub Checkbox', () => {
+        const spyItemChange = sinon.spy(() => { });
+        const spyGroupChange = sinon.spy(() => { });
+        const cg = mount(
+            <CheckboxGroup onChange={spyGroupChange}>
+                <Checkbox value="my" onChange={spyItemChange} />
+            </CheckboxGroup>
+        );
+        let checkboxs = cg.find(`.${BASE_CLASS_PREFIX}-checkbox-inner`);
+        checkboxs.at(0).simulate('click', {});
+        expect(spyItemChange.calledOnce).toEqual(true);
+        expect(spyGroupChange.calledOnce).toEqual(true);
+    });
+
+    it('checkboxGroup card style', () => {
+        const checkboxGroup = getCG({ type: 'card' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'card', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
+    });
+
+    it('checkboxGroup pure card style', () => {
+        const checkboxGroup = getCG({ type: 'pureCard' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'pureCard', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
+    });
+});

package/checkbox/_story/Demo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Checkbox from '../index';
+import CheckboxGroup from '../checkboxGroup';
+
+const Demo = () => {
+
+    const checkboxGroupOpiton = [
+        { label: 'Photography', value: 'Photography' },
+        { label: 'Movies', value: 'Movies' },
+        { label: 'Running', value: 'Running', disabled: true },
+    ];
+
+    return (
+        <div>
+            <Checkbox extra='绑定了回调' autoFocus onChange={ ()  => { alert('change') }}>
+                autoFocus
+            </Checkbox>
+            <Checkbox extra='默认选中你' disabled defaultChecked>
+                disabled
+            </Checkbox>
+            <hr/>
+            <CheckboxGroup options={ checkboxGroupOpiton } defaultValue={ ['Running', 'Movies'] } />
+        </div>
+    )
+} 
+
+export default Demo;