@fle-ui/next 1.0.0-alpha.1 → 1.0.0-alpha.2

package/components/select/components/optGroup.tsx

@@ -1,14 +0,0 @@
-import React, { FC } from 'react';
-import { Select as AntdSelect } from 'antd';
-
-export interface OptGroupProps {}
-
-const { OptGroup: AntdSelectOptGroup } = AntdSelect;
-
-const OptGroup: FC<OptGroupProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdSelectOptGroup {...otherProps}>{children}</AntdSelectOptGroup>;
-};
-
-export default OptGroup;

package/components/select/components/option.tsx

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Select as AntdSelect } from 'antd';
-import { OptionProps as AntdSelectOptionProps } from 'rc-select/lib/Option';
-
-export interface OptionProps extends AntdSelectOptionProps {}
-
-const { Option: AntdSelectOption } = AntdSelect;
-
-const Option: FC<OptionProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdSelectOption {...otherProps}>{children}</AntdSelectOption>;
-};
-
-export default Option;

package/components/select/components/select.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Select as AntdSelect } from 'antd';
-import { SelectProps as AntdSelectProps } from 'antd/es/select';
-
-export interface SelectProps extends AntdSelectProps<any> {}
-
-const Select = forwardRef<any, SelectProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdSelect {...otherProps} ref={ref}>
-      {children}
-    </AntdSelect>
-  );
-});
-
-export default Select;

package/components/select/demos/automatic-tokenization.tsx

