@vitrosoftware/common-ui-ts 1.1.28 → 1.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -34,7 +34,6 @@
34
34
  margin-right: 12px;
35
35
  margin-bottom: 0;
36
36
  padding-bottom: 12px;
37
- margin-bottom: 8px;
38
37
  }
39
38
 
40
39
  @media (max-width: 800px) {
@@ -43,6 +42,7 @@
43
42
  font-size: 18px;
44
43
  line-height: 27px;
45
44
  margin: 0;
45
+ margin-right: 12px;
46
46
  }
47
47
 
48
48
  .pane > .vitro-flex {
@@ -346,6 +346,7 @@
346
346
 
347
347
  #TreeView .ps {
348
348
  padding-right: 12px;
349
+ padding-top: 8px;
349
350
  }
350
351
 
351
352
  ._tree-view_vitro-tree-view_3oii-CW {
@@ -438,7 +439,7 @@
438
439
  height: 32px !important;
439
440
  line-height: 32px !important;
440
441
  background-position: center !important;
441
- background-size: 100%;
442
+ background-size: 100% !important;
442
443
  margin-right: 4px;
443
444
  }
444
445
 
@@ -1429,15 +1430,18 @@
1429
1430
  color: #4A556C;
1430
1431
  }
1431
1432
  ._view-part_vitro-view-part_3j_gZpl {
1432
- height: 100%;
1433
1433
  margin-left: -16px;
1434
1434
  margin-right: -16px;
1435
1435
  }
1436
1436
 
1437
+ ._view-part_vitro-view-part_3j_gZpl:last-child {
1438
+ flex-grow: 1;
1439
+ max-height: 100%;
1440
+ }
1437
1441
  ._view_vitro-view_1NKb-kU {
1438
1442
  flex: 1 1;
1439
1443
  padding: 16px;
1440
- overflow-y: hidden;
1444
+ overflow: hidden;
1441
1445
  }
1442
1446
 
1443
1447
  ._dropdown-button_vitro-dropdown-button_1myvkhB {
@@ -1582,8 +1586,8 @@
1582
1586
  }
1583
1587
 
1584
1588
  ._tab-group_vitro-tab_1Qb50HL > .vitro-content {
1585
- position: relative;
1586
- height: 100%;
1589
+ position: relative;
1590
+ height: calc(100% - 37px);
1587
1591
  }
1588
1592
 
1589
1593
  ._tab-group_vitro-tab_1Qb50HL > .vitro-content > .container,
@@ -1591,6 +1595,11 @@
1591
1595
  height: 100%;
1592
1596
  }
1593
1597
 
1598
+ ._tab-group_vitro-tab_1Qb50HL > .vitro-content > .container > div {
1599
+ flex-direction: column;
1600
+ display: flex;
1601
+ }
1602
+
1594
1603
  ._tab-group_vitro-tab_1Qb50HL .ps > div:first-child {
1595
1604
  padding: 30px 16px 0 16px;
1596
1605
  display: flex;
@@ -2992,13 +3001,14 @@
2992
3001
  line-height: 21px;
2993
3002
  }
2994
3003
  ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
2995
- display: inline-block;
3004
+ display: inline-flex;
2996
3005
  width: -moz-fit-content;
2997
3006
  width: fit-content;
2998
3007
  margin: 0 6px 0 0;
2999
3008
  white-space: nowrap;
3000
3009
  overflow: hidden;
3001
3010
  text-overflow: ellipsis;
3011
+ align-items: center;
3002
3012
  }
3003
3013
 
3004
3014
  ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
@@ -4040,7 +4050,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4040
4050
  }
4041
4051
 
4042
4052
  ._dialog-content_vitro-dialog-content_qQNWu6x .ps {
4043
- padding-top: 12px;
4053
+ padding-top: 12px !important;
4044
4054
  padding-left: 16px;
4045
4055
  }
4046
4056
 
@@ -4261,8 +4271,9 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4261
4271
  }
4262
4272
 
4263
4273
  ._activity-item_vitro-item_3Tprske {
4264
- margin-bottom: 22px;
4274
+ margin-bottom: 16px;
4265
4275
  min-height: 32px;
4276
+ width: 100%;
4266
4277
  }
4267
4278
 
