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

package/components/tag/demos/preset.tsx

@@ -1,53 +0,0 @@
-/**
- * title: 预设状态的标签
- * desc: 预设五种状态颜色，可以通过设置 `color` 为 `success`、 `processing`、`error`、`default`、`warning` 来代表不同的状态。
- */
-
-import React from 'react';
-import { Tag, Divider } from '@fle-ui/next';
-import {
-  CheckCircleOutlined,
-  SyncOutlined,
-  CloseCircleOutlined,
-  ExclamationCircleOutlined,
-  ClockCircleOutlined,
-  MinusCircleOutlined,
-} from '@ant-design/icons';
-
-const PresetDemo = () => {
-  return (
-    <>
-      <Divider orientation="left">Without icon</Divider>
-      <div>
-        <Tag color="success">success</Tag>
-        <Tag color="processing">processing</Tag>
-        <Tag color="error">error</Tag>
-        <Tag color="warning">warning</Tag>
-        <Tag color="default">default</Tag>
-      </div>
-      <Divider orientation="left">With icon</Divider>
-      <div>
-        <Tag icon={<CheckCircleOutlined />} color="success">
-          success
-        </Tag>
-        <Tag icon={<SyncOutlined spin />} color="processing">
-          processing
-        </Tag>
-        <Tag icon={<CloseCircleOutlined />} color="error">
-          error
-        </Tag>
-        <Tag icon={<ExclamationCircleOutlined />} color="warning">
-          warning
-        </Tag>
-        <Tag icon={<ClockCircleOutlined />} color="default">
-          waiting
-        </Tag>
-        <Tag icon={<MinusCircleOutlined />} color="default">
-          stop
-        </Tag>
-      </div>
-    </>
-  );
-};
-
-export default PresetDemo;

package/components/tag/index.tsx

@@ -1,16 +0,0 @@
-import InternalTag, { TagProps } from './components/tag';
-import CheckableTag, { TagCheckableTagProps } from './components/CheckableTag';
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    TagProps & React.RefAttributes<HTMLElement>
-  > {
-  CheckableTag: typeof CheckableTag;
-}
-
-const Tag = InternalTag as CompoundedComponent;
-
-Tag.CheckableTag = CheckableTag;
-
-export type { TagProps, TagCheckableTagProps };
-
-export default Tag;

package/components/tag/tag.md

@@ -1,86 +0,0 @@
----
-title: Tag 标签
-order: 0
-legacy: /tag
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Tag 标签
-
-进行标记和分类的小标签。
-
-## 何时使用
-
-- 用于标记事物的属性和维度。
-- 进行分类。
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 多彩标签
-
-<code src="./demos/colourful.tsx" />
-
-### 动态添加和删除
-
-<code src="./demos/dynamic.tsx" />
-
-### 可选择标签
-
-<code src="./demos/choice.tsx" />
-
-### 控制关闭状态
-
-<code src="./demos/control.tsx" />
-
-### 添加动画
-
-<code src="./demos/animation.tsx" />
-
-### 图标按钮
-
-<code src="./demos/icon.tsx" />
-
-### 预设状态的标签
-
-<code src="./demos/preset.tsx" />
-
-## API
-
-### Tag
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| closable | 标签是否可以关闭（点击默认关闭） | boolean | false |  |
-| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
-| color | 标签色 | string | - |  |
-| icon | 设置图标 | ReactNode | - |  |
-| visible | 是否显示标签 | boolean | true |  |
-| onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - |  |
-
-### Tag.CheckableTag
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| checked | 设置标签的选中状态 | boolean | false |
-| onChange | 点击标签时触发的回调 | (checked) => void | - |
-
-<style>
-  .site-tag-plus {
-    background: #fff;
-    border-style: dashed;
-  }
-  .edit-tag {
-    user-select: none;
-  }
-  .tag-input {
-    width: 78px;
-    margin-right: 8px;
-    vertical-align: top;
-  }
-</style>

package/components/time-picker/components/rangePicker.tsx

@@ -1,13 +0,0 @@
-import React, { forwardRef } from 'react';
-import { TimePicker as AntdTimePicker } from 'antd';
-import { TimeRangePickerProps as AntdTimeRangePickerProps } from 'antd/es/time-picker';
-
-const { RangePicker: AntdTimeRangePicker } = AntdTimePicker;
-
-export interface TimeRangePickerProps extends AntdTimeRangePickerProps {}
-
-const RangePicker = forwardRef<any, TimeRangePickerProps>((props, ref) => {
-  return <AntdTimeRangePicker {...props} ref={ref} />;
-});
-
-export default RangePicker;

