diff --git a/web/src/components/ui/inputs/Input.stories.tsx b/web/src/components/ui/inputs/Input.stories.tsx index 590f9b9a7..842f6e188 100644 --- a/web/src/components/ui/inputs/Input.stories.tsx +++ b/web/src/components/ui/inputs/Input.stories.tsx @@ -19,6 +19,10 @@ const meta: Meta = { }, placeholder: { control: 'text' + }, + type: { + control: 'select', + options: ['text', 'textarea', 'number', 'email', 'password'] } } }; diff --git a/web/src/components/ui/inputs/Input.tsx b/web/src/components/ui/inputs/Input.tsx index da9617b15..011923993 100644 --- a/web/src/components/ui/inputs/Input.tsx +++ b/web/src/components/ui/inputs/Input.tsx @@ -1,20 +1,21 @@ import React from 'react'; import { cn } from '@/lib/classMerge'; import { cva, type VariantProps } from 'class-variance-authority'; +import { useMemoizedFn } from 'ahooks'; const inputVariants = cva( - 'flex w-full rounded-md border px-2.5 text-base transition-all duration-200 disabled:cursor-not-allowed disabled:bg-disabled disabled:text-gray-light ', + 'flex w-full rounded border px-2.5 text-base transition-all duration-200 disabled:cursor-not-allowed disabled:bg-item-select disabled:text-gray-light ', { variants: { variant: { default: - 'shadow bg-background border placeholder:text-gray-light hover:border-primary focus:border-primary focus-visible:border-primary outline-none', + 'shadow bg-background border placeholder:text-gray-light hover:border-primary focus:border-primary focus-visible:border-primary outline-none disabled:border-border', ghost: 'border-none bg-transparent shadow-none' }, size: { default: 'h-7', tall: 'h-8', - small: 'h-[18px]' + small: 'h-6' } } } @@ -22,15 +23,36 @@ const inputVariants = cva( export interface InputProps extends Omit, 'size'>, - VariantProps {} + VariantProps { + onPressEnter?: (e: React.KeyboardEvent) => void; +} export const Input = React.forwardRef( - ({ className, size = 'default', variant = 'default', type = 'text', ...props }, ref) => { + ( + { + className, + size = 'default', + variant = 'default', + type = 'text', + onPressEnter, + onKeyDown, + ...props + }, + ref + ) => { + const handleKeyDown = useMemoizedFn((e: React.KeyboardEvent) => { + if (e.key === 'Enter' && onPressEnter) { + onPressEnter(e); + } + onKeyDown?.(e); + }); + return ( );