Fix issue with editable prop not working on Picker component

wix · Nov 27, 2021 · b1fe026 · b1fe026
1 parent fb74062
commit b1fe026
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 9 deletions.
diff --git a/generatedTypes/src/incubator/expandableOverlay/index.d.ts b/generatedTypes/src/incubator/expandableOverlay/index.d.ts
@@ -37,6 +37,10 @@ export declare type ExpandableOverlayProps = TouchableOpacityProps & PropsWithCh
      * A custom overlay to render instead of Modal or Dialog components
      */
     renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined;
+    /**
+     * Disabled opening expandable overlay
+     */
+    disabled?: boolean;
 }>;
 interface ExpandableOverlayMethods {
     openExpandable: () => void;
@@ -71,6 +75,10 @@ declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps &
      * A custom overlay to render instead of Modal or Dialog components
      */
     renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined) | undefined;
+    /**
+     * Disabled opening expandable overlay
+     */
+    disabled?: boolean | undefined;
 } & {
     children?: React.ReactNode;
 } & React.RefAttributes<ExpandableOverlayMethods>>;

diff --git a/src/components/picker/__tests__/index.spec.js b/src/components/picker/__tests__/index.spec.js
@@ -1,4 +1,6 @@
-import {Picker} from '../index';
+import React, {useState} from 'react';
+import {fireEvent, render} from '@testing-library/react-native';
+import Picker, {Picker as _Picker} from '../index';
 
 const countries = [
   {label: 'Israel', value: 'IL'},
@@ -11,15 +13,46 @@ const countries = [
 describe('Picker', () => {
   describe('getLabel', () => {
     it('should get label of a simple item', () => {
-      let uut = new Picker({value: countries[2]});
+      let uut = new _Picker({value: countries[2]});
       expect(uut.getLabelValueText()).toEqual(countries[2].label);
-      uut = new Picker({value: countries[3]});
+      uut = new _Picker({value: countries[3]});
       expect(uut.getLabelValueText()).toEqual(countries[3].label);
     });
 
     it('should get label out of an array of items', () => {
-      const uut = new Picker({value: [countries[2], countries[4]]});
+      const uut = new _Picker({value: [countries[2], countries[4]]});
       expect(uut.getLabelValueText()).toEqual(`${countries[2].label}, ${countries[4].label}`);
     });
   });
+
+  describe('Picker - Render Tests', () => {
+    it('should open picker overlay after pressing the picker', () => {
+      const renderTree = render(<TestCase/>);
+      const picker = renderTree.getByTestId('picker');
+      const pickerOverlay = renderTree.getByTestId('picker.overlay');
+      expect(pickerOverlay.props.visible).toBe(false);
+      fireEvent.press(picker);
+      expect(pickerOverlay.props.visible).toBe(true);
+    });
+
+    it('should not open picker overlay after pressing when picker is disabled', () => {
+      const renderTree = render(<TestCase editable={false}/>);
+      const picker = renderTree.getByTestId('picker');
+      const pickerOverlay = renderTree.getByTestId('picker.overlay');
+      expect(pickerOverlay.props.visible).toBe(false);
+      fireEvent.press(picker);
+      expect(pickerOverlay.props.visible).toBe(false);
+    });
+  });
 });
+
+const TestCase = props => {
+  const [value, setValue] = useState(props.value);
+  return (
+    <Picker testID="picker" {...props} onChange={setValue} value={value}>
+      {countries.map(country => {
+        return <Picker.Item key={country.value} value={country.value} label={country.label}/>;
+      })}
+    </Picker>
+  );
+};
diff --git a/src/components/picker/index.js b/src/components/picker/index.js
@@ -447,7 +447,8 @@ class Picker extends Component {
       enableModalBlur,
       topBarProps,
       pickerModalProps,
-      value
+      value,
+      editable
     } = this.props;
 
     if (useNativePicker) {
@@ -489,15 +490,17 @@ class Picker extends Component {
           modalProps={modalProps}
           expandableContent={this.renderExpandableModal()}
           renderCustomOverlay={renderCustomModal ? this.renderCustomModal : undefined}
-          testID={renderCustomModal ? testID : undefined}
+          testID={testID}
           {...customPickerProps}
+          disabled={editable === false}
         >
           {renderPicker ? (
             renderPicker(value, this.getLabel(value))
           ) : (
             <TextField
               ref={forwardedRef}
               {...textInputProps}
+              testID={`${testID}.input`}
               containerStyle={[paddings, margins, positionStyle, containerStyle]}
               {...this.getAccessibilityInfo()}
               importantForAccessibility={'no-hide-descendants'}

diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx
@@ -42,6 +42,10 @@ export type ExpandableOverlayProps = TouchableOpacityProps &
      * A custom overlay to render instead of Modal or Dialog components
      */
     renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined;
+    /**
+     * Disabled opening expandable overlay
+     */
+    disabled?: boolean;
   }>;
 
 interface ExpandableOverlayMethods {
@@ -59,6 +63,8 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
     showTopBar,
     topBarProps,
     renderCustomOverlay,
+    disabled,
+    testID,
     ...others
   } = props;
   const [visible, setExpandableVisible] = useState(false);
@@ -79,7 +85,7 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
 
   const renderModal = () => {
     return (
-      <Modal {...modalProps} visible={visible} onDismiss={closeExpandable}>
+      <Modal testID={`${testID}.overlay`} {...modalProps} visible={visible} onDismiss={closeExpandable}>
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps}/>}
         {expandableContent}
       </Modal>
@@ -88,7 +94,7 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
 
   const renderDialog = () => {
     return (
-      <Dialog {...dialogProps} visible={visible} onDismiss={closeExpandable}>
+      <Dialog testID={`${testID}.overlay`} {...dialogProps} visible={visible} onDismiss={closeExpandable}>
         {expandableContent}
       </Dialog>
     );
@@ -108,7 +114,7 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   };
 
   return (
-    <TouchableOpacity {...others} onPress={openExpandable}>
+    <TouchableOpacity {...others} onPress={openExpandable} disabled={disabled} testID={testID}>
       <View pointerEvents="none">{children}</View>
       {renderOverlay()}
     </TouchableOpacity>