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

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

@@ -1,279 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
-@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
-@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
-@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
-@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
-@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input';
-@skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image';
-@skeleton-block-radius: 4px;
-
-.@{skeleton-prefix-cls} {
-  display: table;
-  width: 100%;
-
-  &-header {
-    display: table-cell;
-    padding-right: @padding-md;
-    vertical-align: top;
-
-    // Avatar
-    .@{skeleton-avatar-prefix-cls} {
-      .skeleton-element-avatar();
-    }
-  }
-
-  &-content {
-    display: table-cell;
-    width: 100%;
-    vertical-align: top;
-
-    // Title
-    .@{skeleton-title-prefix-cls} {
-      width: 100%;
-      height: @skeleton-title-height;
-      margin-top: @margin-md;
-      background: @skeleton-color;
-      border-radius: @skeleton-block-radius;
-
-      + .@{skeleton-paragraph-prefix-cls} {
-        margin-top: @skeleton-title-paragraph-margin-top;
-      }
-    }
-
-    // paragraph
-    .@{skeleton-paragraph-prefix-cls} {
-      padding: 0;
-
-      > li {
-        width: 100%;
-        height: @skeleton-paragraph-li-height;
-        list-style: none;
-        background: @skeleton-color;
-        border-radius: @skeleton-block-radius;
-
-        &:last-child:not(:first-child):not(:nth-child(2)) {
-          width: 61%;
-        }
-
-        + li {
-          margin-top: @skeleton-paragraph-li-margin-top;
-        }
-      }
-    }
-  }
-
-  &-with-avatar &-content {
-    // Title
-    .@{skeleton-title-prefix-cls} {
-      margin-top: @margin-sm;
-
-      + .@{skeleton-paragraph-prefix-cls} {
-        margin-top: @skeleton-paragraph-margin-top;
-      }
-    }
-  }
-
-  &-round &-content {
-    .@{skeleton-title-prefix-cls},
-    .@{skeleton-paragraph-prefix-cls} > li {
-      border-radius: 100px;
-    }
-  }
-
-  // With active animation
-  &.@{skeleton-prefix-cls}-active {
-    & .@{skeleton-prefix-cls}-content {
-      .@{skeleton-title-prefix-cls},
-      .@{skeleton-paragraph-prefix-cls} > li {
-        .skeleton-color();
-      }
-    }
-
-    .@{skeleton-avatar-prefix-cls} {
-      .skeleton-color();
-    }
-
-    .@{skeleton-button-prefix-cls} {
-      .skeleton-color();
-    }
-
-    .@{skeleton-input-prefix-cls} {
-      .skeleton-color();
-    }
-
-    .@{skeleton-image-prefix-cls} {
-      .skeleton-color();
-    }
-  }
-
-  // Skeleton Block Button
-  &.@{skeleton-prefix-cls}-block {
-    width: 100%;
-
-    .@{skeleton-button-prefix-cls} {
-      width: 100%;
-    }
-  }
-
-  // Skeleton element
-  &-element {
-    display: inline-block;
-    width: auto;
-
-    .@{skeleton-button-prefix-cls} {
-      .skeleton-element-button();
-    }
-
-    .@{skeleton-avatar-prefix-cls} {
-      .skeleton-element-avatar();
-    }
-
-    .@{skeleton-input-prefix-cls} {
-      .skeleton-element-input();
-    }
-
-    .@{skeleton-image-prefix-cls} {
-      .skeleton-element-image();
-    }
-  }
-}
-// Button
-.skeleton-element-button() {
-  display: inline-block;
-  vertical-align: top;
-  background: @skeleton-color;
-  border-radius: @border-radius-base;
-
-  .skeleton-element-button-size(@btn-height-base);
-
-  &-lg {
-    .skeleton-element-button-size(@btn-height-lg);
-  }
-
-  &-sm {
-    .skeleton-element-button-size(@btn-height-sm);
-  }
-}
-// Avatar
-.skeleton-element-avatar() {
-  display: inline-block;
-  vertical-align: top;
-  background: @skeleton-color;
-
-  .skeleton-element-avatar-size(@avatar-size-base);
-
-  &-lg {
-    .skeleton-element-avatar-size(@avatar-size-lg);
-  }
-
-  &-sm {
-    .skeleton-element-avatar-size(@avatar-size-sm);
-  }
-}
-
-// Input
-.skeleton-element-input() {
-  display: inline-block;
-  vertical-align: top;
-  background: @skeleton-color;
-
-  .skeleton-element-input-size(@input-height-base);
-
-  &-lg {
-    .skeleton-element-input-size(@input-height-lg);
-  }
-
-  &-sm {
-    .skeleton-element-input-size(@input-height-sm);
-  }
-}
-
-// Image
-.skeleton-element-image() {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  background: @skeleton-color;
-
-  .skeleton-element-image-size(@image-size-base*2);
-
-  &-path {
-    fill: #bfbfbf;
-  }
-
-  &-svg {
-    .skeleton-element-image-size(@image-size-base);
-    max-width: @image-size-base * 4;
-    max-height: @image-size-base * 4;
-  }
-}
-
-.skeleton-element-avatar-size(@size) {
-  width: @size;
-  .skeleton-element-common-size(@size);
-
-  &.@{skeleton-avatar-prefix-cls}-circle {
-    border-radius: 50%;
-  }
-}
-
-.skeleton-element-button-size(@size) {
-  width: @size * 2;
-  min-width: @size * 2;
-  .skeleton-element-common-size(@size);
-
-  &.@{skeleton-button-prefix-cls}-circle {
-    width: @size;
-    min-width: @size;
-    border-radius: 50%;
-  }
-
-  &.@{skeleton-button-prefix-cls}-round {
-    border-radius: @size;
-  }
-}
-
-.skeleton-element-input-size(@size) {
-  width: 100%;
-  .skeleton-element-common-size(@size);
-}
-
-.skeleton-element-image-size(@size) {
-  width: @size;
-  .skeleton-element-common-size(@size);
-
-  &.@{skeleton-image-prefix-cls}-circle {
-    border-radius: 50%;
-  }
-}
-
-.skeleton-element-common-size(@size) {
-  height: @size;
-  line-height: @size;
-}
-
-.skeleton-color() {
-  background: linear-gradient(
-    90deg,
-    @skeleton-color 25%,
-    @skeleton-to-color 37%,
-    @skeleton-color 63%
-  );
-  background-size: 400% 100%;
-  animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
-}
-
-@keyframes ~"@{skeleton-prefix-cls}-loading" {
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-@import './rtl';

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

@@ -1,6 +0,0 @@
-/**
- * title: 基本
- * desc: 基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。
- */
-declare const BasicDemo: () => JSX.Element;
-export default BasicDemo;

package/es/slider/demo/basic.js

@@ -1,34 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 基本
- * desc: 基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。
- */
-import React, { useState } from 'react';
-import { Slider, Switch } from '@fle-ui/next';
-
-var BasicDemo = function BasicDemo() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      disabled = _useState2[0],
-      setDisabled = _useState2[1];
-
-  var handleDisabledChange = function handleDisabledChange(disabled) {
-    setDisabled(disabled);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
-    defaultValue: 30,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Slider, {
-    range: true,
-    defaultValue: [20, 50],
-    disabled: disabled
-  }), "Disabled:", ' ', /*#__PURE__*/React.createElement(Switch, {
-    size: "small",
-    checked: disabled,
-    onChange: handleDisabledChange
-  }));
-};
-
-export default BasicDemo;

