@livelike/react-native/lib/module/components/LLNumberPredictionWidget/LLNumberPredictionWidgetOption.js

LiveLike React Native package

import React from 'react';
import { View, Image, StyleSheet, TextInput } from 'react-native';
import { useStyles, useTheme, useNumberPredictionWidgetOption, useCustomFontStyle } from '../../hooks';
import { LLText } from '../LLText';
export function LLNumberPredictionWidgetOption(_ref) {
  let {
    widgetId,
    optionIndex,
    numberOption,
    onOptionInputChange,
    styles: stylesProp
  } = _ref;
  const {
    theme
  } = useTheme();
  const styles = useStyles({
    componentStylesFn: getWidgetOptionStyles,
    stylesProp
  });
  const optionDetails = useNumberPredictionWidgetOption({
    widgetId,
    optionIndex,
    numberOption
  });
  const numberInputStyle = useCustomFontStyle({
    style: [styles.numberInput, (optionDetails === null || optionDetails === void 0 ? void 0 : optionDetails.showWidgetResult) && (optionDetails !== null && optionDetails !== void 0 && optionDetails.isCorrect ? styles.correctNumberInput : styles.incorrectNumberInput)]
  });
  if (!optionDetails) {
    return undefined;
  }
  const {
    widgetOption,
    showWidgetResult,
    isCorrect,
    isWidgetOptionDisabled,
    interactedNumberOption
  } = optionDetails;
  const {
    correct_number,
    image_url,
    description,
    id
  } = widgetOption;
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.optionContainer, interactedNumberOption && interactedNumberOption.number !== undefined && styles.validOptionContainer]
  }, !!image_url && /*#__PURE__*/React.createElement(Image, {
    source: {
      uri: image_url
    },
    style: styles.optionImage
  }), /*#__PURE__*/React.createElement(View, {
    style: styles.optionDescriptionContainer
  }, /*#__PURE__*/React.createElement(LLText, {
    style: styles.optionDescriptionText
  }, description)), showWidgetResult && correct_number !== undefined && /*#__PURE__*/React.createElement(View, {
    style: [styles.resultContainer, isCorrect ? styles.correctResultContainer : styles.incorrectResultContainer]
  }, /*#__PURE__*/React.createElement(LLText, {
    style: styles.resultText
  }, correct_number)), /*#__PURE__*/React.createElement(TextInput, {
    style: numberInputStyle,
    onChangeText: text => onOptionInputChange({
      optionId: id,
      number: text === '' ? undefined : Number(text)
    }, optionIndex),
    value: `${(interactedNumberOption === null || interactedNumberOption === void 0 ? void 0 : interactedNumberOption.number) ?? ''}`,
    keyboardType: "numeric",
    placeholder: "-",
    placeholderTextColor: theme.text,
    editable: !isWidgetOptionDisabled,
    textAlign: "center"
  }));
}
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,
      paddingLeft: 12,
      backgroundColor: theme.widgetOption
    },
    validOptionContainer: {
      backgroundColor: theme.widgetSelectedOption
    },
    optionImage: {
      width: 42,
      height: 41,
      marginVertical: 2,
      marginRight: 12
    },
    optionDescriptionContainer: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'flex-start',
      flex: 1
    },
    optionDescriptionText: {
      fontSize: 12,
      lineHeight: 15,
      color: theme.text
    },
    resultContainer: {
      width: 33,
      height: 23,
      borderRadius: 2,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 10
    },
    resultText: {
      textAlignVertical: 'center',
      lineHeight: 15,
      color: theme.correctIncorrectText
    },
    correctResultContainer: {
      backgroundColor: theme.correct
    },
    incorrectResultContainer: {
      backgroundColor: theme.incorrect
    },
    numberInput: {
      margin: 6,
      width: 47,
      padding: 6,
      borderRadius: 2,
      textAlign: 'center',
      textAlignVertical: 'center',
      backgroundColor: theme.widgetBackground,
      color: theme.text
    },
    correctNumberInput: {
      borderWidth: 1,
      borderColor: theme.correct
    },
    incorrectNumberInput: {
      borderWidth: 1,
      borderColor: theme.incorrect
    }
  });
};
//# sourceMappingURL=LLNumberPredictionWidgetOption.js.map