@rjsf/antd
Version:
Ant Design theme, fields and widgets for react-jsonschema-form
75 lines • 4.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Row, Col, Button } from 'antd';
import { ariaDescribedByIds, dateRangeOptions, getDateElementProps, parseDateString, toDateString, TranslatableString, } from '@rjsf/utils';
const readyForChange = (state) => {
return Object.values(state).every((value) => value !== -1);
};
export default function AltDateWidget(props) {
const { autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value, } = props;
const { translateString, widgets } = registry;
const { SelectWidget } = widgets;
const { rowGutter = 24 } = formContext;
const [state, setState] = useState(parseDateString(value, showTime));
useEffect(() => {
setState(parseDateString(value, showTime));
}, [showTime, value]);
const handleChange = (property, nextValue) => {
const nextState = {
...state,
[property]: typeof nextValue === 'undefined' ? -1 : nextValue,
};
if (readyForChange(nextState)) {
onChange(toDateString(nextState, showTime));
}
else {
setState(nextState);
}
};
const handleNow = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
const nextState = parseDateString(new Date().toJSON(), showTime);
onChange(toDateString(nextState, showTime));
};
const handleClear = (event) => {
event.preventDefault();
if (disabled || readonly) {
return;
}
onChange(undefined);
};
const renderDateElement = (elemProps) => (_jsx(SelectWidget, { autofocus: elemProps.autofocus, className: 'form-control', disabled: elemProps.disabled, id: elemProps.id, name: elemProps.name, onBlur: elemProps.onBlur, onChange: (elemValue) => elemProps.select(elemProps.type, elemValue), onFocus: elemProps.onFocus, options: {
enumOptions: dateRangeOptions(elemProps.range[0], elemProps.range[1]),
}, placeholder: elemProps.type, readonly: elemProps.readonly, schema: { type: 'integer' }, value: elemProps.value, registry: registry, label: '', "aria-describedby": ariaDescribedByIds(id) }));
return (_jsxs(Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [getDateElementProps(state, showTime, options.yearsRange, options.format).map((elemProps, i) => {
const elemId = id + '_' + elemProps.type;
return (_jsx(Col, { flex: '88px', children: renderDateElement({
...elemProps,
autofocus: autofocus && i === 0,
disabled,
id: elemId,
name: id,
onBlur,
onFocus,
readonly,
registry,
select: handleChange,
// NOTE: antd components accept -1 rather than issue a warning
// like material-ui, so we need to convert -1 to undefined here.
value: elemProps.value || -1 < 0 ? undefined : elemProps.value,
}) }, elemId));
}), !options.hideNowButton && (_jsx(Col, { flex: '88px', children: _jsx(Button, { block: true, className: 'btn-now', onClick: handleNow, type: 'primary', children: translateString(TranslatableString.NowLabel) }) })), !options.hideClearButton && (_jsx(Col, { flex: '88px', children: _jsx(Button, { block: true, className: 'btn-clear', danger: true, onClick: handleClear, type: 'primary', children: translateString(TranslatableString.ClearLabel) }) }))] }));
}
AltDateWidget.defaultProps = {
autofocus: false,
disabled: false,
options: {
yearsRange: [1900, new Date().getFullYear() + 2],
},
readonly: false,
showTime: false,
};
//# sourceMappingURL=index.js.map