Merge pull request #16449 from allroundexperts/fix-15877

fix-15877: add disabled state styles to Picker

Author: cristipaval

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 (
+                <View>
+                    {this.props.label && (
+                        <Text style={[styles.textLabelSupporting, styles.mb1]} numberOfLines={1}>
+                            {this.props.label}
+                        </Text>
+                    )}
+                    <Text numberOfLines={1}>
+                        {this.props.value}
+                    </Text>
+                    {this.props.hintText
+                    && (
+                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                            {this.props.hintText}
+                        </Text>
+                    )}
+                </View>
+            );
+        }
+
         return (
             <>
                 <View
@@ -230,6 +255,12 @@ class Picker extends PureComponent {
                     />
                 </View>
                 <FormHelpMessage message={this.props.errorText} />
+                {this.props.hintText
+                    && (
+                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
+                            {this.props.hintText}
+                        </Text>
+                    )}
             </>
         );
     }

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.',

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.',

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')
+                                    }
                                 />
                             </View>
-                            <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>
-                                {this.props.translate('workspace.editor.currencyInputHelpText')}
-                            </Text>
                         </OfflineWithFeedback>
                     </Form>
                 )}

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',