diff --git a/desktop/src/ui/components/base/TextField.module.scss b/desktop/src/ui/components/base/TextField.module.scss index dab71de7..61e12298 100644 --- a/desktop/src/ui/components/base/TextField.module.scss +++ b/desktop/src/ui/components/base/TextField.module.scss @@ -1,8 +1,13 @@ .textfield { @apply bg-component-bg [&:not(:focus-within)]:hover:bg-component-bg-hover focus-within:bg-component-bg-pressed disabled:bg-component-bg-disabled; @apply border border-gray-05 text-fg-primary fill-fg-primary; - @apply rounded-lg px-2 py-1 max-h-8; + @apply rounded-lg px-2.5 py-1.5 max-h-8; @apply flex flex-row items-center justify-start gap-x-1.5; + @apply text-sm; + + &.invalid { + @apply border-danger; + } & input { &::selection { diff --git a/desktop/src/ui/components/base/TextField.tsx b/desktop/src/ui/components/base/TextField.tsx index 8411f177..2d9b42eb 100644 --- a/desktop/src/ui/components/base/TextField.tsx +++ b/desktop/src/ui/components/base/TextField.tsx @@ -1,23 +1,57 @@ import type { JSX } from 'solid-js'; -import { createUniqueId, splitProps } from 'solid-js'; +import { createEffect, createSignal, createUniqueId, splitProps } from 'solid-js'; import styles from './TextField.module.scss'; type TextFieldProps = { iconLeft?: JSX.Element; iconRight?: JSX.Element; + inputFilter?: (value: string) => boolean; + onValidInput?: (value: string) => any; + onValidSubmit?: (value: string) => any; } & JSX.InputHTMLAttributes; function TextField(props: TextFieldProps) { - const [fieldProps, rest] = splitProps(props, ['iconLeft', 'iconRight']); + const [fieldProps, rest] = splitProps(props, ['iconLeft', 'iconRight', 'inputFilter', 'onValidInput', 'onValidSubmit']); + const [isValid, setIsValid] = createSignal(true); const id = createUniqueId(); + function validate(e: Event & { currentTarget: HTMLInputElement }) { + if (!fieldProps.inputFilter) + return; + + const value = e.currentTarget.value; + const valid = fieldProps.inputFilter(value); + setIsValid(valid); + + if (valid && fieldProps.onValidInput) + fieldProps.onValidInput(value); + } + + function onSubmit(e: Event & { currentTarget: HTMLInputElement }) { + if (isValid() && fieldProps.onValidSubmit) + fieldProps.onValidSubmit(e.currentTarget.value); + } + return ( -