@livelike/react-native/lib/commonjs/components/LLWidgetOption/LLWidgetOption.js

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LLWidgetOption = LLWidgetOption;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _hooks = require("../../hooks");
var _LLWidgetOptionResultBar = require("./LLWidgetOptionResultBar");
var _LLText = require("../LLText");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function LLWidgetOption(_ref) {
  let {
    optionImage,
    optionText,
    optionDisabled,
    optionIndex,
    selectedOptionIndex,
    correctOption,
    onOptionChange,
    showWidgetResult,
    percentage,
    styles: stylesProp,
    OptionResultBarComponent = _LLWidgetOptionResultBar.LLWidgetOptionResultBar,
    OptionResultBarComponentStyles
  } = _ref;
  const styles = (0, _hooks.useStyles)({
    componentStylesFn: getWidgetOptionStyles,
    stylesProp
  });
  if (!optionImage && !optionText) {
    return undefined;
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    style: [styles.optionContainer, selectedOptionIndex === optionIndex && styles.selectedOptionContainer, correctOption !== undefined && (correctOption ? styles.correctOptionContainer : styles.incorrectOptionContainer)],
    onPress: () => onOptionChange(optionIndex),
    disabled: optionDisabled
  }, !!optionImage && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    source: {
      uri: optionImage
    },
    style: styles.optionImage
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.optionTextContainer
  }, /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
    style: styles.optionText
  }, optionText), showWidgetResult && !!percentage && /*#__PURE__*/_react.default.createElement(OptionResultBarComponent, {
    valueInPercent: percentage,
    styles: OptionResultBarComponentStyles
  })), showWidgetResult && /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
    style: styles.percentText
  }, percentage, "%"));
}
const getWidgetOptionStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return _reactNative.StyleSheet.create({
    optionContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      height: 45,
      marginVertical: 4,
      borderRadius: 4,
      paddingHorizontal: 14,
      backgroundColor: theme.widgetOption
    },
    selectedOptionContainer: {
      backgroundColor: theme.widgetSelectedOption
    },
    correctOptionContainer: {
      borderWidth: 2,
      borderColor: theme.correct,
      paddingHorizontal: 12
    },
    incorrectOptionContainer: {
      borderWidth: 2,
      borderColor: theme.incorrect,
      paddingHorizontal: 12
    },
    optionImage: {
      width: 42,
      height: 41,
      marginVertical: 2,
      marginRight: 14
    },
    optionTextContainer: {
      flex: 1,
      height: '100%',
      paddingVertical: 10,
      justifyContent: 'center',
      alignItems: 'flex-start'
    },
    optionText: {
      fontSize: 12,
      lineHeight: 15,
      textAlignVertical: 'center',
      color: theme.text
    },
    percentText: {
      marginLeft: 10,
      color: theme.text
    }
  });
};
//# sourceMappingURL=LLWidgetOption.js.map