shineout 1.12.2 → 1.12.3

package/esm/Slider/styles/slider.less

@@ -0,0 +1,346 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@slider-prefix: ~'@{so-prefix}-slider';
+
+.@{slider-prefix} {
+  position: relative;
+  padding: 20px 10px;
+  user-select: none;
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+    text-align: start;
+  }
+
+  &-background {
+    height: @slider-height;
+    background: @slider-bg-color;
+    border-radius: @slider-border-radius;
+  }
+
+  &-inner {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    left: 10px;
+    height: @slider-height;
+    cursor: pointer;
+  }
+
+  &-bar {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    width: 100%;
+    height: @slider-height;
+
+    .@{slider-prefix}-bar-bg {
+      height: 100%;
+      background: @slider-bar-bgc;
+      border-radius: @slider-border-radius;
+    }
+
+    .@{slider-prefix}-indicator {
+      z-index: 100;
+      box-shadow: @slider-indicator-box-shadow;
+    }
+
+    .@{slider-prefix}-result {
+      position: absolute;
+      right: 0;
+      bottom: @slider-value-bottom;
+      display: none;
+      padding: 0 4px;
+      background: #fff;
+      border-radius: 2px;
+      font-size: 12px;
+      transform: translate(50%, 0);
+      .@{slider-prefix}-rtl & {
+        right: auto;
+        left: 0;
+        transform: translate(-50%, 0);
+      }
+
+      &:after {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        border-width: 3px 3px 0 3px;
+        border-style: solid;
+        border-color: #fff transparent transparent transparent;
+        content: ' ';
+        transform: translate(-50%, 0);
+        .@{slider-prefix}-rtl & {
+          right: 50%;
+          left: auto;
+          transform: translate(50%, 0);
+        }
+      }
+
+      &.@{slider-prefix}-show {
+        display: block;
+      }
+    }
+  }
+
+  &:hover .@{slider-prefix}-result {
+    display: block;
+  }
+
+  &-indicator {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: @slider-indicator-size;
+    height: @slider-indicator-size;
+    border: solid 2px @slider-active-color;
+    background: @slider-indicator-bg;
+    border-radius: @slider-indicator-size-half;
+    cursor: pointer;
+    transform: translate(50%, -50%);
+    transition: background 0.15s ease-in-out;
+    .@{slider-prefix}-rtl & {
+      right: auto;
+      left: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover {
+      background-color: @colors-primary;
+    }
+  }
+
+  &-disabled {
+    .@{slider-prefix}-background {
+      background: @slider-disabled-bar-bg;
+    }
+
+    .@{slider-prefix}-inner {
+      cursor: not-allowed;
+    }
+
+    .@{slider-prefix}-indicator {
+      border: solid 2px @slider-disbaled-indicator-border-color;
+      background: @slider-disbaled-indicator-bg;
+      cursor: not-allowed;
+    }
+  }
+
+  &-right {
+    z-index: 10;
+    right: 0;
+    .@{slider-prefix}-rtl &{
+      left: 0;
+      right: auto;
+    }
+
+    .@{slider-prefix}-indicator {
+      right: auto;
+      left: 0;
+      transform: translate(-50%, -50%);
+      .@{slider-prefix}-rtl &{
+        right: 0;
+        left: auto;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .@{slider-prefix}-result {
+      right: auto;
+      left: 0;
+      transform: translate(-50%, 0);
+      .@{slider-prefix}-rtl &{
+        right: 0;
+        left: auto;
+        transform: translate(50%, 0);
+      }
+    }
+  }
+
+  &-scale {
+    display: flex;
+    visibility: hidden;
+
+    &.@{slider-prefix}-show {
+      visibility: visible;
+    }
+
+    div {
+      position: relative;
+      display: block;
+      flex: 1;
+      padding-top: 12px;
+
+      &:last-child {
+        flex: 0;
+      }
+
+      &:before {
+        position: absolute;
+        top: 5px;
+        left: -1px;
+        height: 6px;
+        border-left: solid 1px #ccc;
+        content: ' ';
+        .@{slider-prefix}-rtl & {
+          right: -1px;
+          left: auto;
+        }
+      }
+
+
+      span {
+        position: absolute;
+        font-size: 12px;
+        transform: translate(-50%, 0) scale(0.9);
+        .@{slider-prefix}-rtl & {
+          transform: translate(50%, 0) scale(0.9);
+        }
+      }
+    }
+  }
+
+  &:hover &-scale {
+    visibility: visible;
+  }
+
+  &-vertical {
+    display: inline-flex;
+    padding: 10px 70px 10px 20px;
+    &.@{slider-prefix}-rtl {
+      padding: 10px 20px 10px 70px;;
+    }
+
+    .@{slider-prefix}-background {
+      width: @slider-height;
+      height: 100%;
+    }
+
+    .@{slider-prefix}-inner {
+      top: 10px;
+      right: auto;
+      bottom: 10px;
+      left: 20px;
+      display: inline-flex;
+      width: @slider-height;
+      height: auto;
+      .@{slider-prefix}-rtl& {
+        right: 20px;
+        left: auto;
+      }
+    }
+
+    .@{slider-prefix}-result {
+      right: auto;
+      bottom: 0;
+      left: 15px;
+      padding: 1px 6px;
+      background: #fff;
+      transform: translate(0, 50%);
+      .@{slider-prefix}-rtl& {
+        right: 15px;
+        left: auto;
+        transform: translate(0, 50%);
+      }
+
+      &:after {
+        top: 50%;
+        right: 100%;
+        left: auto;
+        border-width: 3px 3px 3px 0;
+        border-color: transparent #fff transparent transparent;
+        transform: translate(0, -50%);
+        .@{slider-prefix}-rtl& {
+          right: auto;
+          left: 100%;
+          transform: translate(0, -50%);
+          border-width: 3px 0 3px 3px;
+        }
+      }
+    }
+
+    .@{slider-prefix}-scale {
+      display: inline-flex;
+      flex: 1;
+      flex-direction: column-reverse;
+      &-ltr {
+        margin-left: 15px;
+      }
+      &-rtl {
+        margin-right: 15px;
+      }
+
+      div {
+        padding-top: 0;
+
+        &:before {
+          top: 0px;
+          left: -10px;
+          width: 6px;
+          height: 0px;
+          border-top: solid 1px #ccc;
+          border-left: 0;
+          .@{slider-prefix}-rtl& {
+            left: auto;
+            right: -10px;
+          }
+
+        }
+
+        span {
+          transform: translate(0, -50%) scale(0.9);
+        }
+
+        &:first-child {
+          flex: 0;
+        }
+
+        &:last-child {
+          flex: 1;
+        }
+      }
+    }
+  }
+
+  &-bottom {
+    top: auto;
+    bottom: 0;
+
+    .@{slider-prefix}-indicator {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      .@{slider-prefix}-rtl & {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    .@{slider-prefix}-result {
+      top: 0;
+      bottom: auto;
+      transform: translate(0, -50%);
+      .@{slider-prefix}-rtl & {
+        transform: translate(0, -50%);
+      }
+    }
+  }
+
+  &-top {
+    .@{slider-prefix}-indicator {
+      top: auto;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%);
+      .@{slider-prefix}-rtl & {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, 50%);
+      }
+    }
+  }
+}

package/esm/Slider/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function value2per(value: number, scale: number[]): number;
+export declare function per2value(per: number, scale: number[], step?: number): number;

package/esm/Slider/utils.js

@@ -0,0 +1,28 @@
+import { toPrecision } from '../utils/numbers';
+export function value2per(value, scale) {
+  var range = scale.length - 1;
+  var ps = 0;
+  scale.forEach(function (s, i) {
+    if (value > s) ps = i;
+  }); // end
+
+  if (ps >= range) return 1;
+  var min = scale[ps];
+  var max = scale[ps + 1];
+  return (ps + (value - min) / (max - min)) / range;
+}
+export function per2value(per, scale, step) {
+  if (step === void 0) {
+    step = 1;
+  }
+
+  var range = scale.length - 1;
+  if (step === 0) return scale[Math.round(per * range)];
+  if (per >= 1) return scale[range];
+  var ps = Math.floor(per * range);
+  var min = scale[ps];
+  var max = scale[ps + 1];
+  var count = (max - min) / step;
+  var sper = (per - ps / range) * range;
+  return toPrecision(min + Math.round(sper * count) * step);
+}

package/esm/Spin/Multiple.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TypeSpinProps } from './Props';
+export declare function DoubleBounce(props: TypeSpinProps): JSX.Element;
+export declare function Wave(prop: TypeSpinProps): JSX.Element;
+export declare function CubeGrid(props: TypeSpinProps): JSX.Element;
+export declare function ChasingRing(prop: TypeSpinProps): JSX.Element;
+export declare function Default(prop: TypeSpinProps): JSX.Element;
+export declare const ScaleCircle: (opt: TypeSpinProps) => JSX.Element;
+export declare const FadingCircle: (opt: TypeSpinProps) => JSX.Element;
+export declare function ThreeBounce(prop: TypeSpinProps): JSX.Element;
+export declare function ChasingDots(props: TypeSpinProps): JSX.Element;
+export declare function FourDots(props: TypeSpinProps): JSX.Element;

package/esm/Spin/Multiple.js

@@ -0,0 +1,179 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Spin from './Spin';
+import { defaultClass, chasingDotsClass, doubleBounceClass, waveClass, cubeGridClass, chasingRingClass, scaleCircleClass, threeBounceClass, fourDotsClass } from './styles';
+import { formatSize } from './util';
+
+function simpleRender(classname, i, _ref) {
+  var color = _ref.color,
+      itemStyle = _ref.itemStyle;
+  var style = Object.assign({
+    backgroundColor: color
+  }, itemStyle);
+  return React.createElement("div", {
+    key: i,
+    style: style,
+    className: classname('item')
+  });
+}
+
+export function DoubleBounce(props) {
+  return React.createElement(Spin, _extends({}, props, {
+    count: 2,
+    spinClass: doubleBounceClass,
+    render: simpleRender
+  }));
+}
+export function Wave(prop) {
+  var _formatSize = formatSize(prop.size),
+      value = _formatSize.value,
+      unit = _formatSize.unit;
+
+  var width = value / 7;
+  var margin = value / 20;
+
+  if (unit === 'px') {
+    width = Math.floor(width);
+    margin = Math.ceil(margin) + unit;
+  } else {
+    margin = '2px';
+  }
+
+  return React.createElement(Spin, _extends({}, prop, {
+    itemStyle: {
+      width: width + unit,
+      marginRight: margin
+    },
+    count: 5,
+    spinClass: waveClass,
+    render: simpleRender
+  }));
+}
+export function CubeGrid(props) {
+  return React.createElement(Spin, _extends({}, props, {
+    count: 9,
+    spinClass: cubeGridClass,
+    render: simpleRender
+  }));
+}
+export function ChasingRing(prop) {
+  var _formatSize2 = formatSize(prop.size),
+      value = _formatSize2.value,
+      unit = _formatSize2.unit;
+
+  var borderWidth = "" + value / 10 + unit;
+  var style = {
+    borderWidth: borderWidth,
+    borderTopColor: prop.color,
+    backgroundColor: 'transparent'
+  };
+  return React.createElement(Spin, _extends({}, prop, {
+    count: 4,
+    itemStyle: style,
+    spinClass: chasingRingClass,
+    render: simpleRender
+  }));
+} // =============================================================================
+
+function multRenderDiv(className, i, _ref2) {
+  var color = _ref2.color,
+      itemStyle = _ref2.itemStyle,
+      itemClass = _ref2.itemClass;
+  var style = Object.assign({
+    backgroundColor: color
+  }, itemStyle);
+  return React.createElement("div", {
+    key: i,
+    className: className('item', itemClass)
+  }, React.createElement("div", {
+    style: style
+  }));
+}
+
+export function Default(prop) {
+  var _formatSize3 = formatSize(prop.size),
+      value = _formatSize3.value,
+      unit = _formatSize3.unit;
+
+  var size = Math.ceil(value / 12.5) + unit;
+  return React.createElement(Spin, _extends({}, prop, {
+    count: 12,
+    itemStyle: {
+      width: size,
+      borderRadius: size
+    },
+    spinClass: defaultClass,
+    render: multRenderDiv
+  }));
+} // =============================================================================
+
+function multRenderSvg(className, i, _ref3) {
+  var color = _ref3.color,
+      itemSize = _ref3.itemSize,
+      itemClass = _ref3.itemClass;
+  return React.createElement("div", {
+    key: i,
+    className: className('item', itemClass)
+  }, React.createElement("svg", {
+    width: itemSize,
+    height: itemSize,
+    viewBox: "0 0 100 100"
+  }, React.createElement("circle", {
+    fill: color,
+    cx: 50,
+    cy: 50,
+    r: 50
+  })));
+}
+
+function twelveCircle(prop, type) {
+  var _formatSize4 = formatSize(prop.size),
+      value = _formatSize4.value,
+      unit = _formatSize4.unit;
+
+  var itemSize = (value / 7).toFixed(3) + unit;
+  return React.createElement(Spin, _extends({}, prop, {
+    count: 12,
+    itemSize: itemSize,
+    itemClass: type,
+    spinClass: scaleCircleClass,
+    render: multRenderSvg
+  }));
+}
+
+export var ScaleCircle = function ScaleCircle(opt) {
+  return twelveCircle(opt, 'scale');
+};
+export var FadingCircle = function FadingCircle(opt) {
+  return twelveCircle(opt, 'fade');
+};
+export function ThreeBounce(prop) {
+  var _formatSize5 = formatSize(prop.size),
+      value = _formatSize5.value,
+      unit = _formatSize5.unit;
+
+  return React.createElement(Spin, _extends({}, prop, {
+    count: 3,
+    style: {
+      width: value * 2 + unit,
+      height: 'auto'
+    },
+    itemSize: value / 2 + unit,
+    spinClass: threeBounceClass,
+    render: multRenderSvg
+  }));
+}
+export function ChasingDots(props) {
+  return React.createElement(Spin, _extends({}, props, {
+    count: 2,
+    spinClass: chasingDotsClass,
+    render: multRenderSvg
+  }));
+}
+export function FourDots(props) {
+  return React.createElement(Spin, _extends({}, props, {
+    count: 4,
+    spinClass: fourDotsClass,
+    render: multRenderSvg
+  }));
+}

package/esm/Spin/Props.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ConfigType } from '../hoc/Props';
+export declare type SpinName = 'default' | 'chasing-dots' | 'cube-grid' | 'double-bounce' | 'fading-circle' | 'four-dots' | 'plane' | 'pulse' | 'ring' | 'scale-circle' | 'three-bounce' | 'wave' | 'chasing-ring';
+export interface OriginSpinProps {
+    wrapperClass?: string;
+    wrapperStyle?: CSSProperties;
+    size: number | string;
+    color?: string;
+    spinClass: (...args: (string | undefined)[]) => string;
+    render?: (spinClass: OriginSpinProps['spinClass'], i: number, props: OriginSpinProps) => ReactNode;
+    style?: CSSProperties;
+    count?: number;
+    itemStyle?: CSSProperties;
+    itemClass?: string;
+    itemSize?: number | string;
+}
+export interface TypeSpinProps extends Omit<OriginSpinProps, 'style' | 'spinClass' | 'count' | 'render' | 'itemStyle' | 'itemClass' | 'itemSize'> {
+}
+export interface BaseSpinProps extends Omit<TypeSpinProps, 'size'> {
+    style?: CSSProperties;
+    className?: string;
+    name?: SpinName;
+    tip?: ReactElement | string;
+    children?: ReactElement | string;
+    size?: number | string;
+    loading?: boolean;
+}
+export declare type SpinProps = ConfigType<BaseSpinProps>;

