shineout 1.12.2 → 1.12.3

package/esm/Spin/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BaseSpinProps } from './Props';
+declare const _default: {
+    new (props: BaseSpinProps): {
+        handleUpdate: () => void;
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<BaseSpinProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<BaseSpinProps>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseSpinProps>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<BaseSpinProps>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<BaseSpinProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseSpinProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<BaseSpinProps>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseSpinProps>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/esm/Spin/index.js

@@ -0,0 +1,96 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import React from 'react';
+import classnames from 'classnames';
+import config from '../config';
+import configable from '../hoc/config';
+import { spinClass } from './styles';
+import { ChasingDots, DoubleBounce, ThreeBounce, ScaleCircle, FadingCircle, CubeGrid, ChasingRing, Wave, FourDots, Default } from './Multiple';
+import { Ring, Plane, Pulse } from './Simple';
+var spins = {
+  plane: Plane,
+  pulse: Pulse,
+  ring: Ring,
+  wave: Wave,
+  default: Default,
+  'chasing-ring': ChasingRing,
+  'chasing-dots': ChasingDots,
+  'cube-grid': CubeGrid,
+  'double-bounce': DoubleBounce,
+  'fading-circle': FadingCircle,
+  'four-dots': FourDots,
+  'scale-circle': ScaleCircle,
+  'three-bounce': ThreeBounce
+};
+
+function renderContainer(Loading, props) {
+  var loading = props.loading,
+      children = props.children;
+  return React.createElement("div", {
+    className: spinClass('container', loading && 'show')
+  }, React.createElement("div", {
+    className: spinClass('content')
+  }, children), loading && React.createElement("div", {
+    className: spinClass('loading')
+  }, Loading));
+}
+
+function getName(name) {
+  if (name !== undefined) return name;
+  if (config.spin !== undefined) return config.spin;
+  return 'default';
+}
+
+var Spin = function Spin(props) {
+  var children = props.children,
+      style = props.style,
+      className = props.className,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 40 : _props$size,
+      _props$color = props.color,
+      color = _props$color === void 0 ? '#6c757d' : _props$color,
+      tip = props.tip,
+      rest = _objectWithoutPropertiesLoose(props, ["children", "style", "className", "size", "color", "tip"]);
+
+  var name = getName(props.name);
+  var Component = spins[name];
+
+  if (!Component) {
+    console.warn("Spin type '" + name + "' not existed.");
+    return null;
+  }
+
+  var wrapperStyle = Object.assign({
+    color: color
+  }, style);
+  var Content;
+
+  if (!('tip' in props)) {
+    Content = React.createElement(Component, _extends({
+      size: size,
+      color: color
+    }, rest, {
+      wrapperStyle: wrapperStyle,
+      wrapperClass: className
+    }));
+  } else {
+    Content = React.createElement("div", {
+      style: wrapperStyle,
+      className: classnames(spinClass('_'), className)
+    }, React.createElement(Component, _extends({
+      size: size,
+      color: color
+    }, rest)), tip && React.createElement("div", {
+      className: spinClass('tip'),
+      style: {
+        color: color
+      }
+    }, typeof tip === 'string' ? React.createElement("span", null, tip) : tip));
+  }
+
+  if (children) return renderContainer(Content, props);
+  return Content;
+};
+
+Spin.displayName = 'ShineoutSpin';
+export default configable(Spin, 'spin');

package/esm/Spin/interface.d.ts

@@ -0,0 +1 @@
+export { SpinProps as Props } from './Props';

package/esm/Spin/interface.js

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

package/esm/Spin/styles/chasing-dots.less

@@ -0,0 +1,47 @@
+@import '../../styles/variables.less';
+
+@chasing-dots-prefix: ~'@{so-prefix}-chasing-dots';
+
+.@{chasing-dots-prefix} {
+  @duration: 2s;
+  @keyframesRotate: ~'@{chasing-dots-prefix}-rotate';
+  @keyframesBounce: ~'@{chasing-dots-prefix}-bounce';
+
+  position: relative;
+  margin: auto;
+  animation: @keyframesRotate @duration infinite linear;
+  text-align: center;
+
+  @keyframes @keyframesRotate {
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+
+  @keyframes @keyframesBounce {
+    0%,
+    100% {
+      transform: scale3d(0, 0, 1);
+    }
+
+    50% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  &-item {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    width: 60%;
+    height: 60%;
+    animation: @keyframesBounce @duration infinite ease-in-out;
+    border-radius: 100%;
+
+    &:last-child {
+      top: auto;
+      bottom: 0;
+      animation-delay: -(@duration / 2);
+    }
+  }
+}

package/esm/Spin/styles/chasing-ring.less

@@ -0,0 +1,112 @@
+@import '../../styles/variables.less';
+
+@chasing-ring-prefix: ~'@{so-prefix}-chasing-ring';
+
+.@{chasing-ring-prefix} {
+  @animationDuration: 2s;
+
+  position: relative;
+  margin: auto;
+  // border-radius: 50%;
+  // animation: @loading 2.3s linear infinite;
+
+  @loading: ~'@{chasing-ring-prefix}-loading';
+  @loading1: ~'@{chasing-ring-prefix}-loading1';
+  @loading2: ~'@{chasing-ring-prefix}-loading2';
+  @loading3: ~'@{chasing-ring-prefix}-loading3';
+  @loading4: ~'@{chasing-ring-prefix}-loading4';
+
+  @keyframes @loading {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+
+  @keyframes @loading1 {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    44% {
+      transform: rotateZ(225deg);
+    }
+
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
+
+  @keyframes @loading2 {
+    0% {
+      transform: rotateZ(75deg);
+    }
+
+    44% {
+      transform: rotateZ(225deg);
+    }
+
+    100% {
+      transform: rotateZ(435deg);
+    }
+  }
+
+  @keyframes @loading3 {
+    0% {
+      transform: rotateZ(150deg);
+    }
+
+    44% {
+      transform: rotateZ(225deg);
+    }
+
+    100% {
+      transform: rotateZ(510deg);
+    }
+  }
+
+  @keyframes @loading4 {
+    0% {
+      transform: rotateZ(225deg);
+    }
+
+    44% {
+      transform: rotateZ(225deg);
+    }
+
+    100% {
+      transform: rotateZ(585deg);
+    }
+  }
+
+  &-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: solid 1px transparent;
+    border-radius: 100%;
+    transform-origin: 50% 50%;
+  }
+
+  &-item:nth-child(1) {
+    animation: @loading1 @animationDuration infinite;
+  }
+
+  &-item:nth-child(2) {
+    animation: @loading2 @animationDuration infinite;
+  }
+
+  &-item:nth-child(3) {
+    animation: @loading3 @animationDuration infinite;
+  }
+
+  &-item:nth-child(4) {
+    animation: @loading4 @animationDuration infinite;
+  }
+}

package/esm/Spin/styles/cube-grid.less

@@ -0,0 +1,65 @@
+@import '../../styles/variables.less';
+
+@cube-grid-prefix: ~'@{so-prefix}-cube-grid';
+
+.@{cube-grid-prefix} {
+  @delayRange: 0.4s;
+  @keyframesName: ~'@{cube-grid-prefix}-spin';
+
+  margin: auto;
+
+  &-item {
+    width: 33.33333%;
+    height: 33.3333%;
+    animation: @keyframesName 1.3s infinite ease-in-out;
+    float: left;
+  }
+
+  @keyframes @keyframesName {
+    0%,
+    70%,
+    100% {
+      transform: scale3D(1, 1, 1);
+    }
+
+    35% {
+      transform: scale3D(0, 0, 1);
+    }
+  }
+
+  &-item:nth-child(1) {
+    animation-delay: @delayRange * 0.5;
+  }
+
+  &-item:nth-child(2) {
+    animation-delay: @delayRange * 0.75;
+  }
+
+  &-item:nth-child(3) {
+    animation-delay: @delayRange;
+  }
+
+  &-item:nth-child(4) {
+    animation-delay: @delayRange * 0.25;
+  }
+
+  &-item:nth-child(5) {
+    animation-delay: @delayRange * 0.5;
+  }
+
+  &-item:nth-child(6) {
+    animation-delay: @delayRange * 0.75;
+  }
+
+  &-item:nth-child(7) {
+    animation-delay: 0s;
+  }
+
+  &-item:nth-child(8) {
+    animation-delay: @delayRange * 0.25;
+  }
+
+  &-item:nth-child(9) {
+    animation-delay: @delayRange * 0.5;
+  }
+}

package/esm/Spin/styles/default.less

@@ -0,0 +1,77 @@
+@import '../../styles/variables.less';
+
+@spin-default-prefix: ~'@{so-prefix}-spin-default';
+
+.@{spin-default-prefix} {
+  @circleCount: 12;
+  @animationDuration: 1s;
+  @keyframesScale: ~'@{spin-default-prefix}-scale';
+  @keyframesFade: ~'@{spin-default-prefix}-fade';
+
+  @keyframes @keyframesScale {
+    0%,
+    80%,
+    100% {
+      transform: scale3d(0, 0, 1);
+    }
+
+    40% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  @keyframes @keyframesFade {
+    0%,
+    39%,
+    100% {
+      opacity: 0.2;
+    }
+
+    40% {
+      opacity: 1;
+    }
+  }
+
+  position: relative;
+  margin: auto;
+
+  &-item {
+    position: absolute;
+    top: 0;
+    left: 45%;
+    width: 10%;
+    height: 50%;
+    transform-origin: 50% 100%;
+
+    div {
+      height: 55%;
+      margin: 0 auto;
+      animation: @keyframesFade @animationDuration infinite ease-in-out both;
+    }
+  }
+
+  &-scale svg,
+  &-scale div {
+    animation: @keyframesScale @animationDuration infinite ease-in-out both;
+  }
+
+  &-fade svg,
+  &-fade div {
+    animation: @keyframesFade @animationDuration infinite ease-in-out both;
+  }
+
+  .loop(@i) when (@i > 1) {
+    .loop(@i - 1);
+
+    .@{spin-default-prefix}-item:nth-child(@{i}) {
+      transform: rotateZ((360deg / @circleCount) * (@i - 1));
+
+      svg,
+      div {
+        animation-delay: -@animationDuration + (@animationDuration / @circleCount * (@i - 1));
+      }
+    }
+  }
+
+  .loop(@circleCount);
+}

package/esm/Spin/styles/double-bounce.less

@@ -0,0 +1,36 @@
+@import '../../styles/variables.less';
+
+@double-bounce-prefix: ~'@{so-prefix}-double-bounce';
+
+.@{double-bounce-prefix} {
+  @keyframesName: ~'@{double-bounce-prefix}-spin';
+
+  position: relative;
+  margin: auto;
+
+  @keyframes @keyframesName {
+    0%,
+    100% {
+      transform: scale3d(0, 0, 1);
+    }
+
+    50% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  &-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    animation: @keyframesName 2s infinite ease-in-out;
+    border-radius: 50%;
+    opacity: 0.6;
+
+    &:last-child {
+      animation-delay: -1s;
+    }
+  }
+}

package/esm/Spin/styles/four-dots.less

@@ -0,0 +1,73 @@
+@import '../../styles/variables.less';
+
+@four-dots-prefix: ~'@{so-prefix}-four-dots';
+
+.@{four-dots-prefix} {
+  @animationDurantion: 1.6s;
+  @keyframesRotate: ~'@{four-dots-prefix}-rotate';
+  @keyframesFade: ~'@{four-dots-prefix}-fade';
+
+  position: relative;
+  margin: auto;
+  animation: @keyframesRotate @animationDurantion infinite linear;
+
+  @keyframes @keyframesRotate {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    100% {
+      transform: rotateZ(359deg);
+    }
+  }
+
+  @keyframes @keyframesFade {
+    0% {
+      opacity: 0.2;
+    }
+
+    50% {
+      opacity: 0.9;
+    }
+
+    100% {
+      opacity: 0.2;
+    }
+  }
+
+  &-item {
+    position: absolute;
+    width: 32%;
+    height: 32%;
+    animation: @keyframesFade @animationDurantion linear infinite;
+    line-height: 0;
+    opacity: 0.2;
+
+    div {
+      border-radius: 100%;
+    }
+
+    &:nth-child(1) {
+      top: 10%;
+      left: 10%;
+    }
+
+    &:nth-child(2) {
+      top: 10%;
+      right: 10%;
+      animation-delay: (@animationDurantion / 4);
+    }
+
+    &:nth-child(3) {
+      right: 10%;
+      bottom: 10%;
+      animation-delay: (@animationDurantion / 2);
+    }
+
+    &:nth-child(4) {
+      bottom: 10%;
+      left: 10%;
+      animation-delay: (@animationDurantion / 4) * 3;
+    }
+  }
+}

package/esm/Spin/styles/index.d.ts

@@ -0,0 +1,14 @@
+import '../../styles/normalize.less';
+export declare const spinClass: (...args: any) => string;
+export declare const defaultClass: (...args: any) => string;
+export declare const ringClass: (...args: any) => string;
+export declare const planeClass: (...args: any) => string;
+export declare const pulseClass: (...args: any) => string;
+export declare const waveClass: (...args: any) => string;
+export declare const chasingDotsClass: (...args: any) => string;
+export declare const doubleBounceClass: (...args: any) => string;
+export declare const cubeGridClass: (...args: any) => string;
+export declare const chasingRingClass: (...args: any) => string;
+export declare const scaleCircleClass: (...args: any) => string;
+export declare const threeBounceClass: (...args: any) => string;
+export declare const fourDotsClass: (...args: any) => string;

package/esm/Spin/styles/index.js

@@ -0,0 +1,28 @@
+import '../../styles/normalize.less';
+import spinLess from './spin.less';
+import genaration from '../../utils/classname';
+import defaultLess from './default.less';
+import ringLess from './ring.less';
+import planeLess from './plane.less';
+import pulseLess from './pulse.less';
+import waveLess from './wave.less';
+import chasingDotsLess from './chasing-dots.less';
+import doubleBounceLess from './double-bounce.less';
+import cubeGridLess from './cube-grid.less';
+import chasingRingLess from './chasing-ring.less';
+import scaleCircleLess from './scale-circle.less';
+import threeBounceLess from './three-bounce.less';
+import fourDotsLess from './four-dots.less';
+export var spinClass = genaration(spinLess, 'spin');
+export var defaultClass = genaration(defaultLess, 'spin-default');
+export var ringClass = genaration(ringLess, 'spin-ring');
+export var planeClass = genaration(planeLess, 'spin-plane');
+export var pulseClass = genaration(pulseLess, 'spin-pulse');
+export var waveClass = genaration(waveLess, 'spin-wave');
+export var chasingDotsClass = genaration(chasingDotsLess, 'chasing-dots');
+export var doubleBounceClass = genaration(doubleBounceLess, 'double-bounce');
+export var cubeGridClass = genaration(cubeGridLess, 'cube-grid');
+export var chasingRingClass = genaration(chasingRingLess, 'chasing-ring');
+export var scaleCircleClass = genaration(scaleCircleLess, 'scale-circle');
+export var threeBounceClass = genaration(threeBounceLess, 'three-bounce');
+export var fourDotsClass = genaration(fourDotsLess, 'four-dots');

package/esm/Spin/styles/plane.less

@@ -0,0 +1,24 @@
+@import '../../styles/variables.less';
+
+@spin-plane-prefix: ~'@{so-prefix}-spin-plane';
+
+.@{spin-plane-prefix} {
+  @keyframesName: ~'@{spin-plane-prefix}-spin';
+
+  margin: auto;
+  animation: @keyframesName 1s infinite linear;
+
+  @keyframes @keyframesName {
+    0% {
+      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    }
+
+    50% {
+      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    }
+
+    100% {
+      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    }
+  }
+}

package/esm/Spin/styles/pulse.less

@@ -0,0 +1,22 @@
+@import '../../styles/variables.less';
+
+@spin-pulse-prefix: ~'@{so-prefix}-spin-pulse';
+
+.@{spin-pulse-prefix} {
+  @keyframesName: ~'@{spin-pulse-prefix}-scale';
+
+  margin: auto;
+  animation: @keyframesName 1s infinite ease-in-out;
+  border-radius: 100%;
+
+  @keyframes @keyframesName {
+    0% {
+      transform: scale3d(0, 0, 1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+}

package/esm/Spin/styles/ring.less

@@ -0,0 +1,23 @@
+@import '../../styles/variables.less';
+
+@spin-ring-prefix: ~'@{so-prefix}-spin-ring';
+
+.@{spin-ring-prefix} {
+  @keyframesName: ~'@{spin-ring-prefix}-spin';
+
+  margin: auto;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.05);
+  animation: @keyframesName 1s infinite linear;
+  border-radius: 50%;
+
+  @keyframes @keyframesName {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    100% {
+      transform: rotateZ(359deg);
+    }
+  }
+}