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

package/components/tooltip/demos/placement.tsx

@@ -1,65 +0,0 @@
-/**
- * title: 位置
- * desc: 位置有 12 个方向。
- */
-
-import React from 'react';
-import { Tooltip, Button } from '@fle-ui/next';
-
-const PlacementDemo = () => {
-  const text = <span>prompt text</span>;
-
-  const buttonWidth = 70;
-  return (
-    <div className="demo">
-      <div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
-        <Tooltip placement="topLeft" title={text}>
-          <Button>TL</Button>
-        </Tooltip>
-        <Tooltip placement="top" title={text}>
-          <Button>Top</Button>
-        </Tooltip>
-        <Tooltip placement="topRight" title={text}>
-          <Button>TR</Button>
-        </Tooltip>
-      </div>
-      <div style={{ width: buttonWidth, float: 'left' }}>
-        <Tooltip placement="leftTop" title={text}>
-          <Button>LT</Button>
-        </Tooltip>
-        <Tooltip placement="left" title={text}>
-          <Button>Left</Button>
-        </Tooltip>
-        <Tooltip placement="leftBottom" title={text}>
-          <Button>LB</Button>
-        </Tooltip>
-      </div>
-      <div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
-        <Tooltip placement="rightTop" title={text}>
-          <Button>RT</Button>
-        </Tooltip>
-        <Tooltip placement="right" title={text}>
-          <Button>Right</Button>
-        </Tooltip>
-        <Tooltip placement="rightBottom" title={text}>
-          <Button>RB</Button>
-        </Tooltip>
-      </div>
-      <div
-        style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}
-      >
-        <Tooltip placement="bottomLeft" title={text}>
-          <Button>BL</Button>
-        </Tooltip>
-        <Tooltip placement="bottom" title={text}>
-          <Button>Bottom</Button>
-        </Tooltip>
-        <Tooltip placement="bottomRight" title={text}>
-          <Button>BR</Button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export default PlacementDemo;

package/components/tooltip/index.tsx

@@ -1,16 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Tooltip as AntdTooltip } from 'antd';
-import type { TooltipProps as AntdTooltipProps } from 'antd/es/tooltip';
-
-export type TooltipProps = AntdTooltipProps;
-
-const Tooltip = forwardRef<unknown, TooltipProps>((props, ref) => {
-  const { children, ...otherProps } = props;
-  return (
-    <AntdTooltip {...otherProps} ref={ref}>
-      {children}
-    </AntdTooltip>
-  );
-});
-
-export default Tooltip;

package/components/tooltip/tooltip.md

