@smitch/breeze 2.2.15 → 2.2.16
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.d.ts +2 -1
- package/lib/form/Form.js +21 -16
- package/package.json +1 -1
package/lib/form/Form.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { FormProps } from "./types";
|
|
2
|
-
declare const Form:
|
|
3
|
+
declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
|
|
3
4
|
export default Form;
|
package/lib/form/Form.js
CHANGED
|
@@ -20,15 +20,15 @@ var layouts = {
|
|
|
20
20
|
col: "flex-col",
|
|
21
21
|
row: "flex-row flex-wrap",
|
|
22
22
|
};
|
|
23
|
-
var Form = function (_a) {
|
|
23
|
+
var Form = (0, react_1.forwardRef)(function (_a, ref) {
|
|
24
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 ? "0" : _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;
|
|
25
|
-
var
|
|
25
|
+
var internalRef = (0, react_1.useRef)(null);
|
|
26
26
|
var _y = (0, react_1.useState)(false), valid = _y[0], setValid = _y[1];
|
|
27
27
|
var _z = (0, react_1.useState)({}), formData = _z[0], setFormData = _z[1];
|
|
28
28
|
var layoutClasses = (0, react_1.useMemo)(function () { return layouts[layout]; }, [layout]);
|
|
29
29
|
var handleSubmit = function (e) {
|
|
30
30
|
e.preventDefault();
|
|
31
|
-
if (
|
|
31
|
+
if (internalRef.current && !internalRef.current.checkValidity()) {
|
|
32
32
|
setValid(false);
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
@@ -37,25 +37,29 @@ var Form = function (_a) {
|
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
39
|
var handleCancel = function () {
|
|
40
|
-
if (onCancel)
|
|
40
|
+
if (onCancel)
|
|
41
41
|
onCancel();
|
|
42
|
-
}
|
|
43
42
|
};
|
|
44
43
|
var handleInputChange = (0, react_1.useCallback)(function (event) {
|
|
45
44
|
var target = event.target;
|
|
46
45
|
var name = target.name, value = target.value;
|
|
47
|
-
setFormData(function (
|
|
46
|
+
setFormData(function (prev) {
|
|
48
47
|
var _a;
|
|
49
|
-
|
|
50
|
-
return updatedData;
|
|
48
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
|
|
51
49
|
});
|
|
52
|
-
if (
|
|
53
|
-
setValid(
|
|
50
|
+
if (internalRef.current) {
|
|
51
|
+
setValid(internalRef.current.checkValidity());
|
|
54
52
|
}
|
|
55
53
|
}, []);
|
|
56
|
-
var
|
|
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
|
+
}
|
|
57
62
|
if (node) {
|
|
58
|
-
form.current = node;
|
|
59
63
|
node.addEventListener("change", handleInputChange, true);
|
|
60
64
|
}
|
|
61
65
|
return function () {
|
|
@@ -63,8 +67,9 @@ var Form = function (_a) {
|
|
|
63
67
|
node.removeEventListener("change", handleInputChange, true);
|
|
64
68
|
}
|
|
65
69
|
};
|
|
66
|
-
}, [handleInputChange]);
|
|
67
|
-
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:
|
|
68
|
-
};
|
|
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 })] })] }))] }));
|
|
72
|
+
});
|
|
73
|
+
Form.displayName = "Form";
|
|
69
74
|
exports.default = Form;
|
|
70
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRm9ybS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91aS9mb3JtL0Zvcm0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxZQUFZLENBQUM7Ozs7Ozs7Ozs7Ozs7O0FBRWIsK0JBQWtGO0FBQ2xGLGlEQUF5QztBQUN6Qyx3QkFBNEI7QUFHNUIsSUFBTSxPQUFPLEdBQUc7SUFDZCxHQUFHLEVBQUUsVUFBVTtJQUNmLEdBQUcsRUFBRSxvQkFBb0I7Q0FDMUIsQ0FBQztBQUVGLElBQU0sSUFBSSxHQUFHLElBQUEsa0JBQVUsRUFDckIsVUFDRSxFQTBCQyxFQUNELEdBQUc7UUExQkQsaUJBQWMsRUFBZCxTQUFTLG1CQUFHLEVBQUUsS0FBQSxFQUNkLEtBQUssV0FBQSxFQUNMLFlBQWEsRUFBYixJQUFJLG1CQUFHLE1BQU0sS0FBQSxFQUNiLFlBQVksa0JBQUEsRUFDWixRQUFRLGNBQUEsRUFDUixjQUFjLEVBQWQsTUFBTSxtQkFBRyxLQUFLLEtBQUEsRUFDZCxrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsZUFBYyxFQUFkLE9BQU8sbUJBQUcsSUFBSSxLQUFBLEVBQ2QsUUFBUSxjQUFBLEVBQ1IsbUJBQXNCLEVBQXRCLFdBQVcsbUJBQUcsUUFBUSxLQUFBLEVBQ3RCLG1CQUFzQixFQUF0QixXQUFXLG1CQUFHLFFBQVEsS0FBQSxFQUN0QixxQkFBcUIsRUFBckIsYUFBYSxtQkFBRyxLQUFLLEtBQUEsRUFDckIsc0JBQW9CLEVBQXBCLGNBQWMsbUJBQUcsR0FBRyxLQUFBLEVBQ3BCLHdCQUE0QixFQUE1QixnQkFBZ0IsbUJBQUcsU0FBUyxLQUFBLEVBQzVCLG1CQUFxQixFQUFyQixXQUFXLG1CQUFHLE9BQU8sS0FBQSxFQUNyQix3QkFBZ0MsRUFBaEMsZ0JBQWdCLG1CQUFHLGFBQWEsS0FBQSxFQUNoQyxtQkFBdUIsRUFBdkIsV0FBVyxtQkFBRyxTQUFTLEtBQUEsRUFDdkIscUJBQXFCLEVBQXJC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
|