@tra-tech/react-native-kitra/lib/commonjs/components/PagerView/PagerView.js

UI kit for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNative = require("react-native");
var _reactNativePagerView = _interopRequireDefault(require("react-native-pager-view"));
var _KitraProvider = require("../../core/KitraProvider");
var _Divider = _interopRequireDefault(require("../Divider/Divider"));
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; }
const style = _reactNative.StyleSheet.create({
  container: {
    flex: 1
  },
  headersContainer: {
    flexDirection: 'row',
    padding: 5,
    borderRadius: 10,
    marginLeft: 'auto',
    marginRight: 'auto',
    width: 315,
    height: 50
  },
  headerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 101
  },
  headerText: {
    margin: 10,
    textAlign: 'center',
    fontSize: 12,
    fontWeight: '500',
    flexDirection: 'row'
  },
  slider: {
    position: 'absolute',
    borderRadius: 8,
    margin: 5,
    alignItems: 'center'
  },
  pageContainer: {
    height: '100%',
    width: '100%',
    flex: 1
  },
  divider: {
    position: 'absolute',
    bottom: 0,
    height: 4,
    margin: 5
  }
});
const TabItem = _ref => {
  let {
    theme,
    icons,
    selectPage,
    typography,
    item,
    index,
    refPager,
    setSize,
    slideValue,
    headerTextStyle,
    headerTextColor
  } = _ref;
  const textColorStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    if (index - slideValue.value < 0.3 && index - slideValue.value > -0.5) {
      return {
        color: headerTextColor.select || (theme === null || theme === void 0 ? void 0 : theme.white)
      };
    }
    return {
      color: headerTextColor.default || (theme === null || theme === void 0 ? void 0 : theme.primary)
    };
  });
  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    key: index,
    testID: `tab_button_${index}`,
    onLayout: _ref2 => {
      let {
        nativeEvent
      } = _ref2;
      return setSize({
        height: nativeEvent.layout.height,
        width: nativeEvent.layout.width
      });
    },
    style: [style.headerContainer],
    onPress: () => {
      var _refPager$current;
      (_refPager$current = refPager.current) === null || _refPager$current === void 0 ? void 0 : _refPager$current.setPage(index);
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      flexDirection: 'row',
      alignItems: 'center'
    }
  }, icons && icons[index] && /*#__PURE__*/_react.default.cloneElement(icons[index], {
    color: selectPage === index ? headerTextColor.select : headerTextColor.default
  }), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.Text, {
    style: [{
      fontSize: typography === null || typography === void 0 ? void 0 : typography.body.medium.fontSize,
      lineHeight: typography === null || typography === void 0 ? void 0 : typography.body.medium.lineHeight
    }, style.headerText, textColorStyle, headerTextStyle]
  }, item.key)));
};
const AnimatedPager = _reactNativeReanimated.default.createAnimatedComponent(_reactNativePagerView.default);
const PagerView = _ref3 => {
  let {
    theme,
    typography,
    children,
    containerStyle,
    pageContainerStyle,
    headerTextColor,
    headerTextStyle,
    injectPagerRef = false,
    headerSliderStyle,
    headerContainerStyle,
    showDivider = true,
    dividerStyle,
    dividerColor,
    icons
  } = _ref3;
  const refPager = (0, _react.useRef)(null);
  const slideValue = (0, _reactNativeReanimated.useSharedValue)(0);
  const [size, setSize] = (0, _react.useState)({
    height: 0,
    width: 0
  });
  const [selectPage, setSelectPage] = (0, _react.useState)(0);
  const headerSliderAnimated = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    left: slideValue.value * (size !== null && size !== void 0 && size.width ? size.width : 0) ? slideValue.value * (size !== null && size !== void 0 && size.width ? size.width : 0) : 0
  }));
  const onPageScroll = e => {
    if (e.nativeEvent.offset < 1) {
      slideValue.value = +e.nativeEvent.offset + e.nativeEvent.position;
    }
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [style.container, containerStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [{
      backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
    }, style.headersContainer, headerContainerStyle]
  }, _react.default.Children.map(children, (item, index) => /*#__PURE__*/_react.default.createElement(TabItem, {
    theme: theme,
    selectPage: selectPage,
    item: item,
    icons: icons,
    index: index,
    refPager: refPager,
    setSize: setSize,
    slideValue: slideValue,
    typography: typography,
    headerTextStyle: headerTextStyle,
    headerTextColor: headerTextColor || {
      select: theme === null || theme === void 0 ? void 0 : theme.white,
      default: theme === null || theme === void 0 ? void 0 : theme.primary
    }
  })), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
    style: [style.slider, {
      backgroundColor: theme === null || theme === void 0 ? void 0 : theme.focused,
      height: size === null || size === void 0 ? void 0 : size.height,
      width: size === null || size === void 0 ? void 0 : size.width,
      zIndex: 100
    }, headerSliderAnimated, headerSliderStyle]
  }), showDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
    style: [style.divider, dividerStyle],
    color: dividerColor
  })), /*#__PURE__*/_react.default.createElement(AnimatedPager, {
    ref: refPager,
    entering: _reactNativeReanimated.FadeIn,
    onPageScroll: onPageScroll,
    overScrollMode: "never",
    overdrag: false,
    style: [{
      flex: 1
    }, pageContainerStyle],
    initialPage: 0,
    onPageSelected: e => setSelectPage(e.nativeEvent.position)
  }, _react.default.Children.map(children, (item, index) => {
    if ( /*#__PURE__*/_react.default.isValidElement(item)) {
      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
        style: [style.pageContainer],
        key: index + 1
      }, injectPagerRef ? /*#__PURE__*/_react.default.cloneElement(item.props.children, {
        ref: refPager
      }) : item);
    }
    return null;
  })));
};
var _default = (0, _KitraProvider.applyDefaults)(PagerView);
exports.default = _default;
//# sourceMappingURL=PagerView.js.map