granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use CSS modules with Command

Browse source 
We don't really use all of these exports, but we made it so that className gets passed properly to `styles` when we do
This commit is contained in:
Justin Edmund 2023-07-02 02:06:15 -07:00
parent a6026cc592
commit 0801693218
1 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
components/common/Command/index.tsx
View file

@ -20,7 +20,7 @@ interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...props }: CommandDialogProps) => { const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return ( return (
<Dialog {...props}> <Dialog {...props}>
<DialogContent className="DialogContent"> <DialogContent className={styles.dialogContent}>
<Command>{children}</Command> <Command>{children}</Command>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@ -34,7 +34,10 @@ const CommandInput = forwardRef<
<div> <div>
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
className={classNames({ CommandInput: true }, className)} className={classNames(
{ CommandInput: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
</div> </div>
@ -48,7 +51,10 @@ const CommandList = forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CommandPrimitive.List <CommandPrimitive.List
ref={ref} ref={ref}
className={classNames({ CommandList: true }, className)} className={classNames(
{ CommandList: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
)) ))
@ -59,7 +65,7 @@ const CommandEmpty = forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>, React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => ( >((props, ref) => (
<CommandPrimitive.Empty ref={ref} className="CommandEmpty" {...props} /> <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />
)) ))
CommandEmpty.displayName = CommandPrimitive.Empty.displayName CommandEmpty.displayName = CommandPrimitive.Empty.displayName
@ -70,7 +76,10 @@ const CommandGroup = forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CommandPrimitive.Group <CommandPrimitive.Group
ref={ref} ref={ref}
className={classNames({ CommandGroup: true }, className)} className={classNames(
{ CommandGroup: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
)) ))
@ -83,7 +92,10 @@ const CommandSeparator = forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CommandPrimitive.Separator <CommandPrimitive.Separator
ref={ref} ref={ref}
className={classNames({ CommandSeparator: true }, className)} className={classNames(
{ CommandSeparator: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
)) ))
@ -95,7 +107,10 @@ const CommandItem = forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<CommandPrimitive.Item <CommandPrimitive.Item
ref={ref} ref={ref}
className={classNames({ CommandItem: true }, className)} className={classNames(
{ CommandItem: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
)) ))
@ -108,7 +123,10 @@ const CommandShortcut = ({
}: React.HTMLAttributes<HTMLSpanElement>) => { }: React.HTMLAttributes<HTMLSpanElement>) => {
return ( return (
<span <span
className={classNames({ CommandShortcut: true }, className)} className={classNames(
{ CommandShortcut: true },
className?.split(' ').map((c) => styles[c])
)}
{...props} {...props}
/> />
) )