@@ -1,37 +0,0 @@
-/**
- * title: 自动分词
- * desc: 试下复制 `露西,杰克` 并粘贴到输入框里。只在 tags 和 multiple 模式下可用。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-
-const { Option } = Select;
-
-const children: any = [];
-for (let i = 10; i < 36; i++) {
-  children.push(
-    <Option value={i.toString(36) + i} key={i.toString(36) + i}>
-      {i.toString(36) + i}
-    </Option>,
-  );
-}
-
-const Demo = () => {
-  const handleChange = (value: string) => {
-    console.log(`selected ${value}`);
-  };
-
-  return (
-    <Select
-      mode="tags"
-      style={{ width: '100%' }}
-      onChange={handleChange}
-      tokenSeparators={[',']}
-    >
-      {children}
-    </Select>
-  );
-};
-
-export default Demo;

package/components/select/demos/basic.tsx

@@ -1,43 +0,0 @@
-/**
- * title: 基本使用
- * desc: 基本使用。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-
-const Option = Select.Option;
-
-const Demo = () => {
-  const handleChange = (value: string) => {
-    console.log(`selected ${value}`);
-  };
-
-  return (
-    <>
-      <Select
-        defaultValue="lucy"
-        style={{ width: 120 }}
-        onChange={handleChange}
-      >
-        <Option value="jack">Jack</Option>
-        <Option value="lucy">Lucy</Option>
-        <Option value="disabled" disabled>
-          Disabled
-        </Option>
-        <Option value="Yiminghe">yiminghe</Option>
-      </Select>
-      <Select defaultValue="lucy" style={{ width: 120 }} disabled>
-        <Option value="lucy">Lucy</Option>
-      </Select>
-      <Select defaultValue="lucy" style={{ width: 120 }} loading>
-        <Option value="lucy">Lucy</Option>
-      </Select>
-      <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
-        <Option value="lucy">Lucy</Option>
-      </Select>
-    </>
-  );
-};
-
-export default Demo;

package/components/select/demos/big-data.tsx

@@ -1,51 +0,0 @@
-/**
- * title: 大数据
- * desc: Select 使用了[虚拟滚动](https://github.com/react-component/virtual-list)技术，因而获得了比 [3.0 更好的性能](https://codesandbox.io/s/beautiful-banzai-m72lv)。
- */
-
-import React from 'react';
-import { Select, Divider } from '@fle-ui/next';
-import { Typography } from 'antd';
-
-const { Title } = Typography;
-
-const options: any = [];
-for (let i = 0; i < 100000; i++) {
-  const value = `${i.toString(36)}${i}`;
-  options.push({
-    value,
-    disabled: i === 10,
-  });
-}
-
-function handleChange(value: any) {
-  console.log(`selected ${value}`);
-}
-
-const Demo = () => {
-  return (
-    <>
-      <Title level={3}>Ant Design 4.0</Title>
-      <Title level={4}>{options.length} Items</Title>
-      <Select
-        mode="multiple"
-        style={{ width: '100%' }}
-        placeholder="Please select"
-        defaultValue={['a10', 'c12']}
-        onChange={handleChange}
-        options={options}
-      />
-
-      <Divider />
-
-      <Title level={3}>Ant Design 3.0</Title>
-      <iframe
-        title="Ant Design 3.0 Select demo"
-        src="https://codesandbox.io/embed/solitary-voice-m3vme?fontsize=14&hidenavigation=1&theme=dark&view=preview"
-        style={{ width: '100%', height: 300 }}
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/select/demos/bordered.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 无边框
- * desc: 无边框样式。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-
-const { Option } = Select;
-
-const Demo = () => {
-  return (
-    <>
-      <Select defaultValue="lucy" style={{ width: 120 }} bordered={false}>
-        <Option value="jack">Jack</Option>
-        <Option value="lucy">Lucy</Option>
-        <Option value="Yiminghe">yiminghe</Option>
-      </Select>
-      <Select
-        defaultValue="lucy"
-        style={{ width: 120 }}
-        disabled
-        bordered={false}
-      >
-        <Option value="lucy">Lucy</Option>
-      </Select>
-    </>
-  );
-};
-
-export default Demo;

package/components/select/demos/coordinate.tsx

@@ -1,58 +0,0 @@
-/**
- * title: 联动
- * desc: 省市联动是典型的例子。<br /> 推荐使用 [Cascader](/components/cascader/) 组件。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-
-const { Option } = Select;
-const provinceData = ['Zhejiang', 'Jiangsu'];
-const cityData: any = {
-  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
-  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
-};
-
-const Demo = () => {
-  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
-  const [secondCity, setSecondCity] = React.useState(
-    cityData[provinceData[0]][0],
-  );
-
-  const handleProvinceChange = (value: string) => {
-    setCities(cityData[value]);
-    setSecondCity(cityData[value][0]);
-  };
-
-  const onSecondCityChange = (value: string) => {
-    setSecondCity(value);
-  };
-  return (
-    <>
-      <Select
-        defaultValue={provinceData[0]}
-        style={{ width: 120 }}
-        onChange={handleProvinceChange}
-      >
-        {provinceData.map((province) => (
-          <Option value={province} key={province}>
-            {province}
-          </Option>
-        ))}
-      </Select>
-      <Select
-        style={{ width: 120 }}
-        value={secondCity}
-        onChange={onSecondCityChange}
-      >
-        {cities.map((city: string) => (
-          <Option value={city} key={city}>
-            {city}
-          </Option>
-        ))}
-      </Select>
-    </>
-  );
-};
-
-export default Demo;

package/components/select/demos/custom-dropdown-menu.tsx

@@ -1,66 +0,0 @@
-/**
- * title: 扩展菜单
- * desc: 使用 `dropdownRender` 对下拉菜单进行自由扩展。
- */
-
-import React, { useState } from 'react';
-import { Select, Divider, Input } from '@fle-ui/next';
-
-import { PlusOutlined } from '@ant-design/icons';
-
-const { Option } = Select;
-
-let index = 0;
-
-const Demo = () => {
-  const [items, setItems] = useState(['jack', 'lucy']);
-  const [name, setName] = useState('');
-
-  const onNameChange = (event: any) => {
-    setName(event.target.value);
-  };
-
-  const addItem = () => {
-    setItems([...items, name || `New item ${index++}`]);
-    setName('');
-  };
-
-  return (
-    <Select
-      style={{ width: 240 }}
-      placeholder="custom dropdown render"
-      dropdownRender={(menu) => (
-        <div>
-          {menu}
-          <Divider style={{ margin: '4px 0' }} />
-          <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
-            <Input
-              style={{ flex: 'auto' }}
-              value={name}
-              onChange={onNameChange}
-            />
-            <a
-              style={{
-                flex: 'none',
-                padding: '8px',
-                display: 'block',
-                cursor: 'pointer',
-              }}
-              onClick={addItem}
-            >
-              <PlusOutlined /> Add item
-            </a>
-          </div>
-        </div>
-      )}
-    >
-      {items.map((item) => (
-        <Option value={item} key={item}>
-          {item}
-        </Option>
-      ))}
-    </Select>
-  );
-};
-
-export default Demo;

package/components/select/demos/custom-tag-render.tsx

@@ -1,49 +0,0 @@
-/**
- * title: 自定义选择标签
- * desc: 允许自定义选择标签的样式。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-import { Tag } from 'antd';
-
-const options = [
-  { value: 'gold' },
-  { value: 'lime' },
-  { value: 'green' },
-  { value: 'cyan' },
-];
-
-function tagRender(props: any) {
-  const { label, value, closable, onClose } = props;
-  const onPreventMouseDown = (event: any) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  return (
-    <Tag
-      color={value}
-      onMouseDown={onPreventMouseDown}
-      closable={closable}
-      onClose={onClose}
-      style={{ marginRight: 3 }}
-    >
-      {label}
-    </Tag>
-  );
-}
-
-const Demo = () => {
-  return (
-    <Select
-      mode="multiple"
-      showArrow
-      tagRender={tagRender}
-      defaultValue={['gold', 'cyan']}
-      style={{ width: '100%' }}
-      options={options}
-    />
-  );
-};
-
-export default Demo;

package/components/select/demos/hide-selected.tsx

@@ -1,39 +0,0 @@
-/**
- * title: 隐藏已选择选项
- * desc: 隐藏下拉列表中已选择的选项。
- */
-
-import React, { useState } from 'react';
-import { Select } from '@fle-ui/next';
-
-const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];
-
-const Demo = () => {
-  const [selectedItems, setSelectedItems] = useState<any>([]);
-
-  const handleChange = (selectedItems: any) => {
-    setSelectedItems(selectedItems);
-  };
-
-  const filteredOptions = OPTIONS.filter(
-    (o: any) => !selectedItems.includes(o),
-  );
-
-  return (
-    <Select
-      mode="multiple"
-      placeholder="Inserted are removed"
-      value={selectedItems}
-      onChange={handleChange}
-      style={{ width: '100%' }}
-    >
-      {filteredOptions.map((item) => (
-        <Select.Option key={item} value={item}>
-          {item}
-        </Select.Option>
-      ))}
-    </Select>
-  );
-};
-
-export default Demo;

package/components/select/demos/label-in-value.tsx

@@ -1,29 +0,0 @@
-/**
- * title: 获得选项的文本
- * desc: 默认情况下 `onChange` 里只能拿到 `value`，如果需要拿到选中的节点文本 `label`，可以使用 `labelInValue` 属性。
- */
-
-import React from 'react';
-import { Select } from '@fle-ui/next';
-
-const { Option } = Select;
-
-const Demo = () => {
-  const handleChange = (value: string) => {
-    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
-  };
-
-  return (
-    <Select
-      labelInValue
-      defaultValue={{ value: 'lucy' }}
-      style={{ width: 120 }}
-      onChange={handleChange}
-    >
-      <Option value="jack">Jack (100)</Option>
-      <Option value="lucy">Lucy (101)</Option>
-    </Select>
-  );
-};
-
-export default Demo;