diff --git a/src/components/RadioButtonWithLabel.js b/src/components/RadioButtonWithLabel.tsx similarity index 51% rename from src/components/RadioButtonWithLabel.js rename to src/components/RadioButtonWithLabel.tsx index 178d5ebdd953..7d8df23bae49 100644 --- a/src/components/RadioButtonWithLabel.js +++ b/src/components/RadioButtonWithLabel.tsx @@ -1,85 +1,71 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import {View} from 'react-native'; -import _ from 'underscore'; +import React, {ComponentType} from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; import useThemeStyles from '@styles/useThemeStyles'; import FormHelpMessage from './FormHelpMessage'; import * as Pressables from './Pressable'; import RadioButton from './RadioButton'; import Text from './Text'; -const propTypes = { +type RadioButtonWithLabelProps = { /** Whether the radioButton is checked */ - isChecked: PropTypes.bool.isRequired, + isChecked: boolean; /** Called when the radioButton or label is pressed */ - onPress: PropTypes.func.isRequired, + onPress: () => void; /** Container styles */ - style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + style?: StyleProp; /** Text that appears next to check box */ - label: PropTypes.string, + label?: string; /** Component to display for label */ - LabelComponent: PropTypes.func, + LabelComponent?: ComponentType; /** Should the input be styled for errors */ - hasError: PropTypes.bool, + hasError?: boolean; /** Error text to display */ - errorText: PropTypes.string, -}; - -const defaultProps = { - style: [], - label: undefined, - LabelComponent: undefined, - hasError: false, - errorText: '', + errorText?: string; }; const PressableWithFeedback = Pressables.PressableWithFeedback; -function RadioButtonWithLabel(props) { +function RadioButtonWithLabel({LabelComponent, style, label = '', hasError = false, errorText = '', isChecked, onPress}: RadioButtonWithLabelProps) { const styles = useThemeStyles(); - const LabelComponent = props.LabelComponent; const defaultStyles = [styles.flexRow, styles.alignItemsCenter]; - const wrapperStyles = _.isArray(props.style) ? [...defaultStyles, ...props.style] : [...defaultStyles, props.style]; - if (!props.label && !LabelComponent) { + if (!label && !LabelComponent) { throw new Error('Must provide at least label or LabelComponent prop'); } return ( <> - + props.onPress()} + onPress={onPress} style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]} wrapperStyle={[styles.ml3, styles.pr2, styles.w100]} // disable hover style when disabled hoverDimmingValue={0.8} pressDimmingValue={0.5} > - {Boolean(props.label) && {props.label}} - {Boolean(LabelComponent) && } + {Boolean(label) && {label}} + {!!LabelComponent && } - + ); } -RadioButtonWithLabel.propTypes = propTypes; -RadioButtonWithLabel.defaultProps = defaultProps; RadioButtonWithLabel.displayName = 'RadioButtonWithLabel'; export default RadioButtonWithLabel;