@fruits-chain/react-native-xiaoshu/lib/commonjs/picker-view/picker-view-column.js

🌈 React Native UI library

"use strict";

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

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

var _reactNative = require("react-native");

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

var _theme = _interopRequireDefault(require("../theme"));

var _column = require("./helper/column");

var _style = require("./style");

var _style2 = require("./style.column");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/**
 * 选择器 列
 */
const PickerViewColumn = _ref => {
  let {
    itemHeight,
    visibleItemCount,
    options,
    value,
    onChange
  } = _ref;

  const TOKENS = _theme.default.useThemeTokens();

  const CV = _theme.default.createVar(TOKENS, _style.varCreator);

  const STYLES = _theme.default.createStyle(CV, _style2.styleCreator);
  /** 刻度偏移量，中间一个选项的高度，各自偏移半个高度 */


  const markMargin = itemHeight / 2;
  const PanAnimated = (0, _react.useRef)(new _reactNative.Animated.Value(0));
  /** 上次的位置，用于滚动中计算 */

  const LastTop = (0, _react.useRef)(0);
  /** 滚动范围 最大最小值 */

  const ScopeTop = (0, _react.useRef)({
    start: 0,
    end: 0
  });
  const onChangePersistFn = (0, _hooks.usePersistFn)(onChange); // 部分数据想跨渲染次数使用，类似 this.xxx

  const ValueCurrent = (0, _react.useRef)(value);
  const OptionsCurrent = (0, _react.useRef)(options);
  /** 滚动到某个值 */

  const scrollTo = (0, _hooks.usePersistFn)(v => {
    let valueIndex = OptionsCurrent.current.findIndex(item => item.value === v); // 定位的时候不去做数据校验，外面的默认值真的可能是被禁用
    // if (valueIndex < 0) {
    //   // 是一个不存在的选项
    // } else {
    //   // 检测当前选项是否可用
    //   if (OptionsCurrent.current[valueIndex].disabled) {
    //     // 另寻它路
    //     valueIndex = findUsableOptionIndex(
    //       OptionsCurrent.current,
    //       next,
    //       valueIndex,
    //     )
    //   }
    // }
    // 计算正确的位置
    // 反方向偏移，所以减去第 N 索引值的高度

    const newTop = ScopeTop.current.start - valueIndex * itemHeight;

    _reactNative.Animated.timing(PanAnimated.current, {
      toValue: newTop,
      // 设置动画的属性值
      useNativeDriver: true,
      duration: 50
    }).start(_ref2 => {
      let {
        finished
      } = _ref2;

      if (finished) {
        LastTop.current = newTop;
      }
    });
  });
  const panResponder = (0, _react.useMemo)(() => {
    return _reactNative.PanResponder.create({
      // 必要的回调
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (_, gestureState) => {
        // 过程中不处理边界问题
        const currentTop = LastTop.current + gestureState.dy;
        PanAnimated.current.setValue(currentTop);
      },
      onPanResponderRelease: (_, gestureState) => {
        // 滚动结束
        // 判断滚动到哪个范围了
        const {
          start,
          end
        } = ScopeTop.current;
        /** 此时的位置 */

        const currentTop = LastTop.current + gestureState.dy;
        /** 滚动方向 */

        const isToNext = gestureState.dy <= 0;
        let endIndex = -1;

        if (currentTop < start && currentTop > end) {
          // 在选项范围内

          /** 相对第一个选项 top 的偏移值，取正 */
          const absStartTopDeviant = Math.abs(currentTop - start);
          /** 偏移值 */

          const remainder = absStartTopDeviant % itemHeight;
          endIndex = Math.floor(absStartTopDeviant / itemHeight); // 无论哪个方向，只要超过一般就算下一个

          if ((isToNext || !isToNext) && remainder >= markMargin) {
            endIndex += 1;
          }
        } else if (currentTop >= start) {
          // 滑动到了第一个选项上面
          endIndex = 0;
        } else {
          // 滑动到了最后个选项下面
          endIndex = options.length - 1;
        } // 当前滑动到的选项禁用，需要从新找一个可用的


        if (options[endIndex].disabled) {
          endIndex = (0, _column.findUsableOptionIndex)(options, isToNext, endIndex);
        } // 记录当前位置


        LastTop.current = currentTop; // 触发回调
        // 极端情况，所有选项都被禁用了

        if (options[endIndex]) {
          onChangePersistFn(options[endIndex]);
        } // 延迟跳转，可能外部不更新数据，调到旧数据上


        setTimeout(() => {
          scrollTo(ValueCurrent.current);
        }, 0);
      }
    });
  }, [itemHeight, markMargin, onChangePersistFn, options, scrollTo]); // 监听数据变化，重新初始化值

  (0, _react.useEffect)(() => {
    // 计算初始值
    const startTop = itemHeight * visibleItemCount / 2 - itemHeight / 2;
    ScopeTop.current = {
      start: startTop,
      end: startTop - itemHeight * (options.length - 1)
    };
    ValueCurrent.current = value;
    OptionsCurrent.current = options;
    scrollTo(value);
  }, [itemHeight, visibleItemCount, options, value, scrollTo]);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: STYLES.column
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({}, panResponder.panHandlers, {
    style: STYLES.touch
  })), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: {
      transform: [{
        translateY: PanAnimated.current
      }]
    }
  }, options.map(item => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      key: item.value,
      style: [STYLES.text, {
        height: itemHeight,
        lineHeight: itemHeight
      }, item.disabled ? STYLES.text_disabled : null],
      numberOfLines: 1
    }, item.label);
  })));
};

var _default = /*#__PURE__*/(0, _react.memo)(PickerViewColumn);

exports.default = _default;
//# sourceMappingURL=picker-view-column.js.map