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

package/components/tabs/components/tab-pane.tsx

@@ -1,16 +0,0 @@
-import React, { FC } from 'react';
-import { Tabs as AntdTabs } from 'antd';
-
-import type { TabPaneProps as AntdTabPaneProps } from 'antd/es/tabs';
-
-const { TabPane: AntdTabPane } = AntdTabs;
-
-export interface TabPaneProps extends AntdTabPaneProps {}
-
-const TabPane: FC<TabPaneProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTabPane {...otherProps}>{children}</AntdTabPane>;
-};
-
-export default TabPane;

package/components/tabs/components/tabs.tsx

@@ -1,14 +0,0 @@
-import React, { FC } from 'react';
-import { Tabs as AntdTabs } from 'antd';
-
-import type { TabsProps as AntdTabsProps } from 'antd/es/tabs';
-
-export interface TabsProps extends AntdTabsProps {}
-
-const Tabs: FC<TabsProps> = (props) => {
-  const { children, ...otherProps } = props;
-
-  return <AntdTabs {...otherProps}>{children}</AntdTabs>;
-};
-
-export default Tabs;

package/components/tabs/demos/basic.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 基本
- * desc: 默认选中第一项。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-function callback(key: string) {
-  console.log(key);
-}
-
-const Demo = () => {
-  return (
-    <Tabs defaultActiveKey="1" onChange={callback}>
-      <TabPane tab="Tab 1" key="1">
-        Content of Tab Pane 1
-      </TabPane>
-      <TabPane tab="Tab 2" key="2">
-        Content of Tab Pane 2
-      </TabPane>
-      <TabPane tab="Tab 3" key="3">
-        Content of Tab Pane 3
-      </TabPane>
-    </Tabs>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/card-top/index.less

@@ -1,57 +0,0 @@
-.card-top-demo {
-  padding: 24px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-
-.card-container p {
-  margin: 0;
-}
-.card-container > .ant-tabs-card .ant-tabs-content {
-  height: 120px;
-  margin-top: -16px;
-}
-.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-  padding: 16px;
-  background: #fff;
-}
-.card-container > .ant-tabs-card > .ant-tabs-nav::before {
-  display: none;
-}
-.card-container > .ant-tabs-card .ant-tabs-tab,
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
-  background: transparent;
-  border-color: transparent;
-}
-.card-container > .ant-tabs-card .ant-tabs-tab-active,
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
-  background: #fff;
-  border-color: #fff;
-}
-#components-tabs-demo-card-top .code-box-demo {
-  padding: 24px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
-  height: 120px;
-  margin-top: -8px;
-}
-[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
-  background: transparent;
-  border-color: transparent;
-}
-[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
-  background: #000;
-}
-[data-theme='dark']
-  .card-container
-  > .ant-tabs-card
-  .ant-tabs-content
-  > .ant-tabs-tabpane {
-  background: #141414;
-}
-[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
-  background: #141414;
-  border-color: #141414;
-}

package/components/tabs/demos/card-top/index.tsx

