shineout 1.12.3 → 1.12.4-beta.2

package/esm/Slider/styles/slider.less

@@ -1,346 +0,0 @@
-@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

@@ -1,2 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,179 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

package/esm/Spin/Simple.d.ts

@@ -1,5 +0,0 @@
-/// <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

@@ -1,40 +0,0 @@
-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

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

package/esm/Spin/Spin.js

@@ -1,31 +0,0 @@
-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);
-  }));
-}