Added Accept Date & Save Label to DateTimeInput (#1160)

minio · Jan 4, 2025 · d8896a6 · d8896a6
1 parent 708c0b9
commit d8896a6
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 5 deletions.
diff --git a/src/components/DateTimeInput/DateTimeInput.stories.tsx b/src/components/DateTimeInput/DateTimeInput.stories.tsx
@@ -44,6 +44,8 @@ const Template: StoryFn<DateTimeInputProps> = ({
   tooltip,
   openPickerIcon,
   displayFormat,
+  onAcceptDate,
+  saveLabel,
 }) => {
   const [newValue, setValue] = useState<DateTime>(DateTime.now());
 
@@ -72,6 +74,8 @@ const Template: StoryFn<DateTimeInputProps> = ({
           tooltip={tooltip}
           openPickerIcon={openPickerIcon}
           displayFormat={displayFormat}
+          saveLabel={saveLabel}
+          onAcceptDate={onAcceptDate}
         />
         <DateTimeInput
           id={"story-DateTimeInput"}
@@ -91,6 +95,8 @@ const Template: StoryFn<DateTimeInputProps> = ({
           openPickerIcon={openPickerIcon}
           displayFormat={displayFormat}
           sizeMode={"small"}
+          saveLabel={saveLabel}
+          onAcceptDate={onAcceptDate}
         />
       </FormLayout>
     </StoryThemeProvider>
@@ -171,3 +177,29 @@ DateOnly.args = {
   tooltip: "Please select a date to complete",
   mode: "date",
 };
+
+export const CustomSaveLabel = Template.bind({});
+CustomSaveLabel.args = {
+  id: "DateTimeInput",
+  usePortal: false,
+  timeFormat: "12h",
+  secondsSelector: true,
+  label: "Select a Date",
+  tooltip: "Please select a date to complete",
+  mode: "date",
+  saveLabel: "Set This Date",
+};
+
+export const OnAcceptDateAction = Template.bind({});
+OnAcceptDateAction.args = {
+  id: "DateTimeInput",
+  usePortal: false,
+  timeFormat: "12h",
+  secondsSelector: true,
+  label: "Select a Date",
+  tooltip: "Please select a date to complete",
+  mode: "date",
+  onAcceptDate: () => {
+    alert("Accepted Date");
+  },
+};
diff --git a/src/components/DateTimeInput/DateTimeInput.tsx b/src/components/DateTimeInput/DateTimeInput.tsx
@@ -51,6 +51,8 @@ const DateTimeInput: FC<DateTimeInputProps> = ({
   readOnly = false,
   helper,
   pickerSx,
+  onAcceptDate,
+  saveLabel,
 }) => {
   const theme = useTheme();
 
@@ -268,6 +270,8 @@ const DateTimeInput: FC<DateTimeInputProps> = ({
         anchorEl={anchorEl}
         open={isOpen}
         usePortal={true}
+        saveLabel={saveLabel}
+        onAcceptDate={onAcceptDate}
       />
     </div>
   );

diff --git a/src/components/DateTimeInput/DateTimeInput.types.ts b/src/components/DateTimeInput/DateTimeInput.types.ts
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { CSSProperties } from "react";
+import React from "react";
 import { DateTime } from "luxon";
 
 import { OverrideTheme } from "../../global/global.types";
@@ -36,6 +36,8 @@ export interface DateTimeInputMain {
   state?: "normal" | "error" | "success" | "warning";
   readOnly?: boolean;
   helper?: string;
+  saveLabel?: string;
+  onAcceptDate?: () => void;
 }
 
 export interface DateTimeConstruct {
@@ -54,6 +56,7 @@ export interface DateTimeSelectorMain {
   saveLabel?: string;
   anchorEl?: (EventTarget & HTMLElement) | null;
   onClose?: () => void;
+  onAcceptDate?: () => void;
 }
 
 export interface TimeSelectorProps {

diff --git a/src/components/DateTimeInput/DateTimeSelector.tsx b/src/components/DateTimeInput/DateTimeSelector.tsx
@@ -62,6 +62,7 @@ const DateTimeSelector: FC<DateTimeSelectorProps> = ({
   onClose,
   open = false,
   saveLabel = "Save",
+  onAcceptDate,
   sx,
 }) => {
   const theme = useTheme();
@@ -115,16 +116,20 @@ const DateTimeSelector: FC<DateTimeSelectorProps> = ({
     }
   }, [anchorEl, onClose, usePortal]);
 
-  const closeSelector = () => {
+  const closeSelector = (exAccept: boolean = true) => {
     setOriginalDate(value || DateTime.now());
     if (onClose) {
       onClose();
     }
+
+    if (onAcceptDate && exAccept) {
+      onAcceptDate();
+    }
   };
 
   const cancelSelector = () => {
     onChange(originalDate);
-    closeSelector();
+    closeSelector(false);
   };
 
   const dateSelectorChange = (newDate: DateTime | null) => {
@@ -173,7 +178,7 @@ const DateTimeSelector: FC<DateTimeSelectorProps> = ({
           id={"save-date-picker"}
           variant={"primary"}
           disabled={!valid}
-          onClick={closeSelector}
+          onClick={() => closeSelector(true)}
         >
           {saveLabel}
         </Button>
@@ -183,7 +188,9 @@ const DateTimeSelector: FC<DateTimeSelectorProps> = ({
 
   if (usePortal) {
     return createPortal(
-      <SelectorContainer onClick={closeSelector}>{picker}</SelectorContainer>,
+      <SelectorContainer onClick={() => closeSelector(true)}>
+        {picker}
+      </SelectorContainer>,
       document.body,
     );
   }