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

package/collapsible/_story/Nested/index.js

@@ -1,101 +0,0 @@
-import React, { useState } from 'react';
-import { Collapsible, Button } from '@douyinfe/semi-ui/';
-
-class OldDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isOpen: false,
-            isChildOpen: false,
-            activeKey: '',
-        };
-        this.toggle = this.toggle.bind(this);
-        this.toggleChild = this.toggleChild.bind(this);
-    }
-
-    toggle() {
-        this.setState({ isOpen: !this.state.isOpen });
-    }
-
-    toggleChild() {
-        this.setState({ isChildOpen: !this.state.isChildOpen });
-    }
-
-    render() {
-        const { isOpen, isChildOpen } = this.state;
-        const collapsed = (
-            <ul key={2} >
-                <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}>Toggle</Button>
-                <br />
-                <Collapsible
-                    isOpen={isOpen}
-                    keepDOM
-                >
-                    <div key={1} >
-                        Semi Design的设计原则包括：<Button onClick={this.toggleChild}>Toggle List</Button>
-                    </div>
-                    <Collapsible isOpen={isChildOpen} >
-                        {collapsed}
-                    </Collapsible>
-                </Collapsible>
-            </div>
-        );
-    }
-}
-
-const Demo = () => {
-    const [isOpen, setOpen] = useState(false);
-    const [isChildOpen, setChildOpen] = useState(false);
-
-    const collapsed = (
-        <ul>
-            <li>
-                <p>Semi Design 以内容优先进行设计。</p>
-            </li>
-            <li>
-                <p>更容易地自定义主题。</p>
-            </li>
-            <li>
-                <p>适用国际化场景。</p>
-            </li>
-            <li>
-                <p>效率场景加入人性化关怀。</p>
-            </li>
-        </ul>
-    );
-    const toggle = () => {
-        setOpen(!isOpen);
-    };
-    return (
-        <div>
-            <Button onClick={toggle}>Toggle</Button>
-            <br />
-            <Collapsible isOpen={isOpen}>
-                <div>
-                    <span>Semi Design的设计原则包括：</span>
-                    <Button onClick={() => setChildOpen(!isChildOpen)}>Toggle List</Button>
-                </div>
-                <Collapsible isOpen={isChildOpen}>{collapsed}</Collapsible>
-            </Collapsible>
-        </div>
-    );
-};
-
-
-export default Demo;

package/collapsible/_story/collapsible.stories.js

