[Fix] DateRangePickerInput: customArrowIcon always overrides RTL or small icon

Fixes react-dates#1507. Fixes react-dates#1537.

Author: Matan Borenkraout

src/components/DateRangePickerInput.jsx

@@ -182,10 +182,10 @@ function DateRangePickerInput({
   const calendarIcon = customInputIcon || (
     <CalendarIcon {...css(styles.DateRangePickerInput_calendarIcon_svg)} />
   );
-
-  let arrowIcon = customArrowIcon || <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
+  let arrowIcon = <RightArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (isRTL) arrowIcon = <LeftArrow {...css(styles.DateRangePickerInput_arrow_svg)} />;
   if (small) arrowIcon = '-';
+  if (customArrowIcon) arrowIcon = customArrowIcon;
 
   const closeIcon = customCloseIcon || (
     <CloseButton

stories/DateRangePicker_input.js

@@ -126,6 +126,14 @@ storiesOf('DRP - Input Props', module)
       customArrowIcon={<TestCustomArrowIcon />}
     />
   )))
+  .add('with custom arrow icon and RTL support', withInfo()(() => (
+    <DateRangePickerWrapper
+      initialStartDate={moment().add(3, 'days')}
+      initialEndDate={moment().add(10, 'days')}
+      customArrowIcon={<TestCustomArrowIcon />}
+      isRTL
+    />
+  )))
   .add('with custom close icon', withInfo()(() => (
     <DateRangePickerWrapper
       initialStartDate={moment().add(3, 'days')}

test/components/DateRangePickerInput_spec.jsx

@@ -69,6 +69,26 @@ describe('DateRangePickerInput', () => {
       )).dive();
       expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
     });
+
+    it('custom icon is rendered when in RTL mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          isRTL
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
+
+    it('custom icon is rendered when using small mode', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+          small
+        />,
+      ).dive();
+      expect(wrapper.find('.custom-arrow-icon')).to.have.lengthOf(1);
+    });
   });
 
   describe('props.customCloseIcon', () => {