acsi-core 0.1.21 → 0.1.22

package/dist/components/CoreTextArea/index.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
 interface IProps {
-    name: string;
+    name?: string;
     value: string;
     onChange: (name: string, value: string) => void;
     placeholder?: string;
+    error?: boolean;
     label?: string;
-    cols?: number;
-    rows?: number;
-    width?: number;
-    tooltip?: string;
     isOptional?: boolean;
-    minHeight?: string;
+    tooltip?: string;
+    noBorder?: boolean;
+    smallHeight?: boolean;
+    hideToolbar?: boolean;
 }
 declare const CoreTextArea: (props: IProps) => React.JSX.Element;
 export default CoreTextArea;

package/dist/index.css

@@ -292,34 +292,47 @@
     font-weight: 600;
     margin-bottom: 4px; }
 
-._1b_C3 textarea {
-  width: 100%;
+._3TUh3 > div {
+  padding: 8px 12px;
   outline: none;
-  border-radius: 8px;
   border: 1px solid #e6e6eb;
-  padding: 8px 12px;
+  border-radius: 8px;
+  font-family: Nunito;
   font-size: 14px;
-  font-weight: 400;
-  color: #212126; }
-  ._1b_C3 textarea:hover {
+  color: #212126;
+  min-height: 73px; }
+  ._3TUh3 > div:hover {
     background-color: #e5f9ff; }
-  ._1b_C3 textarea::-moz-placeholder {
-    color: #a6a6ad; }
-  ._1b_C3 textarea::placeholder {
-    color: #a6a6ad; }
+  ._3TUh3 > div::before {
+    left: 12px !important;
+    color: #a6a6ad !important; }
+
+._3TUh3 p {
+  margin: 0; }
 
-._1b_C3 ._15n2K {
+._3TUh3 ._15n2K {
+  display: flex;
+  align-items: center;
+  gap: 4px;
   font-size: 14px;
   font-weight: 400;
-  margin-bottom: 4px;
   color: #585869;
-  display: flex;
-  align-items: center;
-  gap: 2px; }
-  ._1b_C3 ._15n2K ._1fHZB {
+  margin-bottom: 8px; }
+  ._3TUh3 ._15n2K ._1fHZB {
     color: #a6a6ad; }
-  ._1b_C3 ._15n2K ._38AfS {
-    cursor: pointer; }
+  ._3TUh3 ._15n2K ._38AfS {
+    cursor: pointer;
+    display: flex;
+    align-items: center; }
+
+._DaofN > div {
+  background-color: #fff5ce; }
+
+._2JOcF > div {
+  border: none; }
+
+._1EXev > div {
+  min-height: 54px; }
 
 ._wyI1K {
   height: 32px;

package/dist/index.js

@@ -16,6 +16,7 @@ var material = require('@mui/material');
 var reactToastify = require('react-toastify');
 var ReactSelect = require('react-select');
 var ReactSelect__default = _interopDefault(ReactSelect);
+var tinymceReact = require('@tinymce/tinymce-react');
 var fa = require('react-icons/fa');
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
 
@@ -1400,7 +1401,7 @@ var CoreRange = function CoreRange(props) {
   }));
 };
 
-var styles$8 = {"core-text-area":"_1b_C3","label":"_15n2K","optional":"_1fHZB","icon":"_38AfS"};
+var styles$8 = {"editor":"_3TUh3","label":"_15n2K","optional":"_1fHZB","icon":"_38AfS","error":"_DaofN","no-border":"_2JOcF","small-height":"_1EXev"};
 
 var Search = function Search(props) {
   var _props$size = props.size,
@@ -1488,78 +1489,57 @@ var Info = function Info() {
 };
 
 var CoreTextArea = function CoreTextArea(props) {
-  var name = props.name,
-    _onChange = props.onChange,
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
     value = props.value,
-    _props$cols = props.cols,
-    cols = _props$cols === void 0 ? 0 : _props$cols,
-    label = props.label,
-    _props$rows = props.rows,
-    rows = _props$rows === void 0 ? 2 : _props$rows,
+    onChange = props.onChange,
     _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
-    width = props.width,
-    _props$tooltip = props.tooltip,
-    tooltip = _props$tooltip === void 0 ? '' : _props$tooltip,
+    placeholder = _props$placeholder === void 0 ? "Type here..." : _props$placeholder,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    label = props.label,
     _props$isOptional = props.isOptional,
     isOptional = _props$isOptional === void 0 ? false : _props$isOptional,
-    minHeight = props.minHeight;
-  var textareaRef = React.useRef(null);
+    tooltip = props.tooltip,
+    _props$noBorder = props.noBorder,
+    noBorder = _props$noBorder === void 0 ? false : _props$noBorder,
+    _props$smallHeight = props.smallHeight,
+    smallHeight = _props$smallHeight === void 0 ? false : _props$smallHeight,
+    _props$hideToolbar = props.hideToolbar,
+    hideToolbar = _props$hideToolbar === void 0 ? false : _props$hideToolbar;
   var _useState = React.useState(false),
     isOpenTooltip = _useState[0],
     setIsOpenTooltip = _useState[1];
   var toggleTooltip = function toggleTooltip() {
     return setIsOpenTooltip(!isOpenTooltip);
   };
-  React.useEffect(function () {
-    var _textareaRef$current2;
-    if (textareaRef.current) {
-      var _textareaRef$current;
-      textareaRef.current.style.height = "auto";
-      textareaRef.current.style.height = ((_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 ? void 0 : _textareaRef$current.scrollHeight) + "px";
-    }
-    if (((_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 ? void 0 : _textareaRef$current2.scrollHeight) == 0 && value.length > 0) {
-      setTimeout(function () {
-        if (textareaRef.current) {
-          var _textareaRef$current3;
-          textareaRef.current.style.height = ((_textareaRef$current3 = textareaRef.current) === null || _textareaRef$current3 === void 0 ? void 0 : _textareaRef$current3.scrollHeight) + "px";
-        }
-      }, 0);
-    }
-  }, [value]);
   return React__default.createElement("div", {
-    className: styles$8["core-text-area"],
-    style: {
-      width: width != null ? width : "100%"
-    }
-  }, label && React__default.createElement("div", {
-    className: styles$8['label']
+    className: styles$8["editor"] + " " + (error ? styles$8["error"] : "") + " " + (noBorder ? styles$8["no-border"] : "") + " " + (smallHeight ? styles$8["small-height"] : "")
+  }, label && React__default.createElement("span", {
+    className: styles$8["label"]
   }, React__default.createElement("div", {
-    className: styles$8['text']
+    className: styles$8["label-content"]
   }, label), isOptional && React__default.createElement("div", {
-    className: styles$8['optional']
-  }, "(optional)"), React__default.createElement("div", {
-    className: styles$8['icon'],
-    id: name
-  }, React__default.createElement(Info, null)), tooltip ? React__default.createElement(reactstrap.Tooltip, {
+    className: styles$8["optional"]
+  }, "(optional)"), tooltip && React__default.createElement("div", {
+    id: name,
+    className: styles$8["icon"]
+  }, React__default.createElement(Info, null), React__default.createElement(reactstrap.Tooltip, {
     target: name,
     isOpen: isOpenTooltip,
     toggle: toggleTooltip
-  }, tooltip) : null), React__default.createElement("textarea", {
-    ref: textareaRef,
-    placeholder: placeholder,
-    style: {
-      whiteSpace: "pre-wrap",
-      width: "100%",
-      minHeight: minHeight ? minHeight : "123px",
-      resize: "none",
-      overflow: "hidden"
-    },
+  }, tooltip))), React__default.createElement(tinymceReact.Editor, {
+    apiKey: "xu4ccvi83xlprx56l8lwwme1q8vstxn0abjzvyqm1t9mabv7",
     value: value,
-    cols: cols,
-    rows: rows,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
+    onEditorChange: function onEditorChange(value) {
+      return onChange(name, value);
+    },
+    init: {
+      menubar: false,
+      inline: true,
+      plugins: ["lists", "table", "link", "image", "advlist"],
+      toolbar: hideToolbar ? '' : "undo redo | styleselect | bold italic forecolor backcolor | \n                            table link image | \n                            alignleft aligncenter alignright bullist numlist",
+      placeholder: placeholder
     }
   }));
 };