shineout 1.12.2 → 1.12.3

package/esm/Spin/styles/scale-circle.less

@@ -0,0 +1,74 @@
+@import '../../styles/variables.less';
+
+@scale-circle-prefix: ~'@{so-prefix}-scale-circle';
+
+.@{scale-circle-prefix} {
+  @circleCount: 12;
+  @animationDuration: 1.2s;
+  @keyframesScale: ~'@{scale-circle-prefix}-scale';
+  @keyframesFade: ~'@{scale-circle-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;
+    }
+
+    40% {
+      opacity: 1;
+    }
+  }
+
+  position: relative;
+  margin: auto;
+
+  &-item {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+
+    div {
+      border-radius: 100%;
+    }
+  }
+
+  &-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);
+
+    .@{scale-circle-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/spin.less

@@ -0,0 +1,57 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@spin-prefix: ~'@{so-prefix}-spin';
+
+.@{spin-prefix} {
+  margin: auto;
+  line-height: 1.5715;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  > div {
+    margin: unset;
+  }
+  &-tip {
+    margin: auto;
+    text-align: center;
+    padding-top: 5px;
+  }
+  &-container {
+    position: relative;
+    .@{spin-prefix}-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 4;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .@{spin-prefix}-content {
+      position: relative;
+      // z-index: 2;
+      &:after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 3;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        opacity: 0;
+        transition: all .3s;
+        content: '';
+        pointer-events: none;
+      }
+    }
+  }
+  &-show &-content:after {
+    opacity: .5;
+  }
+}

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

