Repository: h2oai/wave
File: ui/src/textbox.tsx (TypeScript)

Code before:
  name: S
  /** The text displayed above the field. */
  label?: S
  /** A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. */
  placeholder?: S
  /** Text to be displayed inside the text box. */
  value?: S
  /** The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].*/
  mask?: S
  /** Icon displayed in the far right end of the text field. */
  icon?: S
  /** Text to be displayed before the text box contents. */
  prefix?: S
  /** Text to be displayed after the text box contents. */
  suffix?: S
  /** Text to be displayed as an error below the text box. */
  error?: S
  /** True if the text box is a required field. */
  required?: B
  /** True if the text box is disabled. */
  disabled?: B
  /** True if the text box is a read-only field. */
  readonly?: B
  /** True if the text box should allow multi-line text entry. */
  multiline?: B
  /** The height of the multilne text, e.g. '100px'. */
  multiline_height?: S
  /** True if the text box should hide text content. */
  password?: B
  /** True if the form should be submitted when the text value changes. */
  trigger?: B
  /** True if the component should be visible. Defaults to true. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const DEBOUNCE_TIMEOUT = 500
export const
  XTextbox = bond(({ model: m }: { model: Textbox }) => {
    qd.args[m.name] = m.value || ''
    const
      onChange = ({ target }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, v?: string) => {
        v = v || (target as HTMLInputElement).value

        qd.args[m.name] = v ?? (m.value || '')
        if (m.trigger) qd.sync()
      },
      render = () => m.mask
        ? (
          <Fluent.MaskedTextField

Review comment (suggestion):
```suggestion
  /** The height of the text box, e.g. '100px'. Applicable only if `multiline` is true. */
```

Code after:
  name: S
  /** The text displayed above the field. */
  label?: S
  /** A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. */
  placeholder?: S
  /** Text to be displayed inside the text box. */
  value?: S
  /** The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].*/
  mask?: S
  /** Icon displayed in the far right end of the text field. */
  icon?: S
  /** Text to be displayed before the text box contents. */
  prefix?: S
  /** Text to be displayed after the text box contents. */
  suffix?: S
  /** Text to be displayed as an error below the text box. */
  error?: S
  /** True if the text box is a required field. */
  required?: B
  /** True if the text box is disabled. */
  disabled?: B
  /** True if the text box is a read-only field. */
  readonly?: B
  /** True if the text box should allow multi-line text entry. */
  multiline?: B
  /** True if the text box should hide text content. */
  password?: B
  /** True if the form should be submitted when the text value changes. */
  trigger?: B
  /** The height of the text box, e.g. '100px'. Applicable only if `multiline` is true. */
  height?: S
  /** True if the component should be visible. Defaults to true. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

const DEBOUNCE_TIMEOUT = 500
export const
  XTextbox = bond(({ model: m }: { model: Textbox }) => {
    qd.args[m.name] = m.value || ''
    const
      onChange = ({ target }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, v?: string) => {
        v = v || (target as HTMLInputElement).value

        qd.args[m.name] = v ?? (m.value || '')
        if (m.trigger) qd.sync()
      },
      render = () => m.mask
        ? (
          <Fluent.MaskedTextField