@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.56 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/TextField"),a=require("@mui/material/IconButton"),i=require("@mui/icons-material/Cancel"),l=require("@mui/icons-material/Search"),u=require("@mui/material/Box"),n=require("lodash/debounce"),o=require("@mui/material/Tooltip");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(t),c=s(a),m=s(i),p=s(l),x=s(u),h=s(n),f=s(o);const S="NexusCommentSearchBar";exports.CommentSearchBar=t=>{const{t:a,onSearch:i,initialSearchTerm:l=""}=t,[u,n]=r.useState(l),o=r.useMemo((()=>h.default((e=>{i?.(e.target.value)}),500)),[i]);return e.jsx(d.default,{fullWidth:!0,size:"small",variant:"outlined",onChange:e=>{n(e.target.value),o(e)},value:u,sx:e=>({"& .MuiInputBase-root":{backgroundColor:`rgba(${e.vars.palette.text.primaryChannel} / 0.04)`,"&:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline":{borderColor:"transparent",...e.applyStyles("dark",{borderColor:"transparent"})}}}),placeholder:a("Searching"),slotProps:{input:{inputProps:{"data-testid":`${S}-input`},startAdornment:e.jsx(x.default,{sx:{display:"flex",alignItems:"center",mr:3},children:e.jsx(p.default,{fontSize:"small",sx:{color:"grey.500"}})}),endAdornment:u&&e.jsx(f.default,{title:a("clearSearch"),arrow:!0,children:e.jsx(c.default,{onClick:e=>{n(""),i?.("")},"data-testid":`${S}-clearSearch`,"aria-label":a("clearSearch"),size:"small",children:e.jsx(m.default,{})})})}}})},exports.prefix=S;