@vitrosoftware/common-ui-ts 1.1.22 → 1.1.25

package/dist/index.js

@@ -261,6 +261,7 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["HISTORY_UPDATE"] = "vitro.history.update";
   EVENT["HISTORY_CHANGED"] = "vitro.history.changed";
   EVENT["DROP"] = "drop";
+  EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
 var styles$1 = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
@@ -20113,41 +20114,6 @@ var jstree = createCommonjsModule(function (module) {
 }));
 });
 
-var TreeViewConfig = /*#__PURE__*/function () {
-  function TreeViewConfig() {}
-  TreeViewConfig.getConfig = function getConfig() {
-    return {
-      core: {
-        check_callback: true,
-        themes: {
-          dots: false
-        },
-        multiple: false,
-        data: function data(obj, cb) {}
-      },
-      plugins: ["search", "unique", "types", "wholerow", "themes", "sort", "state"],
-      types: {
-        folder: {
-          icon: "folder",
-          new_node: "New Folder"
-        },
-        file: {
-          icon: "file",
-          valid_children: [""],
-          new_node: "New File"
-        }
-      },
-      checkbox: {
-        three_state: false
-      },
-      contextmenu: function contextmenu() {
-        return [];
-      }
-    };
-  };
-  return TreeViewConfig;
-}();
-
 var METHOD;
 (function (METHOD) {
   METHOD["GET_PATH"] = "get_path";
@@ -20167,6 +20133,13 @@ var METHOD;
   METHOD["OPEN_NODE"] = "open_node";
   METHOD["EDIT"] = "edit";
   METHOD["GET_PARENT"] = "get_parent";
+  METHOD["GET_CHECKED"] = "get_checked";
+  METHOD["GET_UNDETERMINED"] = "get_undetermined";
+  METHOD["GET_CHECKED_DESCENDANTS"] = "get_checked_descendants";
+  METHOD["GET_TOP_CHECKED"] = "get_top_checked";
+  METHOD["GET_BOTTOM_CHECKED"] = "get_bottom_checked";
+  METHOD["IS_CHECKED"] = "is_checked";
+  METHOD["IS_UNDETERMINED"] = "is_undetermined";
 })(METHOD || (METHOD = {}));
 var EVENT;
 (function (EVENT) {
@@ -20180,14 +20153,84 @@ var NODE_TYPE;
   NODE_TYPE["FOLDER"] = "folder";
   NODE_TYPE["FILE"] = "file";
 })(NODE_TYPE || (NODE_TYPE = {}));
+var PLUGIN;
+(function (PLUGIN) {
+  PLUGIN["STATE"] = "state";
+  PLUGIN["CHECKBOX"] = "checkbox";
+  PLUGIN["SEARCH"] = "search";
+  PLUGIN["UNIQUE"] = "unique";
+  PLUGIN["TYPES"] = "types";
+  PLUGIN["WHOLEROW"] = "wholerow";
+  PLUGIN["THEMES"] = "themes";
+  PLUGIN["SORT"] = "sort";
+})(PLUGIN || (PLUGIN = {}));
+var CASCADE;
+(function (CASCADE) {
+  CASCADE["UP"] = "up";
+  CASCADE["DOWN"] = "down";
+  CASCADE["UNDETERMINED"] = "undetermined";
+})(CASCADE || (CASCADE = {}));
 
 var TreeViewConstants = {
     __proto__: null,
     get METHOD () { return METHOD; },
     get EVENT () { return EVENT; },
-    get NODE_TYPE () { return NODE_TYPE; }
+    get NODE_TYPE () { return NODE_TYPE; },
+    get PLUGIN () { return PLUGIN; },
+    get CASCADE () { return CASCADE; }
 };
 
