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

package/components/input/demos/password-input.tsx

@@ -1,25 +0,0 @@
-/**
- * title: 密码框
- * desc: 密码框。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-import { Space } from 'antd';
-import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <Space direction="vertical">
-      <Input.Password placeholder="input password" />
-      <Input.Password
-        placeholder="input password"
-        iconRender={(visible) =>
-          visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
-        }
-      />
-    </Space>
-  );
-};
-
-export default Demo;

package/components/input/demos/presuffix.tsx

@@ -1,33 +0,0 @@
-/**
- * title: 前缀和后缀
- * desc: 用于配置一些固定组合。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-import { Tooltip } from 'antd';
-import { InfoCircleOutlined, UserOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <>
-      <Input
-        placeholder="Enter your username"
-        prefix={<UserOutlined className="site-form-item-icon" />}
-        suffix={
-          <Tooltip title="Extra information">
-            <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
-          </Tooltip>
-        }
-      />
-      <br />
-      <br />
-      <Input prefix="￥" suffix="RMB" />
-      <br />
-      <br />
-      <Input prefix="￥" suffix="RMB" disabled />
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/search-input-loading.tsx

@@ -1,34 +0,0 @@
-/**
- * title: 搜索框 loading
- * desc: 用于 `onSearch` 的时候展示 `loading`。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-const { Search } = Input;
-
-const Demo = () => {
-  return (
-    <>
-      <Search placeholder="input search loading default" loading />
-      <br />
-      <br />
-      <Search
-        placeholder="input search loading with enterButton"
-        loading
-        enterButton
-      />
-      <br />
-      <br />
-      <Search
-        placeholder="input search text"
-        enterButton="Search"
-        size="large"
-        loading
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/search.tsx

@@ -1,57 +0,0 @@
-/**
- * title: 搜索框
- * desc: 带有搜索按钮的输入框。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-import { Space } from 'antd';
-import { AudioOutlined } from '@ant-design/icons';
-
-const { Search } = Input;
-
-const Demo = () => {
-  const onSearch = (value: string) => console.log(value);
-
-  const suffix = (
-    <AudioOutlined
-      style={{
-        fontSize: 16,
-        color: '#1890ff',
-      }}
-    />
-  );
-
-  return (
-    <Space direction="vertical">
-      <Search
-        placeholder="input search text"
-        onSearch={onSearch}
-        style={{ width: 200 }}
-      />
-      <Search
-        placeholder="input search text"
-        allowClear
-        onSearch={onSearch}
-        style={{ width: 200 }}
-      />
-      <Search placeholder="input search text" onSearch={onSearch} enterButton />
-      <Search
-        placeholder="input search text"
-        allowClear
-        enterButton="Search"
-        size="large"
-        onSearch={onSearch}
-      />
-      <Search
-        placeholder="input search text"
-        enterButton="Search"
-        size="large"
-        suffix={suffix}
-        onSearch={onSearch}
-      />
-    </Space>
-  );
-};
-
-export default Demo;

package/components/input/demos/size.tsx

@@ -1,24 +0,0 @@
-/**
- * title: 三种大小
- * desc: 我们为 `<Input />` 输入框定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-import { UserOutlined } from '@ant-design/icons';
-
-const Demo = () => {
-  return (
-    <>
-      <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
-      <br />
-      <br />
-      <Input placeholder="default size" prefix={<UserOutlined />} />
-      <br />
-      <br />
-      <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/textarea-count.tsx

@@ -1,19 +0,0 @@
-/**
- * title: 带字数提示的文本域
- * desc: 展示字数提示。
- */
-
-import React, { ChangeEventHandler } from 'react';
-import { Input } from '@fle-ui/next';
-
-const { TextArea } = Input;
-
-const Demo = () => {
-  const onChange = (e: any) => {
-    console.log('Change:', e.target.value);
-  };
-
-  return <TextArea showCount maxLength={100} onChange={onChange} />;
-};
-
-export default Demo;

