text: import React from "react";
  import PropTypes from "prop-types";
  import TextField from "@material-ui/core/TextField";
  
  function TextareaWidget(props) {
    const {
      id,
      options,
      placeholder,
      value,
      required,
      disabled,
      autofocus,
      onChange,
      onBlur,
      label,
      onFocus,
      schema,
    } = props;
    const _onChange = ({ target: { value } }) => {
      return onChange(value === "" ? options.emptyValue : value);
    };
    const readonly = schema ? schema.readOnly : false;
    return (
      <TextField
        id={id}
        className="form-control"
        value={typeof value === "undefined" ? "" : value}
        placeholder={placeholder}
        required={required}
        disabled={disabled || readonly}
        autoFocus={autofocus}
        multiline={true}
        variant="outlined"
        label={label}
        margin="dense"
        fullWidth={true}
        rows={options.rows}
        onBlur={onBlur && (event => onBlur(id, event.target.value))}
        onFocus={onFocus && (event => onFocus(id, event.target.value))}
        onChange={_onChange}
      />
    );
  }
  
  TextareaWidget.defaultProps = {
    autofocus: false,
    options: {},
  };
  
  if (process.env.NODE_ENV !== "production") {
    TextareaWidget.propTypes = {
      schema: PropTypes.object.isRequired,
      id: PropTypes.string.isRequired,
      placeholder: PropTypes.string,
      options: PropTypes.shape({
        rows: PropTypes.number,
      }),
      value: PropTypes.string,
      label: PropTypes.string,
      required: PropTypes.bool,
      disabled: PropTypes.bool,
      readonly: PropTypes.bool,
      autofocus: PropTypes.bool,
      onChange: PropTypes.func,
      onBlur: PropTypes.func,
      onFocus: PropTypes.func,
    };
  }
  
  export default TextareaWidget;
  