kwikid-components-react/components/kwikui/inputs/textarea/Textarea.js

KwikID's Component Library in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _Messages = _interopRequireDefault(require("../../messages/Messages"));
var _Textarea = require("./Textarea.definition");
var _Textarea2 = require("./Textarea.helper");
var _Textarea3 = require("./Textarea.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikUITextarea = _ref => {
  let {
    customStyles = {
      wrapper: {},
      container: {},
      label: {},
      input: {}
    },
    disabled = false,
    textCase = "default",
    id = "input",
    label = undefined,
    messages = [],
    placeholder = undefined,
    required = true,
    shape = _Textarea.IKwikUITextareaShape.CURVED,
    size = _Textarea.IKwikUITextareaSize.M,
    updateOn = _Textarea.IKwikUITextareaUpdateOn.CHANGE,
    value = "",
    onInput = undefined,
    onInputValidate = undefined,
    isInputCopyDisabled = false,
    isInputPasteDisabled = false,
    onInputCopyDisabled = undefined,
    onInputPasteDisabled = undefined
  } = _ref;
  const [valid, setValid] = _react.default.useState(undefined);
  const [inputFocused, setInputFocused] = _react.default.useState(undefined);
  const handleOnInput = newValue => {
    const convertedValue = (0, _Textarea2.convertTextCase)(textCase, newValue);
    if (onInputValidate) {
      const validation = onInputValidate(id, convertedValue);
      setValid(validation === null || validation === void 0 ? void 0 : validation.isValid);
    } else {
      setValid(true);
    }
    if (onInput && !disabled) {
      onInput(id, convertedValue);
    }
  };
  const handleOnCopy = e => {
    if (isInputCopyDisabled) {
      e.preventDefault();
      if (onInputCopyDisabled) {
        onInputCopyDisabled();
      }
    }
  };
  const handleOnPaste = e => {
    if (isInputPasteDisabled) {
      e.preventDefault();
      if (onInputPasteDisabled) {
        onInputPasteDisabled();
      }
    }
  };
  return /*#__PURE__*/_react.default.createElement(_Textarea3.KwikUIStyleTextareaWrapper, {
    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.wrapper
  }, /*#__PURE__*/_react.default.createElement(_Textarea3.KwikUIStyleTextareaContainer, {
    size: size,
    shape: shape,
    disabled: disabled,
    className: "\n          input input-textarea\n          ".concat(valid == false ? "input-error" : "", "\n          ").concat(valid != false && inputFocused ? "input-focused" : "", "\n        "),
    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container
  }, label && /*#__PURE__*/_react.default.createElement(_Textarea3.KwikUIStyleTextareaLabel, {
    size: size,
    disabled: disabled,
    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.label
  }, label, required && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0*")), /*#__PURE__*/_react.default.createElement("textarea", {
    id: id,
    disabled: disabled,
    placeholder: placeholder,
    value: value,
    onFocus: () => {
      setInputFocused(true);
    },
    onChange: e => {
      if (updateOn === "change") {
        handleOnInput(e.target.value);
      }
    },
    onBlur: e => {
      if (updateOn === "blur") {
        handleOnInput(e.target.value);
      }
      setInputFocused(false);
    },
    onCopy: e => handleOnCopy(e),
    onPaste: e => handleOnPaste(e),
    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.input
  })), (0, _kwikidToolkit.isNotEmptyValue)(messages) && /*#__PURE__*/_react.default.createElement(_Textarea3.KwikUIStyleTextareaMessagesContainer, null, /*#__PURE__*/_react.default.createElement(_Messages.default, {
    messages: messages,
    size: size
  })));
};
var _default = exports.default = KwikUITextarea;