react-elegant-ui/esm/components/Textarea/__examples__/common.example.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { useState } from 'react';
import { Textarea } from '../Textarea.bundle/desktop';
var placeholder = 'Input something';
var hint = 'Some hint text';
export var TextareaBase = function (_a) {
  var initValue = _a.value,
    props = __rest(_a, ["value"]);
  var _b = __read(useState(initValue), 2),
    value = _b[0],
    setValue = _b[1];
  return /*#__PURE__*/React.createElement(Textarea, __assign({}, props, {
    value: value,
    onInputText: setValue,
    onClearClick: function () {
      setValue('');
    }
  }));
};
export var Base = function () {
  return /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder
  });
};
export var Disabled = function () {
  return /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    disabled: true
  });
};
export var WithAutoResize = function () {
  return /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    autoResize: true,
    value: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem libero voluptatem suscipit rem dolorum magnam, officia eum aperiam obcaecati? Quod porro, quia exercitationem iusto, accusamus esse illum sint voluptatem quas quibusdam repudiandae beatae fugiat labore at reprehenderit"
  });
};
export var WithHint = function () {
  return /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    hint: hint
  });
};
export var WithClearButton = function () {
  return /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    hasClear: true
  });
};
export var WithStateError = function () {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    state: "error"
  })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TextareaBase, {
    placeholder: placeholder,
    hint: hint,
    state: "error"
  })));
};