diff --git a/src/components/Picker/Picker.js b/src/components/Picker/Picker.js index 98aba4e630c3..fc52a45ff97e 100644 --- a/src/components/Picker/Picker.js +++ b/src/components/Picker/Picker.js @@ -78,12 +78,16 @@ const propTypes = { /** Additional events passed to the core Picker for specific platforms such as web */ additionalPickerEvents: PropTypes.func, + + /** Hint text that appears below the picker */ + hintText: PropTypes.string, }; const defaultProps = { label: '', isDisabled: false, errorText: '', + hintText: '', containerStyles: [], backgroundColor: undefined, inputID: undefined, @@ -172,6 +176,27 @@ class Picker extends PureComponent { render() { const hasError = !_.isEmpty(this.props.errorText); + if (this.props.isDisabled) { + return ( + + {this.props.label && ( + + {this.props.label} + + )} + + {this.props.value} + + {this.props.hintText + && ( + + {this.props.hintText} + + )} + + ); + } + return ( <> + {this.props.hintText + && ( + + {this.props.hintText} + + )} ); } diff --git a/src/languages/en.js b/src/languages/en.js index 225dc35af0ab..9af978e6a1e2 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1031,6 +1031,7 @@ export default { nameIsRequiredError: 'You need to define a name for your workspace.', currencyInputLabel: 'Default currency', currencyInputHelpText: 'All expenses on this workspace will be converted to this currency.', + currencyInputDisabledText: 'The default currency can\'t be changed because this workspace is linked to a USD bank account.', save: 'Save', genericFailureMessage: 'An error occurred updating the workspace, please try again.', avatarUploadFailureMessage: 'An error occurred uploading the avatar, please try again.', diff --git a/src/languages/es.js b/src/languages/es.js index 3a6eb53ae40e..99f30f929179 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1032,6 +1032,7 @@ export default { nameIsRequiredError: 'Debes definir un nombre para tu espacio de trabajo.', currencyInputLabel: 'Moneda por defecto', currencyInputHelpText: 'Todas los gastos en este espacio de trabajo serán convertidos a esta moneda.', + currencyInputDisabledText: 'La moneda predeterminada no se puede cambiar porque este espacio de trabajo está vinculado a una cuenta bancaria en USD.', save: 'Guardar', genericFailureMessage: 'Se produjo un error al guardar el espacio de trabajo. Por favor, inténtalo de nuevo.', avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.', diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js index dd31c56d2884..d212e3a75a0e 100644 --- a/src/pages/workspace/WorkspaceSettingsPage.js +++ b/src/pages/workspace/WorkspaceSettingsPage.js @@ -7,7 +7,6 @@ import lodashGet from 'lodash/get'; import ONYXKEYS from '../../ONYXKEYS'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import styles from '../../styles/styles'; -import Text from '../../components/Text'; import compose from '../../libs/compose'; import * as Policy from '../../libs/actions/Policy'; import * as Expensicons from '../../components/Icon/Expensicons'; @@ -143,11 +142,13 @@ class WorkspaceSettingsPage extends React.Component { items={this.getCurrencyItems()} isDisabled={hasVBA} defaultValue={this.props.policy.outputCurrency} + hintText={ + hasVBA + ? this.props.translate('workspace.editor.currencyInputDisabledText') + : this.props.translate('workspace.editor.currencyInputHelpText') + } /> - - {this.props.translate('workspace.editor.currencyInputHelpText')} - )} diff --git a/src/stories/Picker.stories.js b/src/stories/Picker.stories.js index 9a7a0ea88c4b..8b9904416bec 100644 --- a/src/stories/Picker.stories.js +++ b/src/stories/Picker.stories.js @@ -31,6 +31,7 @@ const Default = Template.bind({}); Default.args = { label: 'Default picker', name: 'Default', + hintText: 'Default hint text', items: [ { label: 'Orange', @@ -48,6 +49,7 @@ PickerWithValue.args = { label: 'Picker with defined value', name: 'Picker with defined value', value: 'apple', + hintText: 'Picker with hint text', items: [ { label: 'Orange', @@ -64,6 +66,7 @@ const ErrorStory = Template.bind({}); ErrorStory.args = { label: 'Picker with error', name: 'PickerWithError', + hintText: 'Picker hint text', errorText: 'This field has an error.', items: [ { @@ -81,7 +84,9 @@ const Disabled = Template.bind({}); Disabled.args = { label: 'Picker disabled', name: 'Disabled', + value: 'orange', isDisabled: true, + hintText: 'Picker hint text', items: [ { label: 'Orange',