imply asChild given children

reaviz · Jul 26, 2024 · fe383a6 · fe383a6
1 parent aeec720
commit fe383a6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/SessionsList/NewSessionButton.tsx b/src/SessionsList/NewSessionButton.tsx
@@ -4,17 +4,15 @@ import { SessionsContext } from '@/SessionsContext';
 import { Slot } from '@radix-ui/react-slot';
 
 interface NewSessionButtonProps extends PropsWithChildren {
-  asChild?: boolean;
   newSessionText?: string;
 }
 
 export const NewSessionButton: FC<NewSessionButtonProps> = ({
   children,
-  asChild,
   newSessionText = 'New Session'
 }) => {
   const { theme, createSession } = useContext(SessionsContext);
-  const Comp = asChild ? Slot : Button;
+  const Comp = children ? Slot : Button;
   return (
     <Comp
       fullWidth
@@ -23,7 +21,7 @@ export const NewSessionButton: FC<NewSessionButtonProps> = ({
       className={cn(theme.sessions.create)}
       onClick={createSession}
     >
-      {asChild ? children : newSessionText}
+      {children || newSessionText}
     </Comp>
   );
 };
diff --git a/src/SessionsList/SessionListItem.tsx b/src/SessionsList/SessionListItem.tsx
@@ -6,7 +6,6 @@ import { SessionsContext } from '@/SessionsContext';
 import { Slot } from '@radix-ui/react-slot';
 
 interface SessionListItemProps {
-  asChild?: boolean;
   children?: ReactNode;
 
   /**
@@ -22,13 +21,12 @@ interface SessionListItemProps {
 
 export const SessionListItem: FC<SessionListItemProps> = ({
   children,
-  asChild,
   session,
   deleteIcon = <TrashIcon />
 }) => {
   const { activeSessionId, selectSession, deleteSession, theme } =
     useContext(SessionsContext);
-  const Comp = asChild ? Slot : ListItem;
+  const Comp = children ? Slot : ListItem;
   return (
     <Comp
       dense
@@ -54,7 +52,7 @@ export const SessionListItem: FC<SessionListItemProps> = ({
         </>
       }
     >
-      {asChild ? children : <Ellipsis value={session.title} limit={100} />}
+      {children || <Ellipsis value={session.title} limit={100} />}
     </Comp>
   );
 };
diff --git a/stories/Demos.stories.tsx b/stories/Demos.stories.tsx
@@ -15,9 +15,8 @@ import {
   SessionMessageProps,
   SessionInput
 } from '../src';
-import { Card, Divider, Input } from 'reablocks';
+import { Card, Divider, IconButton, Input, ListItem } from 'reablocks';
 import { subDays, subMinutes, subHours } from 'date-fns';
-import { groupSessionsByDate } from '@/utils';
 
 export default {
   title: 'Demos',
@@ -97,7 +96,9 @@ export const Console = () => {
             {groups =>
               groups.map(({ heading, sessions }) => (
                 <SessionsGroup heading={heading} key={heading}>
-                  {sessions.map(s => <SessionListItem key={s.id} session={s} />)}
+                  {sessions.map(s => (
+                    <SessionListItem key={s.id} session={s} />
+                  ))}
                 </SessionsGroup>
               ))
             }
@@ -140,15 +141,19 @@ export const CustomComponents = () => {
         borderRadius: 5
       }}
     >
-      <Sessions sessions={fakeSessions}>
+      <Sessions sessions={fakeSessions} onDeleteSession={deleteSession}>
         <SessionsList>
-          <NewSessionButton />
+          <NewSessionButton>
+            <button className="text-blue-500">New Session</button>
+          </NewSessionButton>
           <Divider />
           <SessionGroups>
             {groups =>
               groups.map(({ heading, sessions }) => (
                 <SessionsGroup heading={heading} key={heading}>
-                  {sessions.map(s => <SessionListItem key={s.id} session={s} />)}
+                  {sessions.map(s => (
+                    <SessionListItem key={s.id} session={s} />
+                  ))}
                 </SessionsGroup>
               ))
             }
@@ -230,7 +235,9 @@ export const Embeds = () => {
             {groups =>
               groups.map(({ heading, sessions }) => (
                 <SessionsGroup heading={heading} key={heading}>
-                  {sessions.map(s => <SessionListItem key={s.id} session={s} />)}
+                  {sessions.map(s => (
+                    <SessionListItem key={s.id} session={s} />
+                  ))}
                 </SessionsGroup>
               ))
             }