@100mslive/react-native-room-kit/lib/module/components/PollResponseProgressView.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useHMSRoomStyleSheet } from '../hooks-util';
export const PollResponseProgressView = ({
  option,
  totalVotes
}) => {
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    surfaceHighRegularText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    },
    progressContainer: {
      backgroundColor: theme.palette.surface_bright
    },
    progress: {
      backgroundColor: theme.palette.primary_default
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallText, hmsRoomStyles.surfaceHighRegularText]
  }, option.text), /*#__PURE__*/React.createElement(Text, {
    style: [styles.smallText, hmsRoomStyles.surfaceHighRegularText]
  }, option.voteCount, " ", option.voteCount > 1 ? 'votes' : 'vote')), /*#__PURE__*/React.createElement(View, {
    style: [hmsRoomStyles.progressContainer, styles.progressContainer]
  }, /*#__PURE__*/React.createElement(View, {
    style: [hmsRoomStyles.progress, styles.progress, {
      width: `${option.voteCount / totalVotes * 100}%`
    }]
  })));
};
const styles = StyleSheet.create({
  container: {
    marginBottom: 16
  },
  smallText: {
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 8
  },
  progressContainer: {
    flex: 1,
    height: 8,
    borderRadius: 4,
    overflow: 'hidden'
  },
  progress: {
    height: '100%'
  }
});
//# sourceMappingURL=PollResponseProgressView.js.map