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

package/components/auto-complete/components/autoComplete.tsx

@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react';
-import { AutoComplete as AntdAutoComplete } from 'antd';
-import type { AutoCompleteProps as AntdAutoCompleteProps } from 'antd/es/auto-complete';
-
-export interface AutoCompleteProps extends AntdAutoCompleteProps {}
-
-const AutoComplete = forwardRef<any, AutoCompleteProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdAutoComplete {...otherProps} ref={ref}>
-      {children}
-    </AntdAutoComplete>
-  );
-});
-
-export default AutoComplete;

package/components/auto-complete/components/option.tsx

@@ -1,17 +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: AntdAutoCompleteOption } = AntdSelect;
-
-const Option: FC<OptionProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return (
-    <AntdAutoCompleteOption {...otherProps}>{children}</AntdAutoCompleteOption>
-  );
-};
-
-export default Option;

package/components/auto-complete/demos/basic.tsx

@@ -1,54 +0,0 @@
-/**
- * title: 基本使用
- * desc: 基本使用，通过 options 设置自动完成的数据源。
- */
-
-import React, { useState } from 'react';
-import { AutoComplete } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const [value, setValue] = useState('');
-  const [options, setOptions] = useState<{ value: string }[]>([]);
-  const mockVal = (str: string, repeat: number = 1) => ({
-    value: str.repeat(repeat),
-  });
-
-  const onSearch = (searchText: string) => {
-    setOptions(
-      !searchText
-        ? []
-        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
-    );
-  };
-  const onSelect = (data: string) => {
-    console.log('onSelect', data);
-  };
-  const onChange = (data: string) => {
-    setValue(data);
-  };
-
-  return (
-    <>
-      <AutoComplete
-        options={options}
-        style={{ width: 200 }}
-        onSelect={onSelect}
-        onSearch={onSearch}
-        placeholder="input here"
-      />
-      <br />
-      <br />
-      <AutoComplete
-        value={value}
-        options={options}
-        style={{ width: 200 }}
-        onSelect={onSelect}
-        onSearch={onSearch}
-        onChange={onChange}
-        placeholder="control mode"
-      />
-    </>
-  );
-};
-
-export default BasicDemo;

package/components/auto-complete/demos/confirm.tsx

@@ -1,74 +0,0 @@
-/**
- * title: 查询模式-确定类目
- * desc: 查询模式: 确定类目 示例。
- */
-
-import React from 'react';
-import { AutoComplete } from '@fle-ui/next';
-import { Input } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
-const ConfirmDemo = () => {
-  const renderTitle = (title: string) => (
-    <span>
-      {title}
-      <a
-        style={{ float: 'right' }}
-        href="https://www.google.com/search?q=antd"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        more
-      </a>
-    </span>
-  );
-
-  const renderItem = (title: string, count: number) => ({
-    value: title,
-    label: (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-      >
-        {title}
-        <span>
-          <UserOutlined /> {count}
-        </span>
-      </div>
-    ),
-  });
-
-  const options = [
-    {
-      label: renderTitle('Libraries'),
-      options: [
-        renderItem('AntDesign', 10000),
-        renderItem('AntDesign UI', 10600),
-      ],
-    },
-    {
-      label: renderTitle('Solutions'),
-      options: [
-        renderItem('AntDesign UI FAQ', 60100),
-        renderItem('AntDesign FAQ', 30010),
-      ],
-    },
-    {
-      label: renderTitle('Articles'),
-      options: [renderItem('AntDesign design language', 100000)],
-    },
-  ];
-
-  return (
-    <AutoComplete
-      dropdownClassName="certain-category-search-dropdown"
-      dropdownMatchSelectWidth={500}
-      style={{ width: 250 }}
-      options={options}
-    >
-      <Input.Search size="large" placeholder="input here" />
-    </AutoComplete>
-  );
-};
-export default ConfirmDemo;

package/components/auto-complete/demos/custom.tsx

@@ -1,38 +0,0 @@
-/**
- * title: 自定义选项
- * desc: 也可以直接传 AutoComplete.Option 作为 AutoComplete 的 children，而非使用 options。
- */
-
-import React, { useState } from 'react';
-import { AutoComplete } from '@fle-ui/next';
-
-const CustomDemo = () => {
-  const { Option } = AutoComplete;
-  const [result, setResult] = useState<string[]>([]);
-  const handleSearch = (value: string) => {
-    let res: string[] = [];
-    if (!value || value.indexOf('@') >= 0) {
-      res = [];
-    } else {
-      res = ['gmail.com', '163.com', 'qq.com'].map(
-        (domain) => `${value}@${domain}`,
-      );
-    }
-    setResult(res);
-  };
-  return (
-    <AutoComplete
-      style={{ width: 200 }}
-      onSearch={handleSearch}
-      placeholder="input here"
-    >
-      {result.map((email: string) => (
-        <Option key={email} value={email}>
-          {email}
-        </Option>
-      ))}
-    </AutoComplete>
-  );
-};
-
-export default CustomDemo;

package/components/auto-complete/demos/customInput.tsx

