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

package/es/timeline/demo/label.js

@@ -1,43 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 标签
- * desc: 使用 `label` 标签单独展示时间。
- */
-import React, { useState } from 'react';
-import { Timeline, Radio } from '@fle-ui/next';
-
-var LabelDemo = function LabelDemo() {
-  var _useState = useState('left'),
-      _useState2 = _slicedToArray(_useState, 2),
-      mode = _useState2[0],
-      setMode = _useState2[1];
-
-  var onChange = function onChange(e) {
-    setMode(e.target.value);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio.Group, {
-    onChange: onChange,
-    value: mode,
-    style: {
-      marginBottom: 20
-    }
-  }, /*#__PURE__*/React.createElement(Radio, {
-    value: "left"
-  }, "Left"), /*#__PURE__*/React.createElement(Radio, {
-    value: "right"
-  }, "Right"), /*#__PURE__*/React.createElement(Radio, {
-    value: "alternate"
-  }, "Alternate")), /*#__PURE__*/React.createElement(Timeline, {
-    mode: mode
-  }, /*#__PURE__*/React.createElement(Timeline.Item, {
-    label: "2015-09-01"
-  }, "Create a services"), /*#__PURE__*/React.createElement(Timeline.Item, {
-    label: "2015-09-01 09:12:11"
-  }, "Solve initial network problems"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Technical testing"), /*#__PURE__*/React.createElement(Timeline.Item, {
-    label: "2015-09-01 09:12:11"
-  }, "Network problems being solved")));
-};
-
-export default LabelDemo;

package/es/timeline/demo/pending.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 最后一个及排序
- * desc: 当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
- */
-declare const PendingDemo: () => JSX.Element;
-export default PendingDemo;

package/es/timeline/demo/pending.js

@@ -1,32 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 最后一个及排序
- * desc: 当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点，当 pending 为真值时展示幽灵节点，如果 pending 是 React 元素可用于定制该节点内容，同时 pendingDot 将可以用于定制其轴点。reverse 属性用于控制节点排序，为 false 时按正序排列，为 true 时按倒序排列。
- */
-import React, { useState } from 'react';
-import { Timeline, Button } from '@fle-ui/next';
-
-var PendingDemo = function PendingDemo() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      reverse = _useState2[0],
-      setReverse = _useState2[1];
-
-  var handleClick = function handleClick() {
-    setReverse(!reverse);
-  };
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Timeline, {
-    pending: "Recording...",
-    reverse: reverse
-  }, /*#__PURE__*/React.createElement(Timeline.Item, null, "Create a services site 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Solve initial network problems 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Technical testing 2015-09-01")), /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    style: {
-      marginTop: 16
-    },
-    onClick: handleClick
-  }, "Toggle Reverse"));
-};
-
-export default PendingDemo;

package/es/timeline/demo/right.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 右侧时间轴点
- * desc: 时间轴点可以在内容的右边。
- */
-declare const RightDemo: () => JSX.Element;
-export default RightDemo;

package/es/timeline/demo/right.js

@@ -1,22 +0,0 @@
-/**
- * title: 右侧时间轴点
- * desc: 时间轴点可以在内容的右边。
- */
-import React from 'react';
-import { Timeline } from '@fle-ui/next';
-import { ClockCircleOutlined } from '@ant-design/icons';
-
-var RightDemo = function RightDemo() {
-  return /*#__PURE__*/React.createElement(Timeline, {
-    mode: "right"
-  }, /*#__PURE__*/React.createElement(Timeline.Item, null, "Create a services site 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Solve initial network problems 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, {
-    dot: /*#__PURE__*/React.createElement(ClockCircleOutlined, {
-      style: {
-        fontSize: '16px'
-      }
-    }),
-    color: "red"
-  }, "Technical testing 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Network problems being solved 2015-09-01"));
-};
-
-export default RightDemo;

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

