@devrue/rn-select/lib/module/components/SelectRow.js

Custom typescript only select component for react native

function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
import React from 'react';
import { Animated, Pressable, Text } from 'react-native';
import useAnimations from '../hooks/useAnimation';
import useStyles from '../hooks/useStyles';
import Checkbox from './Checkbox';
export default function SelectRow({
  value,
  onPress,
  multi,
  checked,
  selectionEffectColor = '#efefef',
  reverse,
  optionContainerStyle,
  optionTextStyle,
  optionCheckColors,
  ...rest
}) {
  const [animatedValue, fade] = useAnimations('fade');
  const styles = useStyles(() => ({
    itemContainer: {
      paddingVertical: multi ? 16 : 20,
      paddingHorizontal: 8,
      flexDirection: 'row',
      alignItems: 'center',
      columnGap: 12,
      justifyContent: 'space-between',
      zIndex: 10,
      gap: 6,
      position: 'relative',
      ...(reverse && {
        justifyContent: 'flex-end',
        flexDirection: 'row-reverse'
      })
    },
    clickOverlay: {
      position: 'absolute',
      backgroundColor: selectionEffectColor,
      opacity: animatedValue,
      left: 0,
      zIndex: 1,
      width: '100%',
      height: '100%'
    },
    showIcon: {
      ...(!multi && !checked && {
        opacity: 0
      })
    }
  }), [multi, animatedValue, reverse]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.clickOverlay]
  }), /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
    style: [styles.itemContainer, optionContainerStyle],
    onPress: onPress,
    onPressIn: () => fade(500),
    onPressOut: () => fade(500, 'out'),
    onHoverIn: () => fade(500),
    onHoverOut: () => fade(500, 'out')
  }), /*#__PURE__*/React.createElement(Text, {
    style: optionTextStyle
  }, value), /*#__PURE__*/React.createElement(Checkbox, _extends({
    style: [styles.showIcon],
    checked: checked,
    onPress: onPress
  }, optionCheckColors))));
}
//# sourceMappingURL=SelectRow.js.map