Added prop and tests for custom arrow icon

Author: JemarJones

src/components/DateRangePicker.jsx

@@ -42,6 +42,7 @@ const defaultProps = {
   showClearDates: false,
   showDefaultInputIcon: false,
   customInputIcon: null,
+  customArrowIcon: null,
   disabled: false,
   required: false,
   reopenPickerOnClearDates: false,
@@ -256,6 +257,7 @@ export default class DateRangePicker extends React.Component {
       showClearDates,
       showDefaultInputIcon,
       customInputIcon,
+      customArrowIcon,
       disabled,
       required,
       phrases,
@@ -288,6 +290,7 @@ export default class DateRangePicker extends React.Component {
             showCaret={!withPortal && !withFullScreenPortal}
             showDefaultInputIcon={showDefaultInputIcon}
             customInputIcon={customInputIcon}
+            customArrowIcon={customArrowIcon}
             disabled={disabled}
             required={required}
             reopenPickerOnClearDates={reopenPickerOnClearDates}

src/components/DateRangePickerInput.jsx

@@ -36,6 +36,7 @@ const propTypes = {
   showCaret: PropTypes.bool,
   showDefaultInputIcon: PropTypes.bool,
   customInputIcon: PropTypes.node,
+  customArrowIcon: PropTypes.node,
 
   // i18n
   phrases: PropTypes.shape({
@@ -69,6 +70,7 @@ const defaultProps = {
   showCaret: false,
   showDefaultInputIcon: false,
   customInputIcon: null,
+  customArrowIcon: null,
 
   // i18n
   phrases: {
@@ -125,10 +127,12 @@ export default class DateRangePickerInput extends React.Component {
       showCaret,
       showDefaultInputIcon,
       customInputIcon,
+      customArrowIcon,
       phrases,
     } = this.props;
 
     const inputIcon = customInputIcon || (<CalendarIcon />);
+    const arrowIcon = customArrowIcon || (<RightArrow />);
 
     return (
       <div
@@ -160,7 +164,7 @@ export default class DateRangePickerInput extends React.Component {
         />
 
         <div className="DateRangePickerInput__arrow">
-          <RightArrow />
+          {arrowIcon}
         </div>
 
         <DateInput

src/components/DateRangePickerInputController.jsx

@@ -41,6 +41,7 @@ const propTypes = {
   onDatesChange: PropTypes.func,
 
   customInputIcon: PropTypes.node,
+  customArrowIcon: PropTypes.node,
 
   // i18n
   phrases: PropTypes.shape({
@@ -75,6 +76,7 @@ const defaultProps = {
   onDatesChange() {},
 
   customInputIcon: null,
+  customArrowIcon: null,
 
   // i18n
   phrases: {
@@ -197,6 +199,7 @@ export default class DateRangePickerInputWithHandlers extends React.Component {
       showCaret,
       showDefaultInputIcon,
       customInputIcon,
+      customArrowIcon,
       disabled,
       required,
       phrases,
@@ -224,6 +227,7 @@ export default class DateRangePickerInputWithHandlers extends React.Component {
         showCaret={showCaret}
         showDefaultInputIcon={showDefaultInputIcon}
         customInputIcon={customInputIcon}
+        customArrowIcon={customArrowIcon}
         phrases={phrases}
         onStartDateChange={this.onStartDateChange}
         onStartDateFocus={this.onStartDateFocus}

stories/DateRangePicker.js

@@ -75,6 +75,19 @@ const TestCustomInputIcon = () => (
   </span>
 );
 
+const TestCustomArrowIcon = () => (
+  <span
+    style={{
+      border: '1px solid #dce0e0',
+      backgroundColor: '#fff',
+      color: '#484848',
+      padding: '3px',
+    }}
+  >
+    ->
+  </span>
+);
+
 class TestWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -258,4 +271,9 @@ storiesOf('DateRangePicker', module)
     <DateRangePickerWrapper
       customInputIcon={<TestCustomInputIcon />}
     />
+  ))
+  .addWithInfo('with custom arrow icon', () => (
+    <DateRangePickerWrapper
+      customArrowIcon={<TestCustomArrowIcon />}
+    />
   ));

test/components/DateRangePickerInput_spec.jsx

@@ -107,6 +107,16 @@ describe('DateRangePickerInput', () => {
     });
   });
 
+  describe('props.customArrowIcon is a React Element', () => {
+    it('has custom icon', () => {
+      const wrapper = shallow(
+        <DateRangePickerInput
+          customArrowIcon={<span className="custom-arrow-icon" />}
+        />);
+      expect(wrapper.find('.DateRangePickerInput__calendar-icon .custom-arrow-icon'));
+    });
+  });
+
   describe('#onClearDatesMouseEnter', () => {
     it('sets state.isClearDatesHovered to true', () => {
       const wrapper = shallow(<DateRangePickerInput />);