@fruits-chain/react-native-xiaoshu/lib/commonjs/elevator-nav/elevator-nav.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 _index = require("../hooks/index.js");
var _index2 = _interopRequireDefault(require("../tab-bar/index.js"));
var _context = require("./context.js");
var _style = _interopRequireDefault(require("./style.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const ElevatorNavInner = ({
  triggerOffset = 100,
  tabBarHeight = 40,
  scrollComponent = _reactNative.ScrollView,
  children,
  onScroll,
  onMomentumScrollEnd,
  ...restProps
}) => {
  const ScrollComponent = scrollComponent;
  const {
    registerScroll,
    elevator
  } = (0, _context.useElevator)();
  const ScrollViewRef = (0, _react.useRef)();
  const ScrollTop = (0, _react.useRef)(0);
  const [showNav, setShowNav] = (0, _index.useDifferentState)(false);
  const [tabBarValue, setTabBarValue] = (0, _index.useDifferentState)(undefined);
  const tabBarOptions = (0, _react.useMemo)(() => elevator.map(item => ({
    value: item.label,
    label: item.label
  })), [elevator]);
  const tabBarKey = (0, _react.useMemo)(() => JSON.stringify(tabBarOptions), [tabBarOptions]);
  const ActionChangeTabBarValue = (0, _react.useRef)(false);
  const initTabBar = (0, _index.usePersistFn)(y => {
    const _showNav = y >= triggerOffset - tabBarHeight;

    // 滚动距离增加 tabBarHeight，UI 上已经滚动过去了
    // TODO 从体验上看，top 过了内容高度的三之一就算滚到了
    const overElevators = elevator.filter(item => item.top <= y + tabBarHeight);
    const _tabBarValue = overElevators[overElevators.length - 1]?.label;
    setShowNav(_showNav);
    if (_showNav && _tabBarValue && !ActionChangeTabBarValue.current) {
      setTabBarValue(_tabBarValue);
    }
  });
  (0, _index.useUpdateEffect)(() => {
    // 当布局变化时重新定位
    initTabBar(ScrollTop.current);
  }, [tabBarOptions]);

  // TODO 修复类型报错
  registerScroll(ScrollViewRef);
  const onScrollPersist = (0, _index.usePersistFn)(e => {
    onScroll?.(e);
    ScrollTop.current = e.nativeEvent.contentOffset.y;
    initTabBar(ScrollTop.current);
  });
  const onChangeTabBar = (0, _index.usePersistFn)(v => {
    setTabBarValue(v);
    ActionChangeTabBarValue.current = true;
    ScrollViewRef.current?.scrollTo({
      y: elevator.filter(item => item.label === v)[0].top,
      animated: true
    });
  });
  const onMomentumScrollEndPersist = (0, _index.usePersistFn)(e => {
    onMomentumScrollEnd?.(e);
    ActionChangeTabBarValue.current = false;
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: _style.default.wrapper,
    collapsable: false,
    children: [showNav && tabBarValue ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: _style.default.nav,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
        indicator: true,
        safeAreaInsetBottom: false,
        value: tabBarValue,
        onChange: onChangeTabBar,
        options: tabBarOptions
      }, tabBarKey)
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollComponent, {
      scrollEventThrottle: 16,
      bounces: false,
      ...restProps,
      // TODO 修复类型报错
      ref: ScrollViewRef,
      onScroll: onScrollPersist,
      onMomentumScrollEnd: onMomentumScrollEndPersist,
      children: children
    })]
  });
};
const ElevatorNav = props => {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ElevatorContextProvider, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ElevatorNavInner, {
      ...props
    })
  });
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(ElevatorNav);
//# sourceMappingURL=elevator-nav.js.map