feat(DatePicker): adds closeOnSelect

Closes #268
innovaccer · Sep 7, 2020 · c0ea446 · c0ea446
1 parent 298a22d
commit c0ea446
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/core/components/organisms/datePicker/DatePicker.tsx b/core/components/organisms/datePicker/DatePicker.tsx
@@ -59,14 +59,19 @@ type CompProps = {
    * `(format: string, val: string) => boolean`
    */
   validator?: Validator;
+  /**
+   * Close Popover on date selection
+   */
+  closeOnSelect?: boolean;
 } & SharedProps;
 
 const defaultProps = {
   position: 'bottom-start',
   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
@@ -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
@@ -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}