@maherunlocker/custom-react-table/dist/cjs/components/assets/StyledSearchInput/index.js

dynamic table based on react table v7

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledCollapsibleSearchInput = exports.StyledSearchInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("bootstrap/dist/css/bootstrap.min.css");
const react_1 = __importDefault(require("react"));
const SearchIcon_1 = require("../SearchIcon");
const styled_components_1 = __importDefault(require("styled-components"));
const Wrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
  position: relative;

  .collapsible-search-box__clz {
    transition: all 100ms ease-in-out;
  }

  .form-control__clz {
    border: none;
    padding-left: 40px;
    padding-right: 20px;
    background-color: #f3f3f9;
    border-radius: 10px;
  }

  .search-icon__clz {
    position: absolute;
    z-index: 10;
    left: 10px;
    fill: #74788d;
  }
`;
// eslint-disable-next-line
function StyledSearchInput(_a) {
    var { placeholder } = _a, props = __rest(_a, ["placeholder"]);
    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "text", className: "form-control form-control__clz", placeholder: placeholder }, props)), (0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, { className: "search-icon__clz", height: 15, width: 15 })] }));
}
exports.StyledSearchInput = StyledSearchInput;
// eslint-disable-next-line
function StyledCollapsibleSearchInput(_a) {
    var { placeholder, initialSearchBoxWidth } = _a, props = __rest(_a, ["placeholder", "initialSearchBoxWidth"]);
    const [searchBoxWidth, setSearchBoxWidth] = react_1.default.useState(initialSearchBoxWidth === undefined ? '120px' : initialSearchBoxWidth);
    function handleTextFocus() {
        setSearchBoxWidth('100%');
    }
    function handleTextBlur() {
        setSearchBoxWidth(initialSearchBoxWidth === undefined ? '120px' : initialSearchBoxWidth);
    }
    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ className: "collapsible-search-box__clz", style: { width: searchBoxWidth } }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "text", className: "form-control form-control__clz", placeholder: placeholder, onFocus: handleTextFocus, onBlur: handleTextBlur }, props)), (0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, { className: "search-icon__clz", height: 15, width: 15 })] })));
}
exports.StyledCollapsibleSearchInput = StyledCollapsibleSearchInput;
//# sourceMappingURL=index.js.map