@mapbox/mr-ui/control-textarea/control-textarea.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ControlTextarea;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _controlLabel = _interopRequireDefault(require("../control-label"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const propNames = ['id', 'value', 'onChange', 'label', 'noAuto', 'optional', 'aside', 'validationError', 'themeControlTextarea', 'themeControlWrapper', 'themeLabel',
// Passed when used with the Form component
'initialValue', 'validator'];
function ControlTextarea(_ref) {
  let {
    id,
    onChange,
    value = '',
    label,
    optional = false,
    aside,
    validationError,
    noAuto = false,
    themeControlTextarea = 'textarea hmin120',
    themeControlWrapper,
    themeLabel,
    ...props
  } = _ref;
  const extraProps = (0, _omit.default)(props, propNames);
  const textareaProps = {
    id,
    name: id,
    onChange: e => onChange(e.target.value, id),
    value,
    className: themeControlTextarea,
    'aria-required': optional ? false : true,
    'data-testid': `${id}-textarea`
  };
  if (noAuto) {
    textareaProps.autoCapitalize = 'none';
    textareaProps.autoCorrect = 'off';
    textareaProps.spellCheck = false;
  }
  if (validationError) {
    textareaProps['aria-invalid'] = true;
  }
  return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
    themeControlWrapper: themeControlWrapper,
    id: id,
    validationError: validationError
  }, label && /*#__PURE__*/_react.default.createElement(_controlLabel.default, {
    text: label,
    id: id,
    aside: aside,
    optional: optional,
    themeLabel: themeLabel
  }), /*#__PURE__*/_react.default.createElement("textarea", _extends({}, textareaProps, extraProps)));
}
ControlTextarea.propTypes = {
  /** Unique id for this control. Required if you want a `label`. */
  id: _propTypes.default.string,
  /** The control's value. */
  value: _propTypes.default.string,
  /**
   * Invoked when the control's value changes.
   * Passed two arguments: the new value, and the `id` prop.
   */
  onChange: _propTypes.default.func.isRequired,
  /** Label for the control. Label can be string or ReactNode. */
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
  /** If `true`, autocorrect and spelling suggestions will be disabled. */
  noAuto: _propTypes.default.bool,
  /** If `true`, the text `(optional)` is appended to the label element. */
  optional: _propTypes.default.bool,
  /** Additional content inserted alongside the label element. */
  aside: _propTypes.default.node,
  /** A validation error to display beneath the control. */
  validationError: _propTypes.default.node,
  /** Classes to apply to the textarea element. */
  themeControlTextarea: _propTypes.default.string,
  /** Classes to apply to the control wrapper. */
  themeControlWrapper: _propTypes.default.string,
  /** Classes to apply to the label element. */
  themeLabel: _propTypes.default.string
};