feat: pickers: changeonblur and button props with option to hide butt…

…ons (#696) * feat: pickers: changeonblur and button props with option to hide buttons * chore: pickers: adds unit tests and updates showtoday default
EightfoldAI · Aug 25, 2023 · 0a08831 · 0a08831
1 parent cbfc558
commit 0a08831
Show file tree

Hide file tree

Showing 25 changed files with 1,042 additions and 278 deletions.
diff --git a/src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx b/src/components/DateTimePicker/DatePicker/DatePicker.stories.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 import { Stories } from '@storybook/addon-docs';
+import { ButtonVariant } from '../../Button';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import DatePicker from './';
 import { DatePickerShape, DatePickerSize } from './';
@@ -43,6 +44,10 @@ export default {
       options: [true, false],
       control: { type: 'inline-radio' },
     },
+    changeOnBlur: {
+      options: [true, false],
+      control: { type: 'inline-radio' },
+    },
     disabled: {
       options: [true, false],
       control: { type: 'inline-radio' },
@@ -174,6 +179,20 @@ const Single_Picker_Choose_Time_Story: ComponentStory<typeof DatePicker> = (
   return <DatePicker {...args} showTime onChange={onChange} onOk={onOk} />;
 };
 
+const Single_Picker_Choose_Time_Hide_Buttons_Story: ComponentStory<
+  typeof DatePicker
+> = (args) => {
+  const onChange = (
+    value: DatePickerProps['value'],
+    dateString: [string, string] | string
+  ) => {
+    console.log('Selected Time: ', value);
+    console.log('Formatted Selected Time: ', dateString);
+  };
+
+  return <DatePicker {...args} showTime onChange={onChange} />;
+};
+
 const { RangePicker } = DatePicker;
 
 const Range_Picker_Story: ComponentStory<typeof RangePicker> = (args) => {
@@ -214,6 +233,27 @@ const Range_Picker_Choose_Time_Story: ComponentStory<typeof RangePicker> = (
   );
 };
 
+const Range_Picker_Choose_Time_Hide_Buttons_Story: ComponentStory<
+  typeof RangePicker
+> = (args) => {
+  const onChange = (
+    value: RangePickerProps['value'],
+    dateString: [string, string] | string
+  ) => {
+    console.log('Selected Time: ', value);
+    console.log('Formatted Selected Time: ', dateString);
+  };
+
+  return (
+    <RangePicker
+      {...args}
+      showTime={{ format: 'HH:mm' }}
+      format="YYYY-MM-DD HH:mm"
+      onChange={onChange}
+    />
+  );
+};
+
 const Range_Picker_Disabled_Story: ComponentStory<typeof RangePicker> = (
   args
 ) => {
@@ -478,11 +518,15 @@ export const Single_Picker_Disabled_Date_and_Time =
 export const Single_Picker_Choose_Time = Single_Picker_Choose_Time_Story.bind(
   {}
 );
+export const Single_Picker_Choose_Time_Hide_Buttons =
+  Single_Picker_Choose_Time_Hide_Buttons_Story.bind({});
 export const Range_Picker = Range_Picker_Story.bind({});
 export const Range_Picker_Disabled = Range_Picker_Disabled_Story.bind({});
 export const Range_Picker_Disabled_Date_and_Time =
   Range_Picker_Disabled_Date_and_Time_Story.bind({});
 export const Range_Picker_Choose_Time = Range_Picker_Choose_Time_Story.bind({});
+export const Range_Picker_Choose_Time_Hide_Buttons =
+  Range_Picker_Choose_Time_Hide_Buttons_Story.bind({});
 export const Preset_Ranges = Preset_Ranges_Story.bind({});
 export const Select_Range_By_Day_Limit = Select_Range_By_Day_Limit_Story.bind(
   {}
@@ -504,10 +548,12 @@ export const __namedExportsOrder = [
   'Single_Picker_Disabled',
   'Single_Picker_Disabled_Date_and_Time',
   'Single_Picker_Choose_Time',
+  'Single_Picker_Choose_Time_Hide_Buttons',
   'Range_Picker',
   'Range_Picker_Disabled',
   'Range_Picker_Disabled_Date_and_Time',
   'Range_Picker_Choose_Time',
+  'Range_Picker_Choose_Time_Hide_Buttons',
   'Preset_Ranges',
   'Select_Range_By_Day_Limit',
   'Date_Format_Basic',
@@ -526,6 +572,14 @@ const pickerArgs: Object = {
   popupPlacement: 'bottomLeft',
   shape: DatePickerShape.Rectangle,
   size: DatePickerSize.Medium,
+  changeOnBlur: true,
+  nowButtonProps: null,
+  okButtonProps: { variant: ButtonVariant.Primary },
+  showNow: true,
+  showOk: true,
+  showToday: true,
+  todayActive: true,
+  todayButtonProps: null,
 };
 
 Single_Picker.args = {
@@ -545,29 +599,48 @@ Single_Picker_Choose_Time.args = {
   ...pickerArgs,
 };
 
+Single_Picker_Choose_Time_Hide_Buttons.args = {
+  ...pickerArgs,
+  showNow: false,
+  showOk: false,
+};
+
 Range_Picker.args = {
   ...pickerArgs,
+  showToday: false, // The range picker default is false, this is for Storybook args only.
 };
 
 Range_Picker_Disabled.args = {
   ...pickerArgs,
+  showToday: false,
   disabled: true,
 };
 
 Range_Picker_Disabled_Date_and_Time.args = {
   ...pickerArgs,
+  showToday: false,
 };
 
 Range_Picker_Choose_Time.args = {
   ...pickerArgs,
+  showToday: false,
+};
+
+Range_Picker_Choose_Time_Hide_Buttons.args = {
+  ...pickerArgs,
+  showToday: false,
+  showNow: false,
+  showOk: false,
 };
 
 Preset_Ranges.args = {
   ...pickerArgs,
+  showToday: false,
 };
 
 Select_Range_By_Day_Limit.args = {
   ...pickerArgs,
+  showToday: false,
 };
 
 Date_Format_Basic.args = {
@@ -576,6 +649,7 @@ Date_Format_Basic.args = {
 
 Date_Format_Range.args = {
   ...pickerArgs,
+  showToday: false,
 };
 
 Extra_Footer.args = {
@@ -584,6 +658,7 @@ Extra_Footer.args = {
 
 Customized_Date_Styling.args = {
   ...pickerArgs,
+  showToday: false,
 };
 
 Single_Borderless.args = {
@@ -593,6 +668,7 @@ Single_Borderless.args = {
 
 Range_Borderless.args = {
   ...pickerArgs,
+  showToday: false,
   bordered: false,
 };
 
@@ -602,4 +678,5 @@ Single_Status.args = {
 
 Range_Status.args = {
   ...pickerArgs,
+  showToday: false,
 };
diff --git a/src/components/DateTimePicker/DatePicker/Generate/Generate.tsx b/src/components/DateTimePicker/DatePicker/Generate/Generate.tsx
@@ -8,6 +8,7 @@ import type {
 } from '../../Internal/OcPicker.types';
 import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';
+import { ButtonProps } from '../../../Button';
 
 function toArray<T>(list: T | T[]): T[] {
   if (!list) {
@@ -30,8 +31,11 @@ export function getTimeProps<DateType, DisabledTime>(
   const firstFormat: string = toArray(format)[0];
   const showTimeObj: {
     format?: string;
+    nowButtonProps?: ButtonProps;
+    okButtonProps?: ButtonProps;
     picker?: OcPickerMode;
     showNow?: boolean;
+    showOk?: boolean;
     showHour?: boolean;
     showMinute?: boolean;
     showSecond?: boolean;

diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateRangePicker.tsx
@@ -62,13 +62,20 @@ export default function generateRangePicker<DateType>(
       getPopupContainer,
       id,
       locale = enUS,
+      nowButtonProps,
       nowText: defaultNowText,
+      okButtonProps,
       okText: defaultOkText,
       placeholder,
       popupPlacement,
       shape = DatePickerShape.Rectangle,
+      showNow = true,
+      showOk = true,
+      showToday = false,
       size = DatePickerSize.Medium,
       status,
+      todayButtonProps,
+      todayActive = false,
       todayText: defaultTodayText,
       ...rest
     } = props;
@@ -220,8 +227,12 @@ export default function generateRangePicker<DateType>(
                 popupPlacement
               )}
               popupPlacement={popupPlacement}
+              nowButtonProps={nowButtonProps}
               nowText={nowText}
+              okButtonProps={okButtonProps}
               okText={okText}
+              todayButtonProps={todayButtonProps}
+              todayActive={todayActive}
               todayText={todayText}
               placeholder={getRangePlaceholder(picker, locale, placeholder)}
               suffixIcon={suffixNode}
@@ -291,6 +302,9 @@ export default function generateRangePicker<DateType>(
               components={Components}
               direction={htmlDir}
               shape={mergedShape}
+              showNow={showNow}
+              showOk={showOk}
+              showToday={showToday}
               size={mergedSize}
             />
           );

diff --git a/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx b/src/components/DateTimePicker/DatePicker/Generate/generateSinglePicker.tsx
@@ -77,13 +77,20 @@ export default function generatePicker<DateType>(
         getPopupContainer,
         id,
         locale = enUS,
+        nowButtonProps,
         nowText: defaultNowText,
+        okButtonProps,
         okText: defaultOkText,
         placeholder,
         popupPlacement,
         shape = DatePickerShape.Rectangle,
+        showNow = true,
+        showOk = true,
+        showToday = true,
         size = DatePickerSize.Medium,
         status,
+        todayButtonProps,
+        todayActive = true,
         todayText: defaultTodayText,
         ...rest
       } = props;
@@ -101,10 +108,6 @@ export default function generatePicker<DateType>(
         blur: () => innerRef.current?.blur(),
       }));
 
-      const additionalProps = {
-        showToday: true,
-      };
-
       let additionalOverrideProps: any = {};
       if (picker) {
         additionalOverrideProps.picker = picker;
@@ -249,15 +252,21 @@ export default function generatePicker<DateType>(
                     size={pickerSizeToIconSizeMap.get(mergedSize)}
                   />
                 }
+                nowButtonProps={nowButtonProps}
                 nowText={nowText}
+                okButtonProps={okButtonProps}
                 okText={okText}
+                showNow={showNow}
+                showOk={showOk}
+                showToday={showToday}
+                todayButtonProps={todayButtonProps}
+                todayActive={todayActive}
                 todayText={todayText}
                 prevIcon={IconName.mdiChevronLeft}
                 nextIcon={IconName.mdiChevronRight}
                 superPrevIcon={IconName.mdiChevronDoubleLeft}
                 superNextIcon={IconName.mdiChevronDoubleRight}
                 allowClear
-                {...additionalProps}
                 {...rest}
                 {...additionalOverrideProps}
                 locale={locale!.lang}

diff --git a/src/components/DateTimePicker/Internal/Hooks/useCellClassNames.ts b/src/components/DateTimePicker/Internal/Hooks/useCellClassNames.ts
@@ -13,6 +13,7 @@ export default function useCellClassNames<DateType>({
   isSameCell,
   offsetCell,
   today,
+  todayActive,
   value,
 }: {
   generateConfig: GenerateConfig<DateType>;
@@ -25,6 +26,7 @@ export default function useCellClassNames<DateType>({
   rangedValue?: RangeValue<DateType>;
   hoverRangedValue?: RangeValue<DateType>;
   today?: NullableDateType<DateType>;
+  todayActive?: boolean;
   value?: NullableDateType<DateType>;
 }) {
   function getClassName(currentDate: DateType) {
@@ -99,7 +101,7 @@ export default function useCellClassNames<DateType>({
         isHoverEdgeEnd && isSameCell(nextDate, rangeStart),
 
       // Others
-      [styles.pickerCellToday]: isSameCell(today, currentDate),
+      [styles.pickerCellToday]: isSameCell(today, currentDate) && todayActive,
       [styles.pickerCellSelected]: isSameCell(value, currentDate),
     };
   }