@@ -1,51 +0,0 @@
-/**
- * title: 自定义输入组件
- * desc: 自定义输入组件。
- */
-
-import React, { useState } from 'react';
-import { AutoComplete } from '@fle-ui/next';
-import { Input } from 'antd';
-
-const CustomInput = () => {
-  const { TextArea } = Input;
-
-  const [options, setOptions] = useState<{ value: string }[]>([]);
-  const handleSearch = (value: string) => {
-    setOptions(
-      !value
-        ? []
-        : [
-            { value },
-            { value: value + value },
-            { value: value + value + value },
-          ],
-    );
-  };
-
-  const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    console.log('handleKeyPress', ev);
-  };
-
-  const onSelect = (value: string) => {
-    console.log('onSelect', value);
-  };
-
-  return (
-    <AutoComplete
-      options={options}
-      style={{ width: 200 }}
-      onSelect={onSelect}
-      onSearch={handleSearch}
-    >
-      <TextArea
-        placeholder="input here"
-        className="custom"
-        style={{ height: 50 }}
-        onKeyPress={handleKeyPress}
-      />
-    </AutoComplete>
-  );
-};
-
-export default CustomInput;

package/components/auto-complete/demos/insensitive.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 不区分大小写
- * desc: 不区分大小写的 AutoComplete。
- */
-
-import React from 'react';
-import { AutoComplete } from '@fle-ui/next';
-
-const InsensitiveDemo = () => {
-  const options = [
-    { value: 'Burns Bay Road' },
-    { value: 'Downing Street' },
-    { value: 'Wall Street' },
-  ];
-  return (
-    <AutoComplete
-      style={{ width: 200 }}
-      options={options}
-      placeholder="try to type `b`"
-      filterOption={(inputValue, option) =>
-        option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
-      }
-    />
-  );
-};
-
-export default InsensitiveDemo;

package/components/auto-complete/demos/unconfirm.tsx

@@ -1,68 +0,0 @@
-/**
- * title: 查询模式 - 不确定类目
- * desc: 查询模式：不确定类目 示例。
- */
-
-import React, { useState } from 'react';
-import { Input } from 'antd';
-import { SelectProps } from 'antd/es/select';
-import { AutoComplete } from '@fle-ui/next';
-
-const UnconfirmDemo = () => {
-  const [options, setOptions] = useState<SelectProps<object>['options']>([]);
-
-  function getRandomInt(max: number, min: number = 0) {
-    return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
-  }
-  const searchResult = (query: string) =>
-    new Array(getRandomInt(5))
-      .join('.')
-      .split('.')
-      .map((_, idx) => {
-        const category = `${query}${idx}`;
-        return {
-          value: category,
-          label: (
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-              }}
-            >
-              <span>
-                Found {query} on{' '}
-                <a
-                  href={`https://s.taobao.com/search?q=${query}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {category}
-                </a>
-              </span>
-              <span>{getRandomInt(200, 100)} results</span>
-            </div>
-          ),
-        };
-      });
-  const handleSearch = (value: string) => {
-    setOptions(value ? searchResult(value) : []);
-  };
-
-  const onSelect = (value: string) => {
-    console.log('onSelect', value);
-  };
-
-  return (
-    <AutoComplete
-      dropdownMatchSelectWidth={252}
-      style={{ width: 300 }}
-      options={options}
-      onSelect={onSelect}
-      onSearch={handleSearch}
-    >
-      <Input.Search size="large" placeholder="input here" enterButton />
-    </AutoComplete>
-  );
-};
-
-export default UnconfirmDemo;

package/components/auto-complete/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { AutoComplete as AntdAutoComplete } from 'antd';
-import InternalAutoComplete, {
-  AutoCompleteProps,
-} from './components/autoComplete';
-import { OptionProps } from 'rc-select/lib/Option';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    AutoCompleteProps & React.RefAttributes<HTMLElement>
-  > {
-  Option: typeof AntdAutoComplete.Option;
-}
-
-const AutoComplete = InternalAutoComplete as CompoundedComponent;
-
-AutoComplete.Option = AntdAutoComplete.Option;
-
-export type { AutoCompleteProps, OptionProps };
-
-export default AutoComplete;

package/components/avatar/avatar.md

@@ -1,76 +0,0 @@
----
-title: Avatar 头像
-order: 0
-legacy: /avatar
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Avatar 头像
-
-用来代表用户或事物，支持图片、图标或字符展示。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 类型
-
-<code src="./demos/type.tsx" />
-
-### 自动调整字符大小
-
-<code src="./demos/dynamic.tsx" />
-
-### 带徽标的头像
-
-<code src="./demos/badge.tsx" />
-
-### 响应式尺寸
-
-<code src="./demos/responsive.tsx" />
-
-### Avatar.Group
-
-<code src="./demos/group.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| alt | 图像无法显示时的替代文本 | string | - |  |
-| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
-| icon | 设置头像的自定义图标 | ReactNode | - |  |
-| shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
-| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.7.0 |
-| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
-| srcSet | 设置图片类头像响应式资源地址 | string | - |  |
-| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - |  |
-| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |                                                            | -         |                  |
-
-> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
-
-### Avatar.Group (4.5.0+)
-
-| 参数                | 说明                 | 类型                                                                        | 默认值    | 版本  |
-| ------------------- | -------------------- | --------------------------------------------------------------------------- | --------- | ----- |
-| maxCount            | 显示的最大头像个数   | number                                                                      | -         |       |
-| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom`                                                           | `top`     |       |
-| maxStyle            | 多余头像样式         | CSSProperties                                                               | -         |       |
-| size                | 设置头像的大小       | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
-
-<style>
-[class^="__dumi-default-previewer"] .ant-avatar {
-  margin-top: 16px;
-  margin-right: 16px;
-}
-.ant-row-rtl [class^="__dumi-default-previewer"] .ant-avatar {
-  margin-right: 0;
-  margin-left: 16px;
-}
-</style>