Merge branch 'master' of github.com:reactstrap/reactstrap

* 'master' of github.com:reactstrap/reactstrap: feat(CustomInput) : add innerRef to CustomInput (reactstrap#1123) feat(Tooltip): allow additional arrow classNames (reactstrap#1119)
juanmaguitar · Jul 10, 2018 · 2d67726 · 2d67726
2 parents a42496a + 418fdf8
commit 2d67726
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 5 deletions.
diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js
@@ -79,7 +79,13 @@ export default class FormPage extends React.Component {
   invalid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
   bsSize: PropTypes.string,
   cssModule: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]) // for type="select"
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select"
+  // innerRef would be referenced to select node or input DOM node, depends on type property
+  innerRef: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+    PropTypes.func,
+  ])
 };`}
           </PrismCode>
         </pre>

diff --git a/src/CustomInput.js b/src/CustomInput.js
@@ -13,7 +13,12 @@ const propTypes = {
   invalid: PropTypes.bool,
   bsSize: PropTypes.string,
   cssModule: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func])
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
+  innerRef: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+    PropTypes.func,
+  ])
 };
 
 function CustomInput(props) {
@@ -26,6 +31,7 @@ function CustomInput(props) {
     cssModule,
     children,
     bsSize,
+    innerRef,
     ...attributes
   } = props;
 
@@ -43,20 +49,20 @@ function CustomInput(props) {
   ), cssModule);
 
   if (type === 'select') {
-    return <select {...attributes} className={classNames(validationClassNames, customClass)}>{children}</select>;
+    return <select {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
   }
 
   if (type === 'file') {
     return (
       <div className={customClass}>
-        <input {...attributes} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} />
+        <input {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} />
         <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={attributes.id}>{label || 'Choose file'}</label>
       </div>
     );
   }
 
   if (type !== 'checkbox' && type !== 'radio') {
-    return <input {...attributes} className={classNames(validationClassNames, customClass)} />;
+    return <input {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)} />;
   }
 
   const wrapperClasses = classNames(
@@ -71,6 +77,7 @@ function CustomInput(props) {
     <div className={wrapperClasses}>
       <input
         {...attributes}
+        ref={innerRef}
         className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
       />
       <label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={attributes.id}>{label}</label>

diff --git a/src/__tests__/CustomInput.spec.js b/src/__tests__/CustomInput.spec.js
@@ -44,6 +44,13 @@ describe('Custom Inputs', () => {
       const checkbox = mount(<CustomInput type="checkbox" data-testprop="yo" />);
       expect(checkbox.find('input').prop('data-testprop')).toBe('yo');
     });
+
+    it('should reference innerRef to the input node', () => {
+      const ref = React.createRef();
+      mount(<CustomInput type="checkbox" innerRef={ref} />);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
   });
 
   describe('CustomRadio', () => {
@@ -87,6 +94,13 @@ describe('Custom Inputs', () => {
       const radio = mount(<CustomInput type="radio" data-testprop="yo" />);
       expect(radio.find('input').prop('data-testprop')).toBe('yo');
     });
+
+    it('should reference innerRef to the input node', () => {
+      const ref = React.createRef();
+      mount(<CustomInput type="radio" innerRef={ref} />);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
   });
 
   describe('CustomSelect', () => {
@@ -119,6 +133,13 @@ describe('Custom Inputs', () => {
       const select = mount(<CustomInput type="select" data-testprop="yo" />);
       expect(select.find('select').prop('data-testprop')).toBe('yo');
     });
+
+    it('should reference innerRef to the select node', () => {
+      const ref = React.createRef();
+      mount(<CustomInput type="select" innerRef={ref} />);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(HTMLSelectElement);
+    });
   });
 
   describe('CustomFile', () => {
@@ -162,6 +183,13 @@ describe('Custom Inputs', () => {
       const file = mount(<CustomInput type="file" data-testprop="yo" />);
       expect(file.find('input').prop('data-testprop')).toBe('yo');
     });
+
+    it('should reference innerRef to the input node', () => {
+      const ref = React.createRef();
+      mount(<CustomInput type="file" innerRef={ref} />);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
   });
 
   describe('CustomRange', () => {
@@ -189,5 +217,12 @@ describe('Custom Inputs', () => {
       const range = mount(<CustomInput type="range" data-testprop="yo" />);
       expect(range.find('input').prop('data-testprop')).toBe('yo');
     });
+
+    it('should reference innerRef to the input node', () => {
+      const ref = React.createRef();
+      mount(<CustomInput type="range" innerRef={ref} />);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
   });
 });