@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
59 lines • 2.77 kB
JavaScript
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);
};
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 } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { InputAdornment, OutlinedInput, } from '@mui/material';
import { useState } from 'react';
import CloseCircle from "../../icons/CloseCircle";
import Magnify from "../../icons/Magnify";
import { StyledIconButton } from './styles';
export function SearchBar(_a) {
var value = _a.value, onChange = _a.onChange, searchBarProps = __rest(_a, ["value", "onChange"]);
var _b = useState((value || '')), internalValue = _b[0], setValue = _b[1];
return (_jsx(OutlinedInput, __assign({ endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(StyledIconButton, { "$isHidden": !(internalValue && internalValue.length), "aria-label": "Clears the search",
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
onClick: function (e) {
setValue('');
if (onChange) {
onChange(__assign(__assign({}, e), { target: {
value: '',
} }));
}
}, size: "large", title: "Clears the search", children: _jsx(CloseCircle, { fontSize: "small" }) }) }), inputProps: {
'aria-label': 'Search',
},
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
onChange: function (e) {
setValue(e.target.value);
if (onChange) {
onChange(e);
}
}, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Magnify, {}) }), value: internalValue }, searchBarProps)));
}
export default SearchBar;
//# sourceMappingURL=index.js.map