@@ -1,588 +0,0 @@
-/* argus-disable unPkgSensitiveInfo */
-import React, { useState } from 'react';
-import { Button, CheckboxGroup, Upload, Table, Collapse, Tabs } from '../../index';
-import Collapsible from '..';
-import NestedDemo from './Nested';
-import { IconChevronDown, IconChevronRight, IconUpload } from '@douyinfe/semi-icons';
-
-const TabPane = Tabs.TabPane;
-
-export default {
-  title: 'Collapsible',
-}
-
-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 const RegularCollapsible = () => <Demo />;
-
-class DemoDOM 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 keepDOM isOpen={isOpen}>
-          {collapsed}
-        </Collapsible>
-      </div>
-    );
-  }
-}
-
-export const KeepDom = () => <DemoDOM />;
-
-class DefaultOpen extends React.Component {
-  state = {
-    isOpen: true,
-  };
-  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()}>toggle</Button>
-        <Collapsible isOpen={isOpen}>{collapsed}</Collapsible>
-      </div>
-    );
-  }
-}
-
-export const DefaultOpenDemo = () => <DefaultOpen />;
-export const NestedCollapsible = () => <NestedDemo />;
-
-class Wrap extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: props.isOpen,
-      options: [
-        {
-          label: '抖音',
-          value: 'dy',
-        },
-        {
-          label: '火山',
-          value: 'hotsoon',
-        },
-        {
-          label: '皮皮虾',
-          value: 'pipixia',
-        },
-        {
-          label: '今日头条',
-          value: 'toutiao',
-        },
-      ],
-      values: [],
-    };
-    this.toggle = this.toggle.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  toggle() {
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
-  }
-
-  onChange(values) {
-    this.setState({
-      values,
-    });
-  }
-
-  render() {
-    const { isOpen, options, values } = this.state;
-    return (
-      <>
-        <div onClick={this.toggle}>
-          {isOpen ? <IconChevronDown /> : <IconChevronRight />}
-          权限点
-          <span>
-            {values.length}/{options.length}
-          </span>
-        </div>
-        <Collapse defaultActiveKey="1" motion={false}>
-          <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>
-        {/* <Collapsible isOpen={isOpen}>
-           <div style={{ height: '40px' }}>
-               <CheckboxGroup options={options} direction="horizontal" onChange={this.onChange} value={values} />
-           </div>
-        </Collapsible> */}
-      </>
-    );
-  }
-}
-
-export const CollapsibleTest = () => <Wrap />;
-
-class App extends React.Component {
-  render() {
-    const expandColumns = [
-      {
-        title: 'Name',
-        dataIndex: 'name',
-        key: 'name',
-      },
-      {
-        title: 'Age',
-        dataIndex: 'age',
-        key: 'age',
-      },
-      {
-        title: 'Address',
-        dataIndex: 'address',
-        key: 'address',
-      },
-      {
-        title: 'Action',
-        dataIndex: '',
-        key: 'x',
-        render: () => <a>Delete</a>,
-      },
-    ];
-    const rowSelection = {
-      onChange: (selectedRowKeys, selectedRows) => {
-        // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-      },
-      getCheckboxProps: record => ({
-        disabled: record.name === 'Michael James',
-        // Column configuration not to be checked
-        name: record.name,
-      }),
-    };
-    const expandData = [
-      {
-        name: 'John Brown',
-        age: 32,
-        address: 'New York No. 1 Lake Park',
-        description:
-          'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
-      },
-      {
-        name: 'Jim Green',
-        age: 42,
-        address: 'London No. 1 Lake Park',
-        description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
-      },
-      {
-        name: 'Joe Black',
-        age: 32,
-        address: (
-          <Collapse defaultActiveKey="1" motion={false}>
-            <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>
-        ),
-        description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
-      },
-    ];
-
-    const expandRowRender = (record, index) => <Wrap isOpen={true} />;
-
-    return (
-      <Table
-        rowKey={'name'}
-        columns={expandColumns}
-        rowSelection={rowSelection}
-        expandedRowRender={expandRowRender}
-        dataSource={expandData}
-      />
-    );
-  }
-}
-
-export const CollapsibleInTable = () => <App />;
-
-class InTab extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      isOpenFirst: false,
-      isOpenSecond: false,
-    };
-  }
-
-  render() {
-    const { isOpenFirst, isOpenSecond } = this.state;
-    return (
-      <div>
-        <Tabs
-          onTabClick={e =>
-            this.setState({
-              active: e,
-            })
-          }
-        >
-          <TabPane tab="第一" itemKey="1">
-            <h3>第一个tabpane</h3>
-            <Button
-              onClick={() => {
-                this.setState({
-                  isOpenFirst: !isOpenFirst,
-                });
-              }}
-            >
-              开关
-            </Button>
-            <Collapsible isOpen={isOpenFirst}>
-              第一个tabpane下的collapsible的open状态正常
-            </Collapsible>
-          </TabPane>
-          <TabPane tab="第二" itemKey="2">
-            <h3>第二个tabpane</h3>
-            <Button
-              onClick={() => {
-                this.setState({
-                  isOpenSecond: !isOpenSecond,
-                });
-              }}
-            >
-              开关
-            </Button>
-            <Collapsible isOpen={isOpenSecond}>
-              第二个tabpane下的collapsibleopen状态异常
-            </Collapsible>
-          </TabPane>
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export const CollapsibleInTab = () => <InTab />;
-
-CollapsibleInTab.story = {
-  name: 'collapsible in tab',
-};
-
-class WithUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: true,
-    };
-    this.toggle = this.toggle.bind(this);
-    this.action = '//semi.design/api/upload/';
-    this.defaultFileList = [
-      {
-        preview: false,
-        name: '2D (2).ecpj',
-        status: 'success',
-        uid: 'd116a179410eb0ca18e66074509bde93-0',
-        url:
-          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-      },
-      {
-        preview: false,
-        name: '2D-sticker-temp.psd',
-        status: 'success',
-        uid: 'b7d579069320590ba4b128672eedbae2-1',
-        url:
-          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-      },
-      {
-        preview: false,
-        name: '2D-sticker-temp (1).psd',
-        status: 'success',
-        uid: 'b7d579069320590ba4b128672eedbae2-2',
-        url:
-          'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-      },
-    ];
-  }
-
-  toggle() {
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    return (
-      <div>
-        <Collapsible isOpen={isOpen} collapseHeight={120}>
-          <Upload
-            dragable={true}
-            name="file" // accept={ALLOW_FILE}
-            defaultFileList={[
-              {
-                preview: false,
-                name: '2D (2).ecpj',
-                status: 'success',
-                uid: 'd116a179410eb0ca18e66074509bde93-0',
-                url:
-                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-              },
-              {
-                preview: false,
-                name: '2D-sticker-temp.psd',
-                status: 'success',
-                uid: 'b7d579069320590ba4b128672eedbae2-1',
-                url:
-                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-              },
-              {
-                preview: false,
-                name: '2D-sticker-temp (1).psd',
-                status: 'success',
-                uid: 'b7d579069320590ba4b128672eedbae2-2',
-                url:
-                  'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bag.jpeg',
-              },
-            ]}
-            dragMainText="点击上传文件或拖拽文件到这里"
-            dragSubText="图片、PDF、PPT、Word、视频等"
-            onError={this.uploadError}
-            onSuccess={(...args) => this.uploadSuccess(i, ...args)}
-            onRemove={(...args) => this.onRemoveFile(i, ...args)}
-            onProgress={() =>
-              this.setState({
-                fileLoading: true,
-              })
-            }
-          >
-            <Button icon={<IconUpload />} theme="light">
-              点击上传
-            </Button>
-          </Upload>
-        </Collapsible>
-        <Button onClick={this.toggle}>{isOpen ? '剩余1项' : '展开'}</Button>
-      </div>
-    );
-  }
-}
-
-export const CollapsibleWithUpload = () => <WithUpload />;
-
-class CusHeight extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-    };
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    this.setState({
-      isOpen: !this.state.isOpen,
-    });
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const maskStyle = isOpen
-      ? {}
-      : {
-          WebkitMaskImage:
-            'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',
-        };
-    const collapsed = (
-      <ul>
-        <li>
-          <p>Semi Design 以内容优先进行设计。</p>
-        </li>
-        <li>
-          <p>更容易地自定义主题。</p>
-        </li>
-        <li>
-          <p>适用国际化场景。</p>
-        </li>
-        <li>
-          <p>效率场景加入人性化关怀。</p>
-        </li>
-      </ul>
-    );
-    const linkStyle = {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      textAlign: 'center',
-      bottom: -10,
-      fontWeight: 700,
-      cursor: 'pointer',
-    };
-    console.log('out state', isOpen);
-    return (
-      <>
-        <Button onClick={this.toggle}>Toggle</Button>
-        <div
-          style={{
-            position: 'relative',
-          }}
-        >
-          <Collapsible
-            isOpen={isOpen}
-            collapseHeight={40}
-            style={{ ...maskStyle }}
-            onInnerStateOpen={bool => {
-              if (isOpen !== bool) {
-                this.setState({
-                  isOpen: bool,
-                });
-              }
-            }}
-          >
-            {collapsed}
-          </Collapsible>
-          {isOpen ? null : (
-            <a onClick={this.toggle} style={{ ...linkStyle }}>
-              + Show More
-            </a>
-          )}
-        </div>
-      </>
-    );
-  }
-}
-
-export const CollapseHeight = () => <CusHeight />;
-
-const Child = ({ onClick }) => {
-  const [isCOpen, setIsCOpen] = useState(false);
-  return (
-    <div>
-      <div
-        style={{
-          display: isCOpen ? 'block' : 'none',
-          height: 200,
-          background: 'green',
-        }}
-      >
-        child
-      </div>
-      <Button
-        onClick={() => {
-          setIsCOpen(!isCOpen);
-          onClick();
-        }}
-      >
-        Toggle
-      </Button>
-    </div>
-  );
-}; // dynamic update content, children comp need to separate from parent to avoid rerender of entire comp
-
-const DynamDemo = () => {
-  const [isOpen, setIsOpen] = useState(true);
-  const [reCalcKey, setReCalcKey] = useState(0);
-  return (
-    <div>
-      <Button onClick={() => setIsOpen(!isOpen)}>折叠</Button>
-      <Collapsible isOpen={isOpen}>
-        <div>
-          <div
-            style={{
-              height: 200,
-              background: 'blue',
-            }}
-          >
-            father
-          </div>
-          <Child onClick={() => setReCalcKey(reCalcKey + 1)} />
-        </div>
-      </Collapsible>
-    </div>
-  );
-};
-
-export const DynamicCollapsible = () => <DynamDemo />;

package/collapsible/_story/collapsible.stories.tsx

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