@fle-ui/next 1.0.0-alpha.8 → 1.0.0-alpha.9

package/es/tabs/demo/basic.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 基本
- * desc: 默认选中第一项。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/basic.js

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

package/es/tabs/demo/card-top/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * title: 卡片式页签容器
- * desc: 用于容器顶部，需要一点额外的样式覆盖。
- */
-import './index.less';
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/card-top/index.js

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

package/es/tabs/demo/card.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 卡片式页签
- * desc: 另一种样式的页签，不提供对应的垂直样式。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/card.js

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

package/es/tabs/demo/centered.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 居中
- * desc: 标签居中展示。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/centered.js

@@ -1,25 +0,0 @@
-/**
- * title: 居中
- * desc: 标签居中展示。
- */
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-var TabPane = Tabs.TabPane;
-
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    defaultActiveKey: "1",
-    centered: true
-  }, /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 1",
-    key: "1"
-  }, "Content of Tab Pane 1"), /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 2",
-    key: "2"
-  }, "Content of Tab Pane 2"), /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 3",
-    key: "3"
-  }, "Content of Tab Pane 3"));
-};
-
-export default Demo;

package/es/tabs/demo/disabled.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 禁用
- * desc: 禁用某一项。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/disabled.js

@@ -1,25 +0,0 @@
-/**
- * title: 禁用
- * desc: 禁用某一项。
- */
-import React from 'react';
-import { Tabs } from '@fle-ui/next';
-var TabPane = Tabs.TabPane;
-
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    defaultActiveKey: "1"
-  }, /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 1",
-    key: "1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 2",
-    disabled: true,
-    key: "2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(TabPane, {
-    tab: "Tab 3",
-    key: "3"
-  }, "Tab 3"));
-};
-
-export default Demo;

package/es/tabs/demo/extra/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 附加内容
- * desc: 可以在页签两边添加附加操作。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/extra/index.js

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

package/es/tabs/demo/icon.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 图标
- * desc: 有图标的标签。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/tabs/demo/icon.js

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

package/es/tabs/style/index-pure.less

