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 | 1x 1x 1x | import React, { ChangeEvent, ReactNode } from "react"; import { formatUserLabel } from "../userLabel"; import { getInputClass, WidgetProps } from "./types"; export default function InputWidgetBase( props: WidgetProps & { onChange: (val: string) => void; postprocessValue?: (val: string) => string; inputAddon?: ReactNode; inputType: string; validate?: (val: string) => string | null; } ) { const { type, value, onChange, postprocessValue, inputAddon, inputType, validate, disabled, placeholder, } = props; let help = null; let className = "input-group"; function onChangeHandler(event: ChangeEvent<HTMLInputElement>) { let value = event.target.value; if (postprocessValue) { value = postprocessValue(value); } onChange(value); } const failure = validate ? validate(value || "") : null; const setValidity = (el: HTMLInputElement | null) => { el?.setCustomValidity(failure || ""); }; if (failure !== null) { className += " has-feedback has-error"; const valClassName = "validation-block validation-block-error"; help = <div className={valClassName}>{failure}</div>; } let addon = null; const configuredAddon = type.addon_label_i18n; if (configuredAddon) { addon = formatUserLabel(configuredAddon); } else if (inputAddon) { addon = inputAddon; } return ( <div className="form-group"> <div className={className}> <input ref={setValidity} type={inputType} disabled={disabled} placeholder={placeholder} className={getInputClass(type)} onChange={onChangeHandler} value={value || ""} /> {addon ? <span className="input-group-text">{addon}</span> : null} </div> {help} </div> ); } |