@vitrosoftware/common-ui-ts 1.1.27 → 1.1.29

package/dist/index.css

@@ -34,7 +34,6 @@
     margin-right: 12px;
     margin-bottom: 0;
     padding-bottom: 12px;
-    margin-bottom: 8px;
 }
 
 @media (max-width: 800px) {
@@ -43,6 +42,7 @@
         font-size: 18px;
         line-height: 27px;
         margin: 0;
+        margin-right: 12px;
     }
 
     .pane > .vitro-flex {
@@ -346,6 +346,7 @@
 
 #TreeView .ps {
     padding-right: 12px;
+    padding-top: 8px;
 }
 
 ._tree-view_vitro-tree-view_3oii-CW {
@@ -438,7 +439,7 @@
     height: 32px !important;
     line-height: 32px !important;
     background-position: center !important;
-    background-size: 100%;
+    background-size: 100% !important;
     margin-right: 4px;
 }
 
@@ -1582,8 +1583,8 @@
 }
 
 ._tab-group_vitro-tab_1Qb50HL > .vitro-content {
-    position: relative;
-    height: 100%;
+    position: relative;
+    height: calc(100% - 37px);
 }
 
 ._tab-group_vitro-tab_1Qb50HL > .vitro-content > .container,
@@ -2992,13 +2993,14 @@
     line-height: 21px;
 }
 ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
-    display: inline-block;
+    display: inline-flex;
     width: -moz-fit-content;
     width: fit-content;
     margin: 0 6px 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    align-items: center;
 }
 
 ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
@@ -4040,7 +4042,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._dialog-content_vitro-dialog-content_qQNWu6x .ps {
-    padding-top: 12px;
+    padding-top: 12px !important;
     padding-left: 16px;
 }
 
@@ -4261,8 +4263,9 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._activity-item_vitro-item_3Tprske {
-    margin-bottom: 22px;
+    margin-bottom: 16px;
     min-height: 32px;
+    width: 100%;
 }
 
 ._activity-item_vitro-item_3Tprske._activity-item_vitro-active_2kENgvf {
@@ -4273,24 +4276,33 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     width: 100%;
 }
 
