@smitch/fluid/lib/searchinput/SearchInput.js

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

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef } from "react";
import { twMerge } from "tailwind-merge";
import { FaSearch } from "react-icons/fa";
import { Input, Button } from "..";
var SearchInput = function (_a) {
    var _b = _a.name, name = _b === void 0 ? "search" : _b, _c = _a.id, id = _c === void 0 ? "search" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.label, label = _e === void 0 ? "Search" : _e, icon = _a.icon, onButtonSubmit = _a.onButtonSubmit, _f = _a.size, size = _f === void 0 ? "md" : _f, _g = _a.rounded, rounded = _g === void 0 ? "md" : _g, placeholder = _a.placeholder, _h = _a.inputStyles, inputStyles = _h === void 0 ? "" : _h, _j = _a.btnShape, btnShape = _j === void 0 ? "circle" : _j, _k = _a.btnBackground, btnBackground = _k === void 0 ? "dark" : _k, _l = _a.btnColor, btnColor = _l === void 0 ? "light" : _l, _m = _a.autocomplete, autocomplete = _m === void 0 ? "off" : _m, _o = _a.autocorrect, autocorrect = _o === void 0 ? "off" : _o, _p = _a.spellcheck, spellcheck = _p === void 0 ? false : _p, _q = _a.spacing, spacing = _q === void 0 ? "0" : _q;
    var _r = useState(true), disabled = _r[0], setDisabled = _r[1];
    var input = useRef(null);
    var handleClick = function () {
        var value = input.current.value;
        onButtonSubmit(value);
    };
    var handleChange = function (e) {
        var value = e.target.value;
        value ? setDisabled(false) : setDisabled(true);
    };
    return (_jsxs("div", { className: twMerge("search-box flex font-semi-bold gap-".concat(spacing, " text-dark dark:text-light"), className), "data-testid": name, children: [_jsx(Input, { name: name, id: id, type: "search", ref: input, "data-testid": "input-".concat(name), className: twMerge("border-neutral", inputStyles), size: size, placeholder: placeholder, autocomplete: autocomplete, autocorrect: autocorrect, spellcheck: spellcheck, "aria-label": "Search", onChange: handleChange, rounded: rounded }), _jsxs(Button, { layout: btnShape, size: size, btnBackground: btnBackground, btnColor: btnColor, onClick: handleClick, disabled: disabled, title: "Submit", isBold: true, children: [icon ? _jsx(FaSearch, {}) : label, _jsx("span", { className: "sr-only", children: "Search" })] })] }));
};
export default SearchInput;
//# sourceMappingURL=SearchInput.js.map