@@ -1,91 +0,0 @@
----
-title: Tooltip 文字提示
-order: 0
-legacy: /tooltip
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-简单的文字提示气泡框。
-
-## 何时使用
-
-鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
-
-可用来代替系统默认的 `title` 提示，提供一个 `按钮/文字/操作` 的文案解释。
-
-
-## 代码演示
-
-### 基本
-
-<code src="./demos/basic.tsx" />
-
-### 位置
-
-<code src="./demos/placement.tsx" />
-
-### 箭头指向
-
-<code src="./demos/arrow-point-at-center.tsx" />
-
-### 多彩文字提示
-
-<code src="./demos/colorful.tsx" />
-
-## API
-
-| 参数  | 说明     | 类型                         | 默认值 |
-| ----- | -------- | ---------------------------- | ------ |
-| title | 提示文字 | ReactNode \| () => ReactNode | -      |
-
-### 共同的 API
-
-以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - |  |
-| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false |  |
-| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
-| color | 背景颜色 | string | - | 4.3.0 |
-| defaultVisible | 默认是否显隐 | boolean | false |  |
-| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false |  |
-| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body |  |
-| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
-| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |  |
-| overlayClassName | 卡片类名 | string | - |  |
-| overlayStyle | 卡片样式 | object | - |  |
-| overlayInnerStyle | 卡片内容区域的样式对象 | object | - |  |
-| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
-| trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` |  |
-| visible | 用于手动控制浮层显隐 | boolean | false |  |
-| zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
-| onVisibleChange | 显示隐藏的回调 | (visible) => void | - |  |
-
-## 注意
-
-请确保 `Tooltip` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
-
-<style>
-   .demo {
-  overflow: auto;
-}
- .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
- .ant-btn-rtl {
-  margin-right: 0;
-  margin-left: 8px;
-  margin-bottom: 8px;
-}
-#tooltip-placement .ant-btn {
-  width: 70px;
-  text-align: center;
-  padding: 0;
-}
-</style>

package/components/transfer/demos/basic.tsx

@@ -1,64 +0,0 @@
-/**
- * title: 基本用法
- * desc: 最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。
- */
-
-import React, { useState } from 'react';
-import { Transfer } from '@fle-ui/next';
-
-const BasicDemo = () => {
-  const mockData = [];
-  for (let i = 0; i < 20; i++) {
-    mockData.push({
-      key: i.toString(),
-      title: `content${i + 1}`,
-      description: `description of content${i + 1}`,
-    });
-  }
-
-  const initialTargetKeys = mockData
-    .filter((item) => +item.key > 10)
-    .map((item) => item.key);
-
-  const [targetKeys, setTargetKeys] = useState<any>(initialTargetKeys);
-  const [selectedKeys, setSelectedKeys] = useState<any>([]);
-
-  const onChange = (
-    nextTargetKeys: string[],
-    direction: string,
-    moveKeys: string[],
-  ) => {
-    console.log('targetKeys:', nextTargetKeys);
-    console.log('direction:', direction);
-    console.log('moveKeys:', moveKeys);
-    setTargetKeys(nextTargetKeys);
-  };
-
-  const onSelectChange = (
-    sourceSelectedKeys: string[],
-    targetSelectedKeys: string[],
-  ) => {
-    console.log('sourceSelectedKeys:', sourceSelectedKeys);
-    console.log('targetSelectedKeys:', targetSelectedKeys);
-    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
-  };
-
-  const onScroll = (direction: string, e: any) => {
-    console.log('direction:', direction);
-    console.log('target:', e.target);
-  };
-  return (
-    <Transfer
-      dataSource={mockData}
-      titles={['Source', 'Target']}
-      targetKeys={targetKeys}
-      selectedKeys={selectedKeys}
-      onChange={onChange}
-      onSelectChange={onSelectChange}
-      onScroll={onScroll}
-      render={(item) => item.title}
-    />
-  );
-};
-
-export default BasicDemo;

package/components/transfer/demos/oneway.tsx

@@ -1,84 +0,0 @@
-/**
- * title: 单向样式
- * desc: 通过 oneWay 将 Transfer 转为单向样式。
- */
-
-import { Switch } from 'antd';
-import React, { useState } from 'react';
-import { Transfer } from '@fle-ui/next';
-
-const OnewayDemo = () => {
-  const mockData = [];
-  for (let i = 0; i < 20; i++) {
-    mockData.push({
-      key: i.toString(),
-      title: `content${i + 1}`,
-      description: `description of content${i + 1}`,
-      disabled: i % 3 < 1,
-    });
-  }
-
-  const oriTargetKeys = mockData
-    .filter((item) => +item.key % 3 > 1)
-    .map((item) => item.key);
-
-  const [targetKeys, setTargetKeys] = useState<any>(oriTargetKeys);
-  const [selectedKeys, setSelectedKeys] = useState<any>([]);
-  const [disabled, setDisabled] = useState(false);
-
-  const handleChange = (
-    nextTargetKeys: string[],
-    direction: string,
-    moveKeys: string[],
-  ) => {
-    setTargetKeys(nextTargetKeys);
-
-    console.log('targetKeys: ', nextTargetKeys);
-    console.log('direction: ', direction);
-    console.log('moveKeys: ', moveKeys);
-  };
-
-  const handleSelectChange = (
-    sourceSelectedKeys: string[],
-    targetSelectedKeys: string[],
-  ) => {
-    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
-
-    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
-    console.log('targetSelectedKeys: ', targetSelectedKeys);
-  };
-
-  const handleScroll = (direction: string, e: any) => {
-    console.log('direction:', direction);
-    console.log('target:', e.target);
-  };
-
-  const handleDisable = (disabled: boolean) => {
-    setDisabled(disabled);
-  };
-  return (
-    <>
-      <Transfer
-        dataSource={mockData}
-        titles={['Source', 'Target']}
-        targetKeys={targetKeys}
-        selectedKeys={selectedKeys}
-        onChange={handleChange}
-        onSelectChange={handleSelectChange}
-        onScroll={handleScroll}
-        render={(item) => item.title}
-        disabled={disabled}
-        oneWay
-        style={{ marginBottom: 16 }}
-      />
-      <Switch
-        unCheckedChildren="disabled"
-        checkedChildren="disabled"
-        checked={disabled}
-        onChange={handleDisable}
-      />
-    </>
-  );
-};
-
-export default OnewayDemo;

package/components/transfer/demos/pages.tsx

@@ -1,64 +0,0 @@
-/**
- * title: 分页
- * desc: 大数据下使用分页。
- */
-import React, { useState, useEffect } from 'react';
-import { Transfer } from '@fle-ui/next';
-import { Switch } from 'antd';
-
-const PagesDemo = () => {
-  const [oneWay, setOneWay] = useState(false);
-  const [mockData, setMockData] = useState<any>([]);
-  const [targetKeys, setTargetKeys] = useState<string[]>([]);
-
-  useEffect(() => {
-    const newTargetKeys = [];
-    const newMockData = [];
-    for (let i = 0; i < 2000; i++) {
-      const data = {
-        key: i.toString(),
-        title: `content${i + 1}`,
-        description: `description of content${i + 1}`,
-        chosen: Math.random() * 2 > 1,
-      };
-      if (data.chosen) {
-        newTargetKeys.push(data.key);
-      }
-      newMockData.push(data);
-    }
-
-    setTargetKeys(newTargetKeys);
-    setMockData(newMockData);
-  }, []);
-
-  const onChange = (
-    newTargetKeys: string[],
-    direction: string,
-    moveKeys: string[],
-  ) => {
-    console.log(newTargetKeys, direction, moveKeys);
-    setTargetKeys(newTargetKeys);
-  };
-
-  return (
-    <>
-      <Transfer
-        dataSource={mockData}
-        targetKeys={targetKeys}
-        onChange={onChange}
-        render={(item) => item.title}
-        oneWay={oneWay}
-        pagination
-      />
-      <br />
-      <Switch
-        unCheckedChildren="one way"
-        checkedChildren="one way"
-        checked={oneWay}
-        onChange={setOneWay}
-      />
-    </>
-  );
-};
-
-export default PagesDemo;

package/components/transfer/demos/render.tsx

@@ -1,72 +0,0 @@
-/**
- * title: 自定义渲染行数据
- * desc: 自定义渲染每一个 Transfer Item，可用于渲染复杂数据。
- */
-
-import React, { useState, useEffect } from 'react';
-import { Transfer } from '@fle-ui/next';
-
-const RenderDemo = () => {
-  const [mockData, setMockData] = useState<any>([]);
-  const [targetKeys, setTargetKeys] = useState<any>([]);
-
-  useEffect(() => {
-    getMock();
-  }, []);
-
-  const getMock = () => {
-    const targetKeys = [];
-    const mockData = [];
-    for (let i = 0; i < 20; i++) {
-      const data = {
-        key: i.toString(),
-        title: `content${i + 1}`,
-        description: `description of content${i + 1}`,
-        chosen: Math.random() * 2 > 1,
-      };
-      if (data.chosen) {
-        targetKeys.push(data.key);
-      }
-      mockData.push(data);
-    }
-    setMockData(mockData);
-    setTargetKeys(targetKeys);
-  };
-
-  const handleChange = (
-    targetKeys: string[],
-    direction: string,
-    moveKeys: string[],
-  ) => {
-    console.log(targetKeys, direction, moveKeys);
-    setTargetKeys(targetKeys);
-  };
-
-  const renderItem = (item: { title: string; description: string }) => {
-    const customLabel = (
-      <span className="custom-item">
-        {item.title} - {item.description}
-      </span>
-    );
-
-    return {
-      label: customLabel, // for displayed item
-      value: item.title, // for title and filter matching
-    };
-  };
-
-  return (
-    <Transfer
-      dataSource={mockData}
-      listStyle={{
-        width: 300,
-        height: 300,
-      }}
-      targetKeys={targetKeys}
-      onChange={handleChange}
-      render={renderItem}
-    />
-  );
-};
-
-export default RenderDemo;