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

package/components/inputNumber/demos/basic.tsx

@@ -1,18 +0,0 @@
-/**
- * title: 基本
- * desc: 数字输入框
- */
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const onChange = (value: number | String) => {
-    console.log('changed', value);
-  };
-  return (
-    <>
-      <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
-    </>
-  );
-};
-export default BasicDemo;

package/components/inputNumber/demos/decimal.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 高精度小数
- * desc: 通过 stringMode 开启高精度小数支持，onChange 事件将返回 string 类型。对于旧版浏览器，你需要 BigInt polyfill。
- */
-
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-
-const DecimalDemo = () => {
-  const onChange = (value: string | number) => {
-    console.log('changed', value);
-  };
-  return (
-    <InputNumber
-      style={{ width: 200 }}
-      defaultValue="1"
-      min="0"
-      max="10"
-      step="0.00000000000001"
-      onChange={onChange}
-      stringMode
-    />
-  );
-};
-
-export default DecimalDemo;

package/components/inputNumber/demos/disabled.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 不可用
- * desc: 点击按钮切换可用状态。
- */
-import React, { useState } from 'react';
-import { InputNumber, Button } from '@fle-ui/next';
-
-const DisabledDemo = () => {
-  const [disabled, setDisabled] = useState(true);
-
-  const toggle = () => {
-    setDisabled(!disabled);
-  };
-  return (
-    <>
-      <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
-      <div style={{ marginTop: 20 }}>
-        <Button onClick={toggle} type="primary">
-          Toggle disabled
-        </Button>
-      </div>
-    </>
-  );
-};
-
-export default DisabledDemo;

package/components/inputNumber/demos/formatter.tsx

