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

LiveLike React Native package

import React from 'react';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useStyles } from '../../hooks';
import { LLWidgetOptionResultBar } from './LLWidgetOptionResultBar';
import { LLText } from '../LLText';
export function LLWidgetOption(_ref) {
  let {
    optionImage,
    optionText,
    optionDisabled,
    optionIndex,
    selectedOptionIndex,
    correctOption,
    onOptionChange,
    showWidgetResult,
    percentage,
    styles: stylesProp,
    OptionResultBarComponent = LLWidgetOptionResultBar,
    OptionResultBarComponentStyles
  } = _ref;
  const styles = useStyles({
    componentStylesFn: getWidgetOptionStyles,
    stylesProp
  });
  if (!optionImage && !optionText) {
    return undefined;
  }
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: [styles.optionContainer, selectedOptionIndex === optionIndex && styles.selectedOptionContainer, correctOption !== undefined && (correctOption ? styles.correctOptionContainer : styles.incorrectOptionContainer)],
    onPress: () => onOptionChange(optionIndex),
    disabled: optionDisabled
  }, !!optionImage && /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: optionImage
    },
    style: styles.optionImage
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.optionTextContainer
  }, /*#__PURE__*/React.createElement(LLText, {
    style: styles.optionText
  }, optionText), showWidgetResult && !!percentage && /*#__PURE__*/React.createElement(OptionResultBarComponent, {
    valueInPercent: percentage,
    styles: OptionResultBarComponentStyles
  })), showWidgetResult && /*#__PURE__*/React.createElement(LLText, {
    style: styles.percentText
  }, percentage, "%"));
}
const getWidgetOptionStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return 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