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 | 1x 1x 12x 12x 12x 12x 2x 2x 12x 2x 12x 12x | // @flow
import InputText from "./InputText"
import type { InputTextProps } from "@bluframe/blublocks"
import { prepareComponent } from "@bluframe/grapple"
import { useState } from "react"
export type Props = {|
...InputTextProps
|}
export type ComponentProps = {|
...Props,
+hasContent: boolean,
+labelId?: string,
onInput: (event: SyntheticInputEvent<HTMLInputElement>) => void
|}
const ZERO = 0
const usePrepareComponent = (props: Props): ComponentProps => {
const labelId = props.inputId && `${props.inputId}-label`
const [hasValue, setHasValue] = useState(null)
const onBlur = (event: SyntheticEvent<*>) => {
if (props.onBlur) {
props.onBlur(event)
}
if (props.inputProps?.onBlur) {
props.inputProps.onBlur(event)
}
}
const onChange = (event: SyntheticInputEvent<*>) => {
Iif (props.onChange) {
props.onChange(event)
}
Iif (props.inputProps?.onChange) {
props.inputProps.onChange(event)
}
}
const onInput = (event: SyntheticInputEvent<*>) => {
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
): React$AbstractComponent<Props, HTMLInputElement>)
|