@@ -0,0 +1,41 @@
+@import '../../styles/variables.less';
+
+@three-bounce-prefix: ~'@{so-prefix}-three-bounce';
+
+.@{three-bounce-prefix} {
+  @animationDuration: 1.4s;
+  @delayRange: 0.32s;
+  @keyframesBounce: ~'@{three-bounce-prefix}-bounce';
+
+  margin: auto;
+  text-align: center;
+
+  @keyframes @keyframesBounce {
+    0%,
+    80%,
+    100% {
+      transform: scale3d(0, 0, 1);
+    }
+
+    40% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  &-item {
+    display: inline-block;
+    animation: @keyframesBounce @animationDuration ease-in-out 0s infinite both;
+
+    div {
+      border-radius: 100%;
+    }
+  }
+
+  &-item:nth-child(1) {
+    animation-delay: -@delayRange;
+  }
+
+  &-item:nth-child(2) {
+    animation-delay: -(@delayRange / 2);
+  }
+}

package/esm/Spin/styles/wave.less

@@ -0,0 +1,48 @@
+@import '../../styles/variables.less';
+
+@spin-wave-prefix: ~'@{so-prefix}-spin-wave';
+
+.@{spin-wave-prefix} {
+  @itemCount: 5;
+  @animationDuration: 1.2s;
+  @delayRange: 0.4s;
+  @keyframesName: ~'@{spin-wave-prefix}-scale';
+
+  margin: auto;
+  font-size: 10px;
+  text-align: center;
+  white-space: nowrap;
+
+  @keyframes @keyframesName {
+    0%,
+    40%,
+    100% {
+      transform: scale3d(1, 0.4, 1);
+    }
+
+    20% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  &-item {
+    display: inline-block;
+    height: 100%;
+    margin-right: 2px;
+    animation: @keyframesName @animationDuration infinite ease-in-out;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .loop(@i) when (@i > 1) {
+    .loop(@i - 1);
+
+    .@{spin-wave-prefix}-item:nth-child(@{i}) {
+      animation-delay: -@animationDuration + ((@delayRange / (@itemCount - 1)) * (@i - 1));
+    }
+  }
+
+  .loop(@itemCount);
+}

package/esm/Spin/util.d.ts

@@ -0,0 +1,4 @@
+export declare function formatSize(size: string | number): {
+    value: number;
+    unit: string;
+};

package/esm/Spin/util.js

@@ -0,0 +1,7 @@
+export function formatSize(size) {
+  var ss = /^(\d+)([%|\w]*)$/.exec(String(size)) || [];
+  return {
+    value: parseFloat(ss[1]),
+    unit: ss[2] || 'px'
+  };
+}

package/esm/Sticky/Props.d.ts

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { StandardProps } from '../@types/common';
+export declare type Mode = 'top' | 'bottom';
+export interface StickyProps extends StandardProps {
+    /**
+     * Offsets from the bottom.
+     *
+     * 距离底部多少偏移量触发
+     *
+     * default: -
+     */
+    bottom?: number;
+    /**
+     * Attached target. the default is the document.body. You can pass in an HTMLElement or css selector, and the target must be an ancestor node of the Sticky component.
+     *
+     * 附着的目标，默认为document.body。可以传入HTMLElement或者css selector，target 必须为 Sticky 组件的祖先节点
+     *
+     * default: none
+     */
+    target?: string | HTMLElement;
+    /**
+     * Offsets from the top.
+     *
+     * 距离顶部多少偏移量触发
+     *
+     * default: none
+     */
+    top?: number;
+    /**
+     * use css position:sticky while target is ordered
+     *
+     * 在指定 target 下，是否采用css方式实现附着效果
+     *
+     * default: true
+     */
+    css?: boolean;
+    /**
+     * When the adsorption effect, trigger the callback
+     *
+     * 吸附效果时，触发该回调
+     *
+     * default: null
+     */
+    onChange?: (isSticky: boolean) => void;
+    /**
+     * children
+     *
+     * 子元素
+     *
+     * default: -
+     */
+    children?: ReactNode;
+    /**
+     * -
+     *
+     * 内部使用
+     *
+     * default: -
+     */
+    needResetPostion?: boolean;
+}
+export declare class Sticky extends React.Component<StickyProps, {}> {
+    render(): JSX.Element;
+}
+export declare type StickyType = typeof Sticky;

package/esm/Sticky/Props.js

@@ -0,0 +1 @@
+import React from 'react';

package/esm/Sticky/context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StickyProps } from './Props';
+export declare const Provider: React.Provider<{}>;
+export declare const consumer: (Origin: React.ComponentType<StickyProps>) => (props: StickyProps) => JSX.Element;

package/esm/Sticky/context.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import createReactContext from '../context';
+var context = createReactContext({}); // eslint-disable-next-line
+
+export var Provider = context.Provider;
+export var consumer = function consumer(Origin) {
+  return function (props) {
+    return React.createElement(context.Consumer, null, function (value) {
+      return React.createElement(Origin, _extends({}, props, value));
+    });
+  };
+};

package/esm/Sticky/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("./Props").Sticky;
+export default _default;

package/esm/Sticky/index.js

@@ -0,0 +1,361 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import { PureComponent } from '../component';
+import { getParent } from '../utils/dom/element';
+import { eventPassive } from '../utils/dom/detect';
+import { defaultProps } from '../utils/proptypes';
+import { compose } from '../utils/func';
+import { cssSupport, copyBoundingClientRect } from '../utils/dom/element';
+import { docSize } from '../utils/dom/document';
+import { consumer } from './context';
+var events = ['scroll', 'pageshow', 'load'];
+var supportSticky = cssSupport('position', 'sticky');
+
+var DefaultValue = _objectSpread({}, defaultProps, {
+  css: true
+});
+
+var Sticky =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Sticky, _PureComponent);
+
+  function Sticky(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "style", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "targetElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollTimer", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "placeholder", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "origin", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "locked", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "scrollCount", void 0);
+
+    _this.state = {};
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindOrigin = _this.bindOrigin.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindPlaceholder = _this.bindPlaceholder.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePosition = _this.handlePosition.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.style = {};
+    return _this;
+  }
+
+  var _proto = Sticky.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    var target = this.props.target;
+    this.targetElement = getParent(this.element, target);
+    this.handlePosition();
+    this.bindScroll();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (!prevProps.needResetPostion && this.props.needResetPostion) {
+      this.setPosition();
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.unbindScroll();
+    if (this.scrollTimer) clearTimeout(this.scrollTimer);
+  };
+
+  _proto.getStyle = function getStyle(mode, offset, left, width) {
+    var _style;
+
+    var _this$props$style$zIn = this.props.style.zIndex,
+        zIndex = _this$props$style$zIn === void 0 ? 900 : _this$props$style$zIn;
+    var css = this.props.css;
+    var style = (_style = {
+      position: 'fixed',
+      left: left,
+      width: width
+    }, _style[mode] = offset, _style.zIndex = zIndex, _style);
+
+    if (this.targetElement) {
+      if (supportSticky && css) {
+        style.position = 'sticky';
+      } else {
+        style.position = 'absolute';
+
+        if (mode === 'top') {
+          style.transform = "translateY(" + (offset + this.targetElement.scrollTop) + "px)";
+        } else {
+          style.transform = "translateY(" + this.targetElement.scrollTop + "px)";
+        }
+
+        delete style.left;
+      }
+    }
+
+    this.triggerChange(true, style);
+    return style;
+  };
+
+  _proto.setPosition = function setPosition() {
+    var _this$props = this.props,
+        bottom = _this$props.bottom,
+        top = _this$props.top,
+        target = _this$props.target,
+        css = _this$props.css,
+        needResetPostion = _this$props.needResetPostion;
+    var _this$state = this.state,
+        mode = _this$state.mode,
+        scrollWidth = _this$state.scrollWidth; // If it is a hidden element, the position will not be updated
+
+    if (needResetPostion === false) return;
+    var selfRect = copyBoundingClientRect(this.element);
+    if (selfRect === null) return; // If the element is hidden, the width and height will be 0
+
+    if (selfRect && selfRect.width === 0 && selfRect.height === 0) return;
+
+    var _getComputedStyle = getComputedStyle(this.element),
+        marginBottom = _getComputedStyle.marginBottom,
+        marginTop = _getComputedStyle.marginTop;
+
+    selfRect.height += parseFloat(marginBottom) + parseFloat(marginTop);
+    var scrollElement = this.targetElement || document.body;
+    var scrollRect = scrollElement.getBoundingClientRect();
+    var placeholderRect = this.placeholder ? copyBoundingClientRect(this.placeholder) : null;
+    var viewHeight = docSize.height;
+
+    if (this.origin) {
+      var _this$origin$getBound = this.origin.getBoundingClientRect(),
+          width = _this$origin$getBound.width;
+
+      selfRect.width = width;
+      if (placeholderRect) placeholderRect.width = width;
+    }
+
+    var placeholderStyle = {
+      width: selfRect.width,
+      // if target element is not null, set height to 0
+      height: target && supportSticky && css ? 0 : selfRect.height
+    };
+    var style;
+    var placeholder;
+
+    if (top !== undefined && mode !== 'bottom') {
+      var limitTop = top;
+
+      if (this.targetElement) {
+        var _getComputedStyle2 = getComputedStyle(scrollElement),
+            paddingTop = _getComputedStyle2.paddingTop;
+
+        limitTop += scrollRect.top + parseInt(paddingTop, 10);
+      }
+
+      if (Math.ceil(selfRect.top) < limitTop) {
+        this.setState({
+          scrollWidth: scrollRect.width,
+          mode: 'top'
+        });
+        style = this.getStyle('top', top, selfRect.left, selfRect.width);
+        placeholder = placeholderStyle;
+      } else if (placeholderRect && selfRect.top < placeholderRect.top) {
+        if (scrollRect.width !== selfRect.width) {
+          style = this.getStyle('top', top, selfRect.left, scrollRect.width);
+        }
+
+        if (!(target && selfRect.top === limitTop)) {
+          this.setState({
+            mode: ''
+          });
+          style = {};
+          placeholder = null;
+          this.triggerChange(false, style);
+        }
+      } else if (this.targetElement && placeholderRect) {
+        style = this.getStyle('top', top, selfRect.left, selfRect.width);
+        placeholder = placeholderStyle;
+      } else if (scrollWidth && placeholderRect && scrollWidth !== scrollRect.width) {
+        this.setState({
+          scrollWidth: scrollRect.width,
+          mode: 'top'
+        });
+        style = this.getStyle('top', top, placeholderRect.left, placeholderRect.width);
+        placeholder = placeholderStyle;
+      }
+    }
+
+    if (bottom !== undefined && mode !== 'top') {
+      var limitBottom = viewHeight - bottom;
+
+      if (this.targetElement) {
+        var _getComputedStyle3 = getComputedStyle(scrollElement),
+            paddingBottom = _getComputedStyle3.paddingBottom;
+
+        limitBottom = scrollRect.bottom - bottom - parseInt(paddingBottom, 10);
+      }
+
+      if (selfRect.bottom > limitBottom) {
+        this.setState({
+          scrollWidth: scrollRect.width,
+          mode: 'bottom'
+        });
+        style = this.getStyle('bottom', bottom, selfRect.left, selfRect.width);
+        placeholder = placeholderStyle;
+      } else if (placeholderRect && (this.targetElement ? scrollRect.bottom : selfRect.bottom) > placeholderRect.bottom) {
+        if (scrollRect.width !== selfRect.width) {
+          style = this.getStyle('bottom', bottom, selfRect.left, scrollRect.width);
+        }
+
+        if (!(target && selfRect.bottom === limitBottom)) {
+          this.setState({
+            mode: ''
+          });
+          style = {};
+          placeholder = null;
+          this.triggerChange(false, style);
+        }
+      } else if (this.targetElement && placeholderRect) {
+        style = this.getStyle('bottom', bottom, selfRect.left, selfRect.width);
+        placeholder = placeholderStyle;
+      } else if (scrollWidth && placeholderRect && scrollWidth !== scrollRect.width) {
+        this.setState({
+          scrollWidth: scrollRect.width,
+          mode: 'bottom'
+        });
+        style = this.getStyle('bottom', bottom, placeholderRect.left, placeholderRect.width);
+        placeholder = placeholderStyle;
+      }
+    }
+
+    if (placeholder !== undefined) {
+      this.setState({
+        placeholder: placeholder
+      });
+    }
+
+    if (style) {
+      this.style = style;
+      this.setState({
+        style: style
+      });
+    }
+  };
+
+  _proto.triggerChange = function triggerChange(flag, style) {
+    var onChange = this.props.onChange;
+    if (style.position === this.style.position) return;
+    if (typeof onChange === 'function') onChange(flag);
+  };
+
+  _proto.handlePosition = function handlePosition() {
+    var _this2 = this;
+
+    var css = this.props.css;
+
+    if (this.locked && css) {
+      this.scrollCount += 1;
+      return;
+    }
+
+    this.locked = true;
+    this.scrollCount = 0;
+    this.setPosition();
+    this.scrollTimer = setTimeout(function () {
+      _this2.locked = false;
+
+      if (_this2.scrollCount > 0) {
+        _this2.handlePosition();
+      }
+    }, 48);
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.bindOrigin = function bindOrigin(el) {
+    this.origin = el;
+  };
+
+  _proto.bindPlaceholder = function bindPlaceholder(el) {
+    this.placeholder = el;
+  };
+
+  _proto.bindScroll = function bindScroll() {
+    var _this3 = this;
+
+    if (this.targetElement) {
+      this.targetElement.addEventListener('scroll', this.handlePosition, eventPassive);
+    } else {
+      events.forEach(function (e) {
+        window.addEventListener(e, _this3.handlePosition);
+      });
+    }
+
+    window.addEventListener('resize', this.handlePosition);
+  };
+
+  _proto.unbindScroll = function unbindScroll() {
+    var _this4 = this;
+
+    if (this.targetElement) {
+      this.targetElement.removeEventListener('scroll', this.handlePosition);
+    } else {
+      events.forEach(function (e) {
+        window.removeEventListener(e, _this4.handlePosition);
+      });
+    }
+
+    window.removeEventListener('resize', this.handlePosition);
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        target = _this$props2.target,
+        css = _this$props2.css;
+    var placeholder = this.state.placeholder;
+    var outerStyle = this.props.style;
+    var innerStyle = this.state.style;
+
+    if (target && supportSticky && css) {
+      outerStyle = Object.assign({}, outerStyle, innerStyle);
+      innerStyle = {};
+    }
+
+    return React.createElement("div", {
+      style: outerStyle,
+      className: className
+    }, React.createElement("div", {
+      ref: this.bindElement,
+      style: Object.assign({}, innerStyle, {
+        display: 'flow-root'
+      })
+    }, children), React.createElement("div", {
+      ref: this.bindOrigin
+    }), placeholder && React.createElement("div", {
+      ref: this.bindPlaceholder,
+      style: placeholder
+    }));
+  };
+
+  return Sticky;
+}(PureComponent);
+
+_defineProperty(Sticky, "displayName", 'ShineoutSticky');
+
+_defineProperty(Sticky, "defaultProps", DefaultValue);
+
+export default compose(consumer)(Sticky);

package/esm/Sticky/interface.d.ts

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

package/esm/Sticky/interface.js

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

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

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

package/esm/Sticky/styles/index.js

@@ -0,0 +1 @@
+import '../../styles/normalize.less';