4268
4279
  ._activity-item_vitro-item_3Tprske._activity-item_vitro-active_2kENgvf {
@@ -4273,24 +4284,33 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4273
4284
  width: 100%;
4274
4285
  }
4275
4286
 
4287
+ ._activity-item_vitro-title__QItISm {
4288
+ white-space: nowrap;
4289
+ overflow: hidden;
4290
+ text-overflow: ellipsis;
4291
+ display: flex;
4292
+ align-items: center;
4293
+ }
4294
+
4276
4295
  ._activity-item_vitro-title__QItISm span {
4277
4296
  color: #222d44;
4297
+ font-size: 14px;
4298
+ line-height: 16px;
4299
+ font-family: 'InterMedium';
4300
+ text-overflow: ellipsis;
4301
+ overflow: hidden;
4278
4302
  }
4279
4303
 
4280
4304
  ._activity-item_vitro-due-date_1mBIraY {
4281
- font-size: 8pt;
4282
- color: #bdbdbd;
4283
- float: right;
4284
4305
  white-space: nowrap;
4306
+ color: #4A556C !important;
4307
+ margin-left: 8px;
4308
+ font-family: 'InterRegular' !important;
4285
4309
  }
4286
4310
 
4287
4311
  ._activity-item_vitro-content_3Lt7XRy {
4288
- margin-top: -1px;
4289
4312
  width: 100%;
4290
- display: flex;
4291
- justify-content: space-between;
4292
- align-items: center;
4293
- margin-right: 4px;
4313
+ overflow: hidden;
4294
4314
  }
4295
4315
 
4296
4316
  ._activity-item_vitro-content_3Lt7XRy p {
@@ -4302,7 +4322,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4302
4322
  color: #bdbdbd;
4303
4323
  font-size: 9pt;
4304
4324
  line-height: 14px;
4305
- margin-top: 3px;
4306
4325
  }
4307
4326
 
4308
4327
  ._activity-item_vitro-content_3Lt7XRy p span {
@@ -4330,121 +4349,176 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4330
4349
  }
4331
4350
 
4332
4351
  ._activity-item_vitro-dropdown-button_1J50ja7 {
4333
- align-self: flex-start;
4352
+ margin-left: auto;
4334
4353
  }
4335
4354
 
4336
4355
  ._activity-item_vitro-avatar_218ZqAk {
4337
- margin-right: 4px;
4356
+ margin-right: 8px;
4338
4357
  }
4339
4358
 
