Add showPopperArrow prop (Hacker0x01#1892)

* Add showPopperArrow prop

* Remove change to popper component

* Added test cases for showPopperArrow behaviour

Author: somewhatabstract

docs-site/src/components/Examples/index.js

@@ -5,6 +5,7 @@ import slugify from "slugify";
 import CodeExampleComponent from "../Example";
 
 import Default from "../../examples/default";
+import NoAnchorArrow from "../../examples/noAnchorArrow";
 import ShowTime from "../../examples/showTime";
 import ShowTimeOnly from "../../examples/showTimeOnly";
 import ExcludeTimes from "../../examples/excludeTimes";
@@ -78,6 +79,10 @@ export default class exampleComponents extends React.Component {
       title: "Default",
       component: Default
     },
+    {
+      title: "No Anchor Arrow",
+      component: NoAnchorArrow
+    },
     {
       title: "Select Time",
       component: ShowTime

docs-site/src/examples/noAnchorArrow.js

@@ -0,0 +1,10 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      showPopperArrow={false}
+      selected={startDate}
+      onChange={date => setStartDate(date)}
+    />
+  );
+};

src/calendar.jsx

@@ -127,7 +127,8 @@ export default class Calendar extends React.Component {
     renderCustomHeader: PropTypes.func,
     renderDayContents: PropTypes.func,
     onDayMouseEnter: PropTypes.func,
-    onMonthMouseLeave: PropTypes.func
+    onMonthMouseLeave: PropTypes.func,
+    showPopperArrow: PropTypes.bool
   };
 
   static get defaultProps() {
@@ -715,6 +716,7 @@ export default class Calendar extends React.Component {
           className={classnames("react-datepicker", this.props.className, {
             "react-datepicker--time-only": this.props.showTimeSelectOnly
           })}
+          showPopperArrow={this.props.showPopperArrow}
         >
           {this.renderPreviousButton()}
           {this.renderNextButton()}

src/calendar_container.jsx

@@ -4,11 +4,14 @@ import React from "react";
 export default function CalendarContainer({
   className,
   children,
+  showPopperArrow,
   arrowProps = {}
 }) {
   return (
     <div className={className}>
-      <div className="react-datepicker__triangle" {...arrowProps} />
+      {showPopperArrow && (
+        <div className="react-datepicker__triangle" {...arrowProps} />
+      )}
       {children}
     </div>
   );
@@ -17,5 +20,6 @@ export default function CalendarContainer({
 CalendarContainer.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
-  arrowProps: PropTypes.object // react-popper arrow props
+  arrowProps: PropTypes.object, // react-popper arrow props
+  showPopperArrow: PropTypes.bool
 };

src/index.jsx

@@ -169,7 +169,8 @@ export default class DatePicker extends React.Component {
     wrapperClassName: PropTypes.string,
     inlineFocusSelectedMonth: PropTypes.bool,
     onDayMouseEnter: PropTypes.func,
-    onMonthMouseLeave: PropTypes.func
+    onMonthMouseLeave: PropTypes.func,
+    showPopperArrow: PropTypes.bool
   };
 
   static get defaultProps() {
@@ -211,7 +212,8 @@ export default class DatePicker extends React.Component {
       renderDayContents(date) {
         return date;
       },
-      inlineFocusSelectedMonth: false
+      inlineFocusSelectedMonth: false,
+      showPopperArrow: true
     };
   }
 
@@ -697,6 +699,7 @@ export default class DatePicker extends React.Component {
         showTimeInput={this.props.showTimeInput}
         showMonthYearPicker={this.props.showMonthYearPicker}
         showQuarterYearPicker={this.props.showQuarterYearPicker}
+        showPopperArrow={this.props.showPopperArrow}
       >
         {this.props.children}
       </WrappedCalendar>

test/datepicker_test.js

@@ -1179,4 +1179,34 @@ describe("DatePicker", () => {
     TestUtils.Simulate.click(dayButtonInline);
     assert.equal(datePickerInline.state.monthSelectedIn, undefined);
   });
+
+  it("should show the popper arrow when showPopperArrow is true", () => {
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker showPopperArrow />
+    );
+    const dateInput = datePicker.input;
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+
+    const arrow = TestUtils.scryRenderedDOMComponentsWithClass(
+      datePicker.calendar,
+      "react-datepicker__triangle"
+    );
+
+    expect(arrow).to.not.be.empty;
+  });
+
+  it("should not show the popper arrow when showPopperArrow is false", () => {
+    const datePicker = TestUtils.renderIntoDocument(
+      <DatePicker showPopperArrow={false} />
+    );
+    const dateInput = datePicker.input;
+    TestUtils.Simulate.click(ReactDOM.findDOMNode(dateInput));
+
+    const arrow = TestUtils.scryRenderedDOMComponentsWithClass(
+      datePicker.calendar,
+      "react-datepicker__triangle"
+    );
+
+    expect(arrow).to.be.empty;
+  });
 });