@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.32 kB
JavaScript
import{jsx as r}from"react/jsx-runtime";import{useState as e,useMemo as t}from"react";import a from"@mui/material/TextField";import o from"@mui/material/IconButton";import i from"@mui/icons-material/Cancel";import l from"@mui/icons-material/Search";import n from"@mui/material/Box";import m from"lodash/debounce";import c from"@mui/material/Tooltip";const s="NexusCommentSearchBar",u=u=>{const{t:d,onSearch:p,initialSearchTerm:h=""}=u,[f,x]=e(h),S=t((()=>m((r=>{p?.(r.target.value)}),500)),[p]);return r(a,{fullWidth:!0,size:"small",variant:"outlined",onChange:r=>{x(r.target.value),S(r)},value:f,sx:r=>({"& .MuiInputBase-root":{backgroundColor:`rgba(${r.vars.palette.text.primaryChannel} / 0.04)`,"&:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderColor:"transparent",...r.applyStyles("dark",{borderColor:"transparent"})}}}),placeholder:d("Searching"),slotProps:{input:{inputProps:{"data-testid":`${s}-input`},startAdornment:r(n,{sx:{display:"flex",alignItems:"center",mr:3},children:r(l,{fontSize:"small",sx:{color:"grey.500"}})}),endAdornment:f&&r(c,{title:d("clearSearch"),arrow:!0,children:r(o,{onClick:r=>{x(""),p?.("")},"data-testid":`${s}-clearSearch`,"aria-label":d("clearSearch"),size:"small",children:r(i,{})})})}}})};export{u as CommentSearchBar,s as prefix};