@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
25 lines • 1.71 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ClearIcon from '@mui/icons-material/Clear';
import Search from '@mui/icons-material/Search';
import { FormControl, IconButton, InputAdornment } from '@mui/material';
import { InputCard } from '../../components/Card/InputCard.js';
import { useHeaderHeight } from '../../stores/header/useHeaderStore.js';
import { Input, StickySearchInputContainer } from './SearchInput.style.js';
export const SearchInput = ({ inputRef, name, placeholder, onChange, onBlur, onClear, value, autoFocus, size = 'medium', }) => {
return (_jsx(InputCard, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(Input, { inputRef: inputRef, size: size, placeholder: placeholder, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Search, {}) }), endAdornment: (value || inputRef?.current?.value) &&
onClear && (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: size, onClick: onClear, "aria-label": "Clear", tabIndex: -1, sx: {
padding: 0.5,
}, children: _jsx(ClearIcon, { fontSize: size }) }) })), inputProps: {
inputMode: 'search',
onChange,
onBlur,
name,
value,
maxLength: 128,
}, autoComplete: "off", autoFocus: autoFocus }) }) }));
};
export const StickySearchInput = (props) => {
const { headerHeight } = useHeaderHeight();
return (_jsx(StickySearchInputContainer, { headerHeight: headerHeight, children: _jsx(SearchInput, { ...props, autoFocus: true }) }));
};
//# sourceMappingURL=SearchInput.js.map