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

package/components/slider/demos/icon.tsx

@@ -1,28 +0,0 @@
-/**
- * title: 带icon的滑块
- * desc: 滑块左右可以设置图标来表达业务含义。
- */
-
-import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
-import React, { useState } from 'react';
-import { Slider } from '@fle-ui/next';
-
-const Icon = (props: any) => {
-  const [value, setValue] = useState<any>(0);
-  const { max, min } = props;
-  const mid = ((max - min) / 2).toFixed(5);
-  const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
-  const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
-
-  const handleChange = (value: any) => {
-    setValue(value);
-  };
-  return (
-    <div className="icon-wrapper">
-      <FrownOutlined className={preColorCls} />
-      <Slider {...props} onChange={handleChange} value={value} />
-      <SmileOutlined className={nextColorCls} />
-    </div>
-  );
-};
-export default Icon;

package/components/slider/demos/inputBox.tsx

@@ -1,38 +0,0 @@
-/**
- * title: 带输入框的滑块
- * desc: 和数字输入框组件保持同步。
- */
-
-import { InputNumber, Row, Col } from 'antd';
-import React, { useState } from 'react';
-import { Slider } from '@fle-ui/next';
-
-const InputBoxDemo = () => {
-  const [inputValue, setInputValue] = useState(1);
-
-  const onChange = (value: any) => {
-    setInputValue(value);
-  };
-  return (
-    <Row>
-      <Col span={12}>
-        <Slider
-          min={1}
-          max={20}
-          onChange={onChange}
-          value={typeof inputValue === 'number' ? inputValue : 0}
-        />
-      </Col>
-      <Col span={4}>
-        <InputNumber
-          min={1}
-          max={20}
-          style={{ margin: '0 16px' }}
-          value={inputValue}
-          onChange={onChange}
-        />
-      </Col>
-    </Row>
-  );
-};
-export default InputBoxDemo;

package/components/slider/demos/marks.tsx

@@ -1,38 +0,0 @@
-/**
- * title: 带标签的滑块
- * desc: 使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。
- */
-
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-const MarksDemo = () => {
-  const marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-      style: {
-        color: '#f50',
-      },
-      label: <strong>100°C</strong>,
-    },
-  };
-  return (
-    <>
-      <h4>included=true</h4>
-      <Slider marks={marks} defaultValue={37} />
-      <Slider range marks={marks} defaultValue={[26, 37]} />
-
-      <h4>included=false</h4>
-      <Slider marks={marks} included={false} defaultValue={37} />
-
-      <h4>marks & step</h4>
-      <Slider marks={marks} step={10} defaultValue={37} />
-
-      <h4>step=null</h4>
-      <Slider marks={marks} step={null} defaultValue={37} />
-    </>
-  );
-};
-export default MarksDemo;

package/components/slider/demos/range.tsx

@@ -1,13 +0,0 @@
-/**
- * title: 范围可拖拽
- * desc: 可以设置 range.draggableTrack，使得范围刻度整体可拖拽。
- */
-
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-const RangeDemo = () => {
-  return <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;
-};
-
-export default RangeDemo;

package/components/slider/demos/reverse.tsx

@@ -1,24 +0,0 @@
-/**
- * title: 反向
- * desc: 设置reverse可以将滑动条置反。
- */
-import { Slider } from '@fle-ui/next';
-import { Switch } from 'antd';
-import React, { useState } from 'react';
-const ReverseDemo = () => {
-  const [reverse, setReverse] = useState(true);
-
-  const handleReverseChange = (reverse: any) => {
-    setReverse(reverse);
-  };
-  return (
-    <>
-      <Slider defaultValue={30} reverse={reverse} />
-      <Slider range defaultValue={[20, 50]} reverse={reverse} />
-      Reversed:{' '}
-      <Switch size="small" checked={reverse} onChange={handleReverseChange} />
-    </>
-  );
-};
-
-export default ReverseDemo;

package/components/slider/demos/vertical.tsx

@@ -1,42 +0,0 @@
-/**
- * title: 垂直
- * desc: 垂直方向的 Slider。
- */
-
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-const VerticalDemo = () => {
-  const style = {
-    display: 'inline-block',
-    height: 300,
-    marginLeft: 70,
-  };
-
-  const marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-      style: {
-        color: '#f50',
-      },
-      label: <strong>100°C</strong>,
-    },
-  };
-  return (
-    <>
-      <div style={style}>
-        <Slider vertical defaultValue={30} />
-      </div>
-      <div style={style}>
-        <Slider vertical range step={10} defaultValue={[20, 50]} />
-      </div>
-      <div style={style}>
-        <Slider vertical range marks={marks} defaultValue={[26, 37]} />
-      </div>
-    </>
-  );
-};
-
-export default VerticalDemo;

package/components/slider/index.tsx

@@ -1,18 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Slider as AntdSlider } from 'antd';
-import type {
-  SliderRangeProps as AntdSliderRangeProps,
-  SliderSingleProps as AntdSliderSingleProps,
-} from 'antd/es/slider';
-
-export interface SliderRangeProps extends AntdSliderRangeProps {}
-export interface SliderSingleProps extends AntdSliderSingleProps {}
-
-const Slider = forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
-  (props, ref) => {
-    const { children, ...otherProps } = props;
-    return <AntdSlider {...otherProps} ref={ref} />;
-  },
-);
-
-export default Slider;

