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

UI kit for React Native

import React, { useRef, useState } from 'react';
import Animated, { FadeIn, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
import { default as PagerViewComponent } from 'react-native-pager-view';
import { applyDefaults } from '../../core/KitraProvider';
import Divider from '../Divider/Divider';
const style = 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 = 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.createElement(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.createElement(View, {
    style: {
      flexDirection: 'row',
      alignItems: 'center'
    }
  }, icons && icons[index] && /*#__PURE__*/React.cloneElement(icons[index], {
    color: selectPage === index ? headerTextColor.select : headerTextColor.default
  }), /*#__PURE__*/React.createElement(Animated.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 = Animated.createAnimatedComponent(PagerViewComponent);
const PagerView = _ref3 => {
  let {
    theme,
    typography,
    children,
    containerStyle,
    pageContainerStyle,
    headerTextColor,
    headerTextStyle,
    injectPagerRef = false,
    headerSliderStyle,
    headerContainerStyle,
    showDivider = true,
    dividerStyle,
    dividerColor,
    icons
  } = _ref3;
  const refPager = useRef(null);
  const slideValue = useSharedValue(0);
  const [size, setSize] = useState({
    height: 0,
    width: 0
  });
  const [selectPage, setSelectPage] = useState(0);
  const headerSliderAnimated = 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.createElement(View, {
    style: [style.container, containerStyle]
  }, /*#__PURE__*/React.createElement(View, {
    style: [{
      backgroundColor: theme === null || theme === void 0 ? void 0 : theme.white
    }, style.headersContainer, headerContainerStyle]
  }, React.Children.map(children, (item, index) => /*#__PURE__*/React.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.createElement(Animated.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.createElement(Divider, {
    style: [style.divider, dividerStyle],
    color: dividerColor
  })), /*#__PURE__*/React.createElement(AnimatedPager, {
    ref: refPager,
    entering: FadeIn,
    onPageScroll: onPageScroll,
    overScrollMode: "never",
    overdrag: false,
    style: [{
      flex: 1
    }, pageContainerStyle],
    initialPage: 0,
    onPageSelected: e => setSelectPage(e.nativeEvent.position)
  }, React.Children.map(children, (item, index) => {
    if ( /*#__PURE__*/React.isValidElement(item)) {
      return /*#__PURE__*/React.createElement(View, {
        style: [style.pageContainer],
        key: index + 1
      }, injectPagerRef ? /*#__PURE__*/React.cloneElement(item.props.children, {
        ref: refPager
      }) : item);
    }
    return null;
  })));
};
export default applyDefaults(PagerView);
//# sourceMappingURL=PagerView.js.map