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

package/components/tabs/demos/disabled.tsx

@@ -1,27 +0,0 @@
-/**
- * title: 禁用
- * desc: 禁用某一项。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-const Demo = () => {
-  return (
-    <Tabs defaultActiveKey="1">
-      <TabPane tab="Tab 1" key="1">
-        Tab 1
-      </TabPane>
-      <TabPane tab="Tab 2" disabled key="2">
-        Tab 2
-      </TabPane>
-      <TabPane tab="Tab 3" key="3">
-        Tab 3
-      </TabPane>
-    </Tabs>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/editable-card.jsx

@@ -1,95 +0,0 @@
-/**
- * title: 新增和关闭页签
- * desc: 只有卡片样式的页签支持新增和关闭选项。使用 `closable={false}` 禁止关闭。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-const initialPanes = [
-  { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
-  { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
-  {
-    title: 'Tab 3',
-    content: 'Content of Tab 3',
-    key: '3',
-    closable: false,
-  },
-];
-
-class Demo extends React.Component {
-  newTabIndex = 0;
-
-  state = {
-    activeKey: initialPanes[0].key,
-    panes: initialPanes,
-  };
-
-  onChange = (activeKey) => {
-    this.setState({ activeKey });
-  };
-
-  onEdit = (targetKey, action) => {
-    this[action](targetKey);
-  };
-
-  add = () => {
-    const { panes } = this.state;
-    const activeKey = `newTab${this.newTabIndex++}`;
-    const newPanes = [...panes];
-    newPanes.push({
-      title: 'New Tab',
-      content: 'Content of new Tab',
-      key: activeKey,
-    });
-    this.setState({
-      panes: newPanes,
-      activeKey,
-    });
-  };
-
-  remove = (targetKey) => {
-    const { panes, activeKey } = this.state;
-    let newActiveKey = activeKey;
-    let lastIndex;
-    panes.forEach((pane, i) => {
-      if (pane.key === targetKey) {
-        lastIndex = i - 1;
-      }
-    });
-    const newPanes = panes.filter((pane) => pane.key !== targetKey);
-    if (newPanes.length && newActiveKey === targetKey) {
-      if (lastIndex >= 0) {
-        newActiveKey = newPanes[lastIndex].key;
-      } else {
-        newActiveKey = newPanes[0].key;
-      }
-    }
-    this.setState({
-      panes: newPanes,
-      activeKey: newActiveKey,
-    });
-  };
-
-  render() {
-    const { panes, activeKey } = this.state;
-    return (
-      <Tabs
-        type="editable-card"
-        onChange={this.onChange}
-        activeKey={activeKey}
-        onEdit={this.onEdit}
-      >
-        {panes.map((pane) => (
-          <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
-            {pane.content}
-          </TabPane>
-        ))}
-      </Tabs>
-    );
-  }
-}
-
-export default Demo;

package/components/tabs/demos/extra/index.less

@@ -1,8 +0,0 @@
-.tabs-extra-demo-button {
-  margin-right: 16px;
-}
-
-.ant-row-rtl .tabs-extra-demo-button {
-  margin-right: 0;
-  margin-left: 16px;
-}

package/components/tabs/demos/extra/index.tsx

@@ -1,76 +0,0 @@
-/**
- * title: 附加内容
- * desc: 可以在页签两边添加附加操作。
- */
-
-import React from 'react';
-import { Tabs, Button, Divider, Checkbox } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-const CheckboxGroup = Checkbox.Group;
-
-const operations = <Button>Extra Action</Button>;
-
-const OperationsSlot: any = {
-  left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
-  right: <Button>Right Extra Action</Button>,
-};
-
-const options = ['left', 'right'];
-
-const Demo = () => {
-  const [position, setPosition] = React.useState(['left', 'right']);
-
-  const slot = React.useMemo(() => {
-    if (position.length === 0) return null;
-
-    return position.reduce(
-      (acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }),
-      {},
-    );
-  }, [position]);
-
-  return (
-    <>
-      <Tabs tabBarExtraContent={operations}>
-        <TabPane tab="Tab 1" key="1">
-          Content of tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of tab 3
-        </TabPane>
-      </Tabs>
-      <br />
-      <br />
-      <br />
-      <div>You can also specify its direction or both side</div>
-      <Divider />
-      <CheckboxGroup
-        options={options}
-        value={position}
-        onChange={(value: any) => {
-          setPosition(value);
-        }}
-      />
-      <br />
-      <br />
-      <Tabs tabBarExtraContent={slot}>
-        <TabPane tab="Tab 1" key="1">
-          Content of tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of tab 3
-        </TabPane>
-      </Tabs>
-    </>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/icon.tsx

@@ -1,41 +0,0 @@
-/**
- * title: 图标
- * desc: 有图标的标签。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
-
-const { TabPane } = Tabs;
-
-const Demo = () => {
-  return (
-    <Tabs defaultActiveKey="2">
-      <TabPane
-        tab={
-          <span>
-            <AppleOutlined />
-            Tab 1
-          </span>
-        }
-        key="1"
-      >
-        Tab 1
-      </TabPane>
-      <TabPane
-        tab={
-          <span>
-            <AndroidOutlined />
-            Tab 2
-          </span>
-        }
-        key="2"
-      >
-        Tab 2
-      </TabPane>
-    </Tabs>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/position.jsx

@@ -1,51 +0,0 @@
-/**
- * title: 位置
- * desc: 有四个位置，`tabPosition="left|right|top|bottom"`。在移动端下，`left|right` 会自动切换成 `top`。
- */
-
-import React from 'react';
-import { Tabs, Radio } from '@fle-ui/next';
-import { Space } from 'antd';
-
-const { TabPane } = Tabs;
-
-class Demo extends React.Component {
-  state = {
-    tabPosition: 'left',
-  };
-
-  changeTabPosition = (e) => {
-    this.setState({ tabPosition: e.target.value });
-  };
-  z;
-
-  render() {
-    const { tabPosition } = this.state;
-    return (
-      <>
-        <Space style={{ marginBottom: 24 }}>
-          Tab position:
-          <Radio.Group value={tabPosition} onChange={this.changeTabPosition}>
-            <Radio.Button value="top">top</Radio.Button>
-            <Radio.Button value="bottom">bottom</Radio.Button>
-            <Radio.Button value="left">left</Radio.Button>
-            <Radio.Button value="right">right</Radio.Button>
-          </Radio.Group>
-        </Space>
-        <Tabs tabPosition={tabPosition}>
-          <TabPane tab="Tab 1" key="1">
-            Content of Tab 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of Tab 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of Tab 3
-          </TabPane>
-        </Tabs>
-      </>
-    );
-  }
-}
-
-export default Demo;

package/components/tabs/demos/size.jsx

@@ -1,58 +0,0 @@
-/**
- * title: 大小
- * desc: 大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。
- */
-
-import React from 'react';
-import { Tabs, Radio } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-class Demo extends React.Component {
-  state = { size: 'small' };
-
-  onChange = (e) => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
-    return (
-      <div>
-        <Radio.Group
-          value={size}
-          onChange={this.onChange}
-          style={{ marginBottom: 16 }}
-        >
-          <Radio.Button value="small">Small</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="large">Large</Radio.Button>
-        </Radio.Group>
-        <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
-          <TabPane tab="Tab 1" key="1">
-            Content of tab 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of tab 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of tab 3
-          </TabPane>
-        </Tabs>
-        <Tabs defaultActiveKey="1" type="card" size={size}>
-          <TabPane tab="Card Tab 1" key="1">
-            Content of card tab 1
-          </TabPane>
-          <TabPane tab="Card Tab 2" key="2">
-            Content of card tab 2
-          </TabPane>
-          <TabPane tab="Card Tab 3" key="3">
-            Content of card tab 3
-          </TabPane>
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export default Demo;

package/components/tabs/demos/slide.jsx

@@ -1,48 +0,0 @@
-/**
- * title: 滑动
- * desc: 可以左右、上下滑动，容纳更多标签。
- */
-
-import React from 'react';
-import { Tabs, Radio } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-class Demo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      mode: 'top',
-    };
-  }
-
-  handleModeChange = (e) => {
-    const mode = e.target.value;
-    this.setState({ mode });
-  };
-
-  render() {
-    const { mode } = this.state;
-    return (
-      <div>
-        <Radio.Group
-          onChange={this.handleModeChange}
-          value={mode}
-          style={{ marginBottom: 8 }}
-        >
-          <Radio.Button value="top">Horizontal</Radio.Button>
-          <Radio.Button value="left">Vertical</Radio.Button>
-        </Radio.Group>
-        <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
-          {[...Array.from({ length: 30 }, (v, i) => i)].map((i) => (
-            <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
-              Content of tab {i}
-            </TabPane>
-          ))}
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export default Demo;

package/components/tabs/index.tsx

@@ -1,17 +0,0 @@
-import InternalTabs, { TabsProps } from './components/tabs';
-import TabPane, { TabPaneProps } from './components/tab-pane';
-
-interface CompoundedComponent
-  extends React.ForwardRefExoticComponent<
-    TabsProps & React.RefAttributes<HTMLElement>
-  > {
-  TabPane: typeof TabPane;
-}
-
-const Tabs = InternalTabs as CompoundedComponent;
-
-Tabs.TabPane = TabPane;
-
-export type { TabsProps, TabPaneProps };
-
-export default Tabs;

package/components/tabs/tabs.md

@@ -1,104 +0,0 @@
----
-title: Tabs 标签页
-order: 0
-legacy: /tabs
-group:
-  path: /
-nav:
-  title: 组件
-  path: /components
----
-
-# Tabs 标签页
-
-按钮用于开始一个即时操作。
-
-## 何时使用
-
-提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
-
-Ant Design 依次提供了三级选项卡，分别用于不同的场景。
-
-- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
-- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
-- [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
-
-
-## 代码演示
-
-### 基本
-<code src="./demos/basic.tsx" />
-
-### 禁用
-<code src="./demos/disabled.tsx" />
-
-### 居中
-<code src="./demos/centered.tsx" />
-
-### 图标
-<code src="./demos/icon.tsx" />
-
-### 滑动
-<code src="./demos/slide.jsx" />
-
-### 附加内容
-<code src="./demos/extra/index.tsx" />
-
-### 大小
-<code src="./demos/size.jsx" />
-
-### 位置
-<code src="./demos/position.jsx" />
-
-### 卡片式页签
-<code src="./demos/card.tsx" />
-
-### 新增和关闭页签
-<code src="./demos/editable-card.jsx" />
-
-### 卡片式页签容器
-<code src="./demos/card-top/index.tsx" />
-
-### 自定义新增页签触发器
-<code src="./demos/custom-add-trigger.jsx" />
-
-### 自定义页签头
-<code src="./demos/custom-tab-bar/index.jsx" />
-
-### 可拖拽标签
-<code src="./demos/custom-tab-bar-node.jsx" />
-
-
-## API
-
-### Tabs
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string | - |  |
-| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
-| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  |
-| centered | 标签居中展示 | boolean | false | 4.4.0 |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
-| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
-| moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
-| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
-| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |
-| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
-| tabBarGutter | tabs 之间的间隙 | number | - |  |
-| tabBarStyle | tab bar 的样式对象 | object | - |  |
-| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
-| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |
-| onChange | 切换面板的回调 | function(activeKey) {} | - |  |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |
-| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |
-| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
-
-### Tabs.TabPane
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - |
-| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
-| key | 对应 activeKey | string | - |
-| tab | 选项卡头显示文字 | ReactNode | - |