@livelike/react-native/lib/module/components/LLCheerMeterWidget/LLCheerMeterWidgetResult.js

LiveLike React Native package

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useStyles } from '../../hooks';
import { LLText } from '../LLText';
export function LLCheerMeterWidgetResult(_ref) {
  let {
    widgetOptions,
    styles: stylesProp
  } = _ref;
  const styles = useStyles({
    componentStylesFn: getCheerMeterWidgetResultStyles,
    stylesProp
  });
  if (!(widgetOptions !== null && widgetOptions !== void 0 && widgetOptions.length)) {
    return undefined;
  }
  const totalCount = widgetOptions.reduce((total, option) => total + option.vote_count, 0);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.resultContainer
  }, widgetOptions.map((option, index) => /*#__PURE__*/React.createElement(View, {
    style: [{
      width: `${Math.round(option.vote_count / totalCount * 100)}%`
    }, !totalCount && {
      flex: 1
    }, styles.optionContainer, index === 0 ? styles.leftOptionContainer : styles.rightOptionContainer],
    key: option.id
  }, /*#__PURE__*/React.createElement(LLText, {
    style: styles.optionText,
    numberOfLines: 1,
    ellipsizeMode: 'tail'
  }, option.description))));
}
const getCheerMeterWidgetResultStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return StyleSheet.create({
    resultContainer: {
      display: 'flex',
      flexDirection: 'row',
      marginTop: 4
    },
    optionContainer: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      height: 30,
      paddingHorizontal: 6
    },
    leftOptionContainer: {
      borderTopLeftRadius: 4,
      borderBottomLeftRadius: 4,
      backgroundColor: theme.correct
    },
    rightOptionContainer: {
      borderTopRightRadius: 4,
      borderBottomRightRadius: 4,
      backgroundColor: theme.incorrect
    },
    optionText: {
      color: theme.correctIncorrectText
    }
  });
};
//# sourceMappingURL=LLCheerMeterWidgetResult.js.map