@@ -1,187 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/theme.less';
-@import '../../style/mixins/index';
-
-@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
-
-.@{timeline-prefix-cls} {
-  .reset-component();
-
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  &-item {
-    position: relative;
-    margin: 0;
-    padding-bottom: @timeline-item-padding-bottom;
-    font-size: @font-size-base;
-    list-style: none;
-
-    &-tail {
-      position: absolute;
-      top: 10px;
-      left: 4px;
-      height: calc(100% - 10px);
-      border-left: @timeline-width solid @timeline-color;
-    }
-
-    &-pending &-head {
-      font-size: @font-size-sm;
-      background-color: transparent;
-    }
-
-    &-pending &-tail {
-      display: none;
-    }
-
-    &-head {
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      background-color: @timeline-dot-bg;
-      border: @timeline-dot-border-width solid transparent;
-      border-radius: 100px;
-
-      &-blue {
-        color: @primary-color;
-        border-color: @primary-color;
-      }
-
-      &-red {
-        color: @error-color;
-        border-color: @error-color;
-      }
-
-      &-green {
-        color: @success-color;
-        border-color: @success-color;
-      }
-
-      &-gray {
-        color: @disabled-color;
-        border-color: @disabled-color;
-      }
-    }
-
-    &-head-custom {
-      position: absolute;
-      top: 5.5px;
-      left: 5px;
-      width: auto;
-      height: auto;
-      margin-top: 0;
-      padding: 3px 1px;
-      line-height: 1;
-      text-align: center;
-      border: 0;
-      border-radius: 0;
-      transform: translate(-50%, -50%);
-    }
-
-    &-content {
-      position: relative;
-      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
-      margin: 0 0 0 @margin-lg + 2px;
-      word-break: break-word;
-    }
-
-    &-last {
-      > .@{timeline-prefix-cls}-item-tail {
-        display: none;
-      }
-      > .@{timeline-prefix-cls}-item-content {
-        min-height: 48px;
-      }
-    }
-  }
-
-  &.@{timeline-prefix-cls}-alternate,
-  &.@{timeline-prefix-cls}-right,
-  &.@{timeline-prefix-cls}-label {
-    .@{timeline-prefix-cls}-item {
-      &-tail,
-      &-head,
-      &-head-custom {
-        left: 50%;
-      }
-
-      &-head {
-        margin-left: -4px;
-
-        &-custom {
-          margin-left: 1px;
-        }
-      }
-
-      &-left {
-        .@{timeline-prefix-cls}-item-content {
-          left: calc(50% - 4px);
-          width: calc(50% - 14px);
-          text-align: left;
-        }
-      }
-
-      &-right {
-        .@{timeline-prefix-cls}-item-content {
-          width: calc(50% - 12px);
-          margin: 0;
-          text-align: right;
-        }
-      }
-    }
-  }
-
-  &.@{timeline-prefix-cls}-right {
-    .@{timeline-prefix-cls}-item-right {
-      .@{timeline-prefix-cls}-item-tail,
-      .@{timeline-prefix-cls}-item-head,
-      .@{timeline-prefix-cls}-item-head-custom {
-        // stylelint-disable-next-line function-calc-no-invalid
-        left: calc(100% - 4px - @timeline-width);
-      }
-      .@{timeline-prefix-cls}-item-content {
-        width: calc(100% - 18px);
-      }
-    }
-  }
-
-  &&-pending &-item-last &-item-tail {
-    display: block;
-    height: calc(100% - 14px);
-    border-left: 2px dotted @timeline-color;
-  }
-
-  &&-reverse &-item-last &-item-tail {
-    display: none;
-  }
-
-  &&-reverse &-item-pending {
-    .@{timeline-prefix-cls}-item-tail {
-      top: 15px;
-      display: block;
-      height: calc(100% - 15px);
-      border-left: 2px dotted @timeline-color;
-    }
-    .@{timeline-prefix-cls}-item-content {
-      min-height: 48px;
-    }
-  }
-  &.@{timeline-prefix-cls}-label {
-    .@{timeline-prefix-cls}-item-label {
-      position: absolute;
-      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
-      width: calc(50% - 12px);
-      text-align: right;
-    }
-    .@{timeline-prefix-cls}-item-right {
-      .@{timeline-prefix-cls}-item-label {
-        left: calc(50% + 14px);
-        width: calc(50% - 14px);
-        text-align: left;
-      }
-    }
-  }
-}
-
-@import './rtl';

