phx-react
Version:
PHX REACT
51 lines • 4.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXFormConfigTimeUseService = PHXFormConfigTimeUseService;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_hook_form_1 = require("react-hook-form");
const Select_1 = require("../Select");
const Input_1 = require("../Input");
function PHXFormConfigTimeUseService({ options, preview = {
enable: false,
data: [],
}, onChange, defaultValue, }) {
const [dataConfig, setDataConfig] = (0, react_1.useState)(defaultValue || {});
const { register, formState: { errors }, reset, } = (0, react_hook_form_1.useForm)();
(0, react_1.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_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: 'grid grid-cols-2 gap-x-2' },
react_1.default.createElement("div", null,
react_1.default.createElement("p", { className: 'text-xs' }, "Ng\u00E0y b\u1EAFt \u0111\u1EA7u"),
react_1.default.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
react_1.default.createElement(Select_1.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_1.default.createElement("option", { key: index, value: item.value }, item.name)))),
react_1.default.createElement(Select_1.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_1.default.createElement("option", { key: index, value: item.value }, item.name)))))),
react_1.default.createElement("div", null,
react_1.default.createElement("p", { className: 'text-xs' }, "Ng\u00E0y k\u1EBFt th\u00FAc"),
react_1.default.createElement("div", { className: 'grid sm:grid-cols-2 gap-2' },
react_1.default.createElement(Select_1.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_1.default.createElement("option", { key: index, value: item.value }, item.name)))),
react_1.default.createElement(Select_1.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_1.default.createElement("option", { key: index, value: item.value }, item.name))))))),
preview && preview.enable && (react_1.default.createElement("div", { className: 'mt-3' },
react_1.default.createElement("p", { className: 'text-xs' }, "Xem tr\u01B0\u1EDBc c\u00E0i \u0111\u1EB7t"),
react_1.default.createElement("div", { className: 'mt-3 grid sm:grid-cols-2 gap-3' }, preview.data.map((item, index) => (react_1.default.createElement(Input_1.PHXInput, { key: index, disabled: true, value: item.value }))))))));
}
//# sourceMappingURL=FormConfigTimeUseService.js.map