@vitrosoftware/common-ui-ts 1.1.24 → 1.1.25

package/dist/index.d.ts

@@ -46,7 +46,7 @@ import { SidebarSection } from './controls/Sidebar/SidebarSection';
 import { TaskTile } from './controls/TaskTile/TaskTile';
 import { Alert } from './controls/Alert/Alert';
 import * as ALERT from './controls/Alert/AlertConstants';
-import { Dialog } from './controls/Dialog/Dialog';
+import { Dialog, DialogProps } from './controls/Dialog/Dialog';
 import { DialogContent } from './controls/Dialog/DialogContent';
 import { DialogFooter } from './controls/Dialog/DialogFooter';
 import { Avatar } from './controls/Avatar/Avatar';
@@ -84,7 +84,7 @@ export { CommandMenu, CommandMenuButton, CommandMenuLookupPicker, CommandMenuDro
 export { Sidebar, SidebarItem, SidebarSection };
 export { TaskTile };
 export { Alert, ALERT };
-export { Dialog, DialogContent, DialogFooter };
+export { Dialog, DialogProps, DialogContent, DialogFooter };
 export { Avatar };
 export { UserProfile };
 export { UserLookupPicker };

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']
   }));
 };
 
@@ -60241,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,
@@ -63210,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) {
@@ -63532,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", {
@@ -63570,52 +63656,27 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var headerStyles = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU"};
-
-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 styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
-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"};
@@ -63626,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);
@@ -63642,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']
   });
 };
 
@@ -63656,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"};