@kwiz/fluentui/dist/controls/date.js

KWIZ common controls for FluentUI

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 } from '@kwiz/common';
import * as React from 'react';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { useStateEX } from '../helpers';
import { Horizontal } from './horizontal';
export const DatePickerEx = (props) => {
    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({}, (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