package/es/slider/demo/controlShow.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 控制ToolTip的显示
- * desc: 当 tooltipVisible 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
- */
-declare const ControlShow: () => JSX.Element;
-export default ControlShow;

package/es/slider/demo/controlShow.js

@@ -1,15 +0,0 @@
-/**
- * title: 控制ToolTip的显示
- * desc: 当 tooltipVisible 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
- */
-import React from 'react';
-import { Slider } from '@fle-ui/next';
-
-var ControlShow = function ControlShow() {
-  return /*#__PURE__*/React.createElement(Slider, {
-    defaultValue: 30,
-    tooltipVisible: true
-  });
-};
-
-export default ControlShow;

package/es/slider/demo/custom.d.ts

@@ -1,2 +0,0 @@
-declare const CustomDemo: () => JSX.Element;
-export default CustomDemo;

package/es/slider/demo/custom.js

@@ -1,20 +0,0 @@
-/**
- * title: 自定义提示
- * desc: 使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。
- */
-import React from 'react';
-import { Slider } from '@fle-ui/next';
-
-var CustomDemo = function CustomDemo() {
-  var formatter = function formatter(value) {
-    return "".concat(value, "%");
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
-    tipFormatter: formatter
-  }), /*#__PURE__*/React.createElement(Slider, {
-    tipFormatter: null
-  }));
-};
-
-export default CustomDemo;