package/es/tooltip/demo/arrow-point-at-center.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 箭头指向
- * desc: 设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
- */
-declare const ArrowPointAtCenterDemo: () => JSX.Element;
-export default ArrowPointAtCenterDemo;

package/es/tooltip/demo/arrow-point-at-center.js

@@ -1,19 +0,0 @@
-/**
- * title: 箭头指向
- * desc: 设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
- */
-import React from 'react';
-import { Tooltip, Button } from '@fle-ui/next';
-
-var ArrowPointAtCenterDemo = function ArrowPointAtCenterDemo() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    placement: "topLeft",
-    title: "Prompt Text"
-  }, /*#__PURE__*/React.createElement(Button, null, "Align edge / \u8FB9\u7F18\u5BF9\u9F50")), /*#__PURE__*/React.createElement(Tooltip, {
-    placement: "topLeft",
-    title: "Prompt Text",
-    arrowPointAtCenter: true
-  }, /*#__PURE__*/React.createElement(Button, null, "Arrow points to center / \u7BAD\u5934\u6307\u5411\u4E2D\u5FC3")));
-};
-
-export default ArrowPointAtCenterDemo;

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

@@ -1,6 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法。
- */
-declare const BasicDemo: () => JSX.Element;
-export default BasicDemo;

package/es/tooltip/demo/basic.js

@@ -1,14 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法。
- */
-import React from 'react';
-import { Tooltip } from '@fle-ui/next';
-
-var BasicDemo = function BasicDemo() {
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: "prompt text"
-  }, /*#__PURE__*/React.createElement("span", null, "Tooltip will show on mouse enter."));
-};
-
-export default BasicDemo;

package/es/tooltip/demo/colorful.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 多彩文字提示
- * desc: 我们添加了多种预设色彩的文字提示样式，用作不同场景使用。
- */
-declare const ColorfulDemo: () => JSX.Element;
-export default ColorfulDemo;

package/es/tooltip/demo/colorful.js

@@ -1,30 +0,0 @@
-/**
- * title: 多彩文字提示
- * desc: 我们添加了多种预设色彩的文字提示样式，用作不同场景使用。
- */
-import React from 'react';
-import { Tooltip, Button, Divider } from '@fle-ui/next';
-
-var ColorfulDemo = function ColorfulDemo() {
-  var colors = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
-  var customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    orientation: "left"
-  }, "Presets"), /*#__PURE__*/React.createElement("div", null, colors.map(function (color) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      title: "prompt text",
-      color: color,
-      key: color
-    }, /*#__PURE__*/React.createElement(Button, null, color));
-  })), /*#__PURE__*/React.createElement(Divider, {
-    orientation: "left"
-  }, "Custom"), /*#__PURE__*/React.createElement("div", null, customColors.map(function (color) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      title: "prompt text",
-      color: color,
-      key: color
-    }, /*#__PURE__*/React.createElement(Button, null, color));
-  })));
-};
-
-export default ColorfulDemo;

package/es/tooltip/demo/placement.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 位置
- * desc: 位置有 12 个方向。
- */
-declare const PlacementDemo: () => JSX.Element;
-export default PlacementDemo;

package/es/tooltip/demo/placement.js

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

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

