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

package/components/input/components/group.tsx

@@ -1,14 +0,0 @@
-import React, { FC } from 'react';
-import { Input as AntdInput } from 'antd';
-
-import type { GroupProps as AntdGroupProps } from 'antd/es/input/Group';
-
-export interface GroupProps extends AntdGroupProps {}
-
-const AntdGroup = AntdInput.Group;
-
-const Group: FC<GroupProps> = (props) => {
-  return <AntdGroup {...props} />;
-};
-
-export default Group;

package/components/input/components/input.tsx

@@ -1,12 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input as AntdInput } from 'antd';
-
-import type { InputProps as AntdInputProps } from 'antd/es/input';
-
-export interface InputProps extends AntdInputProps {}
-
-const Input = forwardRef<any, InputProps>((props, ref) => {
-  return <AntdInput ref={ref} {...props} />;
-});
-
-export default Input;

package/components/input/components/password.tsx

@@ -1,14 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input as AntdInput } from 'antd';
-
-import type { PasswordProps as AntdPasswordProps } from 'antd/es/input/Password';
-
-export interface PasswordProps extends AntdPasswordProps {}
-
-const AntdPassword = AntdInput.Password;
-
-const Password = forwardRef<any, PasswordProps>((props, ref) => {
-  return <AntdPassword ref={ref} {...props} />;
-});
-
-export default Password;

package/components/input/components/search.tsx

@@ -1,14 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input as AntdInput } from 'antd';
-
-import type { SearchProps as AntdSearchProps } from 'antd/es/input/Search';
-
-export interface SearchProps extends AntdSearchProps {}
-
-const AntdSearch = AntdInput.Search;
-
-const Search = forwardRef<any, SearchProps>((props, ref) => {
-  return <AntdSearch ref={ref} {...props} />;
-});
-
-export default Search;

package/components/input/components/textArea.tsx

