@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
54 lines • 3.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useState } from 'react';
import { ariaDescribedByIds, dateRangeOptions, parseDateString, toDateString, getDateElementProps, titleId, TranslatableString, } from '@rjsf/utils';
import { Flex, Box, Group, Button, Select, Input } from '@mantine/core';
function readyForChange(state) {
return Object.values(state).every((value) => value !== -1);
}
/** The `AltDateWidget` is an alternative widget for rendering date properties.
* @param props - The `WidgetProps` for this component
*/
function AltDateWidget(props) {
const { id, value, required, disabled, readonly, label, hideLabel, rawErrors, options, onChange, showTime = false, registry, } = props;
const { translateString } = registry;
const [lastValue, setLastValue] = useState(value);
const [state, setState] = useState(parseDateString(value, showTime));
useEffect(() => {
const stateValue = toDateString(state, showTime);
if (lastValue !== value) {
// We got a new value in the props
setLastValue(value);
setState(parseDateString(value, showTime));
}
else if (readyForChange(state) && stateValue !== value) {
// Selected date is ready to be submitted
onChange(stateValue);
setLastValue(stateValue);
}
}, [showTime, value, onChange, state, lastValue]);
const handleChange = useCallback((property, nextValue) => {
setState((prev) => ({ ...prev, [property]: typeof nextValue === 'undefined' ? -1 : nextValue }));
}, []);
const handleSetNow = useCallback(() => {
if (!disabled && !readonly) {
const nextState = parseDateString(new Date().toJSON(), showTime);
onChange(toDateString(nextState, showTime));
}
}, [disabled, readonly, showTime]);
const handleClear = useCallback(() => {
if (!disabled && !readonly) {
onChange('');
}
}, [disabled, readonly, onChange]);
return (_jsxs(_Fragment, { children: [!hideLabel && !!label && (_jsx(Input.Label, { id: titleId(id), required: required, children: label })), _jsxs(Flex, { gap: 'xs', align: 'center', wrap: 'nowrap', children: [getDateElementProps(state, showTime, options.yearsRange, options.format).map((elemProps, i) => {
const elemId = id + '_' + elemProps.type;
return (_jsx(Box, { children: _jsx(Select, { id: elemId, name: elemId, placeholder: elemProps.type, disabled: disabled || readonly, data: dateRangeOptions(elemProps.range[0], elemProps.range[1]).map((item) => item.value.toString()), value: !elemProps.value || elemProps.value < 0 ? null : elemProps.value.toString(), onChange: (v) => handleChange(elemProps.type, v), searchable: false, allowDeselect: false, comboboxProps: { withinPortal: false }, "aria-describedby": ariaDescribedByIds(elemId) }) }, i));
}), _jsxs(Group, { wrap: 'nowrap', gap: 3, children: [(options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && (_jsx(Button, { variant: 'subtle', size: 'xs', onClick: handleSetNow, children: translateString(TranslatableString.NowLabel) })), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && (_jsx(Button, { variant: 'subtle', size: 'xs', onClick: handleClear, children: translateString(TranslatableString.ClearLabel) }))] })] }), rawErrors &&
(rawErrors === null || rawErrors === void 0 ? void 0 : rawErrors.length) > 0 &&
rawErrors.map((error, index) => (_jsx(Input.Error, { children: error }, `alt-date-widget-input-errors-${index}`)))] }));
}
AltDateWidget.defaultProps = {
showTime: false,
};
export default AltDateWidget;
//# sourceMappingURL=AltDateWidget.js.map