+._activity-item_vitro-title__QItISm {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+}
+
 ._activity-item_vitro-title__QItISm span {
     color: #222d44;
+    font-size: 14px;
+    line-height: 16px;
+    font-family: 'InterMedium';
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 ._activity-item_vitro-due-date_1mBIraY {
-    font-size: 8pt;
-    color: #bdbdbd;
-    float: right;
     white-space: nowrap;
+    color: #4A556C !important;
+    margin-left: 8px;
+    font-family: 'InterRegular' !important;
 }
 
 ._activity-item_vitro-content_3Lt7XRy {
-    margin-top: -1px;
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 4px;
+    overflow: hidden;
 }
 
 ._activity-item_vitro-content_3Lt7XRy p {
@@ -4302,7 +4314,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     color: #bdbdbd;
     font-size: 9pt;
     line-height: 14px;
-    margin-top: 3px;
 }
 
 ._activity-item_vitro-content_3Lt7XRy p span {
@@ -4330,121 +4341,176 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._activity-item_vitro-dropdown-button_1J50ja7 {
-    align-self: flex-start;
+    margin-left: auto;
 }
 
 ._activity-item_vitro-avatar_218ZqAk {
-    margin-right: 4px;
+    margin-right: 8px;
 }
 
-._message-input_vitro-message-input_3MkcjWD {
+._activity-message_vitro-activity-message_3GdyQuC {
     display: flex;
-    align-items: flex-start;
-    border-top: 1px solid #e0e0e0;
-    padding-top: 12px;
+    flex-direction: column;
+    background: #F8F9FA;
+    border-radius: 4px;
+    padding: 4px 8px;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 100%;
 }
 
-._message-input_vitro-message-input_3MkcjWD ._message-input_vitro-control_1PUSjq9 {
-    width: 100%;
-    position: relative;
-    padding: 0;
-    border-radius: 4px;
-    border: 1px solid #C0CAD5;
-    min-height: 40px;
+._activity-message_vitro-item_3Q-7zX3 {
     display: flex;
-    justify-content: space-between;
+    grid-gap: 4px 0;
     align-items: center;
-    padding: 0 8px;
-    margin-left: 8px;
+    white-space: nowrap;
 }
 
-._message-input_vitro-control_1PUSjq9 textarea {
-    border: none;
-    resize: none;
-    line-height: 20px;
-    overflow-y: auto;
-    height: 20px;
-    width: 90%;
+._activity-message_vitro-item_3Q-7zX3 > div {
+    font-family: 'InterMedium';
+    color: #222D44;
+    font-size: 14px;
+    line-height: 145%;
+    width: -moz-fit-content;
+    width: fit-content;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-._message-input_vitro-control_1PUSjq9 span {
-    overflow-y: auto;
-    width: 90%;
-    height: -moz-fit-content;
-    height: fit-content;
-    max-height: 60px;
+._activity-message_vitro-item_3Q-7zX3 .vitro-flex > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-._message-input_vitro-button-send_1vktQrZ {
-    height: 24px;
-    width: 24px;
-    background-color: #fff;
-    border: none;
-    outline: none;
-    background-size: 100%;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23BDBDBD;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st0' d='M18,10L1.5,8.5l0-5.9L18,10c-5.5,2.5-11,5-16.5,7.5v-6L18,10'/%3E%3C/svg%3E");
+._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex {
+    grid-gap: 4px;
 }
 
-._message-input_vitro-button-send_1vktQrZ:hover,
-._message-input_vitro-button-send_1vktQrZ:active {
-    background-color: none;
-    border: none;
-    outline: none;
+._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex > div {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    font-size: 10px;
+    line-height: 20px;
 }
 
-.vitro-input-upload-file {
-    height: 24px;
+._activity-message_vitro-message_25otUOy {
+    font-family: 'InterRegular' !important;
+    white-space: normal;
 }
 
-.vitro-input-upload-file input {
-    display: none;
+._activity-message_vitro-field-name_hdjdQbg {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 145%;
+    margin-right: 8px;
 }
 
-.vitro-input-upload-file label {
-    margin-bottom: 0px;
-}
+._activity-message_vitro-separator_vxgHLaH {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin: 0 4px;
+    white-space: nowrap;
+    /* activity-arrow.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.1602 7.81641C14.8684 7.5247 14.8671 7.05213 15.1572 6.7588C15.4496 6.46318 15.9267 6.46186 16.2207 6.75587L20.7585 11.2936C21.1487 11.6839 21.149 12.3165 20.7592 12.7071L16.2204 17.255C15.9267 17.5494 15.4494 17.5483 15.157 17.2526C14.867 16.9595 14.8683 16.4871 15.1599 16.1956L18.5937 12.7617L3.2857 12.7729C2.87128 12.7732 2.53516 12.4373 2.53516 12.0229C2.53516 11.6089 2.87061 11.2732 3.28461 11.2729L18.6055 11.2617L15.1602 7.81641Z' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
 
-.card-header, textarea.note-codable, .note-statusbar, .note-table-popover.bottom, .note-link-popover.bottom, .note-dropzone {
-    display: none;
+._message-input_vitro-message-input_3MkcjWD {
+    display: flex;
+    position: absolute;
+    width: calc(100% - 32px);
+    max-width: calc(100% - 32px);
+    bottom: 0;
+    align-items: end;
+    background: #fff;
+    bottom: 1px;
 }
 
-.note-editor {
+._message-input_vitro-message-input_3MkcjWD ._message-input_vitro-control_1PUSjq9 {
+    cursor: text;
     width: 100%;
-    border: none !important;
+    position: relative;
+    border-radius: 4px;
+    border: 1px solid #C0CAD5;
+    min-height: 36px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    word-break: break-all;
 }
 
-.note-editable {
-    color: #4F4F4F;
+._message-input_vitro-message-input_3MkcjWD .ps > div:first-child {
+    padding: 0;
+    padding: 6px 16px 6px 8px !important;
 }
 
-.note-editable img {
-    max-width: 200px;
-    display: block;
+._message-input_vitro-message-input_3MkcjWD .ps__rail-y {
+    background: transparent !important;
+    border-top: none !important;
 }
 
-.note-popover.popover {
-    max-width: 440px;
-    max-height: 150px;
-    overflow-y: auto;
-    border: none;
-    background: #fff;
-    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
-    border-radius: 8px;
-    margin-bottom: 8px;
+._message-input_vitro-message_2EJSy-9 {
+    font-size: 14px;
+    line-height: 16px;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: 100%;
+    min-height: 16px;
+    max-height: 82px;
 }
 
-.note-popover.popover div.note-hint-group {
-    padding: 8px 0;
+._message-input_vitro-placeholder_1FBfIqN {
+    color: #8E98A3;
+    font-weight: unset;
+    font-size: 12px;
+    line-height: 16px;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-.note-hint-item {
-    padding: 4px 8px;
-    font-family: "InterRegular";
-    font-size: 10pt;
-    line-height: 11pt;
-    cursor: pointer;
+._message-input_vitro-button-add-file_1qdtHHq {
+    height: 24px;
+    width: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    background-color: #fff;
+    border: none;
+    outline: none;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* paperclip.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.9969 6.24219L7.15809 15.081C6.5723 15.6668 6.5723 16.6166 7.15809 17.2023C7.74388 17.7881 8.69362 17.7881 9.27941 17.2023L18.1182 8.36351C19.2898 7.19193 19.2898 5.29244 18.1182 4.12087C16.9467 2.94929 15.0472 2.94929 13.8756 4.12087L5.03677 12.9597C3.27941 14.7171 3.27941 17.5663 5.03677 19.3237C6.79413 21.081 9.64337 21.081 11.4007 19.3237L20.4969 10.2275' stroke='%238E98A3' stroke-linecap='round'/%3E%3C/svg%3E");
 }
 
-.note-hint-item:hover {
-    background: #F5F6FA;
-}
+._message-input_vitro-button-send_1vktQrZ {
+    height: 36px;
+    width: 36px;
+    min-width: 36px;
+    min-height: 36px;
+    background-color: #fff;
+    border-radius: 50%;
+    border: none;
+    outline: none;
+    background-size: 24px;
+    background-position: center;
+    background-repeat: no-repeat;
+    box-shadow: 0px 0px 4px 0px rgba(19, 43, 74, 0.18);
+    margin-left: 12px;
+    /* send.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon_line/Send'%3E%3Cg id='Group 33514'%3E%3Cpath id='Vector' d='M21.7365 10.9623C22.4909 11.3814 22.4909 12.4664 21.7365 12.8855L9.00978 19.9559C7.64603 20.7135 6.02992 19.4959 6.38207 17.9761L7.5752 12.8268C7.71285 12.2327 7.71285 11.6151 7.5752 11.021L6.38207 5.87172C6.02992 4.35191 7.64603 3.13428 9.00977 3.89192L21.7365 10.9623Z' fill='%23347FDE'/%3E%3Cpath id='Vector 15' d='M8.46875 11.9219L13.4687 11.9219' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+._message-input_vitro-button-send_1vktQrZ:hover,
+._message-input_vitro-button-send_1vktQrZ:active,
+._message-input_vitro-button-add-file_1qdtHHq:hover,
+._message-input_vitro-button-add-file_1qdtHHq:active {
+    background-color: none;
+    border: none;
+    outline: none;
+}

package/dist/index.d.ts

@@ -58,6 +58,7 @@ import { DropdownButton } from './controls/DropdownButton/DropdownButton';
 import { DropdownItem } from './controls/DropdownButton/DropdownItem';
 import { Activity } from './controls/Activity/Activity';
 import { ActivityItem, ActivityItemProps } from './controls/ActivityItem/ActivityItem';
+import { ActivityMessage } from './controls/ActivityItem/ActivityMessage';
 import { Icon } from './controls/Icon/Icon';
 import { EVENT } from './constants/Event';
 import { ScrollBar } from './controls/ScrollBar/ScrollBar';
@@ -93,7 +94,7 @@ export { Checkbox, CheckboxProps };
 export { IssueTile };
 export { DropdownButton, DropdownItem };
 export { Activity };
-export { ActivityItem, ActivityItemProps };
+export { ActivityItem, ActivityItemProps, ActivityMessage };
 export { Icon };
 export { EVENT };
 export { ScrollBar };

package/dist/index.js

@@ -147,6 +147,9 @@ var app$1 = {
 		},
 		issueTile: {
 			textareaLabel: "Описание"
+		},
+		messageInput: {
+			placeholder: "Добавить комментарий..."
 		}
 	}
 };
@@ -20579,6 +20582,12 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.expandRow = function expandRow(row) {
     this.grid.Expand(row);
   };
+  _proto.collapseRow = function collapseRow(row) {
+    this.grid.Collapse(row);
+  };
+  _proto.expandParents = function expandParents(row) {
+    this.grid.ExpandParents(row);
+  };
   _proto.getCell = function getCell(row, col) {
     return this.grid.GetCell(row, col);
   };
@@ -63961,12 +63970,12 @@ var styles$E = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-bu
 var Activity = function Activity(props) {
   return React__default.createElement("div", {
     className: 'vitro-activity'
-  }, React__default.createElement("div", {
+  }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
     className: styles$E['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
     className: styles$E['vitro-dropdown-button']
-  }), React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
+  }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
@@ -63981,65 +63990,121 @@ var ActivityItem = function ActivityItem(props) {
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$F['vitro-avatar']
+    className: styles$F['vitro-avatar'],
+    isBigSize: true
   }), React__default.createElement("div", {
     className: styles$F['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
     className: styles$F['vitro-title']
-  }, React__default.createElement("span", null, props.title || props.userName)), React__default.createElement("div", {
+  }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
+    className: styles$F['vitro-due-date']
+  }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
+    itemList: props.dropdownItemList,
+    onToggle: props.onDropdownToggle,
+    className: styles$F['vitro-dropdown-button']
+  })), React__default.createElement("div", {
     className: styles$F['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
     }
-  }), props.children)), props.isShowDetail && React__default.createElement("span", {
-    className: styles$F['vitro-due-date']
-  }, props.date)), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
-    itemList: props.dropdownItemList,
-    onToggle: props.onDropdownToggle,
-    className: styles$F['vitro-dropdown-button']
-  })));
+  }), props.children)))));
 };
 
-var styles$G = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+var styles$G = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
+var ActivityMessage = function ActivityMessage(props) {
+  return React__default.createElement("div", {
+    className: styles$G['vitro-activity-message']
+  }, props.changedValueList.map(function (item) {
+    return React__default.createElement("div", {
+      className: styles$G['vitro-item']
+    }, item.fieldName && React__default.createElement("span", {
+      className: styles$G['vitro-field-name']
+    }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, item.oldValue), React__default.createElement("span", {
+      className: styles$G['vitro-separator']
+    })), React__default.createElement("div", {
+      className: item.isMessage ? styles$G['vitro-message'] : CTRL.EMPTY
+    }, item.newValue));
+  }));
+};
+
+var LOCALE$6;
+(function (LOCALE) {
+  LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
+})(LOCALE$6 || (LOCALE$6 = {}));
+
+var styles$H = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+
+var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
+  var _useState = React.useState(true),
+    isShowPlaceholder = _useState[0],
+    setIsShowPlaceholder = _useState[1];
   var inputRef = React.useRef(null);
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var onEnter = function onEnter() {
-    if (inputRef.current) {
-      props.onSubmit(inputRef.current.value);
-      inputRef.current.value = CTRL.EMPTY;
-    }
+    props.onSubmit(getValue());
+    resetValue();
+    setIsShowPlaceholder(true);
   };
   var onKeyDown = function onKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === 13 && !e.shiftKey) {
       e.preventDefault();
       onEnter();
     }
   };
   var onChange = function onChange(e) {
     if (props.onChange) {
-      props.onChange(e, inputRef.current.value);
+      var value = getValue();
+      props.onChange(value);
+    }
+  };
+  var onFocus = function onFocus(e) {
+    setIsShowPlaceholder(false);
+  };
+  var onBlur = function onBlur(e) {
+    var value = getValue();
+    if (!value) {
+      resetValue();
+      setIsShowPlaceholder(true);
+    }
+  };
+  var getValue = function getValue() {
+    if (inputRef.current) {
+      return inputRef.current.innerText.replace(NEW_LINE, CTRL.EMPTY);
+    }
+    return CTRL.EMPTY;
+  };
+  var resetValue = function resetValue() {
+    if (inputRef.current) {
+      inputRef.current.innerText = CTRL.EMPTY;
     }
   };
   return React__default.createElement("div", {
-    className: styles$G['vitro-message-input'],
+    className: styles$H['vitro-message-input'],
     onDrop: props.onDrop
-  }, React__default.createElement(Avatar, {
-    userName: props.userName,
-    image: props.userImageUrl
-  }), React__default.createElement("div", {
-    className: styles$G['vitro-control']
-  }, React__default.createElement("textarea", {
+  }, React__default.createElement("div", {
+    className: styles$H['vitro-control']
+  }, !props.isDisabled && React__default.createElement(ScrollBar, {
+    isHideScrollX: true
+  }, React__default.createElement("div", {
+    className: styles$H['vitro-message'],
     ref: inputRef,
-    disabled: props.isDisabled,
-    placeholder: props.placeholder,
     onChange: onChange,
-    onKeyDown: onKeyDown
-  }), props.children, React__default.createElement("button", {
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    contentEditable: true
+  }, isShowPlaceholder && React__default.createElement("span", {
+    className: styles$H['vitro-placeholder']
+  }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
+    onClick: props.onAddFile,
+    className: styles$H['vitro-button-add-file']
+  })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$G['vitro-button-send']
-  })));
+    className: styles$H['vitro-button-send']
+  }));
 };
 
 exports.ACTION_HANDLER = ActionHandlerConstants;
@@ -64047,6 +64112,7 @@ exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
 exports.Activity = Activity;
 exports.ActivityItem = ActivityItem;
+exports.ActivityMessage = ActivityMessage;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;