@kwiz/fluentui
Version:
KWIZ common controls for FluentUI
50 lines • 3.13 kB
JavaScript
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, stopEvent } from '@kwiz/common';
import * as React from 'react';
import { useStateEX } from '../helpers';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { Horizontal } from './horizontal';
export const DatePickerEx = (props) => {
var _a, _b;
const ctx = useKWIZFluentContext();
//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 = !props.required && 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, props.onDateChange]);
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({ onClick: e => { stopEvent(e); e.stopPropagation(); } }, (props.datePickerProps || {}), { appearance: ctx.inputAppearance, mountNode: ctx.mountNode, value: isDate(dateValue) ? dateValue : null, onSelectDate: (newDate) => {
changeDateHandler(newDate);
}, contentBefore: showClear && _jsx(CalendarCancelRegular, { title: ((_b = (_a = ctx.strings) === null || _a === void 0 ? void 0 : _a.btn_clear) === null || _b === void 0 ? void 0 : _b.call(_a, { cap: true })) || 'Clear', onClick: (e) => { stopEvent(e); reset(); } }), popupSurface: { onClick: e => stopEvent(e) } }));
const TimePickerControl = _jsx(TimePicker, Object.assign({ onClick: e => stopEvent(e), 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