package/components/input/demos/textarea.tsx

@@ -1,15 +0,0 @@
-/**
- * title: 文本域
- * desc: 用于多行输入。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-const { TextArea } = Input;
-
-const Demo = () => {
-  return <TextArea rows={4} />;
-};
-
-export default Demo;

package/components/input/demos/tooltip/index.less

@@ -1,11 +0,0 @@
-/* to prevent the arrow overflow the popup container,
-or the height is not enough when content is empty */
-
-.numeric-input .ant-tooltip-inner {
-  min-width: 32px;
-  min-height: 37px;
-}
-
-.numeric-input .numeric-input-title {
-  font-size: 14px;
-}

package/components/input/demos/tooltip/index.tsx

@@ -1,22 +0,0 @@
-/**
- * title: 输入时格式化展示
- * desc: 结合 [Tooltip](/components/tooltip) 组件，实现一个数值输入框，方便内容超长时的全量展现。
- */
-
-import React, { useState } from 'react';
-import NumericInput from './numericInput';
-import './index.less';
-
-const Demo = () => {
-  const [value, setValue] = useState<string>('');
-
-  const onChange = (value: string) => {
-    setValue(value);
-  };
-
-  return (
-    <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />
-  );
-};
-
-export default Demo;

package/components/input/demos/tooltip/numericInput.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'antd';
-import { Input } from '@fle-ui/next';
-
-const formatNumber = (value: string) => {
-  value += '';
-  const list = value.split('.');
-  const prefix = list[0].charAt(0) === '-' ? '-' : '';
-  let num = prefix ? list[0].slice(1) : list[0];
-  let result = '';
-  while (num.length > 3) {
-    result = `,${num.slice(-3)}${result}`;
-    num = num.slice(0, num.length - 3);
-  }
-  if (num) {
-    result = num + result;
-  }
-  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
-};
-
-const NumericInput = (props: any) => {
-  const { value } = props;
-
-  const onChange = (e: any) => {
-    const { value } = e.target;
-    const reg = /^-?\d*(\.\d*)?$/;
-    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
-      props.onChange(value);
-    }
-  };
-
-  // '.' at the end or only '-' in the input box.
-  const onBlur = () => {
-    let valueTemp = value;
-    if (value.charAt(value.length - 1) === '.' || value === '-') {
-      valueTemp = value.slice(0, -1);
-    }
-    props.onChange(valueTemp.replace(/0*(\d+)/, '$1'));
-    if (props.onBlur) {
-      props.onBlur();
-    }
-  };
-
-  const title = value ? (
-    <span className="numeric-input-title">
-      {value !== '-' ? formatNumber(value) : '-'}
-    </span>
-  ) : (
-    'Input a number'
-  );
-
-  return (
-    <Tooltip
-      trigger={['focus']}
-      title={title}
-      placement="topLeft"
-      overlayClassName="numeric-input"
-    >
-      <Input
-        {...props}
-        onChange={onChange}
-        onBlur={onBlur}
-        placeholder="Input a number"
-        maxLength={25}
-      />
-    </Tooltip>
-  );
-};
-
-export default NumericInput;

package/components/input/index.tsx

@@ -1,33 +0,0 @@
-import InternalInput, { InputProps } from './components/input';
-
-import Group, { GroupProps } from './components/group';
-import Search, { SearchProps } from './components/search';
-import TextArea, { TextAreaProps } from './components/textArea';
-import Password, { PasswordProps } from './components/password';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    InputProps & React.RefAttributes<HTMLElement>
-  > {
-  Group: typeof Group;
-  Search: typeof Search;
-  TextArea: typeof TextArea;
-  Password: typeof Password;
-}
-
-const Input = InternalInput as CompoundedComponent;
-
-Input.Group = Group;
-Input.Search = Search;
-Input.TextArea = TextArea;
-Input.Password = Password;
-
-export type {
-  InputProps,
-  GroupProps,
-  SearchProps,
-  TextAreaProps,
-  PasswordProps,
-};
-
-export default Input;

