@rjsf/fluent-ui/lib/DateWidget/DateWidget.js

Fluent UI theme, fields and widgets for react-jsonschema-form

import { jsx as _jsx } from "react/jsx-runtime";
import { ariaDescribedByIds, labelValue, pad, TranslatableString, } from '@rjsf/utils';
import { DatePicker, DayOfWeek, mergeStyleSets } from '@fluentui/react';
import _pick from 'lodash/pick';
// Keys of IDropdownProps from @fluentui/react
const allowedProps = [
    'componentRef',
    'styles',
    'theme',
    'calloutProps',
    'calendarProps',
    'textField',
    'calendarAs',
    'onSelectDate',
    'label',
    'isRequired',
    'disabled',
    'ariaLabel',
    'underlined',
    'pickerAriaLabel',
    'isMonthPickerVisible',
    'showMonthPickerAsOverlay',
    'allowTextInput',
    'disableAutoFocus',
    'placeholder',
    'today',
    'value',
    'formatDate',
    'parseDateFromString',
    'firstDayOfWeek',
    'strings',
    'highlightCurrentMonth',
    'highlightSelectedMonth',
    'showWeekNumbers',
    'firstWeekOfYear',
    'showGoToToday',
    'borderless',
    'className',
    'dateTimeFormatter',
    'minDate',
    'maxDate',
    'initialPickerDate',
    'allFocusable',
    'onAfterMenuDismiss',
    'showCloseButton',
    'tabIndex',
];
const controlClass = mergeStyleSets({
    control: {
        margin: '0 0 15px 0',
    },
});
// TODO: move to utils.
// TODO: figure out a standard format for this, as well as
// how we can get this to work with locales.
const formatDate = (date) => {
    if (!date) {
        return '';
    }
    const yyyy = pad(date.getFullYear(), 4);
    const MM = pad(date.getMonth() + 1, 2);
    const dd = pad(date.getDate(), 2);
    return `${yyyy}-${MM}-${dd}`;
};
const parseDate = (dateStr) => {
    if (!dateStr) {
        return undefined;
    }
    const [year, month, day] = dateStr.split('-').map((e) => parseInt(e));
    const dt = new Date(year, month - 1, day);
    return dt;
};
export default function DateWidget({ id, required, label, hideLabel, value, onChange, onBlur, onFocus, options, placeholder, registry, }) {
    const { translateString } = registry;
    const _onSelectDate = (date) => {
        if (date) {
            const formatted = formatDate(date);
            formatted && onChange(formatted);
        }
    };
    const _onBlur = ({ target }) => onBlur(id, target && target.value);
    const _onFocus = ({ target }) => onFocus(id, target && target.value);
    const uiProps = _pick(options.props || {}, allowedProps);
    return (_jsx(DatePicker, { id: id, className: controlClass.control, firstDayOfWeek: DayOfWeek.Sunday, placeholder: placeholder, ariaLabel: translateString(TranslatableString.AriaDateLabel), isRequired: required, label: labelValue(label, hideLabel), onSelectDate: _onSelectDate, onBlur: _onBlur, onFocus: _onFocus, value: parseDate(value), ...uiProps, "aria-describedby": ariaDescribedByIds(id) }));
}
//# sourceMappingURL=DateWidget.js.map