ExpandableCalendar - fix calendar position with 'numberOfDays' (#2217)

* ExpandableCalendar - fix calendar position when numberOfDays defined and greater than 1

* close calendar on one day view as well

Author: Inbal-Tish

src/expandableCalendar/__test__/index.spec.ts

@@ -80,7 +80,6 @@ describe('ExpandableCalendar', () => {
   });
 
   describe('Init', () => {
-
     beforeEach(() => {
       driver.render();
     });
@@ -126,15 +125,38 @@ describe('ExpandableCalendar', () => {
     });
 
     it('should not close expandable header on day press when closeOnDayPress is false', () => {
-      const aDriver = new ExpandableCalendarDriver(testIdExpandableCalendar, TestCase({expandableCalendarProps: {closeOnDayPress: false}}));
-      aDriver.toggleKnob();
+      const driver = new ExpandableCalendarDriver(testIdExpandableCalendar, TestCase({expandableCalendarProps: {closeOnDayPress: false}}));
+      driver.toggleKnob();
       jest.runAllTimers();
-      aDriver.selectDay(dashedToday);
+      driver.selectDay(dashedToday);
+      jest.runAllTimers();
+      expect(driver.isCalendarExpanded()).toBe(true);
+    });
+  });
+
+  describe('numberOfDays', () => {
+    beforeEach(() => {
+      driver.render();
+    });
+
+    it('should be closed when numberOfDays is defined (> 0) ', () => {
+      const driver = new ExpandableCalendarDriver(testIdExpandableCalendar, TestCase({calendarContextProps: {numberOfDays: 3}, expandableCalendarProps: {initialPosition: Positions.OPEN}}));
       jest.runAllTimers();
-      expect(aDriver.isCalendarExpanded()).toBe(true);
+      expect(driver.isCalendarExpanded()).toBe(false);
+    });
+
+    it('should hide Knob when numberOfDays > 1', () => {
+      const driver = new ExpandableCalendarDriver(testIdExpandableCalendar, TestCase({calendarContextProps: {numberOfDays: 3}}));
+      expect(driver.getKnob()).toBeNull();
+    });
+
+    it('should hide Knob when numberOfDays === 1', () => {
+      const driver = new ExpandableCalendarDriver(testIdExpandableCalendar, TestCase({calendarContextProps: {numberOfDays: 1}}));
+      expect(driver.getKnob()).not.toBeNull();
     });
   });
 
+
   describe('CalendarList updates', () => {
     describe('Day Press', () => {
       beforeEach(() => {

src/expandableCalendar/index.tsx

@@ -163,8 +163,7 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
   const numberOfWeeks = useRef(getNumberOfWeeksInMonth(date));
 
   /** Position */
-
-  const [position, setPosition] = useState(initialPosition);
+  const [position, setPosition] = useState(numberOfDays ? Positions.CLOSED : initialPosition);
   const isOpen = position === Positions.OPEN;
 
   const getOpenHeight = () => {
@@ -187,6 +186,12 @@ const ExpandableCalendar = (props: ExpandableCalendarProps) => {
 
   const headerDeltaY = useRef(new Animated.Value(isOpen ? -HEADER_HEIGHT : 0));
 
+  useEffect(() => {
+    if (numberOfDays) {
+        setPosition(Positions.CLOSED);
+    }
+}, [numberOfDays]);
+
   /** Components' refs */
 
   const wrapper = useRef<any>();