@xaypay/tui 0.0.111 → 0.0.113
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.es.js +184 -82
- package/dist/index.js +184 -82
- package/package.json +1 -1
- package/src/components/input/index.js +24 -0
- package/src/components/input/input.stories.js +0 -2
- package/src/components/modal/index.js +2 -3
- package/src/components/newAutocomplete/index.js +2 -3
- package/src/components/newFile/fileItem.js +1 -0
- package/src/components/newFile/index.js +84 -12
- package/src/components/newFile/newFile.stories.js +2 -1
- package/src/components/select/index.js +2 -3
- package/src/components/table/index.js +30 -20
- package/src/components/table/table.stories.js +1 -10
- package/src/components/table/td.js +61 -50
- package/src/components/table/th.js +12 -8
- package/src/components/textarea/index.js +4 -6
- package/src/components/typography/index.js +1 -1
- package/src/utils/index.js +4 -0
package/dist/index.js
CHANGED
|
@@ -254,6 +254,9 @@ const compereConfigs = () => {
|
|
|
254
254
|
|
|
255
255
|
return _.merge(packageConfig, projectConfig);
|
|
256
256
|
};
|
|
257
|
+
const hasOwnerProperty = (object, property) => {
|
|
258
|
+
return Object.prototype.hasOwnProperty.call(object, property);
|
|
259
|
+
};
|
|
257
260
|
|
|
258
261
|
const SvgCheckboxUnchecked = ({
|
|
259
262
|
title,
|
|
@@ -409,6 +412,11 @@ const TH = ({
|
|
|
409
412
|
handleHeaderItemClick,
|
|
410
413
|
handleCheckArrowActionHeader
|
|
411
414
|
}) => {
|
|
415
|
+
const handleCheckArrowAction = (e, object, property) => {
|
|
416
|
+
if (hasOwnerProperty(object, property)) {
|
|
417
|
+
handleCheckArrowActionHeader(e, object);
|
|
418
|
+
}
|
|
419
|
+
};
|
|
412
420
|
return /*#__PURE__*/React__default["default"].createElement("th", {
|
|
413
421
|
style: {
|
|
414
422
|
width: 'auto',
|
|
@@ -428,9 +436,9 @@ const TH = ({
|
|
|
428
436
|
style: {
|
|
429
437
|
display: 'flex',
|
|
430
438
|
alignItems: 'flex-start',
|
|
431
|
-
justifyContent:
|
|
439
|
+
justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
|
|
432
440
|
}
|
|
433
|
-
}, item
|
|
441
|
+
}, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
|
|
434
442
|
data: item,
|
|
435
443
|
float: "left",
|
|
436
444
|
checked: item.checkBox.checked,
|
|
@@ -442,8 +450,8 @@ const TH = ({
|
|
|
442
450
|
style: {
|
|
443
451
|
margin: '0px'
|
|
444
452
|
},
|
|
445
|
-
onClick:
|
|
446
|
-
}, item.type === 'show' ? item.content :
|
|
453
|
+
onClick: e => handleCheckArrowAction(e, item, 'arrowComponent')
|
|
454
|
+
}, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
|
|
447
455
|
};
|
|
448
456
|
|
|
449
457
|
const TD = ({
|
|
@@ -476,6 +484,34 @@ const TD = ({
|
|
|
476
484
|
};
|
|
477
485
|
handleBodyActionClick(e, actionData);
|
|
478
486
|
};
|
|
487
|
+
const handleCheckActions = (e, object, property, objectIndex) => {
|
|
488
|
+
if (hasOwnerProperty(object, property)) {
|
|
489
|
+
handleBodyAction(e, {
|
|
490
|
+
item: object,
|
|
491
|
+
itemIndex: objectIndex
|
|
492
|
+
});
|
|
493
|
+
}
|
|
494
|
+
};
|
|
495
|
+
const handleMoreOptions = (item, index, optionItem, innerIndex, optionIndex, options) => {
|
|
496
|
+
handleMoreOptionsClick({
|
|
497
|
+
item,
|
|
498
|
+
index,
|
|
499
|
+
options,
|
|
500
|
+
optionItem,
|
|
501
|
+
innerIndex,
|
|
502
|
+
optionIndex
|
|
503
|
+
});
|
|
504
|
+
};
|
|
505
|
+
const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
|
|
506
|
+
handleContentListClick(e, {
|
|
507
|
+
item,
|
|
508
|
+
index,
|
|
509
|
+
innerIndex,
|
|
510
|
+
listContentId,
|
|
511
|
+
listContent,
|
|
512
|
+
listContentIndex
|
|
513
|
+
});
|
|
514
|
+
};
|
|
479
515
|
return /*#__PURE__*/React__default["default"].createElement("td", {
|
|
480
516
|
style: {
|
|
481
517
|
width: 'auto',
|
|
@@ -488,7 +524,7 @@ const TD = ({
|
|
|
488
524
|
textAlign: tBodyTextAlign,
|
|
489
525
|
fontFamily: tBodyFontFamily,
|
|
490
526
|
fontWeight: tBodyFontWeight,
|
|
491
|
-
boxShadow:
|
|
527
|
+
boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
|
|
492
528
|
}
|
|
493
529
|
}, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
|
|
494
530
|
if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
|
|
@@ -497,16 +533,13 @@ const TD = ({
|
|
|
497
533
|
width: '32px',
|
|
498
534
|
height: '32px',
|
|
499
535
|
marginRight: '10px',
|
|
500
|
-
cursor:
|
|
536
|
+
cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto'
|
|
501
537
|
},
|
|
502
538
|
id: newItem.id,
|
|
503
539
|
type: newItem.type,
|
|
504
540
|
className: styles$c['td-span'],
|
|
505
541
|
key: `${newItem.id}_${newIndex}`,
|
|
506
|
-
onClick:
|
|
507
|
-
item: newItem,
|
|
508
|
-
itemIndex: newIndex
|
|
509
|
-
}) : _ => _
|
|
542
|
+
onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
|
|
510
543
|
}, newItem.content);
|
|
511
544
|
} else if (newItem && Array.isArray(newItem)) {
|
|
512
545
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
@@ -522,15 +555,12 @@ const TD = ({
|
|
|
522
555
|
width: '32px',
|
|
523
556
|
height: '32px',
|
|
524
557
|
marginRight: '10px',
|
|
525
|
-
cursor:
|
|
558
|
+
cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto'
|
|
526
559
|
},
|
|
527
560
|
id: iT.id ? iT.id : '',
|
|
528
561
|
type: iT.type ? iT.type : '',
|
|
529
562
|
className: styles$c['td-span'],
|
|
530
|
-
onClick:
|
|
531
|
-
item: iT,
|
|
532
|
-
itemIndex: iN
|
|
533
|
-
}) : _ => _,
|
|
563
|
+
onClick: e => handleCheckActions(e, iT, 'type', iN),
|
|
534
564
|
key: `${iT.id || iT.content}_${iN}`
|
|
535
565
|
}, iT.content);
|
|
536
566
|
}));
|
|
@@ -543,9 +573,9 @@ const TD = ({
|
|
|
543
573
|
style: {
|
|
544
574
|
display: 'flex',
|
|
545
575
|
alignItems: 'flex-start',
|
|
546
|
-
justifyContent:
|
|
576
|
+
justifyContent: hasOwnerProperty(item, 'contentList') || hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
|
|
547
577
|
}
|
|
548
|
-
},
|
|
578
|
+
}, hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
549
579
|
id: item.id,
|
|
550
580
|
style: {
|
|
551
581
|
width: '21px',
|
|
@@ -554,7 +584,7 @@ const TD = ({
|
|
|
554
584
|
},
|
|
555
585
|
onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex),
|
|
556
586
|
className: styles$c['td-span']
|
|
557
|
-
}, item.status === 'close' ? item.closeArrow : item.openArrow),
|
|
587
|
+
}, item.status === 'close' ? item.closeArrow : item.openArrow), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
|
|
558
588
|
data: item,
|
|
559
589
|
index: index,
|
|
560
590
|
innerIndex: innerIndex,
|
|
@@ -570,10 +600,10 @@ const TD = ({
|
|
|
570
600
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
571
601
|
style: {
|
|
572
602
|
margin: '0px',
|
|
573
|
-
cursor:
|
|
603
|
+
cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
|
|
574
604
|
},
|
|
575
|
-
onClick:
|
|
576
|
-
}, item.content ? item.content :
|
|
605
|
+
onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
|
|
606
|
+
}, item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
|
|
577
607
|
style: {
|
|
578
608
|
display: 'block',
|
|
579
609
|
position: 'relative'
|
|
@@ -594,7 +624,7 @@ const TD = ({
|
|
|
594
624
|
backgroundColor: '#FFFFFF',
|
|
595
625
|
boxShadow: '0px 0px 20px 0px #3C393E4D'
|
|
596
626
|
}
|
|
597
|
-
},
|
|
627
|
+
}, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
|
|
598
628
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
599
629
|
key: `${optionItem.content}_${optionIndex}`,
|
|
600
630
|
className: styles$c['dots-option-item'],
|
|
@@ -603,14 +633,7 @@ const TD = ({
|
|
|
603
633
|
fontSize: '14px',
|
|
604
634
|
fontFamily: 'Noto Sans Armenian'
|
|
605
635
|
},
|
|
606
|
-
onClick: () =>
|
|
607
|
-
item,
|
|
608
|
-
index,
|
|
609
|
-
optionItem,
|
|
610
|
-
innerIndex,
|
|
611
|
-
optionIndex,
|
|
612
|
-
options: item.options
|
|
613
|
-
})
|
|
636
|
+
onClick: () => handleMoreOptions(item, index, optionItem, innerIndex, optionIndex, item.options)
|
|
614
637
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
615
638
|
style: {
|
|
616
639
|
marginRight: '10px'
|
|
@@ -625,7 +648,7 @@ const TD = ({
|
|
|
625
648
|
},
|
|
626
649
|
title: optionItem.content
|
|
627
650
|
}, optionItem.content));
|
|
628
|
-
}))) : ''),
|
|
651
|
+
}))) : ''), hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
629
652
|
style: {
|
|
630
653
|
overflow: 'auto',
|
|
631
654
|
marginTop: '10px',
|
|
@@ -638,17 +661,11 @@ const TD = ({
|
|
|
638
661
|
key: `${innerItem}_${innerItemIndex}`,
|
|
639
662
|
className: styles$c['list-text'],
|
|
640
663
|
style: {
|
|
641
|
-
color: openListColor
|
|
664
|
+
color: openListColor,
|
|
665
|
+
maxWidth: (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) + 'px'
|
|
642
666
|
},
|
|
643
|
-
onClick: e =>
|
|
644
|
-
|
|
645
|
-
index,
|
|
646
|
-
innerIndex,
|
|
647
|
-
listContentId: innerItem.id,
|
|
648
|
-
listContent: innerItem.content,
|
|
649
|
-
listContentIndex: innerItemIndex
|
|
650
|
-
})
|
|
651
|
-
}, innerItem.content.length >= item.content.length ? innerItem.content.substr(0, item.content.length - 4) + '...' : innerItem.content);
|
|
667
|
+
onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
|
|
668
|
+
}, innerItem.content);
|
|
652
669
|
})))) : '');
|
|
653
670
|
};
|
|
654
671
|
|
|
@@ -737,7 +754,7 @@ const Table = ({
|
|
|
737
754
|
bodyData.map((item, index) => {
|
|
738
755
|
if (index === data.index) {
|
|
739
756
|
item.map((innerItem, innerIndex) => {
|
|
740
|
-
if (
|
|
757
|
+
if (hasOwnerProperty(innerItem, 'arrowComponent')) {
|
|
741
758
|
removeItemIndex = innerIndex;
|
|
742
759
|
}
|
|
743
760
|
});
|
|
@@ -761,7 +778,7 @@ const Table = ({
|
|
|
761
778
|
let removeItemIndex;
|
|
762
779
|
let headerWithoutArrow;
|
|
763
780
|
header.map((item, index) => {
|
|
764
|
-
if (
|
|
781
|
+
if (hasOwnerProperty(item, 'arrowComponent')) {
|
|
765
782
|
removeItemIndex = index;
|
|
766
783
|
}
|
|
767
784
|
});
|
|
@@ -801,7 +818,7 @@ const Table = ({
|
|
|
801
818
|
let checkedItems = [];
|
|
802
819
|
data.map((item, index) => {
|
|
803
820
|
item.map((innerItem, innerIndex) => {
|
|
804
|
-
if (
|
|
821
|
+
if (hasOwnerProperty(innerItem, 'checkBox')) {
|
|
805
822
|
if (!checkedItems[innerIndex]) {
|
|
806
823
|
checkedItems[innerIndex] = [];
|
|
807
824
|
}
|
|
@@ -881,7 +898,7 @@ const Table = ({
|
|
|
881
898
|
checkableItemBool = !item.checkBox.checked;
|
|
882
899
|
item.checkBox.checked = !item.checkBox.checked;
|
|
883
900
|
}
|
|
884
|
-
if (
|
|
901
|
+
if (hasOwnerProperty(item, 'arrowComponent')) {
|
|
885
902
|
removeItemIndex = index;
|
|
886
903
|
}
|
|
887
904
|
return item;
|
|
@@ -931,7 +948,7 @@ const Table = ({
|
|
|
931
948
|
const updatedBody = body.slice().map(item => Object.values(item));
|
|
932
949
|
const newData = updatedBody.map((item, index) => {
|
|
933
950
|
return item.map((innerItem, innerIndex) => {
|
|
934
|
-
if (innerItem.id === data.id && innerItem.content == data.content &&
|
|
951
|
+
if (innerItem.id === data.id && innerItem.content == data.content && hasOwnerProperty(innerItem, 'checkBox')) {
|
|
935
952
|
innerItem.checkBox.checked = !innerItem.checkBox.checked;
|
|
936
953
|
handleHeaderCheckedUpdate({
|
|
937
954
|
row: index,
|
|
@@ -988,7 +1005,7 @@ const Table = ({
|
|
|
988
1005
|
const handleCheckArrowAction = (item, rowPosition) => {
|
|
989
1006
|
const status = item.status;
|
|
990
1007
|
const checkedOpenableRow = body[rowPosition].map(innerItem => {
|
|
991
|
-
if (
|
|
1008
|
+
if (hasOwnerProperty(innerItem, 'status')) {
|
|
992
1009
|
if (status === 'close') {
|
|
993
1010
|
innerItem.status = 'open';
|
|
994
1011
|
} else {
|
|
@@ -1014,13 +1031,13 @@ const Table = ({
|
|
|
1014
1031
|
}
|
|
1015
1032
|
single = item;
|
|
1016
1033
|
}
|
|
1017
|
-
if (
|
|
1034
|
+
if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
|
|
1018
1035
|
allArrows.push(item);
|
|
1019
1036
|
}
|
|
1020
1037
|
return item;
|
|
1021
1038
|
});
|
|
1022
1039
|
const checkedOpenableRowArrow = checkedOpenableRow.map(item => {
|
|
1023
|
-
if (
|
|
1040
|
+
if (hasOwnerProperty(item, 'arrowComponent')) {
|
|
1024
1041
|
if (single && single.status === 'close') {
|
|
1025
1042
|
item.status = 'close';
|
|
1026
1043
|
} else if (single && single.status === 'open') {
|
|
@@ -1050,7 +1067,7 @@ const Table = ({
|
|
|
1050
1067
|
});
|
|
1051
1068
|
const checkedOpenableAllRowsBody = body.map(innerItem => {
|
|
1052
1069
|
return innerItem.map(iElem => {
|
|
1053
|
-
if (
|
|
1070
|
+
if (hasOwnerProperty(iElem, 'status')) {
|
|
1054
1071
|
if (item.status === 'open') {
|
|
1055
1072
|
iElem.status = 'open';
|
|
1056
1073
|
} else {
|
|
@@ -1067,7 +1084,7 @@ const Table = ({
|
|
|
1067
1084
|
e.stopPropagation();
|
|
1068
1085
|
const checkBodyMore = body.map((elemItem, elemIndex) => {
|
|
1069
1086
|
return elemItem.map((elemInnerItem, elemInnerIndex) => {
|
|
1070
|
-
if (elemIndex === index &&
|
|
1087
|
+
if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
|
|
1071
1088
|
if (elemInnerIndex === innerIndex) {
|
|
1072
1089
|
if (item.dotsStatus === 'deActive') {
|
|
1073
1090
|
elemInnerItem.dotsStatus = 'active';
|
|
@@ -1075,7 +1092,7 @@ const Table = ({
|
|
|
1075
1092
|
elemInnerItem.dotsStatus = 'deActive';
|
|
1076
1093
|
}
|
|
1077
1094
|
}
|
|
1078
|
-
} else if (elemIndex !== index &&
|
|
1095
|
+
} else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
|
|
1079
1096
|
if (elemInnerIndex === innerIndex) {
|
|
1080
1097
|
elemInnerItem.dotsStatus = 'deActive';
|
|
1081
1098
|
}
|
|
@@ -1090,7 +1107,7 @@ const Table = ({
|
|
|
1090
1107
|
if (disableArr && disableArr.length > 0) {
|
|
1091
1108
|
headerWithDisabled = arr.map((item, index) => {
|
|
1092
1109
|
if (disableArr[index]) {
|
|
1093
|
-
if (
|
|
1110
|
+
if (hasOwnerProperty(item, 'checkBox')) {
|
|
1094
1111
|
item.checkBox.disabled = true;
|
|
1095
1112
|
}
|
|
1096
1113
|
}
|
|
@@ -1134,6 +1151,17 @@ const Table = ({
|
|
|
1134
1151
|
};
|
|
1135
1152
|
getData(moreData);
|
|
1136
1153
|
};
|
|
1154
|
+
const handleTableClick = () => {
|
|
1155
|
+
const checkBodyMore = body.map(elemItem => {
|
|
1156
|
+
return elemItem.map(elemInnerItem => {
|
|
1157
|
+
if (hasOwnerProperty(elemInnerItem, 'dots')) {
|
|
1158
|
+
elemInnerItem.dotsStatus = 'deActive';
|
|
1159
|
+
}
|
|
1160
|
+
return elemInnerItem;
|
|
1161
|
+
});
|
|
1162
|
+
});
|
|
1163
|
+
setBody(() => checkBodyMore);
|
|
1164
|
+
};
|
|
1137
1165
|
React.useEffect(() => {
|
|
1138
1166
|
let checkedItems = [];
|
|
1139
1167
|
const disabledArray = [];
|
|
@@ -1143,8 +1171,8 @@ const Table = ({
|
|
|
1143
1171
|
const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
|
|
1144
1172
|
const insert = checkForInsertArrow.map((item, index) => {
|
|
1145
1173
|
item.map((innerItem, innerIndex) => {
|
|
1146
|
-
if (
|
|
1147
|
-
if (
|
|
1174
|
+
if (hasOwnerProperty(innerItem, 'checkBox')) {
|
|
1175
|
+
if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
|
|
1148
1176
|
if (innerItem.checkBox.disabled === true) {
|
|
1149
1177
|
if (!disabledArray[innerIndex]) {
|
|
1150
1178
|
disabledArray[innerIndex] = {
|
|
@@ -1163,8 +1191,8 @@ const Table = ({
|
|
|
1163
1191
|
} else {
|
|
1164
1192
|
const insert = checkBodyForChackedItems.map((item, index) => {
|
|
1165
1193
|
item.map((innerItem, innerIndex) => {
|
|
1166
|
-
if (
|
|
1167
|
-
if (
|
|
1194
|
+
if (hasOwnerProperty(innerItem, 'checkBox')) {
|
|
1195
|
+
if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
|
|
1168
1196
|
if (innerItem.checkBox.disabled === true) {
|
|
1169
1197
|
if (!disabledArray[innerIndex]) {
|
|
1170
1198
|
disabledArray[innerIndex] = {
|
|
@@ -1200,7 +1228,8 @@ const Table = ({
|
|
|
1200
1228
|
style: {
|
|
1201
1229
|
width: '100%',
|
|
1202
1230
|
borderCollapse: 'collapse'
|
|
1203
|
-
}
|
|
1231
|
+
},
|
|
1232
|
+
onClick: handleTableClick
|
|
1204
1233
|
}, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
|
|
1205
1234
|
style: {
|
|
1206
1235
|
color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
|
|
@@ -1580,8 +1609,7 @@ const Modal = ({
|
|
|
1580
1609
|
}
|
|
1581
1610
|
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
1582
1611
|
if (select === index) {
|
|
1583
|
-
|
|
1584
|
-
if (!item.hasOwnProperty('url')) {
|
|
1612
|
+
if (!hasOwnerProperty(item, 'url')) {
|
|
1585
1613
|
alert('Please add url property in data prop on each element');
|
|
1586
1614
|
} else {
|
|
1587
1615
|
return /*#__PURE__*/React__default["default"].createElement("img", {
|
|
@@ -1714,6 +1742,7 @@ const Input = ({
|
|
|
1714
1742
|
maxNumSize,
|
|
1715
1743
|
labelColor,
|
|
1716
1744
|
errorColor,
|
|
1745
|
+
withoutDot,
|
|
1717
1746
|
borderRight,
|
|
1718
1747
|
placeholder,
|
|
1719
1748
|
errorZindex,
|
|
@@ -1859,6 +1888,15 @@ const Input = ({
|
|
|
1859
1888
|
change(newStr);
|
|
1860
1889
|
}
|
|
1861
1890
|
}
|
|
1891
|
+
if (withoutDot && !/^\d+$/.test(currentValue)) {
|
|
1892
|
+
const newStr = currentValue.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
1893
|
+
return b + c.replace(/\./g, '');
|
|
1894
|
+
});
|
|
1895
|
+
setInnerValue(newStr);
|
|
1896
|
+
if (change) {
|
|
1897
|
+
change(newStr);
|
|
1898
|
+
}
|
|
1899
|
+
}
|
|
1862
1900
|
if (currentValue === '') {
|
|
1863
1901
|
setInnerValue('');
|
|
1864
1902
|
if (change) {
|
|
@@ -1991,6 +2029,15 @@ const Input = ({
|
|
|
1991
2029
|
change(newStr);
|
|
1992
2030
|
}
|
|
1993
2031
|
}
|
|
2032
|
+
if (withoutDot && !/^\d+$/.test(value)) {
|
|
2033
|
+
const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
2034
|
+
return b + c.replace(/\./g, '');
|
|
2035
|
+
});
|
|
2036
|
+
setInnerValue(newStr);
|
|
2037
|
+
if (change) {
|
|
2038
|
+
change(newStr);
|
|
2039
|
+
}
|
|
2040
|
+
}
|
|
1994
2041
|
if (value === '') {
|
|
1995
2042
|
setInnerValue('');
|
|
1996
2043
|
if (change) {
|
|
@@ -2130,6 +2177,7 @@ Input.propTypes = {
|
|
|
2130
2177
|
padding: PropTypes__default["default"].string,
|
|
2131
2178
|
fontSize: PropTypes__default["default"].string,
|
|
2132
2179
|
tooltip: PropTypes__default["default"].element,
|
|
2180
|
+
withoutDot: PropTypes__default["default"].bool,
|
|
2133
2181
|
marginTop: PropTypes__default["default"].string,
|
|
2134
2182
|
transform: PropTypes__default["default"].string,
|
|
2135
2183
|
className: PropTypes__default["default"].string,
|
|
@@ -2487,8 +2535,7 @@ const Select = ({
|
|
|
2487
2535
|
};
|
|
2488
2536
|
const isObjectEmpty = obj => {
|
|
2489
2537
|
for (var key in obj) {
|
|
2490
|
-
|
|
2491
|
-
if (obj.hasOwnProperty(key)) {
|
|
2538
|
+
if (hasOwnerProperty(obj, key)) {
|
|
2492
2539
|
return false;
|
|
2493
2540
|
}
|
|
2494
2541
|
}
|
|
@@ -3618,6 +3665,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
|
|
|
3618
3665
|
}, time));
|
|
3619
3666
|
return () => {
|
|
3620
3667
|
setI(_ => _);
|
|
3668
|
+
setT(_ => _);
|
|
3621
3669
|
clearTimeout(t);
|
|
3622
3670
|
clearInterval(i);
|
|
3623
3671
|
};
|
|
@@ -3877,6 +3925,7 @@ const NewFile = ({
|
|
|
3877
3925
|
listItemPadding,
|
|
3878
3926
|
progressFontSize,
|
|
3879
3927
|
borderHoverColor,
|
|
3928
|
+
maxCHoosenLength,
|
|
3880
3929
|
listItemErrorSize,
|
|
3881
3930
|
progressTrackColor,
|
|
3882
3931
|
fileAreaImageWidth,
|
|
@@ -3887,9 +3936,11 @@ const NewFile = ({
|
|
|
3887
3936
|
progressSuccessColor,
|
|
3888
3937
|
progressLoadingColor,
|
|
3889
3938
|
hiddenBackgroundColor,
|
|
3939
|
+
maxCHoosenLengthError,
|
|
3890
3940
|
extentionsRowMarginTop,
|
|
3891
3941
|
listItemBackgroundColor,
|
|
3892
|
-
listItemBackgroundErrorColor
|
|
3942
|
+
listItemBackgroundErrorColor,
|
|
3943
|
+
maxCHoosenLengthErrorHideTime
|
|
3893
3944
|
}) => {
|
|
3894
3945
|
const ref = React.useRef(null);
|
|
3895
3946
|
const inpRef = React.useRef(null);
|
|
@@ -3897,13 +3948,10 @@ const NewFile = ({
|
|
|
3897
3948
|
const [error, setError] = React.useState('');
|
|
3898
3949
|
const [isHover, setIsHover] = React.useState(false);
|
|
3899
3950
|
const [singleFile, setSingleFile] = React.useState(null);
|
|
3951
|
+
const [choosenFileCount, setChoosenFileCount] = React.useState(0);
|
|
3900
3952
|
const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
|
|
3901
3953
|
const configStyles = compereConfigs();
|
|
3902
3954
|
const handleRemoveComponent = () => {
|
|
3903
|
-
// eslint-disable-next-line react/no-find-dom-node
|
|
3904
|
-
const node = ReactDOM__default["default"].findDOMNode(ref.current);
|
|
3905
|
-
const parent = node.parentNode;
|
|
3906
|
-
parent.removeChild(node);
|
|
3907
3955
|
if (!multiple) {
|
|
3908
3956
|
removeFile && removeFile(singleFile);
|
|
3909
3957
|
} else {
|
|
@@ -3915,11 +3963,47 @@ const NewFile = ({
|
|
|
3915
3963
|
setImage(null);
|
|
3916
3964
|
removeFile && removeFile(singleFile);
|
|
3917
3965
|
};
|
|
3918
|
-
const
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3966
|
+
const handleUploadFiles = file => {
|
|
3967
|
+
if (maxCHoosenLength && choosenFileCount > 0) {
|
|
3968
|
+
if (file.length > choosenFileCount || file.length + memoizedItems.length > choosenFileCount) {
|
|
3969
|
+
setError(maxCHoosenLengthError ? maxCHoosenLengthError : `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`);
|
|
3970
|
+
const clearFunc = () => {
|
|
3971
|
+
clearTimeout(time);
|
|
3972
|
+
};
|
|
3973
|
+
const time = setTimeout(() => {
|
|
3974
|
+
setError('');
|
|
3975
|
+
clearFunc();
|
|
3976
|
+
}, maxCHoosenLengthErrorHideTime && typeof maxCHoosenLengthErrorHideTime === 'number' ? Math.round(maxCHoosenLengthErrorHideTime) : 3000);
|
|
3977
|
+
} else {
|
|
3978
|
+
for (let ix = 0; ix < file.length; ix++) {
|
|
3979
|
+
if (file[ix]) {
|
|
3980
|
+
if (file[ix].size <= maxSize * Math.pow(2, 20)) {
|
|
3981
|
+
if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
|
|
3982
|
+
change({
|
|
3983
|
+
id: '',
|
|
3984
|
+
check: '',
|
|
3985
|
+
status: '',
|
|
3986
|
+
file: file[ix],
|
|
3987
|
+
uuid: v4()
|
|
3988
|
+
});
|
|
3989
|
+
} else {
|
|
3990
|
+
change({
|
|
3991
|
+
file: file[ix],
|
|
3992
|
+
uuid: v4(),
|
|
3993
|
+
check: formatError
|
|
3994
|
+
});
|
|
3995
|
+
}
|
|
3996
|
+
} else {
|
|
3997
|
+
change({
|
|
3998
|
+
file: file[ix],
|
|
3999
|
+
uuid: v4(),
|
|
4000
|
+
check: maxSizeError
|
|
4001
|
+
});
|
|
4002
|
+
}
|
|
4003
|
+
}
|
|
4004
|
+
}
|
|
4005
|
+
}
|
|
4006
|
+
} else {
|
|
3923
4007
|
for (let ix = 0; ix < file.length; ix++) {
|
|
3924
4008
|
if (file[ix]) {
|
|
3925
4009
|
if (file[ix].size <= maxSize * Math.pow(2, 20)) {
|
|
@@ -3947,6 +4031,14 @@ const NewFile = ({
|
|
|
3947
4031
|
}
|
|
3948
4032
|
}
|
|
3949
4033
|
}
|
|
4034
|
+
}
|
|
4035
|
+
};
|
|
4036
|
+
const handleChange = e => {
|
|
4037
|
+
const file = e.target.files;
|
|
4038
|
+
if (multiple) {
|
|
4039
|
+
setError('');
|
|
4040
|
+
setImage(null);
|
|
4041
|
+
handleUploadFiles(file);
|
|
3950
4042
|
if (file.length === 0 && memoizedItems.length === 0) {
|
|
3951
4043
|
setError(noChoosenFile);
|
|
3952
4044
|
}
|
|
@@ -4028,7 +4120,18 @@ const NewFile = ({
|
|
|
4028
4120
|
if (multiple && !removeFile) {
|
|
4029
4121
|
alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
|
|
4030
4122
|
}
|
|
4031
|
-
|
|
4123
|
+
if (maxCHoosenLength) {
|
|
4124
|
+
if (typeof maxCHoosenLength !== 'number') {
|
|
4125
|
+
alert('maxCHoosenLength prop must be a number, please check it!');
|
|
4126
|
+
} else {
|
|
4127
|
+
if (maxCHoosenLength <= 0) {
|
|
4128
|
+
setChoosenFileCount(1);
|
|
4129
|
+
} else {
|
|
4130
|
+
setChoosenFileCount(Math.round(maxCHoosenLength));
|
|
4131
|
+
}
|
|
4132
|
+
}
|
|
4133
|
+
}
|
|
4134
|
+
}, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
|
|
4032
4135
|
React.useEffect(() => {
|
|
4033
4136
|
if (deleteComponent && !removeComponent) {
|
|
4034
4137
|
alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
|
|
@@ -4230,6 +4333,7 @@ NewFile.propTypes = {
|
|
|
4230
4333
|
backgroundColor: PropTypes__default["default"].string,
|
|
4231
4334
|
change: PropTypes__default["default"].func.isRequired,
|
|
4232
4335
|
listItemPadding: PropTypes__default["default"].string,
|
|
4336
|
+
maxCHoosenLength: PropTypes__default["default"].number,
|
|
4233
4337
|
progressFontSize: PropTypes__default["default"].string,
|
|
4234
4338
|
borderHoverColor: PropTypes__default["default"].string,
|
|
4235
4339
|
listItemErrorSize: PropTypes__default["default"].string,
|
|
@@ -4242,9 +4346,11 @@ NewFile.propTypes = {
|
|
|
4242
4346
|
progressSuccessColor: PropTypes__default["default"].string,
|
|
4243
4347
|
progressLoadingColor: PropTypes__default["default"].string,
|
|
4244
4348
|
hiddenBackgroundColor: PropTypes__default["default"].string,
|
|
4349
|
+
maxCHoosenLengthError: PropTypes__default["default"].string,
|
|
4245
4350
|
extentionsRowMarginTop: PropTypes__default["default"].string,
|
|
4246
4351
|
listItemBackgroundColor: PropTypes__default["default"].string,
|
|
4247
4352
|
listItemBackgroundErrorColor: PropTypes__default["default"].string,
|
|
4353
|
+
maxCHoosenLengthErrorHideTime: PropTypes__default["default"].number,
|
|
4248
4354
|
filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
|
|
4249
4355
|
fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
|
|
4250
4356
|
};
|
|
@@ -4399,16 +4505,10 @@ const Textarea = ({
|
|
|
4399
4505
|
if (maxLength) {
|
|
4400
4506
|
if (value.length > maxLength) {
|
|
4401
4507
|
onChange(value.substr(0, maxLength));
|
|
4402
|
-
setError('Նիշերի քանակը գերազանցում է');
|
|
4403
|
-
} else {
|
|
4404
|
-
setError('');
|
|
4405
4508
|
}
|
|
4406
4509
|
} else {
|
|
4407
4510
|
if (value.length > configStyles.TEXTAREA.maxLength) {
|
|
4408
|
-
setError('Նիշերի քանակը գերազանցում է');
|
|
4409
4511
|
onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
|
|
4410
|
-
} else {
|
|
4411
|
-
setError('');
|
|
4412
4512
|
}
|
|
4413
4513
|
}
|
|
4414
4514
|
};
|
|
@@ -4419,6 +4519,9 @@ const Textarea = ({
|
|
|
4419
4519
|
if (!onChange) {
|
|
4420
4520
|
alert('Please add onChange function on Textarea component');
|
|
4421
4521
|
}
|
|
4522
|
+
if (value === '') {
|
|
4523
|
+
setError('');
|
|
4524
|
+
}
|
|
4422
4525
|
setInnerValue(value);
|
|
4423
4526
|
}, [value, onChange]);
|
|
4424
4527
|
React.useEffect(() => {
|
|
@@ -4616,7 +4719,7 @@ Typography.propTypes = {
|
|
|
4616
4719
|
textDecoration: PropTypes__default["default"].string,
|
|
4617
4720
|
backgroundColor: PropTypes__default["default"].string,
|
|
4618
4721
|
variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
|
|
4619
|
-
size: PropTypes__default["default"].
|
|
4722
|
+
size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
|
|
4620
4723
|
};
|
|
4621
4724
|
Typography.defaultProps = {
|
|
4622
4725
|
variant: 'p'
|
|
@@ -5204,8 +5307,7 @@ const NewAutocomplete = ({
|
|
|
5204
5307
|
alert('Please add options prop');
|
|
5205
5308
|
}
|
|
5206
5309
|
options && options.length > 0 && options.map(item => {
|
|
5207
|
-
|
|
5208
|
-
if (!item.hasOwnProperty(keyNames.name)) {
|
|
5310
|
+
if (!hasOwnerProperty(item, keyNames.name)) {
|
|
5209
5311
|
alert(`Please add ${keyNames.name} property in items of options array`);
|
|
5210
5312
|
}
|
|
5211
5313
|
});
|
package/package.json
CHANGED
|
@@ -52,6 +52,7 @@ export const Input = ({
|
|
|
52
52
|
maxNumSize,
|
|
53
53
|
labelColor,
|
|
54
54
|
errorColor,
|
|
55
|
+
withoutDot,
|
|
55
56
|
borderRight,
|
|
56
57
|
placeholder,
|
|
57
58
|
errorZindex,
|
|
@@ -215,6 +216,17 @@ export const Input = ({
|
|
|
215
216
|
change(newStr)
|
|
216
217
|
}
|
|
217
218
|
}
|
|
219
|
+
|
|
220
|
+
if (withoutDot && !/^\d+$/.test(currentValue)) {
|
|
221
|
+
const newStr = currentValue.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
222
|
+
return b + c.replace(/\./g, '')
|
|
223
|
+
})
|
|
224
|
+
setInnerValue(newStr)
|
|
225
|
+
if (change) {
|
|
226
|
+
change(newStr)
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
218
230
|
if (currentValue === '') {
|
|
219
231
|
setInnerValue('')
|
|
220
232
|
if (change) {
|
|
@@ -357,6 +369,17 @@ export const Input = ({
|
|
|
357
369
|
change(newStr)
|
|
358
370
|
}
|
|
359
371
|
}
|
|
372
|
+
|
|
373
|
+
if (withoutDot && !/^\d+$/.test(value)) {
|
|
374
|
+
const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
375
|
+
return b + c.replace(/\./g, '')
|
|
376
|
+
})
|
|
377
|
+
setInnerValue(newStr)
|
|
378
|
+
if (change) {
|
|
379
|
+
change(newStr)
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
360
383
|
if (value === '') {
|
|
361
384
|
setInnerValue('')
|
|
362
385
|
if (change) {
|
|
@@ -591,6 +614,7 @@ Input.propTypes = {
|
|
|
591
614
|
padding: PropTypes.string,
|
|
592
615
|
fontSize: PropTypes.string,
|
|
593
616
|
tooltip: PropTypes.element,
|
|
617
|
+
withoutDot: PropTypes.bool,
|
|
594
618
|
marginTop: PropTypes.string,
|
|
595
619
|
transform: PropTypes.string,
|
|
596
620
|
className: PropTypes.string,
|