@@ -1,14 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input as AntdInput } from 'antd';
-
-import type { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea';
-
-export interface TextAreaProps extends AntdTextAreaProps {}
-
-const AntdTextArea = AntdInput.TextArea;
-
-const TextArea = forwardRef<any, TextAreaProps>((props, ref) => {
-  return <AntdTextArea ref={ref} {...props} />;
-});
-
-export default TextArea;

package/components/input/demos/addon.tsx

@@ -1,51 +0,0 @@
-/**
- * title: 前置/后置标签
- * desc: 用于配置一些固定组合。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-import { Select, Space, Cascader } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-
-const { Option } = Select;
-
-const Demo = () => {
-  const selectBefore = (
-    <Select defaultValue="http://" className="select-before">
-      <Option value="http://">http://</Option>
-      <Option value="https://">https://</Option>
-    </Select>
-  );
-  const selectAfter = (
-    <Select defaultValue=".com" className="select-after">
-      <Option value=".com">.com</Option>
-      <Option value=".jp">.jp</Option>
-      <Option value=".cn">.cn</Option>
-      <Option value=".org">.org</Option>
-    </Select>
-  );
-
-  return (
-    <>
-      <Space direction="vertical">
-        <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />
-        <Input
-          addonBefore={selectBefore}
-          addonAfter={selectAfter}
-          defaultValue="mysite"
-        />
-        <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />
-        <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />
-        <Input
-          addonBefore={
-            <Cascader placeholder="cascader" style={{ width: 150 }} />
-          }
-          defaultValue="mysite"
-        />
-      </Space>
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/allowClear.tsx

@@ -1,34 +0,0 @@
-/**
- * title: 带移除图标
- * desc: 带移除图标的输入框，点击图标删除所有内容。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-const { TextArea } = Input;
-
-const Demo = () => {
-  const onChange = (e: any) => {
-    console.log(e);
-  };
-
-  return (
-    <>
-      <Input
-        placeholder="input with clear icon"
-        allowClear
-        onChange={onChange}
-      />
-      <br />
-      <br />
-      <TextArea
-        placeholder="textarea with clear icon"
-        allowClear
-        onChange={onChange}
-      />
-    </>
-  );
-};
-
-export default Demo;

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

@@ -1,37 +0,0 @@
-/**
- * title: 适应文本高度的文本域
- * desc: ps: `autoSize` 属性适用于 1textarea1 节点，并且只有高度会自动变化。另外 `autoSize` 可以设定为一个对象，指定最小行数和最大行数。
- */
-
-import React, { useState } from 'react';
-import { Input } from '@fle-ui/next';
-
-const { TextArea } = Input;
-
-const Demo = () => {
-  const [value, setValue] = useState<string>('');
-
-  const onChange = ({ target: { value } }: any) => {
-    setValue(value);
-  };
-
-  return (
-    <>
-      <TextArea placeholder="Autosize height based on content lines" autoSize />
-      <div style={{ margin: '24px 0' }} />
-      <TextArea
-        placeholder="Autosize height with minimum and maximum number of lines"
-        autoSize={{ minRows: 2, maxRows: 6 }}
-      />
-      <div style={{ margin: '24px 0' }} />
-      <TextArea
-        value={value}
-        onChange={onChange}
-        placeholder="Controlled autosize"
-        autoSize={{ minRows: 3, maxRows: 5 }}
-      />
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/basic.tsx

@@ -1,17 +0,0 @@
-/**
- * title: 基本使用
- * desc: 基本使用。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-const Demo = () => {
-  return (
-    <>
-      <Input placeholder="Basic usage" />
-    </>
-  );
-};
-
-export default Demo;

package/components/input/demos/borderless.tsx

@@ -1,13 +0,0 @@
-/**
- * title: 无边框
- * desc: 没有边框。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-const Demo = () => {
-  return <Input placeholder="Borderless" bordered={false} />;
-};
-
-export default Demo;

package/components/input/demos/focus.tsx

@@ -1,74 +0,0 @@
-/**
- * title: 聚焦
- * desc: 聚焦额外配置属性。
- */
-
-import React, { useRef, useState } from 'react';
-import { Button, Input } from '@fle-ui/next';
-import { Space, Switch } from 'antd';
-
-const Demo = () => {
-  const inputRef = useRef<any>(null);
-  const [input, setInput] = useState<boolean>(true);
-
-  const sharedProps = {
-    style: { width: '100%' },
-    defaultValue: 'fle ui love you!',
-    ref: inputRef,
-  };
-
-  return (
-    <Space direction="vertical" style={{ width: '100%' }}>
-      <Space wrap>
-        <Button
-          onClick={() => {
-            inputRef.current!.focus({
-              cursor: 'start',
-            });
-          }}
-        >
-          Focus at first
-        </Button>
-        <Button
-          onClick={() => {
-            inputRef.current!.focus({
-              cursor: 'end',
-            });
-          }}
-        >
-          Focus at last
-        </Button>
-        <Button
-          onClick={() => {
-            inputRef.current!.focus({
-              cursor: 'all',
-            });
-          }}
-        >
-          Focus to select all
-        </Button>
-        <Button
-          onClick={() => {
-            inputRef.current!.focus({
-              preventScroll: true,
-            });
-          }}
-        >
-          Focus prevent scroll
-        </Button>
-        <Switch
-          checked={input}
-          checkedChildren="Input"
-          unCheckedChildren="TextArea"
-          onChange={() => {
-            setInput(!input);
-          }}
-        />
-      </Space>
-      <br />
-      {input ? <Input {...sharedProps} /> : <Input.TextArea {...sharedProps} />}
-    </Space>
-  );
-};
-
-export default Demo;

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

@@ -1,25 +0,0 @@
-.site-input-group-wrapper .site-input-split {
-  background-color: #fff;
-}
-
-.site-input-group-wrapper .site-input-right {
-  border-left-width: 0;
-}
-
-.site-input-group-wrapper .site-input-right:hover,
-.site-input-group-wrapper .site-input-right:focus {
-  border-left-width: 1px;
-}
-
-.site-input-group-wrapper .ant-input-rtl.site-input-right {
-  border-right-width: 0;
-}
-
-.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
-.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
-  border-right-width: 1px;
-}
-
-[data-theme='dark'] .site-input-group-wrapper .site-input-split {
-  background-color: transparent;
-}

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

@@ -1,191 +0,0 @@
-/**
- * title: 输入框组合
- * desc: 注意：使用 `compact` 模式时，不需要通过 `Col` 来控制宽度。
- */
-
-import React from 'react';
-import { Input } from '@fle-ui/next';
-
-import {
-  Col,
-  Row,
-  Select,
-  InputNumber,
-  DatePicker,
-  AutoComplete,
-  Cascader,
-} from 'antd';
-
-const { Option } = Select;
-
-const options = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const Demo = () => {
-  return (
-    <div className="site-input-group-wrapper">
-      <Input.Group size="large">
-        <Row gutter={8}>
-          <Col span={5}>
-            <Input defaultValue="0571" />
-          </Col>
-          <Col span={8}>
-            <Input defaultValue="26888888" />
-          </Col>
-        </Row>
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Input style={{ width: '20%' }} defaultValue="0571" />
-        <Input style={{ width: '30%' }} defaultValue="26888888" />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select defaultValue="Zhejiang">
-          <Option value="Zhejiang">Zhejiang</Option>
-          <Option value="Jiangsu">Jiangsu</Option>
-        </Select>
-        <Input
-          style={{ width: '50%' }}
-          defaultValue="Xihu District, Hangzhou"
-        />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Input.Search style={{ width: '40%' }} defaultValue="0571" />
-        <Input.Search
-          allowClear
-          style={{ width: '40%' }}
-          defaultValue="26888888"
-        />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Input.Search allowClear style={{ width: '40%' }} defaultValue="0571" />
-        <Input.Search
-          allowClear
-          style={{ width: '40%' }}
-          defaultValue="26888888"
-        />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select defaultValue="Option1">
-          <Option value="Option1">Option1</Option>
-          <Option value="Option2">Option2</Option>
-        </Select>
-        <Input style={{ width: '50%' }} defaultValue="input content" />
-        <InputNumber />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Input style={{ width: '50%' }} defaultValue="input content" />
-        <DatePicker style={{ width: '50%' }} />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Input style={{ width: '30%' }} defaultValue="input content" />
-        <DatePicker.RangePicker style={{ width: '70%' }} />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select defaultValue="Option1-1">
-          <Option value="Option1-1">Option1-1</Option>
-          <Option value="Option1-2">Option1-2</Option>
-        </Select>
-        <Select defaultValue="Option2-2">
-          <Option value="Option2-1">Option2-1</Option>
-          <Option value="Option2-2">Option2-2</Option>
-        </Select>
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select defaultValue="1">
-          <Option value="1">Between</Option>
-          <Option value="2">Except</Option>
-        </Select>
-        <Input
-          style={{ width: 100, textAlign: 'center' }}
-          placeholder="Minimum"
-        />
-        <Input
-          className="site-input-split"
-          style={{
-            width: 30,
-            borderLeft: 0,
-            borderRight: 0,
-            pointerEvents: 'none',
-          }}
-          placeholder="~"
-          disabled
-        />
-        <Input
-          className="site-input-right"
-          style={{
-            width: 100,
-            textAlign: 'center',
-          }}
-          placeholder="Maximum"
-        />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select defaultValue="Sign Up" style={{ width: '30%' }}>
-          <Option value="Sign Up">Sign Up</Option>
-          <Option value="Sign In">Sign In</Option>
-        </Select>
-        <AutoComplete
-          style={{ width: '70%' }}
-          placeholder="Email"
-          options={[{ value: 'text 1' }, { value: 'text 2' }]}
-        />
-      </Input.Group>
-      <br />
-      <Input.Group compact>
-        <Select style={{ width: '30%' }} defaultValue="Home">
-          <Option value="Home">Home</Option>
-          <Option value="Company">Company</Option>
-        </Select>
-        <Cascader
-          style={{ width: '70%' }}
-          options={options}
-          placeholder="Select Address"
-        />
-      </Input.Group>
-    </div>
-  );
-};
-
-export default Demo;