package/es/slider/demo/events.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 事件
- * desc: 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。
- */
-declare const EventsDemo: () => JSX.Element;
-export default EventsDemo;

package/es/slider/demo/events.js

@@ -1,30 +0,0 @@
-/**
- * title: 事件
- * desc: 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。
- */
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-var EventsDemo = function EventsDemo() {
-  function onChange(value) {
-    console.log('onChange: ', value);
-  }
-
-  function onAfterChange(value) {
-    console.log('onAfterChange: ', value);
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
-    defaultValue: 30,
-    onChange: onChange,
-    onAfterChange: onAfterChange
-  }), /*#__PURE__*/React.createElement(Slider, {
-    range: true,
-    step: 10,
-    defaultValue: [20, 50],
-    onChange: onChange,
-    onAfterChange: onAfterChange
-  }));
-};
-
-export default EventsDemo;

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

@@ -1,6 +0,0 @@
-/**
- * title: 带icon的滑块
- * desc: 滑块左右可以设置图标来表达业务含义。
- */
-declare const Icon: (props: any) => JSX.Element;
-export default Icon;

package/es/slider/demo/icon.js

@@ -1,40 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 带icon的滑块
- * desc: 滑块左右可以设置图标来表达业务含义。
- */
-import React, { useState } from 'react';
-import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
-import { Slider } from '@fle-ui/next';
-
-var Icon = function Icon(props) {
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var max = props.max,
-      min = props.min;
-  var mid = ((max - min) / 2).toFixed(5);
-  var preColorCls = value >= mid ? '' : 'icon-wrapper-active';
-  var nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
-
-  var handleChange = function handleChange(value) {
-    setValue(value);
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: "icon-wrapper"
-  }, /*#__PURE__*/React.createElement(FrownOutlined, {
-    className: preColorCls
-  }), /*#__PURE__*/React.createElement(Slider, _extends({}, props, {
-    onChange: handleChange,
-    value: value
-  })), /*#__PURE__*/React.createElement(SmileOutlined, {
-    className: nextColorCls
-  }));
-};
-
-export default Icon;

package/es/slider/demo/inputBox.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 带输入框的滑块
- * desc: 和数字输入框组件保持同步。
- */
-declare const InputBoxDemo: () => JSX.Element;
-export default InputBoxDemo;

package/es/slider/demo/inputBox.js

@@ -1,40 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 带输入框的滑块
- * desc: 和数字输入框组件保持同步。
- */
-import React, { useState } from 'react';
-import { InputNumber, Row, Col, Slider } from '@fle-ui/next';
-
-var InputBoxDemo = function InputBoxDemo() {
-  var _useState = useState(1),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var onChange = function onChange(value) {
-    setInputValue(value);
-  };
-
-  return /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-    span: 12
-  }, /*#__PURE__*/React.createElement(Slider, {
-    min: 1,
-    max: 20,
-    onChange: onChange,
-    value: typeof inputValue === 'number' ? inputValue : 0
-  })), /*#__PURE__*/React.createElement(Col, {
-    span: 4
-  }, /*#__PURE__*/React.createElement(InputNumber, {
-    min: 1,
-    max: 20,
-    style: {
-      margin: '0 16px'
-    },
-    value: inputValue,
-    onChange: onChange
-  })));
-};
-
-export default InputBoxDemo;

package/es/slider/demo/marks.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 带标签的滑块
- * desc: 使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。
- */
-declare const MarksDemo: () => JSX.Element;
-export default MarksDemo;

package/es/slider/demo/marks.js

