web-toolkit/lib/components/TextArea.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

/*
 * TextArea.js
 */
function useForceUpdate() {
  var _useState = (0, _react.useState)(0),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      _ = _useState2[0],
      setValue = _useState2[1];

  return function () {
    return setValue(function (value) {
      return ++value;
    });
  };
}

function TextArea(_ref, ref) {
  var _inputRef$current;

  var className = _ref.className,
      size = _ref.size,
      placeholder = _ref.placeholder,
      flat = _ref.flat,
      disabledValue = _ref.disabled,
      error = _ref.error,
      warning = _ref.warning,
      progress = _ref.progress,
      children = _ref.children,
      onChange = _ref.onChange,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["className", "size", "placeholder", "flat", "disabled", "error", "warning", "progress", "children", "onChange"]);
  var disabled = disabledValue;
  var forceUpdate = useForceUpdate();
  var inputRef = (0, _react.useRef)();
  var isControlled = typeof rest.value === 'string';
  var value = isControlled ? rest.value : ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || rest.defaultValue || '';
  var inputClassName = (0, _clsx.default)('Input TextArea', size, {
    flat: flat,
    disabled: disabled,
    error: error,
    warning: warning,
    progress: progress !== undefined
  }) + ' ' + (0, _clsx.default)(className);

  var onTextAreaChange = function onTextAreaChange(ev) {
    if (!isControlled) forceUpdate();
    onChange && onChange(ev.target.value, ev);
  };

  var onClickContainer = function onClickContainer(ev) {
    if (ev.target !== inputRef.current && inputRef.current) inputRef.current.focus();
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: inputClassName,
    ref: ref,
    onClick: onClickContainer
  }, /*#__PURE__*/_react.default.createElement("textarea", Object.assign({
    placeholder: placeholder,
    disabled: disabled,
    className: (0, _clsx.default)('Input__area', {
      empty: !value
    }),
    ref: inputRef,
    onChange: onTextAreaChange
  }, rest)));
}

var ExportedTextArea = (0, _react.forwardRef)(TextArea);
ExportedTextArea.propTypes = {
  size: _propTypes.default.oneOf(['mini', 'small', 'medium', 'large', 'huge'])
};
ExportedTextArea.defaultProps = {
  size: 'medium'
};
var _default = ExportedTextArea;
exports.default = _default;
//# sourceMappingURL=TextArea.js.map