@@ -1,38 +0,0 @@
-/**
- * title: 卡片式页签容器
- * desc: 用于容器顶部，需要一点额外的样式覆盖。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-import './index.less';
-
-const { TabPane } = Tabs;
-
-const Demo = () => {
-  return (
-    <div className="card-top-demo">
-      <div className="card-container">
-        <Tabs type="card">
-          <TabPane tab="Tab Title 1" key="1">
-            <p>Content of Tab Pane 1</p>
-            <p>Content of Tab Pane 1</p>
-            <p>Content of Tab Pane 1</p>
-          </TabPane>
-          <TabPane tab="Tab Title 2" key="2">
-            <p>Content of Tab Pane 2</p>
-            <p>Content of Tab Pane 2</p>
-            <p>Content of Tab Pane 2</p>
-          </TabPane>
-          <TabPane tab="Tab Title 3" key="3">
-            <p>Content of Tab Pane 3</p>
-            <p>Content of Tab Pane 3</p>
-            <p>Content of Tab Pane 3</p>
-          </TabPane>
-        </Tabs>
-      </div>
-    </div>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/card.tsx

@@ -1,31 +0,0 @@
-/**
- * title: 卡片式页签
- * desc: 另一种样式的页签，不提供对应的垂直样式。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-function callback(key: string) {
-  console.log(key);
-}
-
-const Demo = () => {
-  return (
-    <Tabs onChange={callback} type="card">
-      <TabPane tab="Tab 1" key="1">
-        Content of Tab Pane 1
-      </TabPane>
-      <TabPane tab="Tab 2" key="2">
-        Content of Tab Pane 2
-      </TabPane>
-      <TabPane tab="Tab 3" key="3">
-        Content of Tab Pane 3
-      </TabPane>
-    </Tabs>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/centered.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" centered>
-      <TabPane tab="Tab 1" key="1">
-        Content of Tab Pane 1
-      </TabPane>
-      <TabPane tab="Tab 2" key="2">
-        Content of Tab Pane 2
-      </TabPane>
-      <TabPane tab="Tab 3" key="3">
-        Content of Tab Pane 3
-      </TabPane>
-    </Tabs>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/custom-add-trigger.jsx

@@ -1,83 +0,0 @@
-/**
- * title: 自定义新增页签触发器
- * desc: 隐藏默认的页签增加图标，给自定义触发器绑定事件。
- */
-
-import React from 'react';
-import { Tabs, Button } from '@fle-ui/next';
-
-const { TabPane } = Tabs;
-
-class Demo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.newTabIndex = 0;
-    const panes = [
-      { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
-      { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
-    ];
-    this.state = {
-      activeKey: panes[0].key,
-      panes,
-    };
-  }
-
-  onChange = (activeKey) => {
-    this.setState({ activeKey });
-  };
-
-  onEdit = (targetKey, action) => {
-    this[action](targetKey);
-  };
-
-  add = () => {
-    const { panes } = this.state;
-    const activeKey = `newTab${this.newTabIndex++}`;
-    panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
-    this.setState({ panes, activeKey });
-  };
-
-  remove = (targetKey) => {
-    let { activeKey } = this.state;
-    let lastIndex;
-    this.state.panes.forEach((pane, i) => {
-      if (pane.key === targetKey) {
-        lastIndex = i - 1;
-      }
-    });
-    const panes = this.state.panes.filter((pane) => pane.key !== targetKey);
-    if (panes.length && activeKey === targetKey) {
-      if (lastIndex >= 0) {
-        activeKey = panes[lastIndex].key;
-      } else {
-        activeKey = panes[0].key;
-      }
-    }
-    this.setState({ panes, activeKey });
-  };
-
-  render() {
-    return (
-      <div>
-        <div style={{ marginBottom: 16 }}>
-          <Button onClick={this.add}>ADD</Button>
-        </div>
-        <Tabs
-          hideAdd
-          onChange={this.onChange}
-          activeKey={this.state.activeKey}
-          type="editable-card"
-          onEdit={this.onEdit}
-        >
-          {this.state.panes.map((pane) => (
-            <TabPane tab={pane.title} key={pane.key}>
-              {pane.content}
-            </TabPane>
-          ))}
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export default Demo;

package/components/tabs/demos/custom-tab-bar/index.jsx

@@ -1,44 +0,0 @@
-/**
- * title: 自定义页签头
- * desc: 使用 react-sticky 组件实现吸顶效果。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-import { StickyContainer, Sticky } from 'react-sticky';
-
-import './index.less';
-
-const { TabPane } = Tabs;
-
-const renderTabBar = (props, DefaultTabBar) => (
-  <Sticky bottomOffset={80}>
-    {({ style }) => (
-      <DefaultTabBar
-        {...props}
-        className="site-custom-tab-bar"
-        style={{ ...style }}
-      />
-    )}
-  </Sticky>
-);
-
-const Demo = () => {
-  return (
-    <StickyContainer>
-      <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
-        <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
-          Content of Tab Pane 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of Tab Pane 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of Tab Pane 3
-        </TabPane>
-      </Tabs>
-    </StickyContainer>
-  );
-};
-
-export default Demo;

package/components/tabs/demos/custom-tab-bar/index.less

@@ -1,4 +0,0 @@
-.site-custom-tab-bar {
-  z-index: 1;
-  background: #fff;
-}

package/components/tabs/demos/custom-tab-bar-node.jsx

@@ -1,148 +0,0 @@
-/**
- * title: 可拖拽标签
- * desc: 使用 react-sticky 组件实现吸顶效果。
- */
-
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-const { TabPane } = Tabs;
-
-class TabNode extends React.Component {
-  render() {
-    const { connectDragSource, connectDropTarget, children } = this.props;
-
-    return connectDragSource(connectDropTarget(children));
-  }
-}
-
-const cardTarget = {
-  drop(props, monitor) {
-    const dragKey = monitor.getItem().index;
-    const hoverKey = props.index;
-
-    if (dragKey === hoverKey) {
-      return;
-    }
-
-    props.moveTabNode(dragKey, hoverKey);
-    monitor.getItem().index = hoverKey;
-  },
-};
-
-const cardSource = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
-};
-
-const WrapTabNode = DropTarget('DND_NODE', cardTarget, (connect) => ({
-  connectDropTarget: connect.dropTarget(),
-}))(
-  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }))(TabNode),
-);
-
-class DraggableTabs extends React.Component {
-  state = {
-    order: [],
-  };
-
-  moveTabNode = (dragKey, hoverKey) => {
-    const newOrder = this.state.order.slice();
-    const { children } = this.props;
-
-    React.Children.forEach(children, (c) => {
-      if (newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
-      }
-    });
-
-    const dragIndex = newOrder.indexOf(dragKey);
-    const hoverIndex = newOrder.indexOf(hoverKey);
-
-    newOrder.splice(dragIndex, 1);
-    newOrder.splice(hoverIndex, 0, dragKey);
-
-    this.setState({
-      order: newOrder,
-    });
-  };
-
-  renderTabBar = (props, DefaultTabBar) => (
-    <DefaultTabBar {...props}>
-      {(node) => (
-        <WrapTabNode
-          key={node.key}
-          index={node.key}
-          moveTabNode={this.moveTabNode}
-        >
-          {node}
-        </WrapTabNode>
-      )}
-    </DefaultTabBar>
-  );
-
-  render() {
-    const { order } = this.state;
-    const { children } = this.props;
-
-    const tabs = [];
-    React.Children.forEach(children, (c) => {
-      tabs.push(c);
-    });
-
-    const orderTabs = tabs.slice().sort((a, b) => {
-      const orderA = order.indexOf(a.key);
-      const orderB = order.indexOf(b.key);
-
-      if (orderA !== -1 && orderB !== -1) {
-        return orderA - orderB;
-      }
-      if (orderA !== -1) {
-        return -1;
-      }
-      if (orderB !== -1) {
-        return 1;
-      }
-
-      const ia = tabs.indexOf(a);
-      const ib = tabs.indexOf(b);
-
-      return ia - ib;
-    });
-
-    return (
-      <DndProvider backend={HTML5Backend}>
-        <Tabs renderTabBar={this.renderTabBar} {...this.props}>
-          {orderTabs}
-        </Tabs>
-      </DndProvider>
-    );
-  }
-}
-
-const Demo = () => {
-  return (
-    <DraggableTabs>
-      <TabPane tab="tab 1" key="1">
-        Content of Tab Pane 1
-      </TabPane>
-      <TabPane tab="tab 2" key="2">
-        Content of Tab Pane 2
-      </TabPane>
-      <TabPane tab="tab 3" key="3">
-        Content of Tab Pane 3
-      </TabPane>
-    </DraggableTabs>
-  );
-};
-
-export default Demo;