@@ -1,38 +0,0 @@
-/**
- * title: 基本
- * desc: 数字输入框
- */
-
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-
-const FormatterDemo = () => {
-  const onChange = (value: string | number) => {
-    console.log('changed', value);
-  };
-
-  return (
-    <>
-      <InputNumber
-        defaultValue={1000}
-        formatter={(value: string | number | undefined) =>
-          `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-        }
-        parser={(value: string | undefined) =>
-          value?.replace(/\$\s?|(,*)/g, '') || ''
-        }
-        onChange={onChange}
-      />
-      <InputNumber
-        defaultValue={100}
-        min={0}
-        max={100}
-        formatter={(value) => `${value}%`}
-        parser={(value: string | undefined) => value?.replace('%', '') || ''}
-        onChange={onChange}
-      />
-    </>
-  );
-};
-
-export default FormatterDemo;

package/components/inputNumber/demos/keyboard.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 键盘行为
- * desc: 使用 keyboard 属性可以控制键盘行为。
- */
-import React from 'react';
-import { InputNumber, Checkbox } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const keyboardDemo = () => {
-  const [keyboard, setKeyboard] = React.useState(true);
-
-  return (
-    <Space>
-      <InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />
-      <Checkbox
-        onChange={() => {
-          setKeyboard(!keyboard);
-        }}
-        checked={keyboard}
-      >
-        Toggle keyboard
-      </Checkbox>
-    </Space>
-  );
-};
-
-export default keyboardDemo;

package/components/inputNumber/demos/nowrap.tsx

@@ -1,13 +0,0 @@
-/**
- * title: 无边框
- * desc: 没有边框。
- */
-
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-
-const Nowrap = () => {
-  return <InputNumber min={1} max={10} defaultValue={3} bordered={false} />;
-};
-
-export default Nowrap;

package/components/inputNumber/demos/outwrap.tsx

@@ -1,28 +0,0 @@
-/**
- * title: 超出边界
- * desc: 当通过受控将 value 超出边界时，提供警告样式。
- */
-
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-import { Button, Space } from 'antd';
-
-const OutwrapDemo = () => {
-  const [value, setValue] = React.useState<string | number>('99');
-
-  return (
-    <Space>
-      <InputNumber min={1} max={10} value={value} onChange={setValue} />
-      <Button
-        type="primary"
-        onClick={() => {
-          setValue(99);
-        }}
-      >
-        Reset
-      </Button>
-    </Space>
-  );
-};
-
-export default OutwrapDemo;

package/components/inputNumber/demos/tag.jsx

@@ -1,47 +0,0 @@
-/**
- * title: 前置/后置标签
- * desc: 用于配置一些固定组合。
- */
-
-import React from 'react';
-// import { InputNumber } from '@fle-ui/next';
-import { Select, Space, Cascader, InputNumber } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
-
-const Tag = () => {
-  const { Option } = Select;
-
-  const selectBefore = (
-    <Select defaultValue="add" className="select-before">
-      <Option value="add">+</Option>
-      <Option value="minus">-</Option>
-    </Select>
-  );
-  const selectAfter = (
-    <Select defaultValue="USD" className="select-after">
-      <Option value="USD">$</Option>
-      <Option value="EUR">€</Option>
-      <Option value="GBP">£</Option>
-      <Option value="CNY">¥</Option>
-    </Select>
-  );
-
-  return (
-    <Space direction="vertical">
-      <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />
-      <InputNumber
-        addonBefore={selectBefore}
-        addonAfter={selectAfter}
-        defaultValue={100}
-      />
-
-      <InputNumber addonAfter={<SettingOutlined />} defaultValue={100} />
-      <InputNumber
-        addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}
-        defaultValue={100}
-      />
-    </Space>
-  );
-};
-
-export default Tag;

package/components/inputNumber/demos/threeSize.tsx

@@ -1,34 +0,0 @@
-/**
- * title: 三种大小
- * desc: 三种大小的数字输入框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px。
- */
-
-import React from 'react';
-import { InputNumber } from '@fle-ui/next';
-
-const ThreeSizeDemo = () => {
-  const onChange = (value: Number | String) => {
-    console.log('changed', value);
-  };
-  return (
-    <div className="site-input-number-wrapper">
-      <InputNumber
-        size="large"
-        min={1}
-        max={100000}
-        defaultValue={3}
-        onChange={onChange}
-      />
-      <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
-      <InputNumber
-        size="small"
-        min={1}
-        max={100000}
-        defaultValue={3}
-        onChange={onChange}
-      />
-    </div>
-  );
-};
-
-export default ThreeSizeDemo;

package/components/inputNumber/index.tsx

@@ -1,22 +0,0 @@
-import React, { forwardRef } from 'react';
-import { InputNumber as AntdInputNumber } from 'antd';
-import type { InputNumberProps as AntdInputNumberProps } from 'antd';
-
-type ValueType = string | number;
-
-export interface InputNumberProps<T extends ValueType = ValueType>
-  extends AntdInputNumberProps<T> {}
-
-const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
-  (props, ref) => {
-    const { children, ...otherProps } = props;
-
-    return (
-      <AntdInputNumber ref={ref} {...otherProps}>
-        {children}
-      </AntdInputNumber>
-    );
-  },
-);
-
-export default InputNumber;

package/components/inputNumber/inputNumber.md

@@ -1,103 +0,0 @@
----
-title: InputNumber 数字输入框
-order: 0
-legacy: /inputNumber
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-通过鼠标或键盘，输入范围内的数值。
-
-# InputNumber 数字输入框
-
-通过鼠标或键盘，输入范围内的数值。
-
-## 何时使用
-
-当需要获取标准数值时。
-
-## 代码演示 
-
-
-### 基本
-<code src="./demos/basic.tsx" />
-
-### 三种大小
-<code src="./demos/threeSize.tsx" />
-
-<!-- ### 前置/后置标签
-<code src="./demos/tag.jsx" /> -->
-
-### 不可用
-<code src="./demos/disabled.tsx" />
-
-### 高精度小数
-<code src="./demos/decimal.tsx" />
-
-### 键盘行为
-<code src="./demos/keyboard.tsx" />
-
-### 无边框
-<code src="./demos/nowrap.tsx" />
-
-
-### 超出边界
-<code src="./demos/outwrap.tsx" />
-
-## API
-
-属性如下
-
-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| autoFocus | 自动获取焦点 | boolean | false | - |
-| bordered | 是否有边框 | boolean | true | 4.12.0 |
-| decimalSeparator | 小数点 | string | - | - |
-| defaultValue | 初始值 | number | - | - |
-| disabled | 禁用 | boolean | false | - |
-| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - |
-| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
-| max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
-| min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
-| parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - |
-| precision | 数值精度，配置 `formatter` 时会以 `formatter` 为准 | number | - | - |
-| readOnly | 只读 | boolean | false | - |
-| size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
-| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
-| stringMode | 字符值模式，开启后支持高精度小数。同时 `onChange` 将返回 string 类型 | boolean | false | 4.13.0 |
-| value | 当前值 | number | - | - |
-| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
-| onPressEnter | 按下回车的回调 | function(e) | - | - |
-| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
-
-## 方法
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |
-
-## FAQ
-
-### 为何受控模式下，`value` 可以超出 `min` 和 `max` 范围？
-
-在受控模式下，开发者可能自行存储相关数据。如果组件将数据约束回范围内，会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。
-
-### 为何动态修改 `min` 和 `max` 让 `value` 超出范围不会触发 `onChange` 事件？
-
-`onChange` 事件为用户触发事件，自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。
-
-
-<style>
-  .select-before {
-  width: 50px;
-}
-
-.select-after {
-  width: 50px;
-}
-
-</style>

package/components/layout/components/layout.tsx

@@ -1,26 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Layout as AntdLayout } from 'antd';
-import type { BasicProps as AntdBasicProps } from 'antd/es/layout/layout';
-
-export interface BasicProps extends AntdBasicProps {}
-
-const {
-  Content: AntdLayoutContent,
-  Footer: AntdLayoutFooter,
-  Header: AntdLayoutHeader,
-} = AntdLayout;
-
-const generator = (BasicComponent: any) => {
-  const Adapter: FC<BasicProps> = (props): ReactElement => {
-    return <BasicComponent {...props} />;
-  };
-  return Adapter;
-};
-
-const Content = generator(AntdLayoutContent);
-const Footer = generator(AntdLayoutFooter);
-const Header = generator(AntdLayoutHeader);
-const Layout = generator(AntdLayout);
-
-export { Content, Footer, Header };
-export default Layout;

package/components/layout/components/sider.tsx

@@ -1,15 +0,0 @@
-import React, { FC, ReactElement } from 'react';
-import { Layout as AntdLayout } from 'antd';
-import type { SiderProps as AntdLayoutSiderProps } from 'antd/es/layout/Sider';
-
-export interface SiderProps extends AntdLayoutSiderProps {}
-
-const { Sider: AntdLayoutSider } = AntdLayout;
-
-const Sider: FC<SiderProps> = (props): ReactElement => {
-  const { children, ...otherProps } = props;
-
-  return <AntdLayoutSider {...otherProps}>{children}</AntdLayoutSider>;
-};
-
-export default Sider;