@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) • 3.37 kB
JavaScript
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import i from"@mui/material/Stack";import{useState as o,useMemo as n}from"react";import a from"@mui/icons-material/AddOutlined";import l from"@mui/icons-material/PeopleOutlineOutlined";import s from"@mui/material/Button";import m from"@mui/material/IconButton";import{useTheme as c}from"@mui/material/styles";import d from"@mui/material/useMediaQuery";import p from"@mui/icons-material/Sort";import u from"@mui/icons-material/Menu";import{useTranslate as h}from"../locales/index.js";import g from"./locale.json.js";import{ActionGroup as f}from"../ActionGroup/ActionGroup.container.js";import{SearchBar as j}from"../SearchBar/SearchBar.component.js";import{MultiSelectFilter as x}from"../common/Filter/MultiSelectFilter.js";import{SingleSelectFilter as C}from"../common/Filter/SingleSelectFilter.js";import{GridHeader as F}from"../GridHeader/GridHeader.container.js";const S="NexusProjectGridHeader",$=({title:$,description:y,actions:O,actionsComponent:T,disableCreateButton:B,createButtonProps:w,projectTypeFilterLabel:N,projectTypeOptions:b,ownershipOptions:I,sortOptions:M,defaultProjectTypes:k=[],defaultOwnership:v,defaultSortBy:A,onProjectTypeFilterChange:G,onOwnershipFilterChange:P,onSortFilterChange:H,onSearch:z,onShare:D,onCreate:L,onMenuToggle:Q,children:V,...W})=>{const q=h(g),E=c(),J=d(E.breakpoints.down("md")),[K,R]=o([...k]),[U,X]=o(v),[Y,Z]=o(A),_=K.length>0&&K.length===b?.length,ee=n((()=>{let e="";return 0===K.length||_?e=q("allTypes"):1===K.length?e=b?.find((e=>e.value===K[0]))?.name||"":K.length>1&&(e=q("TypeSelectedCount",{0:K.length})),e}),[_,b,K,q]),te=T||(O?e(f,{actions:O,max:1}):e(t,{})),re=e(j,{"data-testid":`${S}-search`,className:`${S}-search`,buttonVariant:"text",placeholder:`${q("Search by keyword")}...`,onChange:z,onClear:()=>z(""),sx:{mr:{xs:0,md:4},maxWidth:{xs:"unset",md:.5},height:48}}),ie=e(s,{variant:"contained",disabled:B,startIcon:e(a,{}),onClick:e=>{e.preventDefault(),e.target.blur(),L&&L()},"data-testid":`${S}-create`,className:`${S}-create`,...w,children:w?.title||q("Create Document")}),oe=b&&b.length?e(x,{"data-testid":`${S}-projectFilter`,className:`${S}-projectFilter`,toggleMode:J?"iconToggle":"textToggle",text:ee,initialSelected:K,filterOptions:b,onFilterChanged:e=>{R(e),G&&G(e)}}):e(t,{}),ne=I&&I.length?e(C,{"data-testid":`${S}-ownershipFilter`,className:`${S}-ownershipFilter`,toggleMode:J?"iconToggle":"textToggle",icon:e(l,{}),text:I.find((e=>e.value===U))?.name||"",initialSelected:U,filterOptions:I,onFilterChanged:e=>{X(e),P&&P(e)}}):e(t,{}),ae=M&&M.length?e(C,{"data-testid":`${S}-sortFilter`,className:`${S}-sortFilter`,initialSelected:Y,icon:e(p,{}),filterOptions:M,onFilterChanged:e=>{Z(e),H&&H(e)}}):e(t,{});return r(F,{icon:J&&Q&&e(m,{size:"small",onClick:Q,className:`${S}-menuIcon`,"data-testid":`${S}-menuIcon`,"aria-label":"Menu Button",children:e(u,{})}),title:$,description:y,titleActions:r(i,{direction:"row",sx:{alignItems:"center"},children:[D&&e(s,{onClick:D,variant:"text",size:"small",className:`${S}-shareButton`,"data-testid":`${S}-shareButton`,startIcon:e(J?t:l,{}),children:q("Share")}),te]}),primaryAction:ie,search:re,className:`${S}-root`,...W,children:[V,r(i,{direction:"row",justifyContent:"flex-end",alignItems:"center",spacing:4,children:[oe,ne,ae]})]})};export{$ as ProjectGridHeaderComponent,S as prefix};