@livelike/react-native
Version:
LiveLike React Native package
75 lines • 2.27 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useDebounce, useStyles, useWidgetActions, useWidgetInteractedAnalytics, useWidgetOptions } from '../../hooks';
import { LLNumberPredictionWidgetOption } from './LLNumberPredictionWidgetOption';
export function LLNumberPredictionWidgetBody(_ref) {
let {
widgetId,
styles: stylesProp,
OptionComponent = LLNumberPredictionWidgetOption
} = _ref;
const [numberOptions, setNumberOptions] = useState([]);
const styles = useStyles({
componentStylesFn: getNumberPredictionWidgetBodyStyles,
stylesProp
});
const widgetOptions = useWidgetOptions({
widgetId
});
const {
updateNumberPredictionOptionAction
} = useWidgetActions({
widgetId
});
const {
trackWidgetInteractedAction
} = useWidgetInteractedAnalytics({
widgetId
});
const debouncedTrackInteraction = useDebounce({
callback: trackWidgetInteractedAction,
timer: 500
});
const onOptionInputHandler = useCallback((numberOption, index) => {
const newNumberOptions = [...numberOptions];
newNumberOptions.splice(index, 1, numberOption);
setNumberOptions(newNumberOptions);
updateNumberPredictionOptionAction({
widgetId,
numberOption,
optionIndex: index
});
debouncedTrackInteraction({
interactionItem: {
value: numberOption,
widgetOption: widgetOptions[index]
}
});
}, [numberOptions, widgetId, widgetOptions, debouncedTrackInteraction]);
if (!widgetOptions || !widgetOptions.length) {
return undefined;
}
return /*#__PURE__*/React.createElement(View, {
style: styles.bodyContainer
}, widgetOptions.map((option, index) => /*#__PURE__*/React.createElement(OptionComponent, {
key: option.id,
optionIndex: index,
widgetId: widgetId,
numberOption: numberOptions[index],
onOptionInputChange: onOptionInputHandler
})));
}
const getNumberPredictionWidgetBodyStyles = _ref2 => {
let {
theme
} = _ref2;
return StyleSheet.create({
bodyContainer: {
display: 'flex',
flexDirection: 'column',
marginHorizontal: 16,
marginBottom: 14
}
});
};
//# sourceMappingURL=LLNumberPredictionWidgetBody.js.map