@@ -1,208 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/theme.less';
-@import '../../style/mixins/index';
-
-@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
-
-@tooltip-arrow-shadow-width: 3px;
-
-@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
-  @tooltip-arrow-shadow-width * 2;
-
-@tooltip-arrow-offset-vertical: 5px; // 8 - 3px
-@tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
-
-// Base class
-.@{tooltip-prefix-cls} {
-  .reset-component();
-
-  position: absolute;
-  z-index: @zindex-tooltip;
-  display: block;
-  width: max-content;
-  max-width: @tooltip-max-width;
-  visibility: visible;
-
-  &-hidden {
-    display: none;
-  }
-
-  &-placement-top,
-  &-placement-topLeft,
-  &-placement-topRight {
-    padding-bottom: @tooltip-distance;
-  }
-
-  &-placement-right,
-  &-placement-rightTop,
-  &-placement-rightBottom {
-    padding-left: @tooltip-distance;
-  }
-
-  &-placement-bottom,
-  &-placement-bottomLeft,
-  &-placement-bottomRight {
-    padding-top: @tooltip-distance;
-  }
-
-  &-placement-left,
-  &-placement-leftTop,
-  &-placement-leftBottom {
-    padding-right: @tooltip-distance;
-  }
-
-  // Wrapper for the tooltip content
-  &-inner {
-    min-width: 30px;
-    min-height: 32px;
-    padding: 6px 8px;
-    color: @tooltip-color;
-    text-align: left;
-    text-decoration: none;
-    word-wrap: break-word;
-    background-color: @tooltip-bg;
-    border-radius: @border-radius-base;
-    box-shadow: @box-shadow-base;
-  }
-
-  // Arrows
-  &-arrow {
-    position: absolute;
-    display: block;
-    width: @tooltip-arrow-rotate-width;
-    height: @tooltip-arrow-rotate-width;
-    overflow: hidden;
-    background: transparent;
-    pointer-events: none;
-
-    &-content {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: block;
-      width: @tooltip-arrow-width;
-      height: @tooltip-arrow-width;
-      margin: auto;
-      background-color: @tooltip-bg;
-      content: '';
-      pointer-events: auto;
-    }
-  }
-
-  &-placement-top &-arrow,
-  &-placement-topLeft &-arrow,
-  &-placement-topRight &-arrow {
-    bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
-
-    &-content {
-      box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
-    }
-  }
-
-  &-placement-top &-arrow {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &-placement-topLeft &-arrow {
-    left: @tooltip-arrow-offset-horizontal;
-  }
-
-  &-placement-topRight &-arrow {
-    right: @tooltip-arrow-offset-horizontal;
-  }
-
-  &-placement-right &-arrow,
-  &-placement-rightTop &-arrow,
-  &-placement-rightBottom &-arrow {
-    left: @tooltip-distance - @tooltip-arrow-rotate-width;
-
-    &-content {
-      box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
-    }
-  }
-
-  &-placement-right &-arrow {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &-placement-rightTop &-arrow {
-    top: @tooltip-arrow-offset-vertical;
-  }
-
-  &-placement-rightBottom &-arrow {
-    bottom: @tooltip-arrow-offset-vertical;
-  }
-
-  &-placement-left &-arrow,
-  &-placement-leftTop &-arrow,
-  &-placement-leftBottom &-arrow {
-    right: @tooltip-distance - @tooltip-arrow-rotate-width;
-
-    &-content {
-      box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
-    }
-  }
-
-  &-placement-left &-arrow {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &-placement-leftTop &-arrow {
-    top: @tooltip-arrow-offset-vertical;
-  }
-
-  &-placement-leftBottom &-arrow {
-    bottom: @tooltip-arrow-offset-vertical;
-  }
-
-  &-placement-bottom &-arrow,
-  &-placement-bottomLeft &-arrow,
-  &-placement-bottomRight &-arrow {
-    top: @tooltip-distance - @tooltip-arrow-rotate-width;
-
-    &-content {
-      box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
-      transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
-    }
-  }
-
-  &-placement-bottom &-arrow {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &-placement-bottomLeft &-arrow {
-    left: @tooltip-arrow-offset-horizontal;
-  }
-
-  &-placement-bottomRight &-arrow {
-    right: @tooltip-arrow-offset-horizontal;
-  }
-}
-
-.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
-  .generator-tooltip-preset-color(@i - 1);
-  @color: extract(@preset-colors, @i);
-  @lightColor: '@{color}-6';
-  .@{tooltip-prefix-cls}-@{color} {
-    .@{tooltip-prefix-cls}-inner {
-      background-color: @@lightColor;
-    }
-    .@{tooltip-prefix-cls}-arrow {
-      &-content {
-        background-color: @@lightColor;
-      }
-    }
-  }
-}
-.generator-tooltip-preset-color();
-
-@import './rtl';

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

@@ -1,6 +0,0 @@
-/**
- * title: 基本用法
- * desc: 最基本的用法，展示了 dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。
- */
-declare const BasicDemo: () => JSX.Element;
-export default BasicDemo;