@vitrosoftware/common-ui-ts 1.1.14 → 1.1.15

package/dist/index.js

@@ -58719,13 +58719,13 @@ var ActionHandler = function ActionHandler(props) {
   }, []);
   var data = React.useMemo(function () {
     return {
-      itemList: props.itemList || [props.item]
+      itemList: props.itemList || [props.item],
+      itemCount: props.itemList ? props.itemList.length : [props.item].length
     };
   }, []);
   var progressBarRef = React.useRef(null);
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var action = props.actionText || localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode);
-  var itemCount = data.itemList.length;
   React.useEffect(function () {
     setIsCloseByOutsideClick(currentAction !== actionMap$1.progress);
     if (currentAction === actionMap$1.before) {
@@ -58765,17 +58765,17 @@ var ActionHandler = function ActionHandler(props) {
     if (props.isConfirm) {
       var confText;
       if (props.confirmText && props.confirmText()) {
-        confText = props.confirmText(itemCount);
+        confText = props.confirmText(data.itemCount);
       } else {
-        if (itemCount === 1) {
+        if (data.itemCount === 1) {
           confText = localeService.create(LOCALE$1.CONF_SINGLE, {
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           });
         } else {
           confText = localeService.create(LOCALE$1.CONF_MULTI, {
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           });
         }
       }
@@ -58804,13 +58804,13 @@ var ActionHandler = function ActionHandler(props) {
     setActionResult(success, successResult, failResult);
     if (success) {
       if (props.successText && props.successText()) {
-        setText(props.successText(itemCount));
+        setText(props.successText(data.itemCount));
       }
     } else {
       if (error && error.text) {
         setText(error.text);
       } else if (props.errorText) {
-        setText(props.errorText(error, itemCount));
+        setText(props.errorText(error, data.itemCount));
       }
     }
   };
@@ -58821,28 +58821,28 @@ var ActionHandler = function ActionHandler(props) {
       var key = [LOCALE$1.ACTION_MSG, props.actionCode, LOCALE$1.SUCCESS].join(CTRL.DOT);
       setText(localeService.create(key, {
         actionCode: action,
-        count: itemCount
+        count: successResult.length
       }));
     } else if (successResult.length && failResult.length) {
       setIcon(styles$6['vitro-icon-warning']);
       setState(styles$6['vitro-warning']);
-      var _key = itemCount === 1 ? LOCALE$1.WARNING_SINGLE : LOCALE$1.WARNING_MULTI;
+      var _key = data.itemCount === 1 ? LOCALE$1.WARNING_SINGLE : LOCALE$1.WARNING_MULTI;
       setText(localeService.create(_key, {
         actionCode: action,
-        itemCount: itemCount
+        itemCount: data.itemCount
       }));
     } else {
       setIcon(styles$6['vitro-icon-error']);
       setState(styles$6['vitro-error']);
-      var _key2 = itemCount === 1 ? LOCALE$1.ERROR_SINGLE : LOCALE$1.ERROR_MULTI;
+      var _key2 = data.itemCount === 1 ? LOCALE$1.ERROR_SINGLE : LOCALE$1.ERROR_MULTI;
       setText(localeService.create(_key2, {
         actionCode: action,
-        itemCount: itemCount
+        itemCount: data.itemCount
       }));
     }
   };
   var setProgress = function setProgress(index) {
-    var percent = index * 100 / itemCount;
+    var percent = index * 100 / data.itemCount;
     if (progressBarRef.current) {
       progressBarRef.current.style.width = percent + CTRL.PERCENT;
     }
@@ -58851,9 +58851,9 @@ var ActionHandler = function ActionHandler(props) {
     try {
       init();
       if (props.progressText) {
-        setText(props.progressText(itemCount));
+        setText(props.progressText(data.itemCount));
       } else {
-        if (itemCount === 1) {
+        if (data.itemCount === 1) {
           setText(localeService.create(LOCALE$1.PROGRESS_SINGLE, {
             actionCode: action
           }));
@@ -58861,7 +58861,7 @@ var ActionHandler = function ActionHandler(props) {
           setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
             idx: 1,
             actionCode: action,
-            itemCount: itemCount
+            itemCount: data.itemCount
           }));
         }
       }
@@ -58913,13 +58913,14 @@ var ActionHandler = function ActionHandler(props) {
       }, function () {
         if (cancellationToken.cancel) {
           data.itemList = data.itemList.slice(0, _i + 1);
+          data.itemCount = data.itemList.length;
           _interrupt = true;
           return;
         }
-        if (itemCount > 1) {
+        if (data.itemCount > 1) {
           setText(localeService.create(LOCALE$1.PROGRESS_MULTI, {
             idx: _i + 1,
-            itemCount: itemCount,
+            itemCount: data.itemCount,
             actionCode: action
           }));
         } else {
@@ -59004,7 +59005,7 @@ var ActionHandler = function ActionHandler(props) {
   }))), showItemCount && React__default.createElement("span", {
     className: styles$6['vitro-small']
   }, localeService.create(LOCALE$1.ITEM_COUNT, {
-    itemCount: itemCount
+    itemCount: data.itemCount
   })), showInfo && React__default.createElement(ActionInfo, {
     itemList: data.itemList,
     successResult: successResult,
@@ -59969,6 +59970,8 @@ var TimePicker = function TimePicker(props) {
 
 var styles$h = {"vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth"};
 
+var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
+
 var SelectedValueList = function SelectedValueList(props) {
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     var title = props.selectedValueTemplate(x);
@@ -59976,7 +59979,9 @@ var SelectedValueList = function SelectedValueList(props) {
       key: x.id,
       className: styles$h['vitro-selected-item'],
       title: title
-    }, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
+    }, props.getHtmlValue ? React__default.createElement("div", {
+      className: htmlValueStyles['vitro-item-html-value']
+    }, props.getHtmlValue(x)) : null, React__default.createElement("span", null, title), props.isMultiSelect && React__default.createElement("div", {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
@@ -59985,7 +59990,23 @@ var SelectedValueList = function SelectedValueList(props) {
   }));
 };
 
-var styles$i = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
+var styles$i = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-item-html-value":"_lookup-picker-value-list_vitro-item-html-value_1yl9tXx","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
+
+var ValueListItem = function ValueListItem(props) {
+  return React__default.createElement("div", {
+    key: props.item.id,
+    className: styles$i['vitro-item'],
+    onClick: function onClick() {
+      return props.onSelect(props.item.id);
+    }
+  }, props.htmlValue ? React__default.createElement("div", {
+    className: htmlValueStyles['vitro-item-html-value']
+  }, props.htmlValue) : null, React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: props.createDisplayValue(props.item)
+    }
+  }));
+};
 
 var FLAG = 'gi';
 var ValueList = function ValueList(props) {
@@ -60008,15 +60029,11 @@ var ValueList = function ValueList(props) {
   }, React__default.createElement(commonUi.ScrollBar, {
     onInit: setScrollableElement
   }, props.isPending && React__default.createElement(commonUi.Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.map(function (x) {
-    return React__default.createElement("div", {
-      key: x.id,
-      className: styles$i['vitro-item'],
-      onClick: function onClick() {
-        return props.onOptionValueSelect(x.id);
-      },
-      dangerouslySetInnerHTML: {
-        __html: createDisplayValue(x)
-      }
+    return React__default.createElement(ValueListItem, {
+      item: x,
+      onSelect: props.onOptionValueSelect,
+      createDisplayValue: createDisplayValue,
+      htmlValue: props.getHtmlValue && props.getHtmlValue(x)
     });
   }) : React__default.createElement("div", {
     className: styles$i['vitro-placeholder-empty']
@@ -60230,6 +60247,12 @@ var LookupPicker = function LookupPicker(props) {
     classList.push(state);
     return classList.join(CTRL.SPACE);
   };
+  var getHtmlValue = function getHtmlValue(item) {
+    if (props.htmlValueTemplate && props.getHtmlValueTemplateProps) {
+      return React__default.createElement(props.htmlValueTemplate, props.getHtmlValueTemplateProps(item));
+    }
+    return null;
+  };
   return React__default.createElement("div", {
     className: getClassName(),
     tabIndex: 1,
@@ -60246,7 +60269,8 @@ var LookupPicker = function LookupPicker(props) {
     list: selectedValueList,
     onOptionValueDelete: onOptionValueDelete,
     selectedValueTemplate: selectedValueTemplate,
-    isMultiSelect: props.isMultiSelect
+    isMultiSelect: props.isMultiSelect,
+    getHtmlValue: getHtmlValue
   }) : !valueListVisible && React__default.createElement(React__default.Fragment, null, props.placeholder), !props.isDisabled && !props.isReadOnly && React__default.createElement("input", {
     ref: inputRef,
     value: inputValue,
@@ -60277,7 +60301,8 @@ var LookupPicker = function LookupPicker(props) {
     filterValueTemplate: filterValueTemplate,
     onOptionValueSelect: onOptionValueSelect,
     isVisible: valueListVisible,
-    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$3.PLACEHOLDER_EMPTY)
+    emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$3.PLACEHOLDER_EMPTY),
+    getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$j['vitro-error-text']
   }, props.errorMessage));
@@ -62584,10 +62609,141 @@ var DialogFooter = function DialogFooter(props) {
   }));
 };
 
+var styles$w = {"vitro-avatar":"_avatar_vitro-avatar_P2tU-_r","vitro-avatar-big":"_avatar_vitro-avatar-big_pEmlX3a"};
+
+var Avatar = function Avatar(props) {
+  var getInitials = function getInitials() {
+    var initials = CTRL.EMPTY;
+    if (props.userName) {
+      props.userName.split(CTRL.SPACE).forEach(function (name, i) {
+        initials += i < 2 ? name[0] ? name[0] : CTRL.EMPTY : CTRL.EMPTY;
+      });
+    }
+    return initials;
+  };
+  var getBackground = function getBackground() {
+    if (props.image) {
+      return props.image;
+    } else if (props.userName) {
+      return getBgColor(props.userName);
+    }
+    return CTRL.EMPTY;
+  };
+  var getHashOfString = function getHashOfString(str) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    hash = Math.abs(hash);
+    return hash;
+  };
+  var normalizeHash = function normalizeHash(hash, min, max) {
+    return Math.floor(hash % (max - min) + min);
+  };
+  var getHue = function getHue(name) {
+    var min = 1000;
+    var max = 360;
+    var hash = getHashOfString(name);
+    var normalizedHash = normalizeHash(hash, min, max);
+    return normalizedHash;
+  };
+  var getBgColor = function getBgColor(name) {
+    return "linear-gradient(0deg, hsla(" + getHue(name) + ", 58%, 55%, 1), hsla(" + (getHue(name) + 50) + ", 100%, 78%, 1))";
+  };
+  var className = styles$w['vitro-avatar'] + (props.isBigSize ? CTRL.SPACE + styles$w['vitro-avatar-big'] : CTRL.EMPTY);
+  return React__default.createElement("div", {
+    className: className,
+    style: {
+      background: getBackground()
+    }
+  }, getInitials());
+};
+
+var styles$x = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};
+
+var UserProfileMenuItem = function UserProfileMenuItem(props) {
+  var onClick = function onClick() {
+    if (props.onClick) {
+      props.onClick();
+    }
+    props.setDropdownState(false);
+  };
+  if (props.link) {
+    return React__default.createElement("div", {
+      className: styles$x['vitro-dropdown-item'],
+      onClick: onClick
+    }, React__default.createElement(Link, {
+      to: props.link
+    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+      defaultUrl: props.imageUrl,
+      hoverUrl: props.hoverImageUrl
+    }), props.text));
+  }
+  if (props.onClick) {
+    return React__default.createElement("div", {
+      className: styles$x['vitro-dropdown-item'],
+      key: props.text,
+      onClick: onClick
+    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+      defaultUrl: props.imageUrl,
+      hoverUrl: props.hoverImageUrl
+    }), props.text);
+  }
+  return null;
+};
+
+var UserProfile = function UserProfile(props) {
+  var _useState = React.useState(false),
+    dropdownOpen = _useState[0],
+    setDropdownOpen = _useState[1];
+  var toggle = function toggle() {
+    return setDropdownOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  var createSurnameWithInitials = function createSurnameWithInitials(name) {
+    var username = CTRL.EMPTY;
+    if (name) {
+      name.split(CTRL.SPACE).forEach(function (name, i) {
+        if (i < 3) {
+          username += i === 0 ? name + CTRL.SPACE : (name[0] ? name[0] : CTRL.EMPTY) + CTRL.DOT;
+        }
+      });
+    }
+    return username;
+  };
+  return React__default.createElement(Dropdown, {
+    isOpen: dropdownOpen,
+    toggle: toggle,
+    className: styles$x['vitro-user-profile']
+  }, React__default.createElement(DropdownToggle, {
+    caret: true
+  }, React__default.createElement("div", null, React__default.createElement("span", {
+    className: styles$x['vitro-text-color-white']
+  }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
+    userName: props.userName,
+    isBigSize: true
+  }))), React__default.createElement(DropdownMenu, {
+    right: true
+  }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
+    return React__default.createElement(UserProfileMenuItem, Object.assign({
+      setDropdownState: setDropdownOpen
+    }, item));
+  })));
+};
+
+var UserLookupPicker = function UserLookupPicker(props) {
+  return React__default.createElement(LookupPicker, Object.assign({}, props, {
+    htmlValueTemplate: Avatar,
+    getHtmlValueTemplateProps: props.getHtmlValueTemplateProps
+  }));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
 exports.Alert = Alert$1;
+exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
 exports.CommandMenu = CommandMenu;
@@ -62619,6 +62775,8 @@ exports.TelerikUploaderContextImpl = TelerikUploaderContextImpl;
 exports.TimePicker = TimePicker;
 exports.TopLevelMenu = TopLevelMenu;
 exports.TreeView = TreeView;
+exports.UserLookupPicker = UserLookupPicker;
+exports.UserProfile = UserProfile;
 exports.View = View;
 exports.commonEn = commonEn;
 exports.commonRu = commonRu;