Adding ability to disable attachment buttons and fields. (#3541)

* Adding ability to disable attachment buttons and fields.

* Revert package lock

* Use changeOpacity

app/components/autocomplete_selector/autocomplete_selector.js

@@ -36,6 +36,7 @@ export default class AutocompleteSelector extends PureComponent {
         errorText: PropTypes.node,
         roundedBorders: PropTypes.bool,
         isLandscape: PropTypes.bool.isRequired,
+        disabled: PropTypes.bool,
     };
 
     static contextTypes = {
@@ -119,6 +120,7 @@ export default class AutocompleteSelector extends PureComponent {
             showRequiredAsterisk,
             roundedBorders,
             isLandscape,
+            disabled,
         } = this.props;
         const {selectedText} = this.state;
         const style = getStyleSheet(theme);
@@ -188,9 +190,10 @@ export default class AutocompleteSelector extends PureComponent {
                     {labelContent}
                 </View>
                 <TouchableWithFeedback
-                    style={style.flex}
+                    style={disabled ? style.disabled : null}
                     onPress={this.goToSelectorScreen}
                     type={'opacity'}
+                    disabled={disabled}
                 >
                     <View style={inputStyle}>
                         <Text
@@ -284,5 +287,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             color: theme.errorTextColor,
             fontSize: 14,
         },
+        disabled: {
+            opacity: 0.5,
+        },
     };
 });

app/components/message_attachments/action_button/action_button.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import Button from 'react-native-button';
 
 import {preventDoubleTap} from 'app/utils/tap';
-import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
 import ActionButtonText from './action_button_text';
 
 export default class ActionButton extends PureComponent {
@@ -19,6 +19,7 @@ export default class ActionButton extends PureComponent {
         postId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
         cookie: PropTypes.string.isRequired,
+        disabled: PropTypes.bool,
     };
 
     handleActionPress = preventDoubleTap(() => {
@@ -27,13 +28,15 @@ export default class ActionButton extends PureComponent {
     }, 4000);
 
     render() {
-        const {name, theme} = this.props;
+        const {name, theme, disabled} = this.props;
         const style = getStyleSheet(theme);
 
         return (
             <Button
                 containerStyle={style.button}
+                disabledContainerStyle={style.buttonDisabled}
                 onPress={this.handleActionPress}
+                disabled={disabled}
             >
                 <ActionButtonText
                     message={name}
@@ -49,6 +52,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         button: {
             borderRadius: 2,
             backgroundColor: theme.buttonBg,
+            opacity: 1,
             alignItems: 'center',
             marginBottom: 2,
             marginRight: 5,
@@ -56,6 +60,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             paddingHorizontal: 10,
             paddingVertical: 7,
         },
+        buttonDisabled: {
+            backgroundColor: changeOpacity(theme.buttonBg, 0.3),
+        },
         text: {
             color: theme.buttonColor,
             fontSize: 12,

app/components/message_attachments/action_menu/action_menu.js

@@ -18,6 +18,7 @@ export default class ActionMenu extends PureComponent {
         options: PropTypes.arrayOf(PropTypes.object),
         postId: PropTypes.string.isRequired,
         selected: PropTypes.object,
+        disabled: PropTypes.bool,
     };
 
     constructor(props) {
@@ -62,6 +63,7 @@ export default class ActionMenu extends PureComponent {
             name,
             dataSource,
             options,
+            disabled,
         } = this.props;
         const {selected} = this.state;
 
@@ -72,6 +74,7 @@ export default class ActionMenu extends PureComponent {
                 options={options}
                 selected={selected}
                 onSelected={this.handleSelect}
+                disabled={disabled}
             />
         );
     }

app/components/message_attachments/action_menu/action_menu.test.js

@@ -52,4 +52,14 @@ describe('ActionMenu', () => {
 
         expect(wrapper.state('selected')).toBe(props.selected);
     });
+
+    test('disabled works', () => {
+        const props = {
+            ...baseProps,
+            disabled: true,
+        };
+        const wrapper = shallow(<ActionMenu {...props}/>);
+
+        expect(wrapper.props().disabled).toBe(true);
+    });
 });

app/components/message_attachments/attachment_actions.js

@@ -41,6 +41,7 @@ export default class AttachmentActions extends PureComponent {
                         defaultOption={action.default_option}
                         options={action.options}
                         postId={postId}
+                        disabled={action.disabled}
                     />
                 );
                 break;
@@ -53,6 +54,7 @@ export default class AttachmentActions extends PureComponent {
                         cookie={action.cookie}
                         name={action.name}
                         postId={postId}
+                        disabled={action.disabled}
                     />
                 );
                 break;