acsi-core 0.1.21 → 0.1.23

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    value: string;
+}
+declare const ContentTextArea: (props: IProps) => React.JSX.Element;
+export default ContentTextArea;

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/components/index.d.ts

@@ -11,3 +11,4 @@ export { default as CoreSearch } from "./CoreSearch";
 export { default as CoreSelectCompact } from "./CoreSelectCompact";
 export { default as CoreInputCompact } from "./CoreInputCompact";
 export { default as CoreTitleInput } from "./CoreTitleInput";
+export { default as ContentTextArea } from "./ContentTextArea";

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; }
 
-._1b_C3 ._15n2K {
+._3TUh3 p {
+  margin: 0; }
+
+._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;
@@ -420,3 +433,28 @@
   font-size: 18px;
   font-weight: 700;
   line-height: 24.55px; }
+
+._1akNq > div {
+  padding: 8px 12px;
+  outline: none;
+  font-size: 14px;
+  color: #212126;
+  min-height: 73px; }
+
+._1akNq p {
+  margin: 0; }
+
+._1akNq ._2Tff6 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #585869;
+  margin-bottom: 8px; }
+  ._1akNq ._2Tff6 ._30bfd {
+    color: #a6a6ad; }
+  ._1akNq ._2Tff6 ._1p5kJ {
+    cursor: pointer;
+    display: flex;
+    align-items: center; }

package/dist/index.d.ts

@@ -13,10 +13,10 @@ import { ToastContainer, toast } from "react-toastify";
 import { Role } from "./containers/Login/configs/constants";
 import CustomPagination from "./components/Paginations/CustomPagination";
 import useGoogleSignOut from "./utils/hooks/useGoogleSignOut";
-import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch, CoreSelectCompact, CoreInputCompact, CoreTitleInput } from "./components";
+import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch, CoreSelectCompact, CoreInputCompact, CoreTitleInput, ContentTextArea } from "./components";
 import { getErrorMessage } from "./utils/getErrorMessage";
 import CustomSelect from "./components/Selects/CustomSelect";
 import CustomAsyncSelect from "./components/Selects/CustomAsyncSelect";
 import CustomCreatable from "./components/Selects/CustomCreatable";
 import CustomSelectOption from "./components/Selects/CustomSelectOption";
-export { setLoading, BASE_URL, OPENSALT_BASE_URL, ACCESS_TOKEN, DATE_TIME_MIN_VALUE, Login, store, historyCore, setAlert, setUser, setMenuCollapse, setIsRefetchSidebar, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch, CoreSelectCompact, CoreInputCompact, CoreTitleInput, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };
+export { setLoading, BASE_URL, OPENSALT_BASE_URL, ACCESS_TOKEN, DATE_TIME_MIN_VALUE, Login, store, historyCore, setAlert, setUser, setMenuCollapse, setIsRefetchSidebar, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch, CoreSelectCompact, CoreInputCompact, CoreTitleInput, ContentTextArea, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };

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'));
 
@@ -38,6 +39,7 @@ var PUSHER_CONFIG = {
   key: process.env.REACT_APP_PUSHER_CONFIG_KEY || ""
 };
 var OPENSALT_BASE_URL = process.env.REACT_APP_OPENSALT || "";
+var REACT_KEY_TINYMCE = "pko716e6i67met1af7d98ygkma5u38citul7ch78y6pz8bvr";
 var ACCESS_TOKEN = "ACCESS_TOKEN";
 var ACADEMY_DOMAIN = "ACADEMY_DOMAIN";
 var DATE_TIME_MIN_VALUE = "0001-01-01T00:00:00";
@@ -1400,7 +1402,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 +1490,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: REACT_KEY_TINYMCE,
     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
     }
   }));
 };
@@ -1877,6 +1858,18 @@ var CoreTitleInput = function CoreTitleInput(props) {
   }));
 };
 
+var styles$d = {"editor":"_1akNq","label":"_2Tff6","optional":"_30bfd","icon":"_1p5kJ"};
+
+var ContentTextArea = function ContentTextArea(props) {
+  var value = props.value;
+  return React__default.createElement("div", {
+    className: "" + styles$d["editor"]
+  }, React__default.createElement(tinymceReact.Editor, {
+    apiKey: REACT_KEY_TINYMCE,
+    value: value
+  }));
+};
+
 var getErrorMessage = function getErrorMessage(error, defaultErrorMessage) {
   var _error$response, _error$response$data, _error$response2, _error$response3, _error$response3$data;
   var errorMessage = error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title;
@@ -2095,6 +2088,7 @@ exports.ACCESS_TOKEN = ACCESS_TOKEN;
 exports.BASE_URL = BASE_URL;
 exports.CommonDialog = CommonDialog;
 exports.ConfirmDialog = ConfirmDialog;
+exports.ContentTextArea = ContentTextArea;
 exports.CoreButton = CoreButton;
 exports.CoreCheckbox = CoreInput$1;
 exports.CoreError = CoreError;