zarm/lib/wheel/Wheel.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _core = _interopRequireDefault(require("@better-scroll/core"));

var _wheel = _interopRequireDefault(require("@better-scroll/wheel"));

var _bem = require("@zarm-design/bem");

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _react = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

var _utils = require("../picker-view/utils");

var _hooks = require("../utils/hooks");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

_core.default.use(_wheel.default);

var getValue = function getValue(props) {
  var _props$fieldNames;

  if ('defaultValue' in props) {
    return props.defaultValue;
  }

  if ('value' in props) {
    return props.value;
  }

  if (Array.isArray(props.dataSource) && props.dataSource[0] && (_props$fieldNames = props.fieldNames) !== null && _props$fieldNames !== void 0 && _props$fieldNames.value) {
    var _props$fieldNames2;

    return props.dataSource[0][(_props$fieldNames2 = props.fieldNames) === null || _props$fieldNames2 === void 0 ? void 0 : _props$fieldNames2.value];
  }
};

var Wheel = function Wheel(props) {
  var className = props.className,
      value = props.value,
      defaultValue = props.defaultValue,
      dataSource = props.dataSource,
      disabled = props.disabled,
      stopScroll = props.stopScroll,
      itemRender = props.itemRender,
      onChange = props.onChange;
  var scrollInstance = (0, _react.useRef)(null);
  var wheelWrapperRef = /*#__PURE__*/(0, _react.createRef)();
  var currentValue = getValue(props);
  var prevValue = (0, _hooks.usePrevious)(value);
  var prevDataSource = (0, _hooks.usePrevious)(dataSource);
  var prevStopScroll = (0, _hooks.usePrevious)(stopScroll);

  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var heightRef = _react.default.useRef(0);

  var bem = (0, _bem.createBEM)('wheel', {
    prefixCls: prefixCls
  });
  var fieldNames = (0, _utils.resolvedFieldNames)(props.fieldNames);

  var getSelectedIndex = function getSelectedIndex(changedValue, newDataSource) {
    var index = 0;

    if (newDataSource) {
      newDataSource.some(function (item, i) {
        if (item[fieldNames.value] === changedValue) {
          index = i;
          return true;
        }

        return false;
      });
    }

    return index;
  };

  var fireValueChange = function fireValueChange(changedValue) {
    if (changedValue === currentValue) {
      return;
    }

    onChange === null || onChange === void 0 ? void 0 : onChange(changedValue);
  };

  var handleScrollEnd = (0, _hooks.useEventCallback)(function () {
    var _scrollInstance$curre;

    var index = (_scrollInstance$curre = scrollInstance.current) === null || _scrollInstance$curre === void 0 ? void 0 : _scrollInstance$curre.getSelectedIndex();
    var child = dataSource === null || dataSource === void 0 ? void 0 : dataSource[index];

    if (child) {
      fireValueChange(child[fieldNames.value]);
    }
  }, []);
  (0, _hooks.useSafeLayoutEffect)(function () {
    var _wheelWrapperRef$curr, _scrollInstance$curre4;

    var resize;
    heightRef.current = ((_wheelWrapperRef$curr = wheelWrapperRef.current) === null || _wheelWrapperRef$curr === void 0 ? void 0 : _wheelWrapperRef$curr.clientHeight) || 0;
    var initIndex = getSelectedIndex(currentValue, dataSource);

    if (wheelWrapperRef.current) {
      var _scrollInstance$curre2;

      scrollInstance.current = new _core.default(wheelWrapperRef.current, {
        wheel: {
          selectedIndex: initIndex,
          wheelWrapperClass: bem('content'),
          wheelItemClass: bem('item')
        },
        probeType: 3
      });

      if ((_scrollInstance$curre2 = scrollInstance.current.scroller) !== null && _scrollInstance$curre2 !== void 0 && _scrollInstance$curre2.wrapper) {
        resize = new ResizeObserver(function (entries) {
          var _scrollInstance$curre3;

          var _ref = entries || [],
              _ref2 = (0, _slicedToArray2.default)(_ref, 1),
              entry = _ref2[0];

          if (entry.contentRect.height === heightRef.current) return;
          heightRef.current = entry.contentRect.height;
          (_scrollInstance$curre3 = scrollInstance.current) === null || _scrollInstance$curre3 === void 0 ? void 0 : _scrollInstance$curre3.refresh();
        });
        resize.observe(scrollInstance.current.scroller.wrapper);
      }
    }

    (_scrollInstance$curre4 = scrollInstance.current) === null || _scrollInstance$curre4 === void 0 ? void 0 : _scrollInstance$curre4.on('scrollEnd', function () {
      handleScrollEnd();
    });
    return function () {
      var _resize, _scrollInstance$curre5;

      (_resize = resize) === null || _resize === void 0 ? void 0 : _resize.disconnect();
      (_scrollInstance$curre5 = scrollInstance.current) === null || _scrollInstance$curre5 === void 0 ? void 0 : _scrollInstance$curre5.destroy();
    };
  }, []);
  (0, _react.useEffect)(function () {
    var _scrollInstance$curre6;

    disabled && ((_scrollInstance$curre6 = scrollInstance.current) === null || _scrollInstance$curre6 === void 0 ? void 0 : _scrollInstance$curre6.disable());
  }, [disabled]);
  (0, _react.useEffect)(function () {
    var _scrollInstance$curre7;

    if ((0, _isEqual.default)(prevDataSource, dataSource)) return;
    (_scrollInstance$curre7 = scrollInstance.current) === null || _scrollInstance$curre7 === void 0 ? void 0 : _scrollInstance$curre7.refresh();
    var targetIndex = dataSource === null || dataSource === void 0 ? void 0 : dataSource.findIndex(function (item) {
      return item[fieldNames.value] === value;
    });
    if (targetIndex >= 0) return;
    handleScrollEnd();
  }, [dataSource, fieldNames, value]);
  (0, _react.useEffect)(function () {
    var oldIndex = getSelectedIndex(prevValue, prevDataSource);
    var newIndex = getSelectedIndex(value, dataSource);

    if (newIndex !== oldIndex) {
      var _scrollInstance$curre8;

      (_scrollInstance$curre8 = scrollInstance.current) === null || _scrollInstance$curre8 === void 0 ? void 0 : _scrollInstance$curre8.wheelTo(newIndex);
    }

    if (stopScroll && prevStopScroll !== stopScroll) {
      var _scrollInstance$curre9;

      (_scrollInstance$curre9 = scrollInstance.current) === null || _scrollInstance$curre9 === void 0 ? void 0 : _scrollInstance$curre9.stop();
    }
  }, [value, defaultValue, dataSource, stopScroll, fieldNames.value]);
  var items = dataSource.map(function (item, index) {
    var itemCls = bem('item', [{
      selected: currentValue === item[fieldNames.value],
      disabled: disabled
    }]);
    return /*#__PURE__*/_react.default.createElement("div", {
      key: +index,
      className: itemCls
    }, (itemRender === null || itemRender === void 0 ? void 0 : itemRender(item)) || (item === null || item === void 0 ? void 0 : item[fieldNames.label]));
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: bem([className]),
    ref: wheelWrapperRef
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: bem('content')
  }, items));
};

Wheel.displayName = 'Wheel';
Wheel.defaultProps = {
  dataSource: [],
  stopScroll: false
};
var _default = Wheel;
exports.default = _default;