4340
- ._message-input_vitro-message-input_3MkcjWD {
4359
+ ._activity-message_vitro-activity-message_3GdyQuC {
4341
4360
  display: flex;
4342
- align-items: flex-start;
4343
- border-top: 1px solid #e0e0e0;
4344
- padding-top: 12px;
4361
+ flex-direction: column;
4362
+ background: #F8F9FA;
4363
+ border-radius: 4px;
4364
+ padding: 4px 8px;
4365
+ width: -moz-fit-content;
4366
+ width: fit-content;
4367
+ max-width: 100%;
4345
4368
  }
4346
4369
 
4347
- ._message-input_vitro-message-input_3MkcjWD ._message-input_vitro-control_1PUSjq9 {
4348
- width: 100%;
4349
- position: relative;
4350
- padding: 0;
4351
- border-radius: 4px;
4352
- border: 1px solid #C0CAD5;
4353
- min-height: 40px;
4370
+ ._activity-message_vitro-item_3Q-7zX3 {
4354
4371
  display: flex;
4355
- justify-content: space-between;
4372
+ grid-gap: 4px 0;
4356
4373
  align-items: center;
4357
- padding: 0 8px;
4358
- margin-left: 8px;
4374
+ white-space: nowrap;
4359
4375
  }
4360
4376
 
4361
- ._message-input_vitro-control_1PUSjq9 textarea {
4362
- border: none;
4363
- resize: none;
4364
- line-height: 20px;
4365
- overflow-y: auto;
4366
- height: 20px;
4367
- width: 90%;
4377
+ ._activity-message_vitro-item_3Q-7zX3 > div {
4378
+ font-family: 'InterMedium';
4379
+ color: #222D44;
4380
+ font-size: 14px;
4381
+ line-height: 145%;
4382
+ width: -moz-fit-content;
4383
+ width: fit-content;
4384
+ text-overflow: ellipsis;
4385
+ overflow: hidden;
4368
4386
  }
4369
4387
 
4370
- ._message-input_vitro-control_1PUSjq9 span {
4371
- overflow-y: auto;
4372
- width: 90%;
4373
- height: -moz-fit-content;
4374
- height: fit-content;
4375
- max-height: 60px;
4388
+ ._activity-message_vitro-item_3Q-7zX3 .vitro-flex > span {
4389
+ text-overflow: ellipsis;
4390
+ overflow: hidden;
4376
4391
  }
4377
4392
 
4378
- ._message-input_vitro-button-send_1vktQrZ {
4379
- height: 24px;
4380
- width: 24px;
4381
- background-color: #fff;
4382
- border: none;
4383
- outline: none;
4384
- background-size: 100%;
4385
- 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");
4393
+ ._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex {
4394
+ grid-gap: 4px;
4386
4395
  }
4387
4396
 
4388
- ._message-input_vitro-button-send_1vktQrZ:hover,
4389
- ._message-input_vitro-button-send_1vktQrZ:active {
4390
- background-color: none;
4391
- border: none;
4392
- outline: none;
4397
+ ._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex > div {
4398
+ width: 20px;
4399
+ min-width: 20px;
4400
+ height: 20px;
4401
+ font-size: 10px;
4402
+ line-height: 20px;
4393
4403
  }
4394
4404
 
4395
- .vitro-input-upload-file {
4396
- height: 24px;
4405
+ ._activity-message_vitro-message_25otUOy {
4406
+ font-family: 'InterRegular' !important;
4407
+ white-space: normal;
4397
4408
  }
4398
4409
 
4399
- .vitro-input-upload-file input {
4400
- display: none;
4410
+ ._activity-message_vitro-field-name_hdjdQbg {
4411
+ color: #222D44;
4412
+ font-size: 14px;
4413
+ line-height: 145%;
4414
+ margin-right: 8px;
4401
4415
  }
4402
4416
 
4403
- .vitro-input-upload-file label {
4404
- margin-bottom: 0px;
4405
- }
4417
+ ._activity-message_vitro-separator_vxgHLaH {
4418
+ width: 24px;
4419
+ height: 24px;
4420
+ min-width: 24px;
4421
+ background-size: 100%;
4422
+ background-position: center;
4423
+ background-repeat: no-repeat;
4424
+ margin: 0 4px;
4425
+ white-space: nowrap;
4426
+ /* activity-arrow.svg URL-encoder for SVG */
4427
+ 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");
4428
+ }
4406
4429
 
4407
- .card-header, textarea.note-codable, .note-statusbar, .note-table-popover.bottom, .note-link-popover.bottom, .note-dropzone {
4408
- display: none;
4430
+ ._message-input_vitro-message-input_3MkcjWD {
4431
+ display: flex;
4432
+ position: absolute;
4433
+ width: calc(100% - 32px);
4434
+ max-width: calc(100% - 32px);
4435
+ bottom: 0;
4436
+ align-items: end;
4437
+ background: #fff;
4438
+ bottom: 1px;
4409
4439
  }
4410
4440
 
4411
- .note-editor {
4441
+ ._message-input_vitro-message-input_3MkcjWD ._message-input_vitro-control_1PUSjq9 {
4442
+ cursor: text;
4412
4443
  width: 100%;
4413
- border: none !important;
4444
+ position: relative;
4445
+ border-radius: 4px;
4446
+ border: 1px solid #C0CAD5;
4447
+ min-height: 36px;
4448
+ display: flex;
4449
+ justify-content: space-between;
4450
+ align-items: center;
4451
+ word-break: break-all;
4414
4452
  }
4415
4453
 
4416
- .note-editable {
4417
- color: #4F4F4F;
4454
+ ._message-input_vitro-message-input_3MkcjWD .ps > div:first-child {
4455
+ padding: 0;
4456
+ padding: 6px 16px 6px 8px !important;
4418
4457
  }
4419
4458
 
4420
- .note-editable img {
4421
- max-width: 200px;
4422
- display: block;
4459
+ ._message-input_vitro-message-input_3MkcjWD .ps__rail-y {
4460
+ background: transparent !important;
4461
+ border-top: none !important;
4423
4462
  }
4424
4463
 
4425
- .note-popover.popover {
4426
- max-width: 440px;
4427
- max-height: 150px;
4428
- overflow-y: auto;
4429
- border: none;
4430
- background: #fff;
4431
- box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
4432
- border-radius: 8px;
4433
- margin-bottom: 8px;
4464
+ ._message-input_vitro-message_2EJSy-9 {
4465
+ font-size: 14px;
4466
+ line-height: 16px;
4467
+ height: -moz-fit-content;
4468
+ height: fit-content;
4469
+ width: 100%;
4470
+ min-height: 16px;
4471
+ max-height: 82px;
4434
4472
  }
4435
4473
 
4436
- .note-popover.popover div.note-hint-group {
4437
- padding: 8px 0;
4474
+ ._message-input_vitro-placeholder_1FBfIqN {
4475
+ color: #8E98A3;
4476
+ font-weight: unset;
4477
+ font-size: 12px;
4478
+ line-height: 16px;
4479
+ pointer-events: none;
4480
+ text-overflow: ellipsis;
4481
+ overflow: hidden;
4438
4482
  }
4439
4483
 
4440
- .note-hint-item {
4441
- padding: 4px 8px;
4442
- font-family: "InterRegular";
4443
- font-size: 10pt;
4444
- line-height: 11pt;
4445
- cursor: pointer;
4484
+ ._message-input_vitro-button-add-file_1qdtHHq {
4485
+ height: 24px;
4486
+ width: 24px;
4487
+ min-width: 24px;
4488
+ min-height: 24px;
4489
+ background-color: #fff;
4490
+ border: none;
4491
+ outline: none;
4492
+ background-size: 100%;
4493
+ background-position: center;
4494
+ background-repeat: no-repeat;
4495
+ /* paperclip.svg URL-encoder for SVG */
4496
+ 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");
4446
4497
  }
4447
4498
 
4448
- .note-hint-item:hover {
4449
- background: #F5F6FA;
4450
- }
4499
+ ._message-input_vitro-button-send_1vktQrZ {
4500
+ height: 36px;
4501
+ width: 36px;
4502
+ min-width: 36px;
4503
+ min-height: 36px;
4504
+ background-color: #fff;
4505
+ border-radius: 50%;
4506
+ border: none;
4507
+ outline: none;
4508
+ background-size: 24px;
4509
+ background-position: center;
4510
+ background-repeat: no-repeat;
4511
+ box-shadow: 0px 0px 4px 0px rgba(19, 43, 74, 0.18);
4512
+ margin-left: 12px;
4513
+ /* send.svg URL-encoder for SVG */
4514
+ 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");
4515
+ }
4516
+
4517
+ ._message-input_vitro-button-send_1vktQrZ:hover,
4518
+ ._message-input_vitro-button-send_1vktQrZ:active,
4519
+ ._message-input_vitro-button-add-file_1qdtHHq:hover,
4520
+ ._message-input_vitro-button-add-file_1qdtHHq:active {
4521
+ background-color: none;
4522
+ border: none;
4523
+ outline: none;
4524
+ }
package/dist/index.d.ts CHANGED
@@ -58,6 +58,7 @@ import { DropdownButton } from './controls/DropdownButton/DropdownButton';
58
58
  import { DropdownItem } from './controls/DropdownButton/DropdownItem';
59
59
  import { Activity } from './controls/Activity/Activity';
60
60
  import { ActivityItem, ActivityItemProps } from './controls/ActivityItem/ActivityItem';
61
+ import { ActivityMessage } from './controls/ActivityItem/ActivityMessage';
61
62
  import { Icon } from './controls/Icon/Icon';
62
63
  import { EVENT } from './constants/Event';
63
64
  import { ScrollBar } from './controls/ScrollBar/ScrollBar';
@@ -93,7 +94,7 @@ export { Checkbox, CheckboxProps };
93
94
  export { IssueTile };
94
95
  export { DropdownButton, DropdownItem };
95
96
  export { Activity };
96
- export { ActivityItem, ActivityItemProps };
97
+ export { ActivityItem, ActivityItemProps, ActivityMessage };
97
98
  export { Icon };
98
99
  export { EVENT };
99
100
  export { ScrollBar };
package/dist/index.js CHANGED
@@ -147,6 +147,9 @@ var app$1 = {
147
147
  },
148
148
  issueTile: {
149
149
  textareaLabel: "Описание"
150
+ },
151
+ messageInput: {
152
+ placeholder: "Добавить комментарий..."
150
153
  }
151
154
  }
152
155
  };
@@ -20579,6 +20582,12 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
20579
20582
  _proto.expandRow = function expandRow(row) {
20580
20583
  this.grid.Expand(row);
20581
20584
  };
20585
+ _proto.collapseRow = function collapseRow(row) {
20586
+ this.grid.Collapse(row);
20587
+ };
20588
+ _proto.expandParents = function expandParents(row) {
20589
+ this.grid.ExpandParents(row);
20590
+ };
20582
20591
  _proto.getCell = function getCell(row, col) {
20583
20592
  return this.grid.GetCell(row, col);
20584
20593
  };
@@ -63961,12 +63970,12 @@ var styles$E = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-bu
63961
63970
  var Activity = function Activity(props) {
63962
63971
  return React__default.createElement("div", {
63963
63972
  className: 'vitro-activity'
63964
- }, React__default.createElement("div", {
63973
+ }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
63965
63974
  className: styles$E['vitro-title']
63966
63975
  }, props.filterDropdownList && React__default.createElement(DropdownButton, {
63967
63976
  itemList: props.filterDropdownList,
63968
63977
  className: styles$E['vitro-dropdown-button']
63969
- }), React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
63978
+ }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
63970
63979
  className: 'vitro-content'
63971
63980
  }, props.children));
63972
63981
  };
@@ -63981,65 +63990,121 @@ var ActivityItem = function ActivityItem(props) {
63981
63990
  }, React__default.createElement(Avatar, {
63982
63991
  userName: props.userName,
63983
63992
  image: props.userImageUrl,
63984
- className: styles$F['vitro-avatar']
63993
+ className: styles$F['vitro-avatar'],
63994
+ isBigSize: true
63985
63995
  }), React__default.createElement("div", {
63986
63996
  className: styles$F['vitro-content']
63987
63997
  }, React__default.createElement("div", null, React__default.createElement("div", {
63988
63998
  className: styles$F['vitro-title']
63989
- }, React__default.createElement("span", null, props.title || props.userName)), React__default.createElement("div", {
63999
+ }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
64000
+ className: styles$F['vitro-due-date']
64001
+ }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
64002
+ itemList: props.dropdownItemList,
64003
+ onToggle: props.onDropdownToggle,
64004
+ className: styles$F['vitro-dropdown-button']
64005
+ })), React__default.createElement("div", {
63990
64006
  className: styles$F['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
63991
64007
  }, React__default.createElement("p", {
63992
64008
  dangerouslySetInnerHTML: {
63993
64009
  __html: props.message
63994
64010
  }
63995
- }), props.children)), props.isShowDetail && React__default.createElement("span", {
63996
- className: styles$F['vitro-due-date']
63997
- }, props.date)), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
63998
- itemList: props.dropdownItemList,
63999
- onToggle: props.onDropdownToggle,
64000
- className: styles$F['vitro-dropdown-button']
64001
- })));
64011
+ }), props.children)))));
64002
64012
  };