package/components/time-picker/components/timePicker.tsx

@@ -1,11 +0,0 @@
-import React, { forwardRef } from 'react';
-import { TimePicker as AntdTimePicker } from 'antd';
-import { TimePickerProps as AntdTimePickerProps } from 'antd/es/time-picker';
-
-export interface TimePickerProps extends AntdTimePickerProps {}
-
-const TimePicker = forwardRef<any, TimePickerProps>((props, ref) => {
-  return <AntdTimePicker {...props} ref={ref} />;
-});
-
-export default TimePicker;

package/components/time-picker/demos/12hours.jsx

@@ -1,28 +0,0 @@
-/**
- * title: 12 小时制
- * desc: 12 小时制的时间选择器，默认的 format 为 `h:mm:ss a`。
- */
-
-import React from 'react';
-import { TimePicker, Button } from '@fle-ui/next';
-
-function onChange(time, timeString) {
-  console.log(time, timeString);
-}
-
-const Demo = () => {
-  return (
-    <>
-      <TimePicker use12Hours onChange={onChange} />
-      <TimePicker
-        use12Hours
-        format="h:mm:ss A"
-        onChange={onChange}
-        style={{ width: 140 }}
-      />
-      <TimePicker use12Hours format="h:mm a" onChange={onChange} />
-    </>
-  );
-};
-
-export default Demo;

package/components/time-picker/demos/addon.jsx

@@ -1,33 +0,0 @@
-/**
- * title: 附加内容
- * desc: 在 TimePicker 选择框底部显示自定义的内容。
- */
-
-import React from 'react';
-import { TimePicker, Button } from '@fle-ui/next';
-
-class TimePickerAddonDemo extends React.Component {
-  state = { open: false };
-
-  handleOpenChange = (open) => {
-    this.setState({ open });
-  };
-
-  handleClose = () => this.setState({ open: false });
-
-  render() {
-    return (
-      <TimePicker
-        open={this.state.open}
-        onOpenChange={this.handleOpenChange}
-        renderExtraFooter={() => (
-          <Button size="small" type="primary" onClick={this.handleClose}>
-            Ok
-          </Button>
-        )}
-      />
-    );
-  }
-}
-
-export default TimePickerAddonDemo;

package/components/time-picker/demos/basic.tsx

@@ -1,23 +0,0 @@
-/**
- * title: 基本
- * desc: 点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-import moment from 'moment';
-
-function onChange(time: any, timeString: string) {
-  console.log(time, timeString);
-}
-
-const Demo = () => {
-  return (
-    <TimePicker
-      onChange={onChange}
-      defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
-    />
-  );
-};
-
-export default Demo;

package/components/time-picker/demos/bordered.jsx

@@ -1,20 +0,0 @@
-/**
- * title: 无边框
- * desc: 无边框样式。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-
-const { RangePicker } = TimePicker;
-
-const Demo = () => {
-  return (
-    <>
-      <TimePicker bordered={false} />
-      <RangePicker bordered={false} />
-    </>
-  );
-};
-
-export default Demo;

package/components/time-picker/demos/disabled.jsx

@@ -1,14 +0,0 @@
-/**
- * title: 禁用
- * desc: 禁用时间选择。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-import moment from 'moment';
-
-const Demo = () => {
-  return <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />;
-};
-
-export default Demo;

package/components/time-picker/demos/hide-column.jsx

@@ -1,16 +0,0 @@
-/**
- * title: 选择时分
- * desc: TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的某部分时，浮层中对应的列也会消失。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-import moment from 'moment';
-
-const Demo = () => {
-  const format = 'HH:mm';
-
-  return <TimePicker defaultValue={moment('12:08', format)} format={format} />;
-};
-
-export default Demo;

package/components/time-picker/demos/interval-options.jsx

@@ -1,13 +0,0 @@
-/**
- * title: 步长选项
- * desc: 可以使用 `hourStep` `minuteStep` `secondStep` 按步长展示可选的时分秒。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-
-const Demo = () => {
-  return <TimePicker minuteStep={15} secondStep={10} />;
-};
-
-export default Demo;

package/components/time-picker/demos/range-picker.jsx

@@ -1,13 +0,0 @@
-/**
- * title: 范围选择器
- * desc: 通过 `TimePicker.RangePicker` 使用时间范围选择器。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-
-const Demo = () => {
-  return <TimePicker.RangePicker />;
-};
-
-export default Demo;

package/components/time-picker/demos/size.jsx

@@ -1,20 +0,0 @@
-/**
- * title: 三种大小
- * desc: 三种大小的输入框，大的用在表单中，中的为默认。
- */
-
-import React from 'react';
-import { TimePicker } from '@fle-ui/next';
-import moment from 'moment';
-
-const Demo = () => {
-  return (
-    <>
-      <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
-      <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
-      <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
-    </>
-  );
-};
-
-export default Demo;