@@ -1,42 +0,0 @@
-/**
- * title: 带标签的滑块
- * desc: 使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。
- */
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-var MarksDemo = function MarksDemo() {
-  var marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-      style: {
-        color: '#f50'
-      },
-      label: /*#__PURE__*/React.createElement("strong", null, "100\xB0C")
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h4", null, "included=true"), /*#__PURE__*/React.createElement(Slider, {
-    marks: marks,
-    defaultValue: 37
-  }), /*#__PURE__*/React.createElement(Slider, {
-    range: true,
-    marks: marks,
-    defaultValue: [26, 37]
-  }), /*#__PURE__*/React.createElement("h4", null, "included=false"), /*#__PURE__*/React.createElement(Slider, {
-    marks: marks,
-    included: false,
-    defaultValue: 37
-  }), /*#__PURE__*/React.createElement("h4", null, "marks & step"), /*#__PURE__*/React.createElement(Slider, {
-    marks: marks,
-    step: 10,
-    defaultValue: 37
-  }), /*#__PURE__*/React.createElement("h4", null, "step=null"), /*#__PURE__*/React.createElement(Slider, {
-    marks: marks,
-    step: null,
-    defaultValue: 37
-  }));
-};
-
-export default MarksDemo;

package/es/slider/demo/range.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 范围可拖拽
- * desc: 可以设置 range.draggableTrack，使得范围刻度整体可拖拽。
- */
-declare const RangeDemo: () => JSX.Element;
-export default RangeDemo;

package/es/slider/demo/range.js

@@ -1,17 +0,0 @@
-/**
- * title: 范围可拖拽
- * desc: 可以设置 range.draggableTrack，使得范围刻度整体可拖拽。
- */
-import { Slider } from '@fle-ui/next';
-import React from 'react';
-
-var RangeDemo = function RangeDemo() {
-  return /*#__PURE__*/React.createElement(Slider, {
-    range: {
-      draggableTrack: true
-    },
-    defaultValue: [20, 50]
-  });
-};
-
-export default RangeDemo;

package/es/slider/demo/reverse.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 反向
- * desc: 设置reverse可以将滑动条置反。
- */
-declare const ReverseDemo: () => JSX.Element;
-export default ReverseDemo;

package/es/slider/demo/reverse.js

@@ -1,34 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 反向
- * desc: 设置reverse可以将滑动条置反。
- */
-import React, { useState } from 'react';
-import { Slider, Switch } from '@fle-ui/next';
-
-var ReverseDemo = function ReverseDemo() {
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      reverse = _useState2[0],
-      setReverse = _useState2[1];
-
-  var handleReverseChange = function handleReverseChange(reverse) {
-    setReverse(reverse);
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
-    defaultValue: 30,
-    reverse: reverse
-  }), /*#__PURE__*/React.createElement(Slider, {
-    range: true,
-    defaultValue: [20, 50],
-    reverse: reverse
-  }), "Reversed:", ' ', /*#__PURE__*/React.createElement(Switch, {
-    size: "small",
-    checked: reverse,
-    onChange: handleReverseChange
-  }));
-};
-
-export default ReverseDemo;

package/es/slider/demo/vertical.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 垂直
- * desc: 垂直方向的 Slider。
- */
-declare const VerticalDemo: () => JSX.Element;
-export default VerticalDemo;

package/es/slider/demo/vertical.js

@@ -1,47 +0,0 @@
-/**
- * title: 垂直
- * desc: 垂直方向的 Slider。
- */
-import React from 'react';
-import { Slider } from '@fle-ui/next';
-
-var VerticalDemo = function VerticalDemo() {
-  var style = {
-    display: 'inline-block',
-    height: 300,
-    marginLeft: 70
-  };
-  var marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-      style: {
-        color: '#f50'
-      },
-      label: /*#__PURE__*/React.createElement("strong", null, "100\xB0C")
-    }
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Slider, {
-    vertical: true,
-    defaultValue: 30
-  })), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Slider, {
-    vertical: true,
-    range: true,
-    step: 10,
-    defaultValue: [20, 50]
-  })), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Slider, {
-    vertical: true,
-    range: true,
-    marks: marks,
-    defaultValue: [26, 37]
-  })));
-};
-
-export default VerticalDemo;