+var TreeViewConfig = /*#__PURE__*/function () {
+  function TreeViewConfig() {}
+  TreeViewConfig.getConfig = function getConfig(id, checkboxSelect, saveChecked) {
+    return {
+      core: {
+        check_callback: true,
+        themes: {
+          dots: false
+        },
+        multiple: false,
+        data: function data(obj, cb) {}
+      },
+      plugins: function () {
+        var pluginList = [PLUGIN.UNIQUE, PLUGIN.TYPES, PLUGIN.WHOLEROW, PLUGIN.THEMES, PLUGIN.SORT, PLUGIN.STATE];
+        if (checkboxSelect) {
+          pluginList.push(PLUGIN.CHECKBOX);
+        }
+        return pluginList;
+      }(),
+      types: {
+        folder: {
+          icon: NODE_TYPE.FOLDER
+        },
+        file: {
+          icon: NODE_TYPE.FILE,
+          valid_children: [CTRL.EMPTY]
+        }
+      },
+      state: {
+        key: id,
+        filter: function filter(state) {
+          if (!saveChecked) {
+            delete state.checkbox;
+          }
+          return state;
+        }
+      },
+      checkbox: {
+        visible: true,
+        three_state: false,
+        tie_selection: false,
+        cascade: CASCADE.DOWN
+      },
+      contextmenu: function contextmenu() {
+        return [];
+      }
+    };
+  };
+  return TreeViewConfig;
+}();
+
 var JsTreeViewContextImpl = /*#__PURE__*/function () {
   function JsTreeViewContextImpl(jsTree) {
     this.jsTree = jsTree;
@@ -20273,20 +20316,47 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
   _proto.getParent = function getParent(node) {
     return this.jsTree.jstree(METHOD.GET_PARENT, node);
   };
+  _proto.getChecked = function getChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_CHECKED, full);
+  };
+  _proto.getUndetermined = function getUndetermined(full) {
+    return this.jsTree.jstree(METHOD.GET_UNDETERMINED, full);
+  };
+  _proto.getCheckedChildList = function getCheckedChildList(id) {
+    return this.jsTree.jstree(METHOD.GET_CHECKED_DESCENDANTS, id);
+  };
+  _proto.getTopChecked = function getTopChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_TOP_CHECKED, full);
+  };
+  _proto.getBottomChecked = function getBottomChecked(full) {
+    return this.jsTree.jstree(METHOD.GET_BOTTOM_CHECKED, full);
+  };
+  _proto.isChecked = function isChecked(node) {
+    return this.jsTree.jstree(METHOD.IS_CHECKED, node);
+  };
+  _proto.isUndetermined = function isUndetermined(node) {
+    return this.jsTree.jstree(METHOD.IS_UNDETERMINED, node);
+  };
   return JsTreeViewContextImpl;
 }();
 
 var styles$3 = {"vitro-tree-view":"_tree-view_vitro-tree-view_3oii-CW"};
 
+var CSS_CLASS_JSTREE_NODE = 'jstree-node';
 var TreeView = function TreeView(props) {
   var _useState = React.useState(null),
     jsTreeTreeView = _useState[0],
     setJsTreeTreeView = _useState[1];
   var jsTreeRef = React.useRef(null);
-  var config = TreeViewConfig.getConfig();
+  var config = TreeViewConfig.getConfig(props.id, props.isCheckboxSelect, props.isSaveCheckboxState);
   var jsTreeView;
   React.useEffect(function () {
     config.core.data = props.getData;
+    if (props.isCheckboxSelect) {
+      jquery(document).on(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
+        return checkNode(e, jsTreeView);
+      });
+    }
     jquery(jsTreeRef.current).jstree(config);
     var jsTree = jquery(jsTreeRef.current);
     jsTreeView = new JsTreeViewContextImpl(jsTree);
@@ -20294,18 +20364,33 @@ var TreeView = function TreeView(props) {
     if (props.onInit) {
       props.onInit(jsTreeView);
     }
+    return function () {
+      jquery(document).off(exports.EVENT.CONTEXTMENU, CTRL.DOT + CSS_CLASS_JSTREE_NODE, function (e) {
+        return checkNode(e, jsTreeView);
+      });
+    };
   }, [jsTreeRef]);
   React.useEffect(function () {
     return function () {
-      if (jsTreeRef.current) {
+      if (jsTreeTreeView && jsTreeRef.current) {
         jsTreeTreeView.dispose();
       }
     };
   }, []);
+  var checkNode = function checkNode(e, treeView) {
+    e.preventDefault();
+    e.stopPropagation();
+    var nodeId = e.currentTarget.id;
+    var node = treeView.getNode(nodeId);
+    if (!node.state.checked) {
+      node.state.checked = true;
+      treeView.redrawNode(node, false);
+    }
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     ref: jsTreeRef,
     id: props.id,
-    className: styles$3["vitro-tree-view"]
+    className: styles$3['vitro-tree-view']
   }));
 };
 