@@ -1,224 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import './size';
-@import './rtl';
-@import './position';
-@import './dropdown';
-@import './card';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
-  .reset-component();
-
-  display: flex;
-  overflow: hidden;
-
-  // ========================== Navigation ==========================
-  > .@{tab-prefix-cls}-nav,
-  > div > .@{tab-prefix-cls}-nav {
-    position: relative;
-    display: flex;
-    flex: none;
-    align-items: center;
-
-    .@{tab-prefix-cls}-nav-wrap {
-      position: relative;
-      display: inline-block;
-      display: flex;
-      flex: auto;
-      align-self: stretch;
-      overflow: hidden;
-      white-space: nowrap;
-      transform: translate(0); // Fix chrome render bug
-
-      // >>>>> Ping shadow
-      &::before,
-      &::after {
-        position: absolute;
-        z-index: 1;
-        opacity: 0;
-        transition: opacity @animation-duration-slow;
-        content: '';
-        pointer-events: none;
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-list {
-      position: relative;
-      display: flex;
-      transition: transform @animation-duration-slow;
-    }
-
-    // >>>>>>>> Operations
-    .@{tab-prefix-cls}-nav-operations {
-      display: flex;
-      align-self: stretch;
-
-      &-hidden {
-        position: absolute;
-        visibility: hidden;
-        pointer-events: none;
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-more {
-      position: relative;
-      padding: @tabs-card-horizontal-padding;
-      background: transparent;
-      border: 0;
-
-      &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: 5px;
-        transform: translateY(100%);
-        content: '';
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-add {
-      min-width: @tabs-card-height;
-      margin-left: @tabs-card-gutter;
-      padding: 0 @padding-xs;
-      background: @tabs-card-head-background;
-      border: @border-width-base @border-style-base @border-color-split;
-      border-radius: @border-radius-base @border-radius-base 0 0;
-      outline: none;
-      cursor: pointer;
-      transition: all @animation-duration-slow @ease-in-out;
-
-      &:hover {
-        color: @tabs-hover-color;
-      }
-
-      &:active,
-      &:focus {
-        color: @tabs-active-color;
-      }
-    }
-  }
-
-  &-extra-content {
-    flex: none;
-  }
-
-  &-centered {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-nav-wrap {
-        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  // ============================ InkBar ============================
-  &-ink-bar {
-    position: absolute;
-    background: @tabs-ink-bar-color;
-    pointer-events: none;
-  }
-
-  // ============================= Tabs =============================
-  &-tab {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding: @tabs-horizontal-padding;
-    font-size: @tabs-title-font-size;
-    background: transparent;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-
-    &-btn,
-    &-remove {
-      &:focus,
-      &:active {
-        color: @tabs-active-color;
-      }
-    }
-
-    &-btn {
-      outline: none;
-      transition: all 0.3s;
-    }
-
-    &-remove {
-      flex: none;
-      margin-right: -@margin-xss;
-      margin-left: @margin-xs;
-      color: @text-color-secondary;
-      font-size: @font-size-sm;
-      background: transparent;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      transition: all @animation-duration-slow;
-
-      &:hover {
-        color: @heading-color;
-      }
-    }
-
-    &:hover {
-      color: @tabs-hover-color;
-    }
-
-    &&-active &-btn {
-      color: @tabs-highlight-color;
-      text-shadow: 0 0 0.25px currentColor;
-    }
-
-    &&-disabled {
-      color: @disabled-color;
-      cursor: not-allowed;
-    }
-
-    &&-disabled &-btn,
-    &&-disabled &-remove {
-      &:focus,
-      &:active {
-        color: @disabled-color;
-      }
-    }
-
-    & &-remove .@{iconfont-css-prefix} {
-      margin: 0;
-    }
-
-    .@{iconfont-css-prefix} {
-      margin-right: @margin-sm;
-    }
-  }
-
-  &-tab + &-tab {
-    margin: @tabs-horizontal-margin;
-  }
-
-  // =========================== TabPanes ===========================
-  &-content {
-    &-holder {
-      flex: auto;
-      min-width: 0;
-      min-height: 0;
-    }
-
-    display: flex;
-    width: 100%;
-
-    &-animated {
-      transition: margin @animation-duration-slow;
-    }
-  }
-
-  &-tabpane {
-    flex: none;
-    width: 100%;
-    outline: none;
-  }
-}

package/es/tag/demo/animation.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 添加动画
- * desc: 使用 [rc-tween-one](https://github.com/react-component/tween-one) 给标签增加添加或删除动画。
- */
-declare const AnimationDemo: () => JSX.Element;
-export default AnimationDemo;

package/es/tag/demo/animation.js

@@ -1,117 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 添加动画
- * desc: 使用 [rc-tween-one](https://github.com/react-component/tween-one) 给标签增加添加或删除动画。
- */
-import React, { useState, useEffect, useRef } from 'react';
-import { Tag, Input } from '@fle-ui/next';
-import { TweenOneGroup } from 'rc-tween-one';
-import { PlusOutlined } from '@ant-design/icons';
-
-var AnimationDemo = function AnimationDemo() {
-  var _useState = useState(['Tag 1', 'Tag 2', 'Tag 3']),
-      _useState2 = _slicedToArray(_useState, 2),
-      tags = _useState2[0],
-      setTags = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      inputVisible = _useState4[0],
-      setInputVisible = _useState4[1];
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
-
-  var input = useRef();
-  useEffect(function () {
-    if (inputVisible) {
-      input.current.focus();
-    }
-  }, [inputVisible]);
-
-  var handleClose = function handleClose(removedTag) {
-    var tagsA = tags.filter(function (tag) {
-      return tag !== removedTag;
-    });
-    setTags(tagsA);
-  };
-
-  var showInput = function showInput() {
-    setInputVisible(true);
-  };
-
-  var handleInputChange = function handleInputChange(e) {
-    setInputValue(e.target.value);
-  };
-
-  var handleInputConfirm = function handleInputConfirm() {
-    if (inputValue && tags.indexOf(inputValue) === -1) {
-      tags = [].concat(_toConsumableArray(tags), [inputValue]);
-    }
-
-    console.log(tags);
-    setTags(tags);
-    setInputVisible(false);
-    setInputValue('');
-  };
-
-  var forMap = function forMap(tag) {
-    var tagElem = /*#__PURE__*/React.createElement(Tag, {
-      closable: true,
-      onClose: function onClose(e) {
-        e.preventDefault();
-        handleClose(tag);
-      }
-    }, tag);
-    return /*#__PURE__*/React.createElement("span", {
-      key: tag,
-      style: {
-        display: 'inline-block'
-      }
-    }, tagElem);
-  };
-
-  var tagChild = tags.map(forMap);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: 16
-    }
-  }, /*#__PURE__*/React.createElement(TweenOneGroup, {
-    enter: {
-      scale: 0.8,
-      opacity: 0,
-      type: 'from',
-      duration: 100,
-      onComplete: function onComplete(e) {
-        e.target.style = '';
-      }
-    },
-    leave: {
-      opacity: 0,
-      width: 0,
-      scale: 0,
-      duration: 200
-    },
-    appear: false
-  }, tagChild)), inputVisible && /*#__PURE__*/React.createElement(Input, {
-    ref: input,
-    type: "text",
-    size: "small",
-    style: {
-      width: 78
-    },
-    value: inputValue,
-    onChange: handleInputChange,
-    onBlur: handleInputConfirm,
-    onPressEnter: handleInputConfirm
-  }), !inputVisible && /*#__PURE__*/React.createElement(Tag, {
-    onClick: showInput,
-    className: "site-tag-plus"
-  }, /*#__PURE__*/React.createElement(PlusOutlined, null), " New Tag"));
-};
-
-export default AnimationDemo;

package/es/tag/demo/basic.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 基本
- * desc: 基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` 事件。
- */
-declare const BasicDemo: () => JSX.Element;
-export default BasicDemo;

package/es/tag/demo/basic.js

@@ -1,29 +0,0 @@
-/**
- * title: 基本
- * desc: 基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` 事件。
- */
-import React from 'react';
-import { Tag } from '@fle-ui/next';
-
-var BasicDemo = function BasicDemo() {
-  var log = function log(e) {
-    console.log(e);
-  };
-
-  var preventDefault = function preventDefault(e) {
-    e.preventDefault();
-    console.log('Clicked! But prevent default.');
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, null, "Tag 1"), /*#__PURE__*/React.createElement(Tag, null, /*#__PURE__*/React.createElement("a", {
-    href: "https://github.com/ant-design/ant-design/issues/1862"
-  }, "Link")), /*#__PURE__*/React.createElement(Tag, {
-    closable: true,
-    onClose: log
-  }, "Tag 2"), /*#__PURE__*/React.createElement(Tag, {
-    closable: true,
-    onClose: preventDefault
-  }, "Prevent Default"));
-};
-
-export default BasicDemo;

package/es/tag/demo/choice.d.ts

@@ -1,7 +0,0 @@
-/**
- * title: 可选择标签
- * desc: 可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。<br/> >该组件为完全受控组件，不支持非受控用法。
- *
- */
-declare const ChoiceDemo: () => JSX.Element;
-export default ChoiceDemo;