use-form-light
Version:
use-form-light is a very small React library that helps you manage forms and gives you ready-made form components with built-in checks
360 lines (355 loc) • 10.2 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
Button: () => Button,
Form: () => Form,
Input: () => Input,
Option: () => Option,
Select: () => Select,
Textarea: () => Textarea,
useForm: () => useForm
});
module.exports = __toCommonJS(index_exports);
// src/hooks/useForm.ts
var import_react = require("react");
var useForm = ({
defaultValues: initialDefaultValues,
validationRules
} = {}) => {
const [formState, setFormState] = (0, import_react.useState)({
values: initialDefaultValues != null ? initialDefaultValues : {},
errors: {}
});
const register = (name) => ({
name,
value: formState.values[name],
onChange: (e) => {
const { name: name2, value, type, id } = e.target;
const checked = e.target.checked;
if (type === "checkbox") {
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
values: __spreadProps(__spreadValues({}, prev.values), { [name2]: checked })
}));
} else if (type === "radio") {
if (checked) {
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
values: __spreadProps(__spreadValues({}, prev.values), { [name2]: id })
}));
}
} else {
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
values: __spreadProps(__spreadValues({}, prev.values), { [name2]: value })
}));
}
const rule = validationRules == null ? void 0 : validationRules[name2];
if (rule) {
const isValid = rule.pattern.test(value);
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
errors: __spreadProps(__spreadValues({}, prev.errors), {
[name2]: isValid ? "" : rule.message
})
}));
} else {
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
errors: __spreadProps(__spreadValues({}, prev.errors), { [name2]: "" })
}));
}
}
});
const watch = (name) => {
if (name) {
return formState.values[name];
}
return formState.values;
};
const handleSubmit = (callback) => {
return (e) => {
e.preventDefault();
const isValid = validate();
if (!isValid) {
return;
}
callback(formState.values);
};
};
const validate = () => {
if (!validationRules) return true;
let isValid = true;
const newErrors = {};
Object.entries(validationRules).forEach(([name, rule]) => {
if (!rule) return;
const value = formState.values[name];
const isValidField = rule.pattern.test(String(value));
if (!isValidField) {
isValid = false;
newErrors[name] = rule.message;
}
});
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
errors: newErrors
}));
return isValid;
};
const setValue = (name, value) => {
setFormState((prev) => __spreadProps(__spreadValues({}, prev), {
values: __spreadProps(__spreadValues({}, prev.values), { [name]: value })
}));
};
const reset = () => {
const defaultValues = initialDefaultValues != null ? initialDefaultValues : {};
const inputs = document.querySelectorAll("input");
inputs.forEach((input) => {
const name = input.name;
if (name) {
if (input.type === "checkbox") {
input.checked = Boolean(defaultValues[name]);
} else if (input.type === "radio") {
input.checked = input.id === defaultValues[name];
}
}
});
setFormState({
values: defaultValues,
errors: {}
});
};
return {
register,
handleSubmit,
errors: formState.errors,
values: formState.values,
setValue,
reset,
validate,
watch
};
};
// src/components/Form.css.ts
var styles = {
form: {
display: "flex",
flexDirection: "column",
gap: "1rem",
padding: "1rem",
border: "1px solid #ccc",
borderRadius: "4px"
},
inputContainer: {
display: "flex",
flexDirection: "column",
gap: "0.5rem"
},
input: {
padding: "0.5rem",
border: "1px solid #ccc",
borderRadius: "4px"
},
textareaContainer: {
display: "flex",
flexDirection: "column",
gap: "0.5rem"
},
textarea: {
padding: "0.5rem",
border: "1px solid #ccc",
borderRadius: "4px",
minHeight: "100px"
},
button: {
padding: "0.5rem 1rem",
backgroundColor: "#007bff",
color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
},
error: {
color: "red",
fontSize: "0.875rem"
}
};
// src/components/Form.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Input = (_a) => {
var _b = _a, {
register,
error,
styleOption = "default",
className = "",
type = "text",
children
} = _b, props = __objRest(_b, [
"register",
"error",
"styleOption",
"className",
"type",
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styleOption === "default" ? styles.inputContainer : void 0, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"input",
__spreadValues(__spreadProps(__spreadValues({
id: register == null ? void 0 : register.name,
type
}, register), {
style: styleOption === "default" ? styles.input : void 0,
className
}), props)
),
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.error, children: error })
] });
};
var Textarea = (_a) => {
var _b = _a, {
register,
error,
styleOption = "default",
className = "",
children
} = _b, props = __objRest(_b, [
"register",
"error",
"styleOption",
"className",
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
style: styleOption === "default" ? styles.textareaContainer : void 0,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"textarea",
__spreadValues(__spreadProps(__spreadValues({
id: register == null ? void 0 : register.name
}, register), {
style: styleOption === "default" ? styles.textarea : void 0,
className
}), props)
),
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.error, children: error })
]
}
);
};
var Select = (_a) => {
var _b = _a, {
register,
error,
styleOption = "default",
className = "",
children
} = _b, props = __objRest(_b, [
"register",
"error",
"styleOption",
"className",
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styleOption === "default" ? styles.selectContainer : void 0, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"select",
__spreadProps(__spreadValues(__spreadProps(__spreadValues({
id: register == null ? void 0 : register.name
}, register), {
style: styleOption === "default" ? styles.select : void 0,
className
}), props), {
children
})
),
error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.error, children: error })
] });
};
var Option = (_a) => {
var _b = _a, {
children
} = _b, props = __objRest(_b, [
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", __spreadProps(__spreadValues({}, props), { children }));
};
var Button = (_a) => {
var _b = _a, {
styleOption = "default",
className = "",
children
} = _b, props = __objRest(_b, [
"styleOption",
"className",
"children"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
__spreadProps(__spreadValues({
style: styleOption === "default" ? styles.button : void 0,
className
}, props), {
children
})
);
};
var Form = ({
children,
onSubmit,
styleOption = "default",
className = ""
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"form",
{
onSubmit,
style: styleOption === "default" ? styles.form : void 0,
className,
children
}
);
};