@livelike/react-native
Version:
LiveLike React Native package
156 lines (155 loc) • 4.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LLNumberPredictionWidgetOption = LLNumberPredictionWidgetOption;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _hooks = require("../../hooks");
var _LLText = require("../LLText");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function LLNumberPredictionWidgetOption(_ref) {
let {
widgetId,
optionIndex,
numberOption,
onOptionInputChange,
styles: stylesProp
} = _ref;
const {
theme
} = (0, _hooks.useTheme)();
const styles = (0, _hooks.useStyles)({
componentStylesFn: getWidgetOptionStyles,
stylesProp
});
const optionDetails = (0, _hooks.useNumberPredictionWidgetOption)({
widgetId,
optionIndex,
numberOption
});
const numberInputStyle = (0, _hooks.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.default.createElement(_reactNative.View, {
style: [styles.optionContainer, interactedNumberOption && interactedNumberOption.number !== undefined && styles.validOptionContainer]
}, !!image_url && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: {
uri: image_url
},
style: styles.optionImage
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.optionDescriptionContainer
}, /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
style: styles.optionDescriptionText
}, description)), showWidgetResult && correct_number !== undefined && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.resultContainer, isCorrect ? styles.correctResultContainer : styles.incorrectResultContainer]
}, /*#__PURE__*/_react.default.createElement(_LLText.LLText, {
style: styles.resultText
}, correct_number)), /*#__PURE__*/_react.default.createElement(_reactNative.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 _reactNative.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