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

package/autoComplete/_story/autoComplete.stories.js

@@ -1,348 +0,0 @@
-import React, { Component, useState } from 'react';
-
-import CustomTrigger from './CustomTrigger';
-import AutoComplete from '../index';
-import { IconSearch } from '@douyinfe/semi-icons';
-
-export default {
-  title: 'AutoComplete',
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-}
-
-const props = {
-  onBlur: (v, e) => {
-    console.log('onBlur');
-    console.log(v, e);
-  },
-  onFocus: (v, e) => {
-    console.log('onFocus');
-    console.log(v, e);
-  },
-};
-
-class Demo extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: [],
-      data2: ['mike', 'tony', 'steve'],
-    };
-    this.acref = React.createRef();
-  }
-
-  handleSearch(value) {
-    // let data =  !value ? [] : [value, value + value, value + value + value];
-    let result; // if (!value || value.indexOf('@') >= 0) {
-    //     result = [];
-    // } else {
-
-    if (value) {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-    } else {
-      result = [];
-    } // }
-
-    this.setState({
-      data: result,
-    });
-  }
-
-  handleSearch2(value) {
-    // let data2 =  !value ? [] : [value, value + value, value + value + value];
-    let result;
-
-    if (!value || value.indexOf('@') >= 0) {
-      result = [];
-    } else {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-    }
-
-    this.setState({
-      data2: result,
-    });
-  }
-
-  render() {
-    const { data, data2 } = this.state;
-    return (
-      <div>
-        <AutoComplete
-          placeholder="fe"
-          className="test-ac"
-          prefix={<IconSearch />}
-          showClear
-          data={data}
-          style={{
-            width: 300,
-          }}
-          onSearch={this.handleSearch.bind(this)}
-          onSelect={v => console.log(v)}
-          {...props}
-          ref={this.acref}
-        />
-      </div>
-    );
-  }
-}
-
-export const BasicUsage = () => <Demo />;
-
-class CustomOptionDemo extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: [],
-      data2: [],
-    };
-  }
-
-  search = value => {
-    let result;
-
-    if (!value) {
-      result = [];
-    } else {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-    }
-
-    this.setState({
-      data: result,
-    });
-  };
-  renderOption = item => {
-    return (
-      <>
-        <span
-          style={{
-            color: 'pink',
-          }}
-        >
-          邮箱
-        </span>
-        : <span>{item}</span>
-      </>
-    );
-  };
-  search2 = value => {
-    let result;
-
-    if (!value) {
-      result = [];
-    } else {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => {
-        return {
-          email: `${value}@${domain}`,
-          time: new Date().valueOf(),
-          value: `${value}@${domain}`,
-        };
-      });
-    }
-
-    this.setState({
-      data2: result,
-    });
-  };
-  renderObjectOption = item => {
-    return (
-      <div>
-        <span
-          style={{
-            color: 'pink',
-          }}
-        >
-          邮箱
-        </span>
-        : <span>{item.email}</span>
-        <span>time</span>: <span>{item.time}</span>
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <>
-        <AutoComplete
-          showClear
-          data={this.state.data}
-          renderItem={this.renderOption}
-          style={{
-            width: '250px',
-          }}
-          onSearch={this.search}
-        ></AutoComplete>
-        <br />
-        <br />
-        <AutoComplete
-          onChangeWithObject
-          style={{
-            width: '250px',
-          }}
-          renderItem={this.renderObjectOption}
-          renderSelectedItem={node => node.email}
-          data={this.state.data2}
-          onSearch={this.search2}
-        />
-      </>
-    );
-  }
-}
-
-export const RenderItem = () => <CustomOptionDemo />;
-
-class WithDefaultValue extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: ['semi@bytedance.com', 'semi@gmail.com', 'semi@163.com'],
-    };
-    this.onSearch = this.onSearch.bind(this);
-  }
-  onSearch(value) {
-    let result;
-
-    if (!value) {
-      result = [];
-    } else {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-    }
-
-    this.setState({
-      data: result,
-    });
-  }
-
-  render() {
-    let { data } = this.state;
-    return (
-      <>
-        {/* <AutoComplete
-           defaultValue='semi@bytedance.com'
-           data={data}
-           onSearch={this.onSearch}
-        /> */}
-
-        <AutoComplete defaultValue="semi" data={data} onSearch={this.onSearch} />
-      </>
-    );
-  }
-}
-
-export const DefaultValue = () => <WithDefaultValue />;
-
-class ControlledMode extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: [],
-      dataObject: [],
-      value: '',
-    };
-    this.onSearch = this.onSearch.bind(this);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  onSearch(value) {
-    let result, resultObject;
-
-    if (!value) {
-      result = [];
-      resultObject = [];
-    } else {
-      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
-      resultObject = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
-        label: `${value}@${domain}`,
-        value: `${value}@${domain}`,
-      }));
-    }
-
-    this.setState({
-      data: result,
-      dataObject: resultObject,
-    });
-  }
-
-  onChange(value) {
-    this.setState({
-      value: value,
-    });
-  }
-
-  render() {
-    let { data, value, dataObject } = this.state;
-    return (
-      <>
-        <AutoComplete
-          showClear
-          value={value}
-          data={data}
-          onChange={this.onChange}
-          onSearch={this.onSearch}
-          style={{
-            width: 200,
-          }}
-        />
-        <br />
-        <AutoComplete
-          showClear
-          value={value}
-          data={dataObject}
-          onChange={this.onChange}
-          onSearch={this.onSearch}
-          style={{
-            width: 200,
-          }}
-        />
-        <br />
-        <AutoComplete
-          defaultValue={'hello semi'}
-          showClear
-          value={value}
-          data={dataObject}
-          onChange={this.onChange}
-          onSearch={this.onSearch}
-          style={{
-            width: 200,
-          }}
-        />
-      </>
-    );
-  }
-}
-
-export const EmptyContent = () => {
-  let [data, setData] = useState([]);
-  const [loading, setLoading] = useState(false);
-
-  const fetchData = v => {
-    setLoading(true);
-    setTimeout(() => {
-      if (!v) {
-        setData([]);
-        setLoading(false);
-        return;
-      }
-
-      setData(() => {
-        const res = Array.from(Array(5)).map(c => Math.random());
-        return res;
-      });
-      setLoading(false);
-    }, 1000);
-  };
-
-  return (
-    <AutoComplete loading={loading} data={data} emptyContent={'空数据'} onSearch={fetchData} />
-  );
-};
-
-export const AutoFocus = () => {
-  return <AutoComplete autoFocus />;
-};
-
-export const ControlledValue = () => <ControlledMode />;
-
-export const CustomTriggerDemo = () => <CustomTrigger />;
-
-export const Disabled = () => <AutoComplete disabled />;