@@ -21124,9 +21209,15 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     });
   };
   _proto.upload = function upload(e) {
+    var _this = this;
     this.initAuthorization(e, this.token);
     this.fileList = [].concat(this.fileList, e.files);
     this.toggleButtons(true);
+    if (this.settings.async.isAutoUpload && this.settings.getFileImage) {
+      e.files.forEach(function (file) {
+        _this.setFileImage(file);
+      });
+    }
     if (this.settings.upload) {
       this.settings.upload(e);
     }
@@ -21166,7 +21257,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     this.setProgressBar(info.percent);
   };
   _proto.complete = function complete(e) {
-    var _this = this;
+    var _this2 = this;
     this.progressInfo.addClass('vitro-upload-complete');
     this.subtitle.empty();
     this.title.text(this.localeService.create(LOCALE.SUCCESS, {
@@ -21180,14 +21271,20 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     this.setProgressBar(100);
     if (this.settings.isAutoReset) {
       window.setTimeout(function () {
-        _this.clearAllFiles();
-        _this.toggleButtons(false);
+        _this2.clearAllFiles();
+        _this2.toggleButtons(false);
       }, this.settings.resetDurationMs || 5000);
     }
   };
   _proto.select = function select(e) {
+    var _this3 = this;
     this.container.classList.remove('vitro-dropzone-active');
     this.container.classList.add('vitro-upload-active');
+    if (!this.settings.async.isAutoUpload && this.settings.getFileImage) {
+      e.files.forEach(function (file) {
+        _this3.setFileImage(file);
+      });
+    }
   };
   _proto.clear = function clear(e) {
     this.container.classList.remove('vitro-upload-active');
@@ -21211,6 +21308,13 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   _proto.setAthorizationToken = function setAthorizationToken(token) {
     this.token = token;
   };
+  _proto.setFileImage = function setFileImage(file) {
+    if (this.settings.getFileImage) {
+      var image = this.settings.getFileImage(file.name);
+      var fileImage = $$1("<img class='vitro-file-icon'>").attr('src', image);
+      $$1(this.container).find(".k-file[data-uid='" + file.uid + "'] .k-file-group-wrapper").replaceWith(fileImage);
+    }
+  };
   _proto.setProgressBar = function setProgressBar(percent) {
     this.progressBar.style.width = percent + CTRL.PERCENT;
     if (percent == 100) {
@@ -57662,10 +57766,10 @@ DropdownMenu.defaultProps = defaultProps;
 // SSR case multiple copies of React Aria is not supported.
 const $b5e257d569688ac6$var$defaultContext = {
     prefix: String(Math.round(Math.random() * 10000000000)),
-    current: 0,
-    isSSR: false
+    current: 0
 };
 const $b5e257d569688ac6$var$SSRContext = /*#__PURE__*/ (React__default).createContext($b5e257d569688ac6$var$defaultContext);
+const $b5e257d569688ac6$var$IsSSRContext = /*#__PURE__*/ (React__default).createContext(false);
 let $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 let $b5e257d569688ac6$var$componentIds = new WeakMap();
 function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
@@ -57738,8 +57842,7 @@ function $b5e257d569688ac6$export$535bd6ca7f90a273() {
     // In React 18, we can use useSyncExternalStore to detect if we're server rendering or hydrating.
     if (typeof (React__default)["useSyncExternalStore"] === "function") return (React__default)["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    let cur = (React.useContext)($b5e257d569688ac6$var$SSRContext);
-    return cur.isSSR;
+    return (React.useContext)($b5e257d569688ac6$var$IsSSRContext);
 }
 
 const isRoleMenu = el => {
@@ -60223,7 +60326,7 @@ var TabGroupComponent = function TabGroupComponent(props) {
     }
   }, [currentTab, props.itemList]);
   return React__default.createElement("div", {
-    className: styles$c['vitro-tab'],
+    className: styles$c['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
     itemList: props.itemList,
@@ -63192,11 +63295,12 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
   return React__default.createElement(DropdownItem$2, {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
+  }, React__default.createElement("div", {
+    className: styles$u['vitro-icon']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
-    hoverUrl: props.imageHoverUrl,
-    className: styles$u['vitro-icon']
-  }), React__default.createElement("span", null, props.text));
+    hoverUrl: props.imageHoverUrl
+  })), React__default.createElement("span", null, props.text));
 };
 
 var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
@@ -63514,9 +63618,9 @@ var Alert$1 = function Alert(props) {
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
-    ref: ref
+    ref: ref,
+    className: className
   }, React__default.createElement(BootstrapAlert, {
-    className: className,
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
@@ -63552,52 +63656,27 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var headerStyles = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU"};
+var styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
-var DialogHeader = function DialogHeader(props) {
-  return React__default.createElement("div", {
-    className: headerStyles['vitro-dialog-header']
-  }, props.title);
-};
-
-var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
-
-var styles$z = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
-
-var Dialog = function Dialog(props) {
-  var className = dialogStyles['vitro-dialog'];
-  var onClose = function onClose() {
-    if (props.onClose) {
-      props.onClose();
-    }
-  };
-  var onOutsideClick = function onOutsideClick(e) {
-    if (e.target && e.target.className === className) {
-      onClose();
-    }
-  };
+var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: className,
-    onClick: onOutsideClick
-  }, React__default.createElement(DialogComponent, {
-    width: props.width,
-    height: props.height
-  }, props.isDismissible && React__default.createElement("button", {
-    className: styles$z['vitro-dialog-button-close'],
-    onClick: onClose
-  }), React__default.createElement(DialogHeader, {
-    title: props.title
-  }), props.children.length ? props.children.map(function (child) {
-    return React__default.cloneElement(child, _extends({}, props));
-  }) : React__default.cloneElement(props.children, _extends({}, props))));
+    className: styles$z['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, props.children);
 };
 
-var styles$A = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$A = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-title":"_dialog-header_vitro-title_2k8SPhE","vitro-description":"_dialog-header_vitro-description_Hiq51VI","vitro-icon":"_dialog-header_vitro-icon_3GtsVWO"};
 
-var DialogContent = function DialogContent(props) {
+var DialogHeader = function DialogHeader(props) {
   return React__default.createElement("div", {
-    className: styles$A['vitro-dialog-content']
-  }, props.children);
+    className: styles$A['vitro-dialog-header']
+  }, props.imageUrl && React__default.createElement(Icon, {
+    defaultUrl: props.imageUrl,
+    className: styles$A['vitro-icon']
+  }), React__default.createElement("div", null, React__default.createElement("h1", {
+    className: styles$A['vitro-title']
+  }, props.title), props.description && React__default.createElement("h2", {
+    className: styles$A['vitro-description']
+  }, props.description)));
 };
 
 var styles$B = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
@@ -63608,6 +63687,8 @@ var DialogButton = function DialogButton(props) {
   }));
 };
 
+var dialogButtonCloseStyles = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
+
 var DialogCloseButton = function DialogCloseButton(props) {
   React.useEffect(function () {
     window.document.addEventListener(exports.EVENT.KEYDOWN, escFunction, false);
@@ -63624,7 +63705,7 @@ var DialogCloseButton = function DialogCloseButton(props) {
     onClick: props.onClose,
     text: props.text,
     isDisabled: props.isDisabled,
-    className: styles$z['vitro-button-close']
+    className: dialogButtonCloseStyles['vitro-button-close']
   });
 };
 
@@ -63638,18 +63719,77 @@ var LOCALE$5;
 var styles$C = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
+  var _props$buttonList, _props$buttonList2;
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
-  var labelClose = props.labelClose || localeService.create(props.onActionClick ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
-  var labelAction = props.labelAction || localeService.create(LOCALE$5.ACTION_SAVE);
+  var labelClose = props.labelClose || localeService.create((_props$buttonList = props.buttonList) !== null && _props$buttonList !== void 0 && _props$buttonList.length ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose(props.dialog);
+    }
+  };
   return React__default.createElement("div", {
     className: styles$C['vitro-dialog-footer']
-  }, props.children, props.onActionClick && React__default.createElement(DialogButton, {
-    text: labelAction,
-    onClick: props.onActionClick
-  }), props.isDismissible && React__default.createElement(DialogCloseButton, {
+  }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
     text: labelClose,
-    onClose: props.onClose ? props.onClose : function () {}
-  }));
+    isDisabled: !props.isDismissible,
+    onClose: onClose
+  }), (_props$buttonList2 = props.buttonList) !== null && _props$buttonList2 !== void 0 && _props$buttonList2.length ? props.buttonList.map(function (button) {
+    return React__default.createElement(DialogButton, {
+      text: button.text,
+      onClick: function onClick() {
+        return button.onClick(props.dialog);
+      },
+      isDisabled: button.isDisabled,
+      className: button.className
+    });
+  }) : null);
+};
+
+var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
+
+var Dialog = function Dialog(props) {
+  var _props$buttonList;
+  var _useState = React.useState(null),
+    component = _useState[0],
+    setComponent = _useState[1];
+  var className = dialogStyles['vitro-dialog'];
+  var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
+  React.useEffect(function () {
+    if (props.content) {
+      var c = React__default.createElement(props.content.component, props.content.props);
+      setComponent(c);
+    }
+  }, [props.content]);
+  var onClose = function onClose() {
+    if (props.onClose) {
+      props.onClose(props.dialog);
+    }
+  };
+  var onOutsideClick = function onOutsideClick(e) {
+    if (e.target && e.target.className === className) {
+      onClose();
+    }
+  };
+  return React__default.createElement("div", {
+    className: className,
+    onClick: onOutsideClick
+  }, React__default.createElement(DialogComponent, {
+    width: props.width,
+    height: props.height
+  }, props.isDismissible && React__default.createElement("button", {
+    className: dialogButtonCloseStyles['vitro-dialog-button-close'],
+    onClick: onClose
+  }), React__default.createElement(DialogHeader, {
+    title: props.title,
+    description: props.description,
+    imageUrl: props.imageUrl
+  }), component && React__default.createElement(DialogContent, null, component), props.children, showFooter ? React__default.createElement(DialogFooter, {
+    dialog: props.dialog,
+    buttonList: props.buttonList,
+    labelClose: props.labelClose,
+    onClose: props.onClose,
+    isDismissible: props.isDismissible
+  }) : null));
 };
 
 var styles$D = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};