@teknim/rjsf-mantine
Version:
Mantine theme, fields and widgets for react-jsonschema-form
27 lines • 1.69 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { labelValue, ariaDescribedByIds, } from '@rjsf/utils';
import { TimeInput } from '@mantine/dates';
/** The `TimeWidget` component uses the `TimeInput` component from `@mantine/dates` for rendering.
*
* @param props - The `WidgetProps` for this component
*/
export default function TimeWidget(props) {
const { id, name, value, placeholder, required, disabled, readonly, autofocus, label, hideLabel, rawErrors, options, onChange, onBlur, onFocus, } = props;
const emptyValue = options.emptyValue || '';
const handleChange = useCallback((e) => {
onChange(e.target.value === '' ? emptyValue : e.target.value);
}, [onChange, emptyValue]);
const handleBlur = useCallback(({ target }) => {
if (onBlur) {
onBlur(id, target && target.value);
}
}, [onBlur, id]);
const handleFocus = useCallback(({ target }) => {
if (onFocus) {
onFocus(id, target && target.value);
}
}, [onFocus, id]);
return (_jsx(TimeInput, { id: id, name: name, value: value || '', placeholder: placeholder || undefined, required: required, disabled: disabled || readonly, autoFocus: autofocus, label: labelValue(label || undefined, hideLabel, false), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, error: rawErrors && rawErrors.length > 0 ? rawErrors.join('\n') : undefined, ...options, "aria-describedby": ariaDescribedByIds(id), classNames: typeof (options === null || options === void 0 ? void 0 : options.classNames) === 'object' ? options.classNames : undefined }));
}
//# sourceMappingURL=TimeWidget.js.map