From c0ea4461ecbcd11dbca7396ef97bbdd614780009 Mon Sep 17 00:00:00 2001
From: Aditya Kumawat <aditya19496@gmail.com>
Date: Tue, 25 Aug 2020 18:48:52 +0530
Subject: [PATCH] feat(DatePicker): adds closeOnSelect

Closes #268
---
 .../components/organisms/datePicker/DatePicker.tsx | 14 +++++++++++++-
 .../datePicker/__stories__/index.story.tsx         |  6 ++++++
 .../__stories__/variants/withInput.story.tsx       |  6 ++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/core/components/organisms/datePicker/DatePicker.tsx b/core/components/organisms/datePicker/DatePicker.tsx
index 4d161b73f0..27bae1cdaa 100644
--- a/core/components/organisms/datePicker/DatePicker.tsx
+++ b/core/components/organisms/datePicker/DatePicker.tsx
@@ -59,6 +59,10 @@ type CompProps = {
    * `(format: string, val: string) => boolean`
    */
   validator?: Validator;
+  /**
+   * Close Popover on date selection
+   */
+  closeOnSelect?: boolean;
 } & SharedProps;
 
 const defaultProps = {
@@ -66,7 +70,8 @@ const defaultProps = {
   inputFormat: 'mm/dd/yyyy',
   outputFormat: 'mm/dd/yyyy',
   validator: validators.date,
-  inputOptions: {}
+  inputOptions: {},
+  closeOnSelect: true
 };
 
 type DefaultProps = Readonly<typeof defaultProps>;
@@ -165,6 +170,12 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
 
   onDateChangeHandler = (d?: Date) => {
     this.setState({ date: d });
+
+    const {
+      closeOnSelect
+    } = this.props;
+
+    if (closeOnSelect) this.setState({ open: false });
   }
 
   onChangeHandler = (_e: React.ChangeEvent<HTMLInputElement>, val?: string) => {
@@ -222,6 +233,7 @@ export class DatePicker extends React.Component<DatePickerProps, DatePickerState
       disabledBefore,
       disabledAfter,
       onDateChange,
+      closeOnSelect,
       ...rest
     } = this.props;
 
diff --git a/core/components/organisms/datePicker/__stories__/index.story.tsx b/core/components/organisms/datePicker/__stories__/index.story.tsx
index eb3138467b..cb0e30095a 100644
--- a/core/components/organisms/datePicker/__stories__/index.story.tsx
+++ b/core/components/organisms/datePicker/__stories__/index.story.tsx
@@ -15,6 +15,11 @@ export const all = () => {
     false
   );
 
+  const closeOnSelect = boolean(
+    'closeOnSelect',
+    true
+  );
+
   const inputFormat = select(
     'inputFormat',
     ['mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd', 'mm-dd-yyyy', 'dd-mm-yyyy', 'yyyy-mm-dd'],
@@ -79,6 +84,7 @@ export const all = () => {
     return (
       <DatePicker
         withInput={withInput}
+        closeOnSelect={closeOnSelect}
         open={open}
         inputFormat={inputFormat}
         outputFormat={outputFormat}
diff --git a/core/components/organisms/datePicker/__stories__/variants/withInput.story.tsx b/core/components/organisms/datePicker/__stories__/variants/withInput.story.tsx
index d719ead6f4..865b7bdc8f 100644
--- a/core/components/organisms/datePicker/__stories__/variants/withInput.story.tsx
+++ b/core/components/organisms/datePicker/__stories__/variants/withInput.story.tsx
@@ -59,6 +59,11 @@ export const withInput = () => {
     -1
   );
 
+  const closeOnSelect = boolean(
+    'closeOnSelect',
+    true
+  );
+
   const attr: Record<string, any> = {};
   if (disabledBefore) attr.disabledBefore = disabledBefore;
   if (disabledAfter) attr.disabledAfter = disabledAfter;
@@ -69,6 +74,7 @@ export const withInput = () => {
     <div className="w-25">
       <DatePicker
         withInput={true}
+        closeOnSelect={closeOnSelect}
         inputFormat={inputFormat}
         outputFormat={outputFormat}
         jumpView={jumpView}