package/esm/Spin/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/Spin/Simple.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TypeSpinProps } from './Props';
+export declare function Ring(obj: TypeSpinProps): JSX.Element;
+export declare function Plane(obj: TypeSpinProps): JSX.Element;
+export declare function Pulse(obj: TypeSpinProps): JSX.Element;

package/esm/Spin/Simple.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Spin from './Spin';
+import { ringClass, planeClass, pulseClass } from './styles';
+import { formatSize } from './util';
+export function Ring(obj) {
+  var _formatSize = formatSize(obj.size),
+      value = _formatSize.value,
+      unit = _formatSize.unit;
+
+  var style = {
+    borderWidth: value / 10 + unit,
+    borderTopColor: obj.color
+  };
+  return React.createElement(Spin, _extends({}, obj, {
+    count: 0,
+    style: style,
+    spinClass: ringClass
+  }));
+}
+export function Plane(obj) {
+  var style = {
+    backgroundColor: obj.color
+  };
+  return React.createElement(Spin, _extends({}, obj, {
+    count: 0,
+    style: style,
+    spinClass: planeClass
+  }));
+}
+export function Pulse(obj) {
+  var style = {
+    backgroundColor: obj.color
+  };
+  return React.createElement(Spin, _extends({}, obj, {
+    count: 0,
+    style: style,
+    spinClass: pulseClass
+  }));
+}

package/esm/Spin/Spin.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { OriginSpinProps } from './Props';
+export default function Spin(props: OriginSpinProps): JSX.Element;

package/esm/Spin/Spin.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classname from 'classnames';
+import { range } from '../utils/numbers';
+export default function Spin(props) {
+  var spinClass = props.spinClass,
+      _props$count = props.count,
+      count = _props$count === void 0 ? 0 : _props$count,
+      render = props.render,
+      size = props.size,
+      wrapperClass = props.wrapperClass,
+      wrapperStyle = props.wrapperStyle;
+  var style = Object.assign({
+    width: size,
+    height: size
+  }, props.style, wrapperStyle);
+  var className = classname(spinClass('_'), wrapperClass);
+
+  if (count < 1 || !render) {
+    return React.createElement("div", {
+      style: style,
+      className: className
+    });
+  }
+
+  return React.createElement("div", {
+    style: style,
+    className: className
+  }, range(count + 1, 1).map(function (i) {
+    return render(spinClass, i, props);
+  }));
+}