@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.25 kB
JavaScript
import{jsx as t,Fragment as r,jsxs as i}from"react/jsx-runtime";import{useCallback as e,useMemo as s}from"react";import n from"@mui/material/Button";import o from"@mui/material/Stack";import{isReactNode as a}from"../../util/functions/index.js";import c from"./ActionsBar.styles.js";const l="NexusActionsBar",f=f=>{const{actions:m,sx:d,...u}=f,x=e((r=>r.map(((r,i)=>{if(a(r))return r;const{children:e,onClick:s,sx:o,...c}=r;return t(n,{"data-testid":`${l}-Action-${e}`,className:`${l}-Action`,onClick:s,sx:[...Array.isArray(o)?o:[o]],...c,children:e},`${e}-${i}`)}))),[]);return s((()=>{if(!m)return t(r,{});if(a(m))return m;const{left:e,right:s}=m,n=x(e),f=x(s);return i(o,{direction:"row",spacing:2,flexGrow:1,flexShrink:1,flexBasis:"0%",justifyContent:"space-between",sx:[c[`.${l}-root`],...Array.isArray(d)?d:[d]],"data-testid":`${l}-root`,className:`${l}-root`,...u,children:[t(o,{direction:"row",spacing:2,justifyContent:"flex-start","data-testid":`${l}-actionsLeft`,className:`${l}-actionsLeft`,sx:{display:"flex"},children:n},"left"),t(o,{direction:"row",spacing:2,justifyContent:"flex-end","data-testid":`${l}-actionsRight`,className:`${l}-actionsRight`,children:f},"right")]})}),[m,x,u,d])};export{f as ActionsBarComponent,l as prefix};