package/components/time-picker/demos/value.jsx

@@ -1,19 +0,0 @@
-/**
- * title: 受控组件
- * desc: value 和 onChange 需要配合使用。
- */
-
-import React, { useState } from 'react';
-import { TimePicker } from '@fle-ui/next';
-
-const Demo = () => {
-  const [value, setValue] = useState(null);
-
-  const onChange = (time) => {
-    setValue(time);
-  };
-
-  return <TimePicker value={value} onChange={onChange} />;
-};
-
-export default Demo;

package/components/time-picker/index.tsx

@@ -1,17 +0,0 @@
-import InternalTimePicker, { TimePickerProps } from './components/timePicker';
-
-import RangePicker, { TimeRangePickerProps } from './components/rangePicker';
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    TimePickerProps & React.RefAttributes<HTMLElement>
-  > {
-  RangePicker: typeof RangePicker;
-}
-
-const TimePicker = InternalTimePicker as CompoundedComponent;
-
-TimePicker.RangePicker = RangePicker;
-
-export type { TimePickerProps, TimeRangePickerProps };
-
-export default TimePicker;

package/components/time-picker/time-picker.md

@@ -1,117 +0,0 @@
----
-title: TimePicker 时间选择框
-order: 0
-legacy: /transfer
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# TimePicker 时间选择框
-
-输入或选择时间的控件。
-
-## 何时使用
-
----
-
-当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
-
-## 代码演示
-
-### 基本用法
-<code src="./demos/basic.tsx"/>
-
-### 受控组件
-<code src="./demos/value.jsx"/>
-
-### 三种大小
-<code src="./demos/size.jsx"/>
-
-### 禁用
-<code src="./demos/disabled.jsx"/>
-
-### 选择时分
-<code src="./demos/hide-column.jsx"/>
-
-### 步长选项
-<code src="./demos/hide-column.jsx"/>
-
-### 附加内容
-<code src="./demos/addon.jsx"/>
-
-### 12 小时制
-<code src="./demos/12hours.jsx"/>
-
-### 范围选择器
-<code src="./demos/range-picker.jsx"/>
-
-### 无边框
-<code src="./demos/bordered.jsx"/>
-
-## API
-
----
-
-```bash
-import moment from 'moment';
-<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
-```
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowClear | 是否展示清除按钮 | boolean | true |  |
-| autoFocus | 自动获取焦点 | boolean | false |  |
-| bordered | 是否有边框 | boolean | true |  |
-| className | 选择器类名 | string | - |  |
-| clearIcon | 自定义的清除图标 | ReactNode | - |  |
-| clearText | 清除按钮的提示文案 | string | clear |  |
-| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - |  |
-| disabled | 禁用全部操作 | boolean | false |  |
-| disabledHours | 禁止选择部分小时选项 | function() | - |  |
-| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - |  |
-| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - |  |
-| format | 展示的时间格式 | string | `HH:mm:ss` |  |
-| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
-| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  |
-| hourStep | 小时选项间隔 | number | 1 |  |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
-| minuteStep | 分钟选项间隔 | number | 1 |  |
-| open | 面板是否打开 | boolean | false |  |
-| placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` |  |
-| popupClassName | 弹出层类名 | string | - |  |
-| popupStyle | 弹出层样式对象 | object | - |  |
-| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
-| secondStep | 秒选项间隔 | number | 1 |  |
-| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |  |
-| value | 当前时间 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |  |
-| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
-
-## 方法
-
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
-
-### RangePicker
-
-属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
-
-<style> 
-.ant-picker { margin: 0 8px 12px 0; }
-.ant-row-rtl .ant-picker { margin: 0 0 12px 8px; }
-</style>
-
-## FAQ
-
-- [如何在 TimePicker 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#TimePicker)