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

dynamic table based on react table v7

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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import { SearchIcon } from '../SearchIcon';
import styled from 'styled-components';
const Wrapper = styled.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
export function StyledSearchInput(_a) {
    var { placeholder } = _a, props = __rest(_a, ["placeholder"]);
    return (_jsxs(Wrapper, { children: [_jsx("input", Object.assign({ type: "text", className: "form-control form-control__clz", placeholder: placeholder }, props)), _jsx(SearchIcon, { className: "search-icon__clz", height: 15, width: 15 })] }));
}
// eslint-disable-next-line
export function StyledCollapsibleSearchInput(_a) {
    var { placeholder, initialSearchBoxWidth } = _a, props = __rest(_a, ["placeholder", "initialSearchBoxWidth"]);
    const [searchBoxWidth, setSearchBoxWidth] = React.useState(initialSearchBoxWidth === undefined ? '120px' : initialSearchBoxWidth);
    function handleTextFocus() {
        setSearchBoxWidth('100%');
    }
    function handleTextBlur() {
        setSearchBoxWidth(initialSearchBoxWidth === undefined ? '120px' : initialSearchBoxWidth);
    }
    return (_jsxs(Wrapper, Object.assign({ className: "collapsible-search-box__clz", style: { width: searchBoxWidth } }, { children: [_jsx("input", Object.assign({ type: "text", className: "form-control form-control__clz", placeholder: placeholder, onFocus: handleTextFocus, onBlur: handleTextBlur }, props)), _jsx(SearchIcon, { className: "search-icon__clz", height: 15, width: 15 })] })));
}
//# sourceMappingURL=index.js.map