package/components/slider/slider.md

@@ -1,96 +0,0 @@
----
-title: Slider 滑动输入条
-order: 0
-legacy: /slider
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-# Slider 滑动输入条
-
-滑动型输入器，展示当前值和可选范围。
-
-## 何时使用
-
-当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 带输入框的滑块
-
-<code src="./demos/inputBox.tsx" />
-
-### 带icon的滑块
-
-<code src="./demos/icon.tsx" />
-
-### 自定义提示
-
-<code src="./demos/custom.tsx" />
-
-### 事件
-
-<code src="./demos/events.tsx" />
-
-### 带标签的滑块
-
-<code src="./demos/marks.tsx" />
-
-### 垂直
-
-<code src="./demos/vertical.tsx" />
-
-### 控制ToolTip的显示
-
-<code src="./demos/controlShow.tsx" />
-
-### 反向
-
-<code src="./demos/reverse.tsx" />
-
-### 范围可拖拽
-
-<code src="./demos/range.tsx" />
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| allowClear | 支持清除, 单选模式有效 | boolean | false |  |
-| defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
-| disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
-| dots | 是否只能拖拽到刻度上 | boolean | false |  |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body |  |
-| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
-| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |  |
-| max | 最大值 | number | 100 |  |
-| min | 最小值 | number | 0 |  |
-| range | 双滑块模式 | boolean \| [range](#range) | false |  |
-| reverse | 反向坐标轴 | boolean | false |  |
-| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 |  |
-| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY |  |
-| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - |  |
-| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - |  |
-| value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - |  |
-| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
-| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - |  |
-| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |  |
-
-### range
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | 4.10.0 |
-
-## 方法
-
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |

package/components/space/demos/align.tsx

@@ -1,44 +0,0 @@
-/**
- * title: 对齐
- * desc: 设置对齐模式。
- */
-
-import React from 'react';
-import { Space, Button } from 'antd';
-
-const AlignDemo = () => {
-  return (
-    <div className="space-align-container">
-      <div className="space-align-block">
-        <Space align="center">
-          center
-          <Button type="primary">Primary</Button>
-          <span className="mock-block">Block</span>
-        </Space>
-      </div>
-      <div className="space-align-block">
-        <Space align="start">
-          start
-          <Button type="primary">Primary</Button>
-          <span className="mock-block">Block</span>
-        </Space>
-      </div>
-      <div className="space-align-block">
-        <Space align="end">
-          end
-          <Button type="primary">Primary</Button>
-          <span className="mock-block">Block</span>
-        </Space>
-      </div>
-      <div className="space-align-block">
-        <Space align="baseline">
-          baseline
-          <Button type="primary">Primary</Button>
-          <span className="mock-block">Block</span>
-        </Space>
-      </div>
-    </div>
-  );
-};
-
-export default AlignDemo;

package/components/space/demos/base.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 基本用法
- * desc: 相邻组件水平间距。
- */
-
-import React from 'react';
-import { Button, Space, Upload, Popconfirm } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
-
-const BaseDemo = () => {
-  return (
-    <Space>
-      Space
-      <Button type="primary">Button</Button>
-      <Upload>
-        <Button>
-          <UploadOutlined /> Click to Upload
-        </Button>
-      </Upload>
-      <Popconfirm
-        title="Are you sure delete this task?"
-        okText="Yes"
-        cancelText="No"
-      >
-        <Button>Confirm</Button>
-      </Popconfirm>
-    </Space>
-  );
-};
-
-export default BaseDemo;

package/components/space/demos/customize.tsx

@@ -1,26 +0,0 @@
-/**
- * title: 自定义尺寸
- * desc: 自定义间距大小。
- */
-
-import React, { useState } from 'react';
-import { Space, Slider, Button } from '@fle-ui/next';
-
-const CustomizeDemo = () => {
-  const [size, setSize] = useState(8);
-  return (
-    <>
-      <Slider value={size} onChange={(value) => setSize(value)} />
-      <br />
-      <br />
-      <Space size={size}>
-        <Button type="primary">Primary</Button>
-        <Button>Default</Button>
-        <Button type="dashed">Dashed</Button>
-        <Button type="link">Link</Button>
-      </Space>
-    </>
-  );
-};
-
-export default CustomizeDemo;

package/components/space/demos/size.tsx

@@ -1,30 +0,0 @@
-/**
- * title: 间距大小
- * desc: 间距预设大、中、小三种大小。<br/>通过设置 `size` 为 `large` `middle` 分别把间距设为大、中间距。若不设置 `size`，则间距为小。
- */
-
-import React, { useState } from 'react';
-import { Space, Radio, Button } from '@fle-ui/next';
-
-const SizeDemo = () => {
-  const [size, setSize] = useState<'small'>('small');
-  return (
-    <>
-      <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
-        <Radio value="small">Small</Radio>
-        <Radio value="middle">Middle</Radio>
-        <Radio value="large">Large</Radio>
-      </Radio.Group>
-      <br />
-      <br />
-      <Space size={size}>
-        <Button type="primary">Primary</Button>
-        <Button>Default</Button>
-        <Button type="dashed">Dashed</Button>
-        <Button type="link">Link</Button>
-      </Space>
-    </>
-  );
-};
-
-export default SizeDemo;