@kwiz/fluentui 1.0.51 → 1.0.53

package/dist/controls/date.d.ts

@@ -1,8 +1,12 @@
 import { DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { TimePickerProps } from '@fluentui/react-timepicker-compat';
 import * as React from 'react';
-interface IProps extends DatePickerProps {
-    onOK?: () => void;
-    onCancel?: () => void;
+interface IProps {
+    onDateChange: (newDateObject: Date) => void;
+    value: Date;
+    showTime?: boolean;
+    datePickerProps?: DatePickerProps;
+    timePickerProps?: TimePickerProps;
 }
 export declare const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>>;
 export {};

package/dist/controls/date.js

@@ -1,32 +1,49 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatePicker } from '@fluentui/react-datepicker-compat';
+import { TimePicker } from '@fluentui/react-timepicker-compat';
 import { CalendarCancelRegular } from '@fluentui/react-icons';
-import { isDate, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import { isDate } from '@kwiz/common';
 import * as React from 'react';
 import { useKWIZFluentContext } from '../helpers/context';
+import { useStateEX } from '../helpers/hooks';
+import { Horizontal } from './horizontal';
 export const DatePickerEx = (props) => {
     const ctx = useKWIZFluentContext();
-    const [showClear, setShowClear] = React.useState(isDate(props.value));
-    const reset = React.useCallback(() => {
-        setShowClear(false);
-        if (isFunction(props.onSelectDate))
-            props.onSelectDate(undefined);
-    }, [showClear]);
-    return (_jsx(DatePicker, Object.assign({ appearance: ctx.inputAppearance, mountNode: ctx.mountNode }, props, { onSelectDate: (date) => {
-            setShowClear(isDate(date));
-            if (isFunction(props.onSelectDate))
-                props.onSelectDate(date);
-        }, onChange: (e, data) => {
-            setShowClear(!isNullOrEmptyString(data.value));
-            if (isFunction(props.onChange))
-                props.onChange(e, data);
-        }, onKeyDown: isFunction(props.onOK) || isFunction(props.onCancel)
-            ? e => {
-                if (isFunction(props.onOK) && e.key === "Enter")
-                    props.onOK();
-                else if (isFunction(props.onCancel) && e.key === "Escape")
-                    props.onCancel();
-            }
-            : undefined, contentBefore: showClear && _jsx(CalendarCancelRegular, { title: 'Clear', onClick: () => reset() }) })));
+    //time value will always have a value even when clearing the date
+    const [timeValue, setTimeValue] = useStateEX(isDate(props.value) ? props.value : new Date());
+    const { showClear, dateValue } = React.useMemo(() => {
+        const showClear = isDate(props.value);
+        const dateValue = props.value;
+        return { showClear, dateValue };
+    }, [props.value]);
+    function reset() {
+        props.onDateChange(null);
+    }
+    const changeDateHandler = React.useCallback((newDateValue) => {
+        const newDate = new Date(newDateValue);
+        // Use the old time values.
+        newDate.setHours(timeValue ? timeValue.getHours() : 0, timeValue ? timeValue.getMinutes() : 0, 0, 0);
+        props.onDateChange(newDate);
+    }, [timeValue]);
+    const changeTimeHandler = React.useCallback((newTimeValue) => {
+        //update our state
+        setTimeValue(newTimeValue);
+        // Use the old date value.
+        const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
+        newDate.setHours(newTimeValue.getHours(), newTimeValue.getMinutes(), 0, 0);
+        props.onDateChange(newDate);
+    }, [dateValue]);
+    const DatePickerControl = _jsx(DatePicker, Object.assign({}, (props.datePickerProps || {}), { appearance: ctx.inputAppearance, mountNode: ctx.mountNode, value: isDate(dateValue) ? dateValue : null, onSelectDate: (newDate) => {
+            changeDateHandler(newDate);
+        }, contentBefore: showClear && _jsx(CalendarCancelRegular, { title: 'Clear', onClick: () => reset() }) }));
+    const TimePickerControl = _jsx(TimePicker, Object.assign({ appearance: ctx.inputAppearance, mountNode: ctx.mountNode }, props.timePickerProps, { 
+        //only show time value when there is a selected date. timeValue will never be null.
+        value: isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : "", onTimeChange: (e, date) => {
+            const newDate = date.selectedTime;
+            changeTimeHandler(newDate);
+        } }));
+    return (props.showTime
+        ? _jsxs(Horizontal, { children: [DatePickerControl, TimePickerControl] })
+        : DatePickerControl);
 };
 //# sourceMappingURL=date.js.map

package/dist/controls/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAO1D,MAAM,CAAC,MAAM,YAAY,GAA6D,CAAC,KAAK,EAAE,EAAE;IAC5F,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IACtE,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACjC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC;YAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACH,KAAC,UAAU,kBAAC,UAAU,EAAE,GAAG,CAAC,eAAe,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,IAAM,KAAK,IAC5E,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACnB,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3B,IAAI,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC;gBAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACjE,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YAClB,YAAY,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YAC/C,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC;gBAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;QAC5D,CAAC,EACD,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC3D,CAAC,CAAC,CAAC,CAAC,EAAE;gBACF,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,KAAK,CAAC,IAAI,EAAE,CAAC;qBACzD,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;oBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;YAChF,CAAC;YACD,CAAC,CAAC,SAAS,EAEf,aAAa,EAAE,SAAS,IAAI,KAAC,qBAAqB,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,GAAI,IAC7F,CACL,CAAC;AACN,CAAC,CAAA"}
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/controls/date.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.51",
+    "version": "1.0.53",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -57,6 +57,7 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
+        "@fluentui/react-timepicker-compat": "^0.2.42",
         "@kwiz/common": "^1.0.103",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",

package/src/controls/date.tsx

@@ -1,40 +1,86 @@
 import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
+
 import { CalendarCancelRegular } from '@fluentui/react-icons';
-import { isDate, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import { isDate } from '@kwiz/common';
 import * as React from 'react';
 import { useKWIZFluentContext } from '../helpers/context';
+import { useStateEX } from '../helpers/hooks';
+import { Horizontal } from './horizontal';
 
-
-interface IProps extends DatePickerProps {
-    onOK?: () => void;
-    onCancel?: () => void;
+interface IProps {
+    onDateChange: (newDateObject: Date) => void;
+    value: Date;
+    showTime?: boolean;
+    datePickerProps?: DatePickerProps;
+    timePickerProps?: TimePickerProps;
 }
 export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
     const ctx = useKWIZFluentContext();
-    const [showClear, setShowClear] = React.useState(isDate(props.value));
-    const reset = React.useCallback(() => {
-        setShowClear(false);
-        if (isFunction(props.onSelectDate)) props.onSelectDate(undefined);
-    }, [showClear]);
+
+    //time value will always have a value even when clearing the date
+    const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
+    const { showClear, dateValue } = React.useMemo(() => {
+        const showClear = isDate(props.value);
+        const dateValue = props.value;
+        return { showClear, dateValue };
+    }, [props.value]);
+
+    function reset() {
+        props.onDateChange(null);
+    }
+
+    const changeDateHandler = React.useCallback((newDateValue: Date): void => {
+        const newDate = new Date(newDateValue);
+        // Use the old time values.
+        newDate.setHours(
+            timeValue ? timeValue.getHours() : 0,
+            timeValue ? timeValue.getMinutes() : 0, 0, 0
+        );
+        props.onDateChange(newDate);
+    }, [timeValue]);
+
+    const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
+        //update our state
+        setTimeValue(newTimeValue);
+        // Use the old date value.
+        const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
+        newDate.setHours(
+            newTimeValue.getHours(),
+            newTimeValue.getMinutes(), 0, 0
+        );
+        props.onDateChange(newDate);
+    }, [dateValue]);
+
+    const DatePickerControl = <DatePicker
+        {...(props.datePickerProps || {})}
+        appearance={ctx.inputAppearance}
+        mountNode={ctx.mountNode}
+        value={isDate(dateValue) ? dateValue : null}
+        onSelectDate={(newDate) => {
+            changeDateHandler(newDate);
+        }}
+        contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
+    />
+
+    const TimePickerControl = <TimePicker
+        appearance={ctx.inputAppearance}
+        mountNode={ctx.mountNode}
+        {...props.timePickerProps}
+        //only show time value when there is a selected date. timeValue will never be null.
+        value={isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : ""}
+        onTimeChange={(e, date) => {
+            const newDate = date.selectedTime;
+            changeTimeHandler(newDate);
+        }}
+    />
 
     return (
-        <DatePicker appearance={ctx.inputAppearance} mountNode={ctx.mountNode} {...props}
-            onSelectDate={(date) => {
-                setShowClear(isDate(date));
-                if (isFunction(props.onSelectDate)) props.onSelectDate(date);
-            }}
-            onChange={(e, data) => {
-                setShowClear(!isNullOrEmptyString(data.value));
-                if (isFunction(props.onChange)) props.onChange(e, data);
-            }}
-            onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
-                ? e => {
-                    if (isFunction(props.onOK) && e.key === "Enter") props.onOK();
-                    else if (isFunction(props.onCancel) && e.key === "Escape") props.onCancel();
-                }
-                : undefined
-            }
-            contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
-        />
+        props.showTime
+            ? <Horizontal>
+                {DatePickerControl}
+                {TimePickerControl}
+            </Horizontal>
+            : DatePickerControl
     );
 }