@smitch/breeze 2.2.23 → 2.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/form/Form.js +44 -50
- package/lib/form/types/index.d.ts +1 -3
- package/package.json +1 -1
package/lib/form/Form.js
CHANGED
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
|
-
var __assign = (this && this.__assign) || function () {
|
|
4
|
-
__assign = Object.assign || function(t) {
|
|
5
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
-
s = arguments[i];
|
|
7
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
-
t[p] = s[p];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
return __assign.apply(this, arguments);
|
|
13
|
-
};
|
|
14
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
4
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
16
5
|
var react_1 = require("react");
|
|
@@ -20,56 +9,61 @@ var layouts = {
|
|
|
20
9
|
col: "flex-col",
|
|
21
10
|
row: "flex-row flex-wrap",
|
|
22
11
|
};
|
|
12
|
+
var actionsLayouts = {
|
|
13
|
+
row: "flex-row justify-end",
|
|
14
|
+
"row-reverse": "flex-row flex-row-reverse justify-end",
|
|
15
|
+
col: "flex-col",
|
|
16
|
+
"col-reverse": "flex-col flex-col-reverse",
|
|
17
|
+
};
|
|
23
18
|
var Form = (0, react_1.forwardRef)(function (_a, ref) {
|
|
24
|
-
var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.name, name = _c === void 0 ? "form" : _c, onFormSubmit = _a.onFormSubmit, onCancel = _a.onCancel, _d = _a.layout, layout = _d === void 0 ? "col" : _d, _e = _a.showCancel, showCancel = _e === void 0 ? false : _e, _f = _a.actions, actions = _f === void 0 ? true : _f, children = _a.children, _g = _a.submitLabel, submitLabel = _g === void 0 ? "Submit" : _g, _h = _a.cancelLabel, cancelLabel = _h === void 0 ? "Cancel" : _h, _j = _a.actionsLayout, actionsLayout = _j === void 0 ? "row" : _j, _k = _a.actionsSpacing, actionsSpacing = _k === void 0 ? "
|
|
25
|
-
var
|
|
26
|
-
var _y = (0, react_1.useState)(false),
|
|
27
|
-
var
|
|
28
|
-
|
|
19
|
+
var _b = _a.className, className = _b === void 0 ? "" : _b, style = _a.style, _c = _a.name, name = _c === void 0 ? "form" : _c, onFormSubmit = _a.onFormSubmit, onCancel = _a.onCancel, _d = _a.layout, layout = _d === void 0 ? "col" : _d, _e = _a.showCancel, showCancel = _e === void 0 ? false : _e, _f = _a.actions, actions = _f === void 0 ? true : _f, children = _a.children, _g = _a.submitLabel, submitLabel = _g === void 0 ? "Submit" : _g, _h = _a.cancelLabel, cancelLabel = _h === void 0 ? "Cancel" : _h, _j = _a.actionsLayout, actionsLayout = _j === void 0 ? "row" : _j, _k = _a.actionsSpacing, actionsSpacing = _k === void 0 ? "4" : _k, _l = _a.submitBackground, submitBackground = _l === void 0 ? "primary" : _l, _m = _a.submitColor, submitColor = _m === void 0 ? "light" : _m, _o = _a.cancelBackground, cancelBackground = _o === void 0 ? "transparent" : _o, _p = _a.cancelColor, cancelColor = _p === void 0 ? "current" : _p, _q = _a.submitOutline, submitOutline = _q === void 0 ? false : _q, _r = _a.submitOutlineColor, submitOutlineColor = _r === void 0 ? "current" : _r, _s = _a.cancelOutline, cancelOutline = _s === void 0 ? false : _s, _t = _a.cancelOutlineColor, cancelOutlineColor = _t === void 0 ? "current" : _t, _u = _a.buttonTextcase, buttonTextcase = _u === void 0 ? "normal-case" : _u, _v = _a.buttonShape, buttonShape = _v === void 0 ? "default" : _v, _w = _a.buttonIsBold, buttonIsBold = _w === void 0 ? false : _w, _x = _a.separator, separator = _x === void 0 ? false : _x;
|
|
20
|
+
var formRef = (0, react_1.useRef)(null);
|
|
21
|
+
var _y = (0, react_1.useState)(false), isValid = _y[0], setIsValid = _y[1];
|
|
22
|
+
var setFormRef = (0, react_1.useCallback)(function (node) {
|
|
23
|
+
formRef.current = node;
|
|
24
|
+
if (typeof ref === "function") {
|
|
25
|
+
ref(node);
|
|
26
|
+
}
|
|
27
|
+
else if (ref) {
|
|
28
|
+
ref.current = node;
|
|
29
|
+
}
|
|
30
|
+
}, [ref]);
|
|
31
|
+
var validateForm = (0, react_1.useCallback)(function () {
|
|
32
|
+
if (formRef.current) {
|
|
33
|
+
setIsValid(formRef.current.checkValidity());
|
|
34
|
+
}
|
|
35
|
+
}, []);
|
|
36
|
+
(0, react_1.useEffect)(function () {
|
|
37
|
+
var form = formRef.current;
|
|
38
|
+
if (!form)
|
|
39
|
+
return;
|
|
40
|
+
var handleChangeOrInput = function () { return validateForm(); };
|
|
41
|
+
form.addEventListener("change", handleChangeOrInput);
|
|
42
|
+
form.addEventListener("input", handleChangeOrInput);
|
|
43
|
+
validateForm();
|
|
44
|
+
return function () {
|
|
45
|
+
form.removeEventListener("change", handleChangeOrInput);
|
|
46
|
+
form.removeEventListener("input", handleChangeOrInput);
|
|
47
|
+
};
|
|
48
|
+
}, [validateForm]);
|
|
29
49
|
var handleSubmit = function (e) {
|
|
30
50
|
e.preventDefault();
|
|
31
|
-
|
|
32
|
-
|
|
51
|
+
var form = formRef.current;
|
|
52
|
+
if (!form || !form.checkValidity()) {
|
|
53
|
+
setIsValid(false);
|
|
33
54
|
return;
|
|
34
55
|
}
|
|
56
|
+
var formData = new FormData(form);
|
|
35
57
|
if (onFormSubmit) {
|
|
36
58
|
onFormSubmit(formData);
|
|
37
59
|
}
|
|
38
60
|
};
|
|
39
61
|
var handleCancel = function () {
|
|
40
|
-
|
|
41
|
-
onCancel();
|
|
62
|
+
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
42
63
|
};
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
var name = target.name, value = target.value;
|
|
46
|
-
setFormData(function (prev) {
|
|
47
|
-
var _a;
|
|
48
|
-
return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
|
|
49
|
-
});
|
|
50
|
-
if (internalRef.current) {
|
|
51
|
-
setValid(internalRef.current.checkValidity());
|
|
52
|
-
}
|
|
53
|
-
}, []);
|
|
54
|
-
var setRefs = (0, react_1.useCallback)(function (node) {
|
|
55
|
-
internalRef.current = node;
|
|
56
|
-
if (typeof ref === "function") {
|
|
57
|
-
ref(node);
|
|
58
|
-
}
|
|
59
|
-
else if (ref) {
|
|
60
|
-
ref.current = node;
|
|
61
|
-
}
|
|
62
|
-
if (node) {
|
|
63
|
-
node.addEventListener("change", handleInputChange, true);
|
|
64
|
-
}
|
|
65
|
-
return function () {
|
|
66
|
-
if (node) {
|
|
67
|
-
node.removeEventListener("change", handleInputChange, true);
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
}, [handleInputChange, ref]);
|
|
71
|
-
return ((0, jsx_runtime_1.jsxs)("form", { className: (0, tailwind_merge_1.twMerge)("form group flex ".concat(layoutClasses, " gap-8"), className), style: style, name: name, id: name, ref: setRefs, onSubmit: handleSubmit, children: [children, actions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [separator && (0, jsx_runtime_1.jsx)("hr", { className: "border-neutral border-t-2 opacity-70" }), (0, jsx_runtime_1.jsxs)("div", { className: "form-actions mt-auto flex group justify-between flex-grow flex-".concat(actionsLayout, " gap-").concat(actionsSpacing), children: [showCancel && ((0, jsx_runtime_1.jsx)(__1.Button, { type: "button", className: "!justify-center flex-grow", btnBackground: cancelBackground, btnColor: cancelColor, outline: cancelOutline, outlineColor: cancelOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, onClick: handleCancel, children: cancelLabel })), (0, jsx_runtime_1.jsx)(__1.Button, { type: "submit", className: "!justify-center flex-grow", btnBackground: submitBackground, btnColor: submitColor, outline: submitOutline, outlineColor: submitOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, disabled: !valid, children: submitLabel })] })] }))] }));
|
|
64
|
+
var layoutClasses = layouts[layout];
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)("form", { ref: setFormRef, name: name, id: name, className: (0, tailwind_merge_1.twMerge)("flex", layoutClasses, "gap-8", className), style: style, onSubmit: handleSubmit, noValidate: true, children: [children, actions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [separator && (0, jsx_runtime_1.jsx)("hr", { className: "col-span-full border-t border-neutral opacity-70" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-".concat(actionsSpacing, " ").concat(actionsLayouts[actionsLayout]), children: [showCancel && ((0, jsx_runtime_1.jsx)(__1.Button, { type: "button", onClick: handleCancel, btnBackground: cancelBackground, btnColor: cancelColor, outline: cancelOutline, outlineColor: cancelOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, className: "flex-grow", children: cancelLabel })), (0, jsx_runtime_1.jsx)(__1.Button, { type: "submit", disabled: !isValid, btnBackground: submitBackground, btnColor: submitColor, outline: submitOutline, outlineColor: submitOutlineColor, textcase: buttonTextcase, layout: buttonShape, isBold: buttonIsBold, className: "flex-grow", children: submitLabel })] })] }))] }));
|
|
72
66
|
});
|
|
73
67
|
Form.displayName = "Form";
|
|
74
68
|
exports.default = Form;
|
|
75
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
69
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRm9ybS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91aS9mb3JtL0Zvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxZQUFZLENBQUM7OztBQUViLCtCQUErRjtBQUMvRixpREFBeUM7QUFDekMsd0JBQTRCO0FBRzVCLElBQU0sT0FBTyxHQUFHO0lBQ2QsR0FBRyxFQUFFLFVBQVU7SUFDZixHQUFHLEVBQUUsb0JBQW9CO0NBQ2pCLENBQUM7QUFFWCxJQUFNLGNBQWMsR0FBRztJQUNyQixHQUFHLEVBQUUsc0JBQXNCO0lBQzNCLGFBQWEsRUFBRSx1Q0FBdUM7SUFDdEQsR0FBRyxFQUFFLFVBQVU7SUFDZixhQUFhLEVBQUUsMkJBQTJCO0NBQ2xDLENBQUM7QUFFWCxJQUFNLElBQUksR0FBRyxJQUFBLGtCQUFVLEVBQ3JCLFVBQ0UsRUEwQkMsRUFDRCxHQUFHO1FBMUJELGlCQUFjLEVBQWQsU0FBUyxtQkFBRyxFQUFFLEtBQUEsRUFDZCxLQUFLLFdBQUEsRUFDTCxZQUFhLEVBQWIsSUFBSSxtQkFBRyxNQUFNLEtBQUEsRUFDYixZQUFZLGtCQUFBLEVBQ1osUUFBUSxjQUFBLEVBQ1IsY0FBYyxFQUFkLE1BQU0sbUJBQUcsS0FBSyxLQUFBLEVBQ2Qsa0JBQWtCLEVBQWxCLFVBQVUsbUJBQUcsS0FBSyxLQUFBLEVBQ2xCLGVBQWMsRUFBZCxPQUFPLG1CQUFHLElBQUksS0FBQSxFQUNkLFFBQVEsY0FBQSxFQUNSLG1CQUFzQixFQUF0QixXQUFXLG1CQUFHLFFBQVEsS0FBQSxFQUN0QixtQkFBc0IsRUFBdEIsV0FBVyxtQkFBRyxRQUFRLEtBQUEsRUFDdEIscUJBQXFCLEVBQXJCLGFBQWEsbUJBQUcsS0FBSyxLQUFBLEVBQ3JCLHNCQUFvQixFQUFwQixjQUFjLG1CQUFHLEdBQUcsS0FBQSxFQUNwQix3QkFBNEIsRUFBNUIsZ0JBQWdCLG1CQUFHLFNBQVMsS0FBQSxFQUM1QixtQkFBcUIsRUFBckIsV0FBVyxtQkFBRyxP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
|
|
@@ -11,9 +11,7 @@ interface CommonFormProps {
|
|
|
11
11
|
layout?: "col" | "row";
|
|
12
12
|
className?: string;
|
|
13
13
|
style?: React.CSSProperties;
|
|
14
|
-
onFormSubmit?: (formData:
|
|
15
|
-
[key: string]: string;
|
|
16
|
-
}) => void;
|
|
14
|
+
onFormSubmit?: (formData: FormData) => void;
|
|
17
15
|
onCancel?: () => void;
|
|
18
16
|
showCancel?: boolean;
|
|
19
17
|
actions?: boolean;
|