@alauda/doom
Version:
Doctor Doom making docs.
28 lines (27 loc) • 1.59 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { cloneElement, useCallback, useState, } from 'react';
import { useTranslation } from '@alauda/doom/runtime';
export const FormItem = ({ label, children, required, prefix, suffix, }) => {
const t = useTranslation();
const { defaultValue, value, onChange: childOnChange, required: childRequired, } = children.props;
const [innerValue, setInnerValue] = useState(value ?? defaultValue);
if (value != null && value !== innerValue) {
setInnerValue(value);
}
const [dirty, setDirty] = useState(false);
const onChange = useCallback((ev) => {
setDirty(true);
childOnChange?.(ev);
setInnerValue(ev.target.value);
}, [childOnChange]);
required = childRequired ?? required;
const error = dirty && required && !innerValue;
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx('form-item', error && 'form-item--error'), children: [!!prefix && _jsx("span", { className: "form-item__prefix", children: prefix }),
/* eslint-disable-next-line @eslint-react/no-clone-element */
cloneElement(children, {
value: innerValue,
onChange,
required,
}), !!suffix && _jsx("span", { className: "form-item__suffix", children: suffix })] }), error && (_jsxs("div", { className: "form-item__error", children: [label || t('current_field'), t('field_required')] }))] }));
};