fix(DateInput): disabled styles aren't applied to date-picker

8base · May 15, 2019 · 7fd7112 · 7fd7112
1 parent 54210d6
commit 7fd7112
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 33 deletions.
diff --git a/.../__image_snapshots__/date-input-test-js-components-date-input-common-1-snap.png b/.../__image_snapshots__/date-input-test-js-components-date-input-common-1-snap.png
diff --git a/...napshots__/date-input-test-js-components-date-input-common-open-date-1-snap.png b/...napshots__/date-input-test-js-components-date-input-common-open-date-1-snap.png
diff --git a/...hots__/date-input-test-js-components-date-input-common-open-datetime-1-snap.png b/...hots__/date-input-test-js-components-date-input-common-open-datetime-1-snap.png
diff --git a/e2e/__tests__/date-input.test.js b/e2e/__tests__/date-input.test.js
@@ -12,12 +12,11 @@ const SUITES = [
       await input.type('01/01/2019');
     }),
   baisy.suite('Components/DateInput', 'common', 'open datetime')
-    .setRootHeight(500)
+    .setRootHeight(600)
     .setEnhancer(async (iframe) => {
-      const input = await iframe.waitForXPath('(//input)[2]');
+      const input = await iframe.waitForXPath('(//input)[5]');
 
       await input.click();
-      await input.type('01/01/2019, 12:00 PM');
 
       await (await iframe.waitForXPath('//input')).click();
       await input.click();
@@ -29,4 +28,3 @@ const SUITES = [
 SUITES.map(suite => {
   it(suite.getTestName(), suite.testStory, 20000);
 });
-
diff --git a/src/components/DateInput/DateInput.stories.js b/src/components/DateInput/DateInput.stories.js
@@ -2,22 +2,29 @@ import React from 'react';
 
 export default (asStory) => {
   asStory('Components/DateInput', module, (story, { DateInput, Column, StateContainer }) => {
-    story
-      .add('common', () => (
-        <Column>
-          <StateContainer value={ null }>
-            <DateInput placeholder="mm/dd/yyyy" />
-          </StateContainer>
-          <StateContainer value={ null }>
-            <DateInput withTime />
-          </StateContainer>
-          <StateContainer value="2018-11-07">
-            <DateInput clearable />
-          </StateContainer>
-          <StateContainer value="2018-11-29T21:00:00.000Z">
-            <DateInput withTime clearable />
-          </StateContainer>
-        </Column>
-      ));
+    story.add('common', () => (
+      <Column>
+        <StateContainer value={ null }>
+          <DateInput placeholder="mm/dd/yyyy" />
+        </StateContainer>
+        <StateContainer value={ null }>
+          <DateInput withTime />
+        </StateContainer>
+        <StateContainer value="2018-11-07">
+          <DateInput clearable />
+        </StateContainer>
+        <StateContainer value="2018-11-29T21:00:00.000Z">
+          <DateInput withTime clearable />
+        </StateContainer>
+        <StateContainer value="2018-11-15T21:00:00.000Z">
+          <DateInput
+            minDate={ new Date('2018-11-15T21:00:00.00+03:00') }
+            minTime={ new Date('2018-11-15T00:00:00.00+03:00') }
+            maxTime={ new Date('2018-11-15T02:00:00.00+03:00') }
+            withTime
+          />
+        </StateContainer>
+      </Column>
+    ));
   });
 };
diff --git a/src/components/DateInput/DateInput.theme.js b/src/components/DateInput/DateInput.theme.js
@@ -1,6 +1,5 @@
 import { createThemeTag } from '../../theme/createThemeTag';
 
-
 // eslint-disable-next-line
 const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
   globals: `
@@ -11,12 +10,6 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
       padding-bottom: 32px;
     }
 
-    .react-datepicker__time-list-item {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-
     .react-datepicker__header,
     .react-datepicker__today-button {
       background-color: ${COLORS.LIGHT_GRAY5};
@@ -61,7 +54,7 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
     .react-datepicker__day--selected {
       border-radius: 24px;
       background-color: ${COLORS.LIGHT_BLUE};
-      color: ${COLORS.PRIMARY_TEXT_COLOR};
+      color: ${COLORS.LIGHT_PRIMARY_TEXT_COLOR};
     }
 
     .react-datepicker__day:hover {
@@ -166,10 +159,17 @@ const [_, theme] = createThemeTag('dateInput', ({ COLORS }: *) => ({
       border-left-color: ${COLORS.PRIMARY_TEXT_COLOR};
       outline: none;
     }
+
+    .react-datepicker__navigation--next--with-time {
+      right: 80px;
+    }
+
+    /* Disabled modifier */
+    .react-datepicker__day--disabled,
+    .react-datepicker__time-list-item--disabled {
+      color: ${COLORS.DISABLED_TEXT_COLOR};
+    }
   `,
 }));
 
-export {
-  theme,
-};
-
+export { theme };