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

package/collapse/__test__/collapse.test.js

@@ -1,168 +0,0 @@
-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, panel1Props) => {
-    let props = collapseProps ? collapseProps : {};
-    let panelProps = panel1Props ? panel1Props : {};
-
-    return (
-        <Collapse {...collapseProps}>
-            <Collapse.Panel header="This is panel header 1" itemKey="1" {...panelProps}>
-                <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");
-    });
-
-    it('disable Collapse', () => {
-        let props = {
-            disabled: true,
-        };
-        const disabledPanel = mount(getCollapse({}, props));
-        expect(disabledPanel.exists('.semi-collapse-header-disabled')).toEqual(true);
-    });
-
-    it('hide the panel icon', () => {
-        const hidePanelArrow = mount( 
-        <Collapse >
-            <Collapse.Panel header="This is panel header 1" itemKey="1" showArrow={false}>
-                <p>Hi, bytedance dance dance. This is the docsite of Semi UI. </p>
-            </Collapse.Panel>
-        </Collapse>);
-        expect(hidePanelArrow.exists('.semi-collapse-header-icon')).toEqual(false);
-    });
-});

package/collapse/_story/Demo.tsx

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

package/collapse/_story/accordion.stories.js

@@ -1,143 +0,0 @@
-import React from 'react';
-import Collapse from '..';
-import { IconCopy } from '@douyinfe/semi-icons';
-
-const Panel = Collapse.Panel;
-
-const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found:a welcome guest in many households across the world.
-`;
-
-export default {
-  title: 'Collapse',
-}
-
-export const RegularCollapse = () => (
-  <div>
-    <Collapse onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="1" showArrow={false}>
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-    <br />
-    <Collapse defaultActiveKey={'124'} onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="1">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="124" disabled>
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  </div>
-);
-
-export const Accordion = () => (
-  <div>
-    <Collapse defaultActiveKey={'123'} accordion onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="123">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="234">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  </div>
-);
-
-export const ExtraRendering = () => (
-  <div>
-    <Collapse activeKey={'123'} onChange={k => console.log(k)}>
-      <Panel header="This is panel header 1" itemKey="123" extra="1234">
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 2" itemKey="2" extra={<IconCopy />}>
-        <p>{text}</p>
-      </Panel>
-      <Panel header="This is panel header 3" itemKey="3" disabled>
-        <p>{text}</p>
-      </Panel>
-    </Collapse>
-  </div>
-);
-
-class ControlledDemo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: [],
-    };
-  }
-
-  onChange(value) {
-    console.log(value);
-    this.setState({
-      value,
-    });
-  }
-
-  render() {
-    return (
-      <Collapse activeKey={this.state.value} onChange={k => this.onChange(k)}>
-        <Panel header="This is panel header 1" itemKey="123" extra="1234">
-          <p>{text}</p>
-        </Panel>
-        <Panel header="This is panel header 2" itemKey="2" extra={<IconCopy />}>
-          <p>{text}</p>
-        </Panel>
-        <Panel header="This is panel header 3" itemKey="3" disabled>
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    );
-  }
-}
-
-export const ControlledComponent = () => <ControlledDemo />;
-
-class ControlledDemoAccordion extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: [],
-    };
-  }
-
-  onChange(value) {
-    console.log(value);
-    this.setState({
-      value,
-    });
-  }
-
-  render() {
-    return (
-      <Collapse activeKey={this.state.value} accordion onChange={k => this.onChange(k)}>
-        <Panel header="This is panel header 1" itemKey="123" extra="1234">
-          <p>{text}</p>
-        </Panel>
-        <Panel header="This is panel header 2" itemKey="2" extra={<IconCopy />}>
-          <p>{text}</p>
-        </Panel>
-        <Panel header="This is panel header 3" itemKey="3" disabled>
-          <p>{text}</p>
-        </Panel>
-      </Collapse>
-    );
-  }
-}
-
-export const ControlledComponentAccordion = () => <ControlledDemoAccordion />;

package/collapse/_story/accordion.stories.tsx

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

package/collapse/collapse-context.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Motion } from '../_base/base';
-
-
-export interface CollapseContextType{
-    activeSet: Set<string>;
-    expandIcon: React.ReactNode;
-    collapseIcon: React.ReactNode;
-    keepDOM: boolean;
-    expandIconPosition: 'left' | 'right';
-    onClick: (activeKey: string, e: React.MouseEvent) => void;
-    motion: Motion;
-}
-
-
-const CollapseContext = React.createContext<CollapseContextType>({} as CollapseContextType);
-
-export default CollapseContext;

package/collapse/index.tsx

@@ -1,120 +0,0 @@
-import React, { CSSProperties } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/collapse/constants';
-import CollapseFoundation, {
-    ArgsType,
-    CollapseAdapter,
-    CollapseProps,
-    CollapseState
-} from '@douyinfe/semi-foundation/collapse/foundation';
-import BaseComponent from '../_base/baseComponent';
-import CollapsePanel from './item';
-import '@douyinfe/semi-foundation/collapse/collapse.scss';
-import { noop } from '@douyinfe/semi-foundation/utils/function';
-import { isEqual } from 'lodash';
-import CollapseContext from './collapse-context';
-
-export { CollapsePanelProps } from './item';
-
-export interface CollapseReactProps extends CollapseProps{
-    expandIcon?: React.ReactNode;
-    collapseIcon?: React.ReactNode;
-    children?: React.ReactNode;
-    style?: CSSProperties;
-    onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
-}
-
-
-export { CollapseState };
-
-class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
-    static Panel = CollapsePanel;
-
-    static propTypes = {
-        activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-        defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-        accordion: PropTypes.bool,
-        onChange: PropTypes.func,
-        expandIcon: PropTypes.node,
-        collapseIcon: PropTypes.node,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        keepDOM: PropTypes.bool,
-        motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-        expandIconPosition: PropTypes.oneOf(strings.iconPosition)
-    };
-
-    static defaultProps = {
-        defaultActiveKey: '',
-        onChange: noop,
-        expandIconPosition: 'right'
-    };
-
-    constructor(props: CollapseReactProps) {
-        super(props);
-        this.foundation = new CollapseFoundation(this.adapter);
-        const initKeys = this.foundation.initActiveKey();
-        this.state = {
-            activeSet: new Set(initKeys)
-        };
-        this.onChange = this.onChange.bind(this);
-    }
-
-    get adapter(): CollapseAdapter {
-        return {
-            ...super.adapter,
-            handleChange: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => this.props.onChange(activeKey, e),
-            addActiveKey: (activeSet: CollapseState['activeSet']) => this.setState({ activeSet }),
-        };
-    }
-
-    static getDerivedStateFromProps(props: CollapseReactProps, state: CollapseState) {
-        if (props.activeKey) {
-            const keys = Array.isArray(props.activeKey) ? props.activeKey : [props.activeKey];
-            const newSet = new Set(keys);
-            if (!isEqual(newSet, state.activeSet)) {
-                return {
-                    ...state,
-                    activeSet: newSet,
-                };
-            }
-            return state;
-        }
-        return state;
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    onChange = (activeKey: string, e: React.MouseEvent) => {
-        this.foundation.handleChange(activeKey, e);
-    };
-
-    render() {
-        // eslint-disable-next-line max-len
-        const { defaultActiveKey, accordion, style, motion, className, keepDOM, expandIconPosition, expandIcon, collapseIcon, children, ...rest } = this.props;
-        const clsPrefix = cls(cssClasses.PREFIX, className);
-        const { activeSet } = this.state;
-        return (
-            <div className={clsPrefix} style={style}>
-                <CollapseContext.Provider
-                    value={{
-                        activeSet,
-                        expandIcon,
-                        collapseIcon,
-                        keepDOM,
-                        expandIconPosition,
-                        onClick: this.onChange,
-                        motion
-                    }}
-                >
-                    {children}
-                </CollapseContext.Provider>
-            </div>
-        );
-    }
-}
-
-export default Collapse;

package/collapse/item.tsx

@@ -1,163 +0,0 @@
-import React, { CSSProperties, PureComponent, ReactNode } from 'react';
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/collapse/constants';
-import Collapsible from '../collapsible';
-import CollapseContext, { CollapseContextType } from './collapse-context';
-import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
-import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
-
-export interface CollapsePanelProps {
-    itemKey: string;
-    extra?: ReactNode;
-    header?: ReactNode;
-    className?: string;
-    children?: React.ReactNode;
-    reCalcKey?: number | string;
-    style?: CSSProperties;
-    showArrow?: boolean,
-    disabled?: boolean,
-}
-
-export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
-    static contextType: React.Context<CollapseContextType> = CollapseContext;
-
-    static propTypes = {
-        itemKey: PropTypes.string,
-        extra: PropTypes.node,
-        header: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.node,
-        ]),
-        className: PropTypes.string,
-        reCalcKey: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-        ]),
-        showArrow: PropTypes.bool,
-        disabled: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        showArrow: true,
-        disabled: false,
-    };
-
-    private ariaID = getUuidShort({});
-
-    context: CollapseContextType;
-
-    renderHeader(active: boolean, expandIconEnable = true) {
-        const {
-            showArrow,
-            header,
-            extra,
-        } = this.props;
-        let {
-            expandIcon,
-            collapseIcon,
-        } = this.context;
-        const { expandIconPosition } = this.context;
-        if (typeof expandIcon === 'undefined') {
-            expandIcon = (<IconChevronDown/>);
-        }
-        if (typeof collapseIcon === 'undefined') {
-            collapseIcon = (<IconChevronUp/>);
-        }
-        const icon = (
-            <span aria-hidden='true' className={cls([`${cssClasses.PREFIX}-header-icon`,
-                { [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable }])}>
-                {/* eslint-disable-next-line no-nested-ternary */}
-                {expandIconEnable ? (active ? collapseIcon : expandIcon) : expandIcon}
-            </span>
-        );
-        const iconPosLeft = expandIconPosition === 'left';
-        if (typeof header === 'string') {
-            return (
-                <>
-                    {showArrow && (iconPosLeft ? icon : null)}
-                    <span>{header}</span>
-                    <span className={`${cssClasses.PREFIX}-header-right`}>
-                        <span>{extra}</span>
-                        {showArrow && (iconPosLeft ? null : icon)}
-                    </span>
-                </>
-            );
-        }
-        return (
-            <>
-                {showArrow && (iconPosLeft ? icon : null)}
-                {header}
-                {showArrow && (iconPosLeft ? null : icon)}
-            </>
-        );
-    }
-
-    render() {
-        const {
-            className,
-            children,
-            itemKey,
-            reCalcKey,
-            header,
-            extra,
-            showArrow,
-            disabled,
-            ...restProps
-        } = this.props;
-        const {
-            keepDOM,
-            expandIconPosition,
-            activeSet,
-            onClick,
-            motion,
-        } = this.context;
-        const active = activeSet.has(itemKey);
-        const itemCls = cls(className, {
-            [`${cssClasses.PREFIX}-item`]: true,
-        });
-        const headerCls = cls({
-            [`${cssClasses.PREFIX}-header`]: true,
-            [`${cssClasses.PREFIX}-header-disabled`]: disabled,
-            [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left',
-        });
-        const contentCls = cls({
-            [`${cssClasses.PREFIX}-content`]: true,
-        });
-        return (
-            <div
-                className={itemCls}
-                {...restProps}
-            >
-                <div
-                    role="button"
-                    tabIndex={0}
-                    className={headerCls}
-                    aria-disabled={disabled}
-                    aria-expanded={active ? 'true' : 'false'}
-                    aria-owns={this.ariaID}
-                    onClick={e => !disabled && onClick(itemKey, e)}
-                >
-                    {this.renderHeader(active, children !== undefined && !disabled)}
-                </div>
-                {
-                    children && (
-                        <Collapsible
-                            isOpen={active} keepDOM={keepDOM} motion={motion}
-                            reCalcKey={reCalcKey}>
-                            <div
-                                className={contentCls}
-                                aria-hidden={!active}
-                                id={this.ariaID}
-                            >
-                                <div className={`${cssClasses.PREFIX}-content-wrapper`}>
-                                    {children}
-                                </div>
-                            </div>
-                        </Collapsible>
-                    )
-                }
-            </div>
-        );
-    }
-}

package/collapsible/_story/Demo.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import Collapsible from '../index';
-import Button from '../../button/Button';
-
-class Demo extends React.Component {
-    state = {
-        isOpen: false,
-    };
-
-    toggle = () => {
-        this.setState({ isOpen: !this.state.isOpen });
-    };
-
-    render() {
-        const { isOpen } = this.state;
-        const collapsed = (
-            <ul>
-                <li>
-                    <p>Semi Design 以内容优先进行设计。</p>
-                </li>
-                <li>
-                    <p>更容易地自定义主题。</p>
-                </li>
-                <li>
-                    <p>适用国际化场景。</p>
-                </li>
-                <li>
-                    <p>效率场景加入人性化关怀。</p>
-                </li>
-            </ul>
-        );
-        return (
-            <div>
-                <Button onClick={() => this.toggle()}>显示更多</Button>
-                <Collapsible isOpen={isOpen}>{collapsed}</Collapsible>
-            </div>
-        );
-    }
-}
-
-export default Demo