revert: "feat(daypicker): code enhancement for disclaimer message (#112…

…)" This reverts commit 2523369.
qantasairways · Aug 20, 2019 · 4265449 · 4265449
1 parent 7167f78
commit 4265449
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 58 deletions.
diff --git a/src/components/DayPicker/__tests__/DayPicker.spec.js b/src/components/DayPicker/__tests__/DayPicker.spec.js
@@ -98,7 +98,7 @@ describe('DayPicker', () => {
       component = shallow(<DayPicker {...props} />);
 
       const renderedMonth = shallow(
-        component.instance().renderMonth({ index: 1, style: {} }, true)
+        component.instance().renderMonth({ index: 0, style: {} }, true)
       );
 
       expect(renderedMonth).toMatchSnapshot();

diff --git a/src/components/DayPicker/helpers/index.js b/src/components/DayPicker/helpers/index.js
@@ -126,20 +126,27 @@ export function getItemSize(
   isDesktopDevice,
   disclaimerMessage
 ) {
-  if (index === 0) {
-    return disclaimerMessage ? DISCLAIMER_HEIGHT : 0;
-  }
-
-  const monthIndex = index - 1;
-  const month = months[monthIndex];
+  const month = months[index];
   const numberOfWeeks = differenceInCalendarWeeks(
     endOfMonth(month),
-    monthIndex === 0
+    index === 0
       ? startOfWeek(month, { weekStartsOn: firstDayOfWeek })
       : startOfMonth(month),
     { weekStartsOn: firstDayOfWeek }
   );
 
+  if (index === 0 && disclaimerMessage) {
+    return isDesktopDevice
+      ? DISCLAIMER_HEIGHT +
+          MONTH_CAPTION_HEIGHT_DESKTOP +
+          (DAY_CELL_HEIGHT_DESKTOP + DAY_CELL_BORDER_WIDTH * 3) *
+            (numberOfWeeks + 1)
+      : DISCLAIMER_HEIGHT +
+          MONTH_CAPTION_HEIGHT_MOBILE +
+          (DAY_CELL_HEIGHT_MOBILE + DAY_CELL_BORDER_WIDTH * 3) *
+            (numberOfWeeks + 1);
+  }
+
   return isDesktopDevice
     ? MONTH_CAPTION_HEIGHT_DESKTOP +
         (DAY_CELL_HEIGHT_DESKTOP + DAY_CELL_BORDER_WIDTH * 3) *

diff --git a/src/components/DayPicker/index.js b/src/components/DayPicker/index.js
@@ -22,7 +22,8 @@ import {
   getFirstEnabledMonthDate,
   focusDayCell,
   DAY_CELL_BORDER_WIDTH,
-  getLastEnabledMonthDate
+  getLastEnabledMonthDate,
+  DISCLAIMER_HEIGHT
 } from './helpers';
 
 import ButtonWithDialog, {
@@ -34,8 +35,6 @@ import IconCalendar from '../../icons/CalendarIcon';
 import Header from './components/Header';
 import DisclaimerMessages from '../DisclaimerMessages';
 
-const DISCLAIMER_MSG_COUNT = 1;
-
 const rowStyles = {
   display: 'grid',
   gridTemplateColumns: 'repeat(7, 1fr)',
@@ -191,16 +190,35 @@ class DayPicker extends Component {
     ) : null;
   };
 
-  renderDisclaimer = ({ style }) => (
+  renderMonthAndDisclaimer = (row, isDesktopDevice) => {
+    const { index, style } = row;
+
+    const updatedStyle = {
+      ...style,
+      top: DISCLAIMER_HEIGHT
+    };
+
+    const updatedRow = {
+      index,
+      style: updatedStyle
+    };
+
+    return (
+      <div>
+        {this.renderDisclaimer(DISCLAIMER_HEIGHT)}
+        {this.renderMonth(updatedRow, isDesktopDevice)}
+      </div>
+    );
+  };
+
+  renderDisclaimer = disclaimerHeight => (
     <DisclaimerMessages
+      disclaimerHeight={disclaimerHeight}
       disclaimerMessage={this.props.disclaimerMessage}
-      style={style}
     />
   );
 
   renderMonth = ({ index, style }, isDesktopDevice) => {
-    const monthIndex = index - 1;
-
     const {
       isDateRange,
       firstDayOfWeek,
@@ -225,11 +243,11 @@ class DayPicker extends Component {
       isSelectingStartDate
     } = this.state;
 
-    const month = months[monthIndex];
+    const month = months[index];
 
     let dates = getDateArray({
       startDay: month,
-      monthIndex,
+      monthIndex: index,
       today,
       firstDayOfWeek,
       startDate,
@@ -383,7 +401,7 @@ class DayPicker extends Component {
                     }}
                     outerRef={setScrollTargetRef}
                     height={height}
-                    itemCount={monthsToShow + DISCLAIMER_MSG_COUNT}
+                    itemCount={monthsToShow}
                     itemSize={index =>
                       getItemSize(
                         index,
@@ -397,8 +415,8 @@ class DayPicker extends Component {
                     onItemsRendered={this.setupOnMonthsShownSubscription()}
                   >
                     {row =>
-                      row.index === 0
-                        ? this.renderDisclaimer(row)
+                      row.index === 0 && disclaimerMessage
+                        ? this.renderMonthAndDisclaimer(row, isDesktopDevice)
                         : this.renderMonth(row, isDesktopDevice)
                     }
                   </List>

diff --git a/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap b/src/components/DisclaimerMessages/__tests__/__snapshots__/DisclaimerMessages.spec.js.snap
diff --git a/src/components/DisclaimerMessages/index.js b/src/components/DisclaimerMessages/index.js
@@ -3,49 +3,47 @@ import { PropTypes } from 'prop-types';
 
 import { fontFamily, mq, colours, layout } from '../../theme/airways';
 
+const styleDisclaimerMessage = disclaimerHeight => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'left',
+  fontFamily: fontFamily.main,
+  color: colours.darkerGrey,
+  background: colours.disabledGrey,
+  height: `${disclaimerHeight}px`,
+  fontSize: '12px',
+  lineHeight: '1.25',
+  letterSpacing: '0.17px',
+  padding: `15px ${layout.gutter}`,
+  pointerEvents: 'initial',
+  [mq.medium]: {
+    fontSize: '14px',
+    lineHeight: '1.43',
+    letterSpacing: 'normal',
+    padding: `0px ${layout.gutter}`,
+    textAlign: 'center'
+  }
+});
+
 class DisclaimerMessages extends Component {
   getHTMLFormat = () => {
     const { disclaimerMessage } = this.props;
     return { __html: disclaimerMessage };
   };
 
   render() {
-    const { style } = this.props;
+    const { disclaimerHeight } = this.props;
 
     return (
-      <div
-        role="alert"
-        style={style}
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'left',
-          fontFamily: fontFamily.main,
-          color: colours.darkerGrey,
-          background: colours.disabledGrey,
-          fontSize: '12px',
-          lineHeight: '1.25',
-          letterSpacing: '0.17px',
-          padding: `15px ${layout.gutter}`,
-          pointerEvents: 'initial',
-          [mq.medium]: {
-            fontSize: '14px',
-            lineHeight: '1.43',
-            letterSpacing: 'normal',
-            padding: `0px ${layout.gutter}`,
-            textAlign: 'center'
-          }
-        }}
-      >
+      <div role="alert" css={styleDisclaimerMessage(disclaimerHeight)}>
         <div
           css={{
             width: '750px',
             '& a': {
-              color: colours.primary
-            },
-            '& a:hover': {
-              textDecoration: 'underline'
+              color: colours.darkerGrey,
+              textDecoration: 'underline',
+              textDecorationColor: colours.darkerGrey
             }
           }}
           /* eslint-disable react/no-danger */
@@ -58,12 +56,12 @@ class DisclaimerMessages extends Component {
 
 DisclaimerMessages.propTypes = {
   disclaimerMessage: PropTypes.string,
-  style: PropTypes.shape
+  disclaimerHeight: 90
 };
 
 DisclaimerMessages.defaultProps = {
   disclaimerMessage: '',
-  style: {}
+  disclaimerHeight: PropTypes.number
 };
 
 export default DisclaimerMessages;