64003
64013
 
64004
- 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"};
64014
+ 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"};
64005
64015
 
64016
+ var ActivityMessage = function ActivityMessage(props) {
64017
+ return React__default.createElement("div", {
64018
+ className: styles$G['vitro-activity-message']
64019
+ }, props.changedValueList.map(function (item) {
64020
+ return React__default.createElement("div", {
64021
+ className: styles$G['vitro-item']
64022
+ }, item.fieldName && React__default.createElement("span", {
64023
+ className: styles$G['vitro-field-name']
64024
+ }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, item.oldValue), React__default.createElement("span", {
64025
+ className: styles$G['vitro-separator']
64026
+ })), React__default.createElement("div", {
64027
+ className: item.isMessage ? styles$G['vitro-message'] : CTRL.EMPTY
64028
+ }, item.newValue));
64029
+ }));
64030
+ };
64031
+
64032
+ var LOCALE$6;
64033
+ (function (LOCALE) {
64034
+ LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
64035
+ })(LOCALE$6 || (LOCALE$6 = {}));
64036
+
64037
+ 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"};
64038
+
64039
+ var NEW_LINE = '\n';
64006
64040
  var MessageInput = function MessageInput(props) {
64041
+ var _useState = React.useState(true),
64042
+ isShowPlaceholder = _useState[0],
64043
+ setIsShowPlaceholder = _useState[1];
64007
64044
  var inputRef = React.useRef(null);
64045
+ var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
64008
64046
  var onEnter = function onEnter() {
64009
- if (inputRef.current) {
64010
- props.onSubmit(inputRef.current.value);
64011
- inputRef.current.value = CTRL.EMPTY;
64012
- }
64047
+ props.onSubmit(getValue());
64048
+ resetValue();
64049
+ setIsShowPlaceholder(true);
64013
64050
  };
64014
64051
  var onKeyDown = function onKeyDown(e) {
64015
- if (e.keyCode === 13) {
64052
+ if (e.keyCode === 13 && !e.shiftKey) {
64016
64053
  e.preventDefault();
64017
64054
  onEnter();
64018
64055
  }
64019
64056
  };
64020
64057
  var onChange = function onChange(e) {
64021
64058
  if (props.onChange) {
64022
- props.onChange(e, inputRef.current.value);
64059
+ var value = getValue();
64060
+ props.onChange(value);
64061
+ }
64062
+ };
64063
+ var onFocus = function onFocus(e) {
64064
+ setIsShowPlaceholder(false);
64065
+ };
64066
+ var onBlur = function onBlur(e) {
64067
+ var value = getValue();
64068
+ if (!value) {
64069
+ resetValue();
64070
+ setIsShowPlaceholder(true);
64071
+ }
64072
+ };
64073
+ var getValue = function getValue() {
64074
+ if (inputRef.current) {
64075
+ return inputRef.current.innerText.replace(NEW_LINE, CTRL.EMPTY);
64076
+ }
64077
+ return CTRL.EMPTY;
64078
+ };
64079
+ var resetValue = function resetValue() {
64080
+ if (inputRef.current) {
64081
+ inputRef.current.innerText = CTRL.EMPTY;
64023
64082
  }
64024
64083
  };
64025
64084
  return React__default.createElement("div", {
64026
- className: styles$G['vitro-message-input'],
64085
+ className: styles$H['vitro-message-input'],
64027
64086
  onDrop: props.onDrop
64028
- }, React__default.createElement(Avatar, {
64029
- userName: props.userName,
64030
- image: props.userImageUrl
64031
- }), React__default.createElement("div", {
64032
- className: styles$G['vitro-control']
64033
- }, React__default.createElement("textarea", {
64087
+ }, React__default.createElement("div", {
64088
+ className: styles$H['vitro-control']
64089
+ }, !props.isDisabled && React__default.createElement(ScrollBar, {
64090
+ isHideScrollX: true
64091
+ }, React__default.createElement("div", {
64092
+ className: styles$H['vitro-message'],
64034
64093
  ref: inputRef,
64035
- disabled: props.isDisabled,
64036
- placeholder: props.placeholder,
64037
64094
  onChange: onChange,
64038
- onKeyDown: onKeyDown
64039
- }), props.children, React__default.createElement("button", {
64095
+ onKeyDown: onKeyDown,
64096
+ onFocus: onFocus,
64097
+ onBlur: onBlur,
64098
+ contentEditable: true
64099
+ }, isShowPlaceholder && React__default.createElement("span", {
64100
+ className: styles$H['vitro-placeholder']
64101
+ }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
64102
+ onClick: props.onAddFile,
64103
+ className: styles$H['vitro-button-add-file']
64104
+ })), React__default.createElement("button", {
64040
64105
  onClick: onEnter,
64041
- className: styles$G['vitro-button-send']
64042
- })));
64106
+ className: styles$H['vitro-button-send']
64107
+ }));
64043
64108
  };
64044
64109
 
64045
64110
  exports.ACTION_HANDLER = ActionHandlerConstants;
@@ -64047,6 +64112,7 @@ exports.ALERT = AlertConstants;
64047
64112
  exports.ActionHandler = ActionHandler;
64048
64113
  exports.Activity = Activity;
64049
64114
  exports.ActivityItem = ActivityItem;
64115
+ exports.ActivityMessage = ActivityMessage;
64050
64116
  exports.Alert = Alert$1;
64051
64117
  exports.Avatar = Avatar;
64052
64118
  exports.Breadcrumbs = Breadcrumbs;