package/components/input/input.md

@@ -1,153 +0,0 @@
----
-title: Input 输入框
-order: 0
-legacy: /input
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Input 输入框
-
-通过鼠标或键盘输入内容，是最基础的表单域的包装。
-
-## 何时使用
-
-- 需要用户输入表单域内容时。
-- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
-
-## 代码演示
-
-### 基本使用
-<code src="./demos/basic.tsx" />
-
-### 三种大小
-<code src="./demos/size.tsx" />
-
-### 带移除图标
-<code src="./demos/allowClear.tsx" />
-
-### 前缀和后缀
-<code src="./demos/presuffix.tsx" />
-
-### 前置/后置标签
-<code src="./demos/addon.tsx" />
-
-### 搜索框
-<code src="./demos/search.tsx" />
-
-### 搜索框 loading
-<code src="./demos/search-input-loading.tsx" />
-
-### 密码框
-<code src="./demos/password-input.tsx" />
-
-### 文本域
-<code src="./demos/textarea.tsx" />
-
-### 带字数提示的文本域
-<code src="./demos/textarea-count.tsx" />
-
-### 适应文本高度的文本域
-<code src="./demos/autosize-textarea.tsx" />
-
-
-### 输入时格式化展示
-<code src="./demos/tooltip/index.tsx" />
-
-### 聚焦
-<code src="./demos/focus.tsx" />
-
-### 输入框组合
-<code src="./demos/group/index.tsx" />
-
-### 无边框
-<code src="./demos/borderless.tsx" />
-
-## API
-
-### Input
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
-| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean | - |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
-| defaultValue | 输入框默认内容 | string | - |  |
-| disabled | 是否禁用状态，默认为 false | boolean | false |  |
-| id | 输入框的 id | string | - |  |
-| maxLength | 最大长度 | number | - |  |
-| prefix | 带有前缀图标的 input | ReactNode | - |  |
-| size | 控件大小。注：标准表单内的输入框大小限制为 `large` | `large` \| `middle` \| `small` | - |  |
-| suffix | 带有后缀图标的 input | ReactNode | - |  |
-| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`) | string | `text` |  |
-| value | 输入框内容 | string | - |  |
-| onChange | 输入框内容变化时的回调 | function(e) | - |  |
-| onPressEnter | 按下回车的回调 | function(e) | - |  |
-
-> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
-
-Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
-
-### Input.TextArea
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowClear | 可以点击清除图标删除内容 | boolean | false |  |
-| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
-| defaultValue | 输入框默认内容 | string | - |  |
-| maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
-| value | 输入框内容 | string | - |  |
-| onPressEnter | 按下回车的回调 | function(e) | - |  |
-| onResize | resize 回调 | function({ width, height }) | - |  |
-
-`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
-
-#### Input.Search
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
-| loading | 搜索 loading | boolean | false |
-| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
-
-其余属性和 Input 一致。
-
-#### Input.Group
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| compact | 是否用紧凑模式 | boolean | false |
-| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
-
-
-
-#### Input.Password
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |
-| visibilityToggle | 是否显示切换按钮 | boolean | true |  |
-
-#### Input Methods
-
-| 名称 | 说明 | 参数 | 版本 |
-| --- | --- | --- | --- |
-| blur | 取消焦点 | - |  |
-| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
-
-## FAQ
-
-### 为什么我动态改变 `prefix/suffix` 时，Input 会失去焦点？
-
-当 Input 动态添加或者删除 `prefix/suffix` 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。你可以预设一个空的 `<span />` 来保持 DOM 结构不变：
-
-
-### 为何 TextArea 受控时，`value` 可以超过 `maxLength`？
-
-受控时，组件应该按照受控内容展示。以防止在表单组件内使用时显示值和提交值不同的问题。