react-native-segment-control-ui/lib/module/components/index.js

Segment Control for React Native

import React, { useCallback } from 'react';
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Animated, Dimensions, Easing, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
const SegmentControl = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    segments = [],
    activeTab = 0,
    style,
    activeStyle,
    textStyle,
    onPress,
    textActiveStyle,
    duration = 300,
    iconField,
    labelField = 'title',
    testID,
    iconActiveField
  } = _ref;
  ``;
  const [segmentItemWidth, setSegmentItemWidth] = useState(0);
  const [active, setActive] = useState(activeTab);
  const widthSegment = useCallback(function (segmentArr) {
    let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Dimensions.get('window').width;
    if (typeof width === 'number') {
      return {
        width: width / segmentArr.length
      };
    } else if (typeof width === 'string') {
      console.warn('=>>>SegmentControl<<<= : Segment not supported for size string');
      return {
        width: 0
      };
    } else {
      return {
        width: Dimensions.get('window').width
      };
    }
  }, []);
  const heightSegment = function () {
    let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
    if (typeof height === 'number') {
      return {
        height: height - 6
      };
    } else if (typeof height === 'string') {
      console.warn('=>>>SegmentControl<<<= : Segment not supported for size string');
      return {
        height: 0
      };
    } else {
      return {
        height: 60
      };
    }
  };
  const fadeAnim = useRef(new Animated.Value(0)).current;
  useImperativeHandle(ref, () => ({
    updateActive: function () {
      let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
      if (index <= segments.length - 1) {
        setActive(index);
        translateXAnim(index);
      } else {
        console.warn('=>>>SegmentControl<<<= : Active cannot exceed the length of the array');
      }
    }
  }));
  const translateXAnim = useCallback(index => {
    Animated.timing(fadeAnim, {
      toValue: segmentItemWidth * index,
      easing: Easing.out(Easing.quad),
      duration: duration,
      useNativeDriver: false
    }).start();
  }, [duration, fadeAnim, segmentItemWidth]);
  React.useEffect(() => {
    const {
      width
    } = widthSegment(segments, style === null || style === void 0 ? void 0 : style.width);
    setSegmentItemWidth(width);
  }, [segments, style === null || style === void 0 ? void 0 : style.width, widthSegment]);
  React.useEffect(() => {
    if (activeTab <= segments.length - 1) {
      translateXAnim(activeTab);
      setActive(activeTab);
    } else {
      console.warn('=>>>SegmentControl<<<= : Active cannot exceed the length of the array');
    }
  }, [activeTab, translateXAnim, segments]);
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, {
      ...style
    }],
    testID: testID
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.viewWrap
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.boxView
  }, segments === null || segments === void 0 ? void 0 : segments.map((s, i) => {
    return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
      ref: ref,
      key: i,
      onPress: () => {
        const value = s;
        translateXAnim(i);
        setActive(i);
        typeof onPress === 'function' && onPress(value, i);
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.button, widthSegment(segments, style === null || style === void 0 ? void 0 : style.width), heightSegment(style === null || style === void 0 ? void 0 : style.height)]
    }, /*#__PURE__*/React.createElement(View, {
      key: i,
      style: styles.box
    }, iconActiveField ? active === i ? s[iconActiveField] : s[iconField] : s[iconField], /*#__PURE__*/React.createElement(Text, {
      style: active === i ? textActiveStyle : textStyle
    }, s[labelField]))));
  })), /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.animation, styles.boxAnimated, {
      transform: [{
        translateX: fadeAnim
      }],
      width: segmentItemWidth - 10
    }, activeStyle]
  })));
});
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#dddddd'
  },
  viewWrap: {
    margin: 2
  },
  boxView: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
    elevation: 10,
    zIndex: 999
  },
  box: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 50
  },
  boxAnimated: {
    backgroundColor: '#F1F2F6'
  },
  button: {
    flexDirection: 'row'
  },
  animation: {
    position: 'absolute',
    borderRadius: 7,
    top: 2,
    bottom: 2,
    right: 2,
    left: 2,
    borderWidth: 0.5,
    borderColor: 'rgba(0,0,0,0.04)',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
    elevation: 4,
    zIndex: 1
  }
});
export default SegmentControl;
//# sourceMappingURL=index.js.map