shineout 1.12.3 → 1.12.4-beta.2

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

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

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

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

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

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

package/esm/Spin/util.js

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

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

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

package/esm/Sticky/context.d.ts

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

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

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

package/esm/Sticky/index.js

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

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

package/esm/Sticky/interface.js

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

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

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

package/esm/Sticky/styles/index.js

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