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

Custom typescript only select component for react native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SelectRow;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _useAnimation = _interopRequireDefault(require("../hooks/useAnimation"));
var _useStyles = _interopRequireDefault(require("../hooks/useStyles"));
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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); }
function SelectRow({
  value,
  onPress,
  multi,
  checked,
  selectionEffectColor = '#efefef',
  reverse,
  optionContainerStyle,
  optionTextStyle,
  optionCheckColors,
  ...rest
}) {
  const [animatedValue, fade] = (0, _useAnimation.default)('fade');
  const styles = (0, _useStyles.default)(() => ({
    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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [styles.clickOverlay]
  }), /*#__PURE__*/_react.default.createElement(_reactNative.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.default.createElement(_reactNative.Text, {
    style: optionTextStyle
  }, value), /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({
    style: [styles.showIcon],
    checked: checked,
    onPress: onPress
  }, optionCheckColors))));
}
//# sourceMappingURL=SelectRow.js.map