@smitch/fluid
Version:
A Next/React ui-component libray.
39 lines (38 loc) • 3.45 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from 'react';
import { twMerge } from 'tailwind-merge';
import { FaPlus, FaMinus } from 'react-icons/fa6';
import { Input, Button, Label } from '..';
var Counter = function (_a) {
var _b = _a.name, name = _b === void 0 ? 'counter' : _b, _c = _a.id, id = _c === void 0 ? 'counter' : _c, _d = _a.className, className = _d === void 0 ? 'font-semibold' : _d, _e = _a.min, min = _e === void 0 ? 0 : _e, max = _a.max, _f = _a.value, value = _f === void 0 ? 1 : _f, _g = _a.step, step = _g === void 0 ? 1 : _g, onCountChange = _a.onCountChange, _h = _a.btnShape, btnShape = _h === void 0 ? 'circle' : _h, _j = _a.btnBackground, btnBackground = _j === void 0 ? 'info' : _j, _k = _a.btnColor, btnColor = _k === void 0 ? 'light' : _k, _l = _a.size, size = _l === void 0 ? 'md' : _l, _m = _a.spacing, spacing = _m === void 0 ? '2' : _m, label = _a.label, _o = _a.labelIsBold, labelIsBold = _o === void 0 ? true : _o, _p = _a.layout, layout = _p === void 0 ? 'col' : _p, title = _a.title, _q = _a.hint, hint = _q === void 0 ? false : _q, _r = _a.inputStyles, inputStyles = _r === void 0 ? 'max-w-[3em] border-neutral border-2' : _r, _s = _a.rounded, rounded = _s === void 0 ? 'md' : _s;
var _t = useState(value), total = _t[0], setTotal = _t[1];
var _u = useState(false), error = _u[0], setError = _u[1];
var input = useRef(null);
var handleValueChange = function (value) {
setTotal(value);
onCountChange(value);
input.current.valueAsNumber = value;
ifError(value);
};
var plus = function () {
var value = total + step;
handleValueChange(value);
};
var minus = function () {
var value = total - step;
handleValueChange(value);
};
var handleChange = function (e) {
var value = e.target.valueAsNumber;
handleValueChange(value);
};
var ifError = function (value) {
if (!value || value > max || value < min)
setError(true);
else
setError(false);
};
return (_jsxs(Label, { label: label, isBold: labelIsBold, layout: layout, forId: id, size: size, type: 'number', className: twMerge("counter group", className), "data-testid": 'counter', children: [_jsxs("div", { className: "flex items-center gap-".concat(spacing), children: [_jsxs(Button, { disabled: total <= Number(min), onClick: minus, "aria-label": 'Minus', title: 'Minus', id: 'minus', layout: btnShape, size: size, btnBackground: btnBackground, btnColor: btnColor, children: [_jsx(FaMinus, {}), _jsx("span", { className: 'sr-only', children: "Minus" })] }), _jsx(Input, { name: name, id: id, type: 'number', max: max, min: min, value: total, ref: input, onChange: handleChange, "data-testid": 'counter-input', className: "!me-0 ".concat(inputStyles), size: size, title: title, placeholder: min === null || min === void 0 ? void 0 : min.toString(), rounded: rounded }), _jsxs(Button, { disabled: total >= Number(max), onClick: plus, "aria-label": 'Plus', title: 'Plus', id: 'plus', layout: btnShape, size: size, btnBackground: btnBackground, btnColor: btnColor, children: [_jsx(FaPlus, {}), _jsx("span", { className: 'sr-only', children: "Add" })] })] }), hint && (_jsx("p", { className: "hint text-sm font-normal mt-[.5em] dark:text-light ".concat(error && 'text-error'), children: title }))] }));
};
export default Counter;