package/autoComplete/_story/autoComplete.stories.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import AutoComplete from '../index';
-import { Avatar } from '../../index';
-
-const stories = storiesOf('AutoComplete', module);
-
-stories.add('Paginationdefault', () => (
-    <>
-        <AutoComplete data={[1, 2, '2']} onSelect={v => console.log(v)}/>
-    </>
-));
-
-
-import { IconSearch } from '@douyinfe/semi-icons';
-
-interface Person {
-    name: string;
-    email: string;
-    abbr: string;
-    color: string;
-}
-
-type Color = 'amber' | 'indigo' | 'cyan';
-interface DemoState {
-    data: Person[];
-    color: Color[];
-    list: Person[];
-}
-class CustomOptionDemo extends React.Component<Record<string, any>, DemoState> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: [],
-            color: ['amber', 'indigo', 'cyan'],
-            list: [
-                { name: '夏可漫', email: 'xiakeman@example.com', abbr: 'XK', color: 'amber' },
-                { name: '申悦', email: 'shenyue@example.com', abbr: 'SY', color: 'indigo' },
-                { name: '曲晨一', email: 'quchenyi@example.com', abbr: 'CY', color: 'blue' },
-                { name: '文嘉茂', email: 'wenjiamao@example.com', abbr: 'JM', color: 'cyan' },
-            ],
-        };
-    }
-
-    search(value) {
-        let result;
-        if (value) {
-            result = this.state.list.map(item => {
-                return { ...item, value: item.name, label: item.email };
-            });
-        } else {
-            result = [];
-        }
-        this.setState({ data: result });
-    }
-
-    renderOption(item) {
-        let optionStyle = {
-            display: 'flex',
-        };
-        return (
-            <>
-                <Avatar color={item.color} size="small">
-                    {item.abbr}
-                </Avatar>
-                <div style={{ marginLeft: 4 }}>
-                    <div style={{ fontSize: 14, marginLeft: 4 }}>{item.name}</div>
-                    <div style={{ marginLeft: 4 }}>{item.email}</div>
-                </div>
-            </>
-        );
-    }
-
-    render() {
-        return (
-            <AutoComplete<Person>
-                data={this.state.data}
-                prefix={<IconSearch />}
-                style={{ width: '250px' }}
-                renderSelectedItem={option => option.email}
-                renderItem={this.renderOption}
-                onSearch={this.search.bind(this)}
-                onSelect={v => console.log(v)}
-            ></AutoComplete>
-        );
-    }
-}