@react-awesome-query-builder/fluent/modules/widgets/value/FluentUITextArea.jsx

User-friendly query builder for React. Fluent 8 widgets

import React from "react";
import { TextField } from "@fluentui/react";

export default (props) => {
  const {
    value,
    setValue,
    config,
    readonly,
    placeholder,
    maxLength,
    maxRows,
    fullWidth,
    customProps,
  } = props;
  const onChange = (e) => {
    let val = e.target.value;
    if (val === "") val = undefined; // don't allow empty value
    setValue(val);
  };
  const textValue = value || "";
  return (
    <TextField
      readOnly={readonly}
      multiline
      rows={maxRows}
      maxLength={maxLength}
      placeholder={placeholder}
      value={textValue}
      onChange={onChange}
      {...customProps}
    />
  );
};