Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x 1x 1x 1x 12x 12x 12x 12x 2x 2x 12x 2x 12x 12x 1x | "use client"
import React, {
ChangeEvent,
FocusEvent,
FormEventHandler,
ForwardedRef,
KeyboardEvent,
useState
} from "react"
import InputText from "./InputText"
import { prepareComponent } from "@bluframe/grapple"
export interface Props {
className?: string
defaultValue?: string
disabled?: boolean
error?: boolean
errorText?: string
infoText?: string
inputId?: string
inputProps?: {
"aria-activedescendant"?: string
"aria-autocomplete"?: "list" | "none" | "inline" | "both"
"aria-controls"?: string
"aria-expanded"?: boolean
"aria-labelledby"?: string
autoComplete?: string
id?: string
// eslint-disable-next-line no-unused-vars
onBlur?: (event: FocusEvent) => void
// eslint-disable-next-line no-unused-vars
onChange?: (event: ChangeEvent) => void
role?: string
}
isFullBorder?: boolean
label: React.ReactNode
loading?: boolean
max?: number
min?: number
// eslint-disable-next-line no-unused-vars
onBlur?: (event: FocusEvent) => void
// eslint-disable-next-line no-unused-vars
onChange?: (event: ChangeEvent) => void
// eslint-disable-next-line no-unused-vars
onKeyDown?: (event: KeyboardEvent) => void
name: string
ref?: ForwardedRef<HTMLInputElement>
required?: boolean
size?: number
step?: string
success?: boolean
successText?: string
type?: string
value?: string
}
export interface ComponentProps extends Props {
hasContent: boolean
labelId?: string
onInput: FormEventHandler<HTMLInputElement>
}
const ZERO = 0
const usePrepareComponent = (props: Props): ComponentProps => {
const labelId = props.inputId && `${props.inputId}-label`
const [hasValue, setHasValue] = useState<boolean | null>(null)
const onBlur = (event: FocusEvent) => {
Iif (props.onBlur) {
props.onBlur(event)
}
Iif (props.inputProps?.onBlur) {
props.inputProps.onBlur(event)
}
}
const onChange = (event: ChangeEvent) => {
Iif (props.onChange) {
props.onChange(event)
}
Iif (props.inputProps?.onChange) {
props.inputProps.onChange(event)
}
}
const onInput: FormEventHandler<HTMLInputElement> = (event) => {
// @ts-ignore
setHasValue(event.target.value.length > ZERO)
}
const hasContent = Boolean(hasValue ?? props.defaultValue ?? props.value)
return {
...props,
hasContent,
labelId,
onBlur,
onChange,
onInput
}
}
export default prepareComponent<Props, ComponentProps>(usePrepareComponent)(
InputText
)
|