@smitch/fluid/lib/form/Form.js

A lightweight, Tailwind-powered React/Next.js UI component library.

'use client';
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef, useState, useCallback, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { Button } from '..';
var layouts = {
    col: 'flex-col',
    row: 'flex-row flex-wrap',
};
var Form = function (_a) {
    var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.name, name = _c === void 0 ? 'form' : _c, onsubmit = _a.onsubmit, 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;
    var form = useRef(null);
    var _y = useState(false), valid = _y[0], setValid = _y[1];
    var _z = useState({}), formData = _z[0], setFormData = _z[1];
    var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
    var handleSubmit = function (e) {
        e.preventDefault();
        if (onsubmit) {
            onsubmit(formData);
        }
    };
    var handleCancel = function () {
        if (onCancel) {
            onCancel();
        }
    };
    var handleInputChange = useCallback(function (event) {
        var target = event.target;
        var name = target.name, value = target.value;
        setFormData(function (prevData) {
            var _a;
            var updatedData = __assign(__assign({}, prevData), (_a = {}, _a[name] = value, _a));
            return updatedData;
        });
        if (form.current) {
            setValid(form.current.checkValidity());
        }
    }, []);
    var setFormRef = useCallback(function (node) {
        if (node) {
            form.current = node;
            node.addEventListener('change', handleInputChange, true);
        }
        return function () {
            if (node) {
                node.removeEventListener('change', handleInputChange, true);
            }
        };
    }, [handleInputChange]);
    return (_jsxs("form", { className: twMerge("form group flex ".concat(layoutClasses, " gap-8"), className), style: style, name: name, id: name, ref: setFormRef, onSubmit: handleSubmit, children: [children, actions && (_jsxs(_Fragment, { children: [separator && _jsx("hr", { className: 'border-neutral border-t-2 opacity-70' }), _jsxs("div", { className: "form-actions mt-auto flex group justify-between flex-grow flex-".concat(actionsLayout, " gap-").concat(actionsSpacing), children: [showCancel ? (_jsx(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 })) : null, _jsx(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 })] })] }))] }));
};
export default Form;
//# sourceMappingURL=Form.js.map