@jdcfe/yep-react/es/picker-view/Picker.js

一套移动端的React组件库

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import * as React from 'react';
import classNames from 'classnames';

var Item = function Item() {
  return null;
};

;

var Picker = /*#__PURE__*/function (_React$Component) {
  _inherits(Picker, _React$Component);

  var _super = _createSuper(Picker);

  function Picker(props) {
    var _this;

    _classCallCheck(this, Picker);

    _this = _super.call(this, props);

    _this.scrollHandlers = function () {
      var scrollY = -1;
      var lastY = 0;
      var startY = 0;
      var scrollDisabled = false;
      var isMoving = false;

      var setTransform = function setTransform(nodeStyle, value) {
        nodeStyle.transform = value;
        nodeStyle.WebkitTransform = value;
      };

      var setTransition = function setTransition(nodeStyle, value) {
        nodeStyle.transition = value;
        nodeStyle.WebkitTransition = value;
      };

      var scrollTo = function scrollTo(_x, y) {
        var time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.3;

        if (scrollY !== y) {
          scrollY = y;

          if (time) {
            setTransition(_this.contentRef.style, "cubic-bezier(0,0,0.2,1.15) ".concat(time, "s"));
          }

          setTransform(_this.contentRef.style, "translate3d(0,".concat(-y, "px,0)"));
          setTimeout(function () {
            _this.scrollingComplete();

            if (_this.contentRef) {
              setTransition(_this.contentRef.style, '');
            }
          }, +time * 1000);
        }
      }; //速度计


      var Velocity = function () {
        var minInterval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
        var maxInterval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
        var _time = 0;
        var _y = 0;
        var _velocity = 0;
        var recorder = {
          record: function record(y) {
            var now = +new Date();
            _velocity = (y - _y) / (now - _time);

            if (now - _time >= minInterval) {
              _velocity = now - _time <= maxInterval ? _velocity : 0;
              _y = y;
              _time = now;
            }
          },
          getVelocity: function getVelocity(y) {
            if (y !== _y) {
              recorder.record(y);
            }

            return _velocity;
          }
        };
        return recorder;
      }();

      var onStart = function onStart(y) {
        if (scrollDisabled) {
          return;
        }

        isMoving = true;
        startY = y;
        lastY = scrollY;
      };

      var onMove = function onMove(y) {
        if (scrollDisabled || !isMoving) {
          return;
        }

        scrollY = lastY - y + startY;
        Velocity.record(y);

        _this.onScrollChange();

        setTransform(_this.contentRef.style, "translate3d(0,".concat(-scrollY, "px,0)"));
      };

      var onFinish = function onFinish() {
        isMoving = false;
        var targetY = scrollY;

        var height = (React.Children.count(_this.props.children) - 1) * _this.itemHeight;

        var time = 0.3; //const velocity = Velocity.getVelocity(targetY) * 4;
        //if (velocity) {
        //targetY = velocity * 40 + targetY;
        //time = Math.abs(velocity) * .1;
        //}

        if (targetY % _this.itemHeight !== 0) {
          targetY = Math.round(targetY / _this.itemHeight) * _this.itemHeight;
        }

        if (targetY < 0) {
          targetY = 0;
        } else if (targetY > height) {
          targetY = height;
        }

        scrollTo(0, targetY, time < 0.3 ? 0.3 : time);

        _this.onScrollChange();
      };

      return {
        touchstart: function touchstart(evt) {
          return onStart(evt.touches[0].screenY);
        },
        mousedown: function mousedown(evt) {
          return onStart(evt.screenY);
        },
        touchmove: function touchmove(evt) {
          evt.preventDefault();
          onMove(evt.touches[0].screenY);
        },
        mousemove: function mousemove(evt) {
          evt.preventDefault();
          onMove(evt.screenY);
        },
        touchend: function touchend() {
          return onFinish();
        },
        touchcancel: function touchcancel() {
          return onFinish();
        },
        mouseup: function mouseup() {
          return onFinish();
        },
        getValue: function getValue() {
          return scrollY;
        },
        scrollTo: scrollTo,
        setDisabled: function setDisabled(disabled) {
          scrollDisabled = disabled;
        }
      };
    }();

    _this.createRootRef = _this.createRootRef.bind(_assertThisInitialized(_this));
    _this.createMaskRef = _this.createMaskRef.bind(_assertThisInitialized(_this));
    _this.createIndicatorRef = _this.createIndicatorRef.bind(_assertThisInitialized(_this));
    _this.createContentRef = _this.createContentRef.bind(_assertThisInitialized(_this));
    _this.passiveSupported = _this.passiveSupported.bind(_assertThisInitialized(_this));
    _this.onScrollChange = _this.onScrollChange.bind(_assertThisInitialized(_this));
    _this.scrollingComplete = _this.scrollingComplete.bind(_assertThisInitialized(_this));
    _this.fireValueChange = _this.fireValueChange.bind(_assertThisInitialized(_this));
    _this.scrollTo = _this.scrollTo.bind(_assertThisInitialized(_this));
    _this.scrollToWithoutAnimation = _this.scrollToWithoutAnimation.bind(_assertThisInitialized(_this));
    _this.select = _this.select.bind(_assertThisInitialized(_this));
    _this.selectByIndex = _this.selectByIndex.bind(_assertThisInitialized(_this));
    _this.doScrollingComplete = _this.doScrollingComplete.bind(_assertThisInitialized(_this));
    _this.computeChildIndex = _this.computeChildIndex.bind(_assertThisInitialized(_this));
    var selectedValueState;
    var selectedValue = props.selectedValue,
        defaultSelectedValue = props.defaultSelectedValue;

    if (selectedValue !== undefined) {
      selectedValueState = selectedValue;
    } else if (defaultSelectedValue !== undefined) {
      selectedValueState = defaultSelectedValue;
    } else {
      var children = React.Children.toArray(_this.props.children); // @ts-ignore

      selectedValueState = children && children[0] && children[0].props.value;
    }

    _this.state = {
      selectedValue: selectedValueState
    };
    return _this;
  }

  _createClass(Picker, [{
    key: "createRootRef",
    value: function createRootRef(el) {
      this.rootRef = el;
    }
  }, {
    key: "createMaskRef",
    value: function createMaskRef(el) {
      this.maskRef = el;
    }
  }, {
    key: "createIndicatorRef",
    value: function createIndicatorRef(el) {
      this.indicatorRef = el;
    }
  }, {
    key: "createContentRef",
    value: function createContentRef(el) {
      this.contentRef = el;
    }
  }, {
    key: "passiveSupported",
    value: function passiveSupported() {
      var passiveSupported = false;

      try {
        var options = Object.defineProperty({}, 'passive', {
          get: function get() {
            passiveSupported = true;
          }
        });
        window.addEventListener('test', function () {}, options);
      } catch (err) {}

      return passiveSupported;
    }
  }, {
    key: "onScrollChange",
    value: function onScrollChange() {
      var _this$props = this.props,
          children = _this$props.children,
          onScrollChange = _this$props.onScrollChange;
      var top = this.scrollHandlers.getValue();

      if (top >= 0) {
        var index = this.computeChildIndex(top, this.itemHeight, React.Children.count(children));

        if (this.scrollValue !== index) {
          this.scrollValue = index; // @ts-ignore

          var child = children[index];

          if (child && onScrollChange) {
            onScrollChange(child.props.value);
          } else if (!child && console.warn) {
            console.warn('child not found', children, index);
          }
        }
      }
    }
  }, {
    key: "fireValueChange",
    value: function fireValueChange(selectedValue) {
      if (selectedValue !== this.state.selectedValue) {
        if (!('selectedValue' in this.props)) {
          this.setState({
            selectedValue: selectedValue
          });
        }

        if (this.props.onValueChange) {
          this.props.onValueChange(selectedValue);
        }
      }
    }
  }, {
    key: "scrollingComplete",
    value: function scrollingComplete() {
      var top = this.scrollHandlers.getValue();

      if (top >= 0) {
        this.doScrollingComplete(top, this.itemHeight, this.fireValueChange);
      }
    }
  }, {
    key: "scrollTo",
    value: function scrollTo(top) {
      this.scrollHandlers.scrollTo(0, top);
    }
  }, {
    key: "scrollToWithoutAnimation",
    value: function scrollToWithoutAnimation(top) {
      this.scrollHandlers.scrollTo(0, top, 0);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var rootRef = this.rootRef,
          maskRef = this.maskRef,
          indicatorRef = this.indicatorRef,
          contentRef = this.contentRef;
      var rootHeight = rootRef.getBoundingClientRect().height;
      var itemHeight = this.itemHeight = indicatorRef.getBoundingClientRect().height;
      var itemNum = Math.floor(rootHeight / itemHeight);

      if (itemNum % 2 === 0) {
        itemNum--;
      }

      itemNum--;
      itemNum /= 2;
      contentRef.style.padding = "".concat(itemHeight * itemNum, "px 0");
      indicatorRef.style.top = "".concat(itemHeight * itemNum, "px");
      maskRef.style.backgroundSize = "100% ".concat(itemHeight * itemNum, "px");
      this.scrollHandlers.setDisabled(this.props.disabled);
      this.select(this.state.selectedValue, this.itemHeight, this.scrollTo);
      var passiveSupported = this.passiveSupported();
      var willPreventDefault = passiveSupported ? {
        passive: false
      } : false;
      var willNotPreventDefault = passiveSupported ? {
        passive: true
      } : false;
      Object.keys(this.scrollHandlers).forEach(function (key) {
        if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
          var pd = key.indexOf('move') >= 0 ? willPreventDefault : willNotPreventDefault; // @ts-ignore

          rootRef.addEventListener(key, _this2.scrollHandlers[key], pd);
        }
      });
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this3 = this;

      if ('selectedValue' in nextProps) {
        if (this.state.selectedValue !== nextProps.selectedValue) {
          this.setState({
            selectedValue: nextProps.selectedValue
          }, function () {
            _this3.select(nextProps.selectedValue, _this3.itemHeight, nextProps.noAnimate ? _this3.scrollToWithoutAnimation : _this3.scrollTo);
          });
        }
      }

      this.scrollHandlers.setDisabled(nextProps.disabled);
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      return this.state.selectedValue !== nextState.selectedValue || this.props.children !== nextProps.children;
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.select(this.state.selectedValue, this.itemHeight, this.scrollToWithoutAnimation);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      var _this4 = this;

      Object.keys(this.scrollHandlers).forEach(function (key) {
        if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
          // @ts-ignore
          _this4.rootRef.removeEventListener(key, _this4.scrollHandlers[key]);
        }
      });
    }
  }, {
    key: "select",
    value: function select(value, itemHeight, scrollTo) {
      var children = React.Children.toArray(this.props.children);

      for (var i = 0, len = children.length; i < len; i++) {
        // @ts-ignore
        if (children[i].props.value === value) {
          this.selectByIndex(i, itemHeight, scrollTo);
          return;
        }
      }

      this.selectByIndex(0, itemHeight, scrollTo);
    }
  }, {
    key: "selectByIndex",
    value: function selectByIndex(index, itemHeight, zscrollTo) {
      if (index < 0 || index >= React.Children.count(this.props.children) || !itemHeight) {
        return;
      }

      zscrollTo(index * itemHeight);
    }
  }, {
    key: "computeChildIndex",
    value: function computeChildIndex(top, itemHeight, childrenLength) {
      var index = top / itemHeight;
      var floor = Math.floor(index);

      if (index - floor > 0.5) {
        index = floor + 1;
      } else {
        index = floor;
      }

      return Math.min(index, childrenLength - 1);
    }
  }, {
    key: "doScrollingComplete",
    value: function doScrollingComplete(top, itemHeight, fireValueChange) {
      var children = React.Children.toArray(this.props.children);
      var index = this.computeChildIndex(top, itemHeight, children.length);
      var child = children[index];

      if (child) {
        fireValueChange(child.props.value);
      } else if (console.warn) {
        console.warn('child not found', child, index);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _this$props2 = this.props,
          className = _this$props2.className,
          prefixCls = _this$props2.prefixCls,
          style = _this$props2.style,
          indicatorStyle = _this$props2.indicatorStyle,
          itemStyle = _this$props2.itemStyle,
          children = _this$props2.children;
      var cls = classNames(prefixCls, _defineProperty({}, className, !!className));

      var map = function map(item) {
        var _item$props = item.props,
            _item$props$className = _item$props.className,
            className = _item$props$className === void 0 ? '' : _item$props$className,
            style = _item$props.style,
            value = _item$props.value;
        return /*#__PURE__*/React.createElement("div", {
          style: Object.assign(Object.assign({}, itemStyle), style),
          key: value,
          className: classNames("".concat(prefixCls, "-item"), className, _defineProperty({}, "".concat(prefixCls, "-item-selected"), value === _this5.state.selectedValue))
        }, item.children || item.props.children);
      }; // @ts-ignore


      var items = React.Children ? React.Children.map(children, map) : [].concat(children).map(map);
      return /*#__PURE__*/React.createElement("div", {
        className: cls,
        style: style,
        ref: this.createRootRef
      }, /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-mask"),
        ref: this.createMaskRef
      }), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-indicator"),
        style: indicatorStyle,
        ref: this.createIndicatorRef
      }), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-content"),
        ref: this.createContentRef
      }, items));
    }
  }]);

  return Picker;
}(React.Component);

Picker.Item = Item;
Picker.defaultProps = {
  prefixCls: 'Yep-picker',
  disabled: false
};
export default Picker;