@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
201 lines • 6.56 kB
JavaScript
import * as React from 'react';
import { View, Text, StyleSheet, Switch, TouchableOpacity } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { HMSPollType } from '@100mslive/react-native-hms';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { BottomSheet } from './BottomSheet';
import { HMSTextInput } from './HMSTextInput';
import { HMSPrimaryButton } from './HMSPrimaryButton';
import { COLORS } from '../utils/theme';
import { pushToNavigationStack, setPollConfig, setPollName } from '../redux/actions';
import { CreatePollStages } from '../redux/actionTypes';
import { PollIcon, QuizIcon } from '../Icons';
export const CreatePoll = ({}) => {
const dispatch = useDispatch();
const pollName = useSelector(state => state.polls.pollName);
const pollConfig = useSelector(state => state.polls.pollConfig);
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
typeSelectionLabel: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-Regular`
},
typeLabel: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
typeLabelContainer: {
borderColor: theme.palette.border_bright
},
activeTypeLabelContainer: {
borderColor: theme.palette.primary_default
},
typeLabelIconContainer: {
borderColor: theme.palette.border_bright,
backgroundColor: theme.palette.surface_bright
},
activeTypeLabelIconContainer: {
borderColor: theme.palette.primary_default,
backgroundColor: theme.palette.surface_bright
},
pollNameLabel: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-Regular`
}
}));
const handlePollNameChange = name => {
dispatch(setPollName(name));
};
const handleConfigChange = (configKey, configValue) => {
dispatch(setPollConfig({
[configKey]: configValue
}));
};
const handlePollTypeChange = configValue => {
dispatch(setPollConfig({
type: configValue
}));
};
const addQuestions = () => {
if (pollName.trim().length > 0) {
dispatch(pushToNavigationStack(CreatePollStages.POLL_QUESTION_CONFIG));
}
};
return /*#__PURE__*/React.createElement(View, {
style: styles.contentContainer
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.typeSelectionLabel, hmsRoomStyles.typeSelectionLabel]
}, "Select the type you want to continue with"), /*#__PURE__*/React.createElement(View, {
style: styles.typeContainer
}, [{
id: 'poll',
label: 'Poll',
icon: /*#__PURE__*/React.createElement(PollIcon, null),
pressHandler: () => handlePollTypeChange(HMSPollType.poll),
active: pollConfig.type === HMSPollType.poll
}, {
id: 'quiz',
label: 'Quiz',
icon: /*#__PURE__*/React.createElement(QuizIcon, null),
pressHandler: () => handlePollTypeChange(HMSPollType.quiz),
active: pollConfig.type === HMSPollType.quiz
}].map((item, idx) => {
const isFirst = idx === 0;
const isActive = item.active;
return /*#__PURE__*/React.createElement(React.Fragment, {
key: item.id
}, isFirst ? null : /*#__PURE__*/React.createElement(View, {
style: {
width: 16
}
}), /*#__PURE__*/React.createElement(View, {
style: {
flexGrow: 1
}
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
activeOpacity: 0.7,
disabled: isActive,
onPress: item.pressHandler,
style: [styles.typeLabelContainer, isActive ? hmsRoomStyles.activeTypeLabelContainer : hmsRoomStyles.typeLabelContainer]
}, /*#__PURE__*/React.createElement(View, {
style: [styles.typeLabelIconContainer, isActive ? hmsRoomStyles.activeTypeLabelIconContainer : hmsRoomStyles.typeLabelIconContainer]
}, item.icon), /*#__PURE__*/React.createElement(Text, {
style: [styles.typeLabel, hmsRoomStyles.typeLabel]
}, item.label))));
})), /*#__PURE__*/React.createElement(Text, {
style: [styles.pollNameLabel, hmsRoomStyles.pollNameLabel]
}, pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll', " Name"), /*#__PURE__*/React.createElement(HMSTextInput, {
style: styles.textInput,
value: pollName,
autoFocus: false,
onChangeText: handlePollNameChange,
placeholder: `My ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`
}), /*#__PURE__*/React.createElement(BottomSheet.Divider, {
style: {
marginVertical: 24
}
}), [{
id: 'voteCountHidden',
label: 'Hide vote count',
enabled: pollConfig.voteCountHidden,
visible: pollConfig.type === HMSPollType.poll
}
// {
// id: 'resultsAnonymous' as const,
// label: 'Make results anonymous',
// enabled: pollConfig.resultsAnonymous,
// visible: true
// },
].filter(item => item.visible).map(item => {
return /*#__PURE__*/React.createElement(View, {
key: item.id,
style: styles.switchWrapper
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.pollNameLabel, hmsRoomStyles.typeSelectionLabel, {
flexGrow: 1
}]
}, item.label), /*#__PURE__*/React.createElement(Switch, {
value: item.enabled,
thumbColor: COLORS.WHITE,
trackColor: {
true: COLORS.PRIMARY.DEFAULT,
false: COLORS.SECONDARY.DISABLED
},
onValueChange: value => handleConfigChange(item.id, value)
}));
}), /*#__PURE__*/React.createElement(HMSPrimaryButton, {
disabled: !pollName.trim(),
title: `Create ${pollConfig.type === HMSPollType.quiz ? 'Quiz' : 'Poll'}`,
onPress: addQuestions,
loading: false,
style: styles.createPollBtn
}));
};
const styles = StyleSheet.create({
typeContainer: {
flexDirection: 'row',
marginTop: 8,
marginBottom: 24
},
typeLabelContainer: {
flexDirection: 'row',
padding: 8,
borderRadius: 8,
borderWidth: 1,
alignItems: 'center'
},
typeLabelIconContainer: {
padding: 8,
borderRadius: 4,
borderWidth: 1,
marginRight: 16
},
typeLabel: {
fontSize: 16,
lineHeight: 24,
letterSpacing: 0.15
},
switchWrapper: {
marginTop: 4,
flexDirection: 'row'
},
createPollBtn: {
marginTop: 24,
marginBottom: 16
},
contentContainer: {
marginHorizontal: 24
},
typeSelectionLabel: {
fontSize: 12,
lineHeight: 16
},
pollNameLabel: {
fontSize: 14,
lineHeight: 20
},
textInput: {
flex: undefined,
marginTop: 8
}
});
//# sourceMappingURL=CreatePoll.js.map