phx-react
Version:
PHX REACT
47 lines • 3.77 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { PHXSelect } from '../Select';
import { PHXInput } from '../Input';
export function PHXFormConfigTimeUseService({ options, preview = {
enable: false,
data: [],
}, onChange, defaultValue, }) {
const [dataConfig, setDataConfig] = useState(defaultValue || {});
const { register, formState: { errors }, reset, } = useForm();
useEffect(() => {
if (defaultValue) {
setDataConfig(defaultValue);
reset(defaultValue);
}
}, [defaultValue]);
const handleChangeConfig = (event, registerName) => {
setDataConfig({ ...dataConfig, [registerName]: event.target.value });
if (onChange) {
onChange({ ...dataConfig, [registerName]: event.target.value });
}
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: 'grid grid-cols-2 gap-x-2' },
React.createElement("div", null,
React.createElement("p", { className: 'text-xs' }, "Ng\u00E0y b\u1EAFt \u0111\u1EA7u"),
React.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
React.createElement(PHXSelect, { onChange: (event) => handleChangeConfig(event, options.monthStart.registerName), register: register(options.monthStart.registerName, {
required: true,
}), error: !!errors[options.monthStart.registerName], errorType: 'required-field' }, options.monthStart.option.map((item, index) => (React.createElement("option", { key: index, value: item.value }, item.name)))),
React.createElement(PHXSelect, { onChange: (event) => handleChangeConfig(event, options.dateStart.registerName), register: register(options.dateStart.registerName, {
required: true,
}), error: !!errors[options.dateStart.registerName], errorType: 'required-field' }, options.dateStart.option.map((item, index) => (React.createElement("option", { key: index, value: item.value }, item.name)))))),
React.createElement("div", null,
React.createElement("p", { className: 'text-xs' }, "Ng\u00E0y k\u1EBFt th\u00FAc"),
React.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
React.createElement(PHXSelect, { onChange: (event) => handleChangeConfig(event, options.monthEnd.registerName), register: register(options.monthEnd.registerName, {
required: true,
}), error: !!errors[options.monthEnd.registerName], errorType: 'required-field' }, options.monthEnd.option.map((item, index) => (React.createElement("option", { key: index, value: item.value }, item.name)))),
React.createElement(PHXSelect, { onChange: (event) => handleChangeConfig(event, options.dateEnd.registerName), register: register(options.dateEnd.registerName, {
required: true,
}), error: !!errors[options.dateEnd.registerName], errorType: 'required-field' }, options.dateEnd.option.map((item, index) => (React.createElement("option", { key: index, value: item.value }, item.name))))))),
preview && preview.enable && (React.createElement("div", { className: 'mt-3' },
React.createElement("p", { className: 'text-xs' }, "Xem tr\u01B0\u1EDBc c\u00E0i \u0111\u1EB7t"),
React.createElement("div", { className: 'mt-3 grid sm:grid-cols-2 gap-3' }, preview.data.map((item, index) => (React.createElement(PHXInput, { key: index, disabled: true, value: item.value }))))))));
}
//# sourceMappingURL=FormConfigTimeUseService.js.map