@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/lib/v1/Textarea/Textarea.js

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Textarea;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _TextareaModule = _interopRequireDefault(require("../../Textarea/Textarea.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function Textarea(props) {
+  var size = props.size,
+      placeHolder = props.placeHolder,
+      needBorder = props.needBorder,
+      text = props.text,
+      isDisabled = props.isDisabled,
+      resize = props.resize,
+      maxLength = props.maxLength,
+      animated = props.animated,
+      variant = props.variant,
+      getRef = props.getRef,
+      onFocus = props.onFocus,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      isReadOnly = props.isReadOnly,
+      needAppearance = props.needAppearance,
+      needReadOnlyStyle = props.needReadOnlyStyle,
+      borderColor = props.borderColor,
+      needEffect = props.needEffect,
+      autoFocus = props.autoFocus,
+      htmlId = props.htmlId,
+      a11y = props.a11y,
+      customClass = props.customClass,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onKeyDown = props.onKeyDown;
+  var ariaLabel = a11y.ariaLabel,
+      ariaLabelledby = a11y.ariaLabelledby;
+
+  var handleChange = function handleChange(e) {
+    e && e.preventDefault();
+    onChange && onChange(e.target.value, e);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    e && e.preventDefault();
+    onBlur && onBlur(e.target.value, e);
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    onKeyDown && onKeyDown(e);
+  };
+
+  var resizes = (0, _react.useRef)({
+    horizontal: 'resizeX',
+    vertical: 'resizeY',
+    both: 'resizeboth',
+    none: 'noresize'
+  });
+  var options = (0, _react.useRef)({});
+
+  if (isReadOnly) {
+    options.current.readOnly = 'readOnly';
+  }
+
+  if (isDisabled) {
+    options.current.disabled = 'disabled';
+  }
+
+  if (autoFocus) {
+    options.current.autoFocus = true;
+  }
+
+  var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes.current[resize]] : _TextareaModule["default"][resizes.current.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', " ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
+  return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: "".concat(customClass, " ").concat(isReadOnly && needReadOnlyStyle ? _TextareaModule["default"].readonly : '', " ").concat(classList, " ").concat(_TextareaModule["default"]["borderColor_".concat(borderColor)]),
+    placeholder: placeHolder
+  }, options.current, {
+    "data-id": dataId,
+    "data-test-id": dataId,
+    maxLength: maxLength,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: handleBlur,
+    ref: getRef,
+    value: text,
+    id: htmlId,
+    "data-selector-id": dataSelectorId
+  }));
+}
+
+Textarea.defaultProps = _defaultProps.defaultProps;
+Textarea.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+//   Textarea.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/lib/v1/Textarea/props/defaultProps.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {},
+  dataSelectorId: 'textarea'
+};
+exports.defaultProps = defaultProps;

package/lib/v1/Textarea/props/propTypes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  animated: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  htmlId: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  maxLength: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
+  needReadOnlyStyle: _propTypes["default"].bool,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['default', 'primary']),
+  customClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    ariaLabel: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string
+  })
+};
+exports.propTypes = propTypes;