diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js index 4497eab72de8..5bbd2363c4b3 100644 --- a/src/components/StatePicker/StateSelectorModal.js +++ b/src/components/StatePicker/StateSelectorModal.js @@ -25,12 +25,16 @@ const propTypes = { /** Function to call when the user types in the search input */ setSearchValue: PropTypes.func.isRequired, + + /** Label to display on field */ + label: PropTypes.string, }; const defaultProps = { currentState: '', onClose: () => {}, onStateSelected: () => {}, + label: undefined, }; function filterOptions(searchValue, data) { @@ -42,7 +46,7 @@ function filterOptions(searchValue, data) { return _.filter(data, (country) => country.text.toLowerCase().includes(searchValue.toLowerCase())); } -function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue}) { +function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) { const {translate} = useLocalize(); const countryStates = useMemo( @@ -69,13 +73,13 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, useNativeDriver > {}, + label: undefined, }; -function StatePicker({value, errorText, onInputChange, forwardedRef}) { +function StatePicker({value, errorText, onInputChange, forwardedRef, label}) { const {translate} = useLocalize(); const allStates = translate('allStates'); const [isPickerVisible, setIsPickerVisible] = useState(false); @@ -61,7 +65,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef}) { ref={forwardedRef} shouldShowRightIcon title={title} - description={translate('common.state')} + description={label || translate('common.state')} descriptionTextStyle={descStyle} onPress={showPickerModal} /> @@ -75,6 +79,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef}) { onStateSelected={updateStateInput} searchValue={searchValue} setSearchValue={setSearchValue} + label={label} /> );