@xaypay/tui 0.0.80 → 0.0.81
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 +15 -16
- package/dist/index.js +15 -16
- package/package.json +1 -1
- package/src/assets/attach.svg +4 -0
- package/src/assets/delete.svg +4 -0
- package/src/assets/down-arrow.svg +4 -0
- package/src/assets/minus.svg +4 -0
- package/src/assets/plus.svg +4 -0
- package/src/assets/up-arrow.svg +4 -0
- package/src/components/modal/index.js +4 -7
- package/src/components/newFile/index.js +4 -3
- package/src/components/table/index.js +54 -98
- package/src/components/table/table.module.css +28 -0
- package/src/components/table/table.stories.js +120 -27
- package/src/components/table/td.js +115 -0
- package/src/components/table/th.js +32 -0
- package/tui.config.js +1 -1
package/dist/index.es.js
CHANGED
|
@@ -65,9 +65,9 @@ function styleInject(css, ref) {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
var css_248z$
|
|
68
|
+
var css_248z$e = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
|
|
69
69
|
var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
|
|
70
|
-
styleInject(css_248z$
|
|
70
|
+
styleInject(css_248z$e);
|
|
71
71
|
|
|
72
72
|
const File = ({
|
|
73
73
|
name,
|
|
@@ -189,6 +189,9 @@ File.defaultProps = {
|
|
|
189
189
|
fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
|
|
190
190
|
};
|
|
191
191
|
|
|
192
|
+
var css_248z$d = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
|
|
193
|
+
styleInject(css_248z$d);
|
|
194
|
+
|
|
192
195
|
const _ = require('lodash');
|
|
193
196
|
const compereConfigs = () => {
|
|
194
197
|
let projectConfig = {};
|
|
@@ -213,8 +216,7 @@ const compereConfigs = () => {
|
|
|
213
216
|
};
|
|
214
217
|
|
|
215
218
|
({
|
|
216
|
-
|
|
217
|
-
tableBodyItems: PropTypes.array,
|
|
219
|
+
data: PropTypes.object,
|
|
218
220
|
tHeadColor: PropTypes.string,
|
|
219
221
|
tHeadFamily: PropTypes.string,
|
|
220
222
|
tHeadPadding: PropTypes.string,
|
|
@@ -227,8 +229,7 @@ const compereConfigs = () => {
|
|
|
227
229
|
tBodyTextAlign: PropTypes.string,
|
|
228
230
|
tBodyFontWeight: PropTypes.string,
|
|
229
231
|
tBodyFontFamily: PropTypes.string,
|
|
230
|
-
tBodyRowBorder: PropTypes.string
|
|
231
|
-
tBodyMarginTop: PropTypes.string
|
|
232
|
+
tBodyRowBorder: PropTypes.string
|
|
232
233
|
});
|
|
233
234
|
|
|
234
235
|
var css_248z$c = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
|
|
@@ -402,22 +403,19 @@ const Modal = ({
|
|
|
402
403
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
403
404
|
style: {
|
|
404
405
|
position: 'relative',
|
|
406
|
+
display: 'flex',
|
|
405
407
|
width: '100%',
|
|
406
|
-
height: '100vh'
|
|
408
|
+
height: '100vh',
|
|
409
|
+
alignItems: 'center',
|
|
410
|
+
justifyContent: 'center'
|
|
407
411
|
}
|
|
408
412
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
409
413
|
className: `${classProps} ${styles$a['animation__modal']}`,
|
|
410
414
|
onClick: handleStopClosing,
|
|
411
415
|
style: {
|
|
412
|
-
top: '0px',
|
|
413
|
-
left: '0px',
|
|
414
|
-
right: '0px',
|
|
415
|
-
bottom: '0px',
|
|
416
|
-
margin: 'auto',
|
|
417
416
|
maxWidth: '95%',
|
|
418
417
|
overflow: 'auto',
|
|
419
418
|
maxHeight: '95vh',
|
|
420
|
-
position: 'absolute',
|
|
421
419
|
width: 'fit-content',
|
|
422
420
|
height: 'fit-content',
|
|
423
421
|
boxSizing: 'border-box',
|
|
@@ -2509,7 +2507,6 @@ const NewFile = ({
|
|
|
2509
2507
|
name,
|
|
2510
2508
|
color,
|
|
2511
2509
|
label,
|
|
2512
|
-
width,
|
|
2513
2510
|
weight,
|
|
2514
2511
|
height,
|
|
2515
2512
|
radius,
|
|
@@ -2517,6 +2514,7 @@ const NewFile = ({
|
|
|
2517
2514
|
border,
|
|
2518
2515
|
upload,
|
|
2519
2516
|
maxSize,
|
|
2517
|
+
maxWidth,
|
|
2520
2518
|
disabled,
|
|
2521
2519
|
multiple,
|
|
2522
2520
|
required,
|
|
@@ -2701,7 +2699,8 @@ const NewFile = ({
|
|
|
2701
2699
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
2702
2700
|
ref: ref,
|
|
2703
2701
|
style: {
|
|
2704
|
-
width:
|
|
2702
|
+
width: '100%',
|
|
2703
|
+
maxWidth: maxWidth ? maxWidth : configStyles.File.maxWidth
|
|
2705
2704
|
}
|
|
2706
2705
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2707
2706
|
style: {
|
|
@@ -2852,7 +2851,6 @@ NewFile.propTypes = {
|
|
|
2852
2851
|
or: PropTypes.string,
|
|
2853
2852
|
size: PropTypes.string,
|
|
2854
2853
|
label: PropTypes.string,
|
|
2855
|
-
width: PropTypes.string,
|
|
2856
2854
|
color: PropTypes.string,
|
|
2857
2855
|
height: PropTypes.string,
|
|
2858
2856
|
disabled: PropTypes.bool,
|
|
@@ -2862,6 +2860,7 @@ NewFile.propTypes = {
|
|
|
2862
2860
|
upload: PropTypes.string,
|
|
2863
2861
|
weight: PropTypes.number,
|
|
2864
2862
|
maxSize: PropTypes.number,
|
|
2863
|
+
maxWidth: PropTypes.string,
|
|
2865
2864
|
removeFile: PropTypes.func,
|
|
2866
2865
|
errorSize: PropTypes.string,
|
|
2867
2866
|
labelSize: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -95,9 +95,9 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
98
|
+
var css_248z$e = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
|
|
99
99
|
var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
|
|
100
|
-
styleInject(css_248z$
|
|
100
|
+
styleInject(css_248z$e);
|
|
101
101
|
|
|
102
102
|
const File = ({
|
|
103
103
|
name,
|
|
@@ -219,6 +219,9 @@ File.defaultProps = {
|
|
|
219
219
|
fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
|
|
220
220
|
};
|
|
221
221
|
|
|
222
|
+
var css_248z$d = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
|
|
223
|
+
styleInject(css_248z$d);
|
|
224
|
+
|
|
222
225
|
const _ = require('lodash');
|
|
223
226
|
const compereConfigs = () => {
|
|
224
227
|
let projectConfig = {};
|
|
@@ -243,8 +246,7 @@ const compereConfigs = () => {
|
|
|
243
246
|
};
|
|
244
247
|
|
|
245
248
|
({
|
|
246
|
-
|
|
247
|
-
tableBodyItems: PropTypes__default["default"].array,
|
|
249
|
+
data: PropTypes__default["default"].object,
|
|
248
250
|
tHeadColor: PropTypes__default["default"].string,
|
|
249
251
|
tHeadFamily: PropTypes__default["default"].string,
|
|
250
252
|
tHeadPadding: PropTypes__default["default"].string,
|
|
@@ -257,8 +259,7 @@ const compereConfigs = () => {
|
|
|
257
259
|
tBodyTextAlign: PropTypes__default["default"].string,
|
|
258
260
|
tBodyFontWeight: PropTypes__default["default"].string,
|
|
259
261
|
tBodyFontFamily: PropTypes__default["default"].string,
|
|
260
|
-
tBodyRowBorder: PropTypes__default["default"].string
|
|
261
|
-
tBodyMarginTop: PropTypes__default["default"].string
|
|
262
|
+
tBodyRowBorder: PropTypes__default["default"].string
|
|
262
263
|
});
|
|
263
264
|
|
|
264
265
|
var css_248z$c = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
|
|
@@ -432,22 +433,19 @@ const Modal = ({
|
|
|
432
433
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
433
434
|
style: {
|
|
434
435
|
position: 'relative',
|
|
436
|
+
display: 'flex',
|
|
435
437
|
width: '100%',
|
|
436
|
-
height: '100vh'
|
|
438
|
+
height: '100vh',
|
|
439
|
+
alignItems: 'center',
|
|
440
|
+
justifyContent: 'center'
|
|
437
441
|
}
|
|
438
442
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
439
443
|
className: `${classProps} ${styles$a['animation__modal']}`,
|
|
440
444
|
onClick: handleStopClosing,
|
|
441
445
|
style: {
|
|
442
|
-
top: '0px',
|
|
443
|
-
left: '0px',
|
|
444
|
-
right: '0px',
|
|
445
|
-
bottom: '0px',
|
|
446
|
-
margin: 'auto',
|
|
447
446
|
maxWidth: '95%',
|
|
448
447
|
overflow: 'auto',
|
|
449
448
|
maxHeight: '95vh',
|
|
450
|
-
position: 'absolute',
|
|
451
449
|
width: 'fit-content',
|
|
452
450
|
height: 'fit-content',
|
|
453
451
|
boxSizing: 'border-box',
|
|
@@ -2539,7 +2537,6 @@ const NewFile = ({
|
|
|
2539
2537
|
name,
|
|
2540
2538
|
color,
|
|
2541
2539
|
label,
|
|
2542
|
-
width,
|
|
2543
2540
|
weight,
|
|
2544
2541
|
height,
|
|
2545
2542
|
radius,
|
|
@@ -2547,6 +2544,7 @@ const NewFile = ({
|
|
|
2547
2544
|
border,
|
|
2548
2545
|
upload,
|
|
2549
2546
|
maxSize,
|
|
2547
|
+
maxWidth,
|
|
2550
2548
|
disabled,
|
|
2551
2549
|
multiple,
|
|
2552
2550
|
required,
|
|
@@ -2731,7 +2729,8 @@ const NewFile = ({
|
|
|
2731
2729
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2732
2730
|
ref: ref,
|
|
2733
2731
|
style: {
|
|
2734
|
-
width:
|
|
2732
|
+
width: '100%',
|
|
2733
|
+
maxWidth: maxWidth ? maxWidth : configStyles.File.maxWidth
|
|
2735
2734
|
}
|
|
2736
2735
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2737
2736
|
style: {
|
|
@@ -2882,7 +2881,6 @@ NewFile.propTypes = {
|
|
|
2882
2881
|
or: PropTypes__default["default"].string,
|
|
2883
2882
|
size: PropTypes__default["default"].string,
|
|
2884
2883
|
label: PropTypes__default["default"].string,
|
|
2885
|
-
width: PropTypes__default["default"].string,
|
|
2886
2884
|
color: PropTypes__default["default"].string,
|
|
2887
2885
|
height: PropTypes__default["default"].string,
|
|
2888
2886
|
disabled: PropTypes__default["default"].bool,
|
|
@@ -2892,6 +2890,7 @@ NewFile.propTypes = {
|
|
|
2892
2890
|
upload: PropTypes__default["default"].string,
|
|
2893
2891
|
weight: PropTypes__default["default"].number,
|
|
2894
2892
|
maxSize: PropTypes__default["default"].number,
|
|
2893
|
+
maxWidth: PropTypes__default["default"].string,
|
|
2895
2894
|
removeFile: PropTypes__default["default"].func,
|
|
2896
2895
|
errorSize: PropTypes__default["default"].string,
|
|
2897
2896
|
labelSize: PropTypes__default["default"].string,
|
package/package.json
CHANGED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7396 7C17.6559 7 16.6157 7.42413 15.8479 8.18065L8.65581 15.2671L8.64978 15.2733C7.58341 16.3517 6.99017 17.8017 7.00012 19.3095C7.01008 20.8173 7.62243 22.2595 8.70291 23.3241C9.78322 24.3886 11.2446 24.9901 12.7702 24.9999C14.2959 25.0097 15.765 24.427 16.8593 23.3765L24 16.3405L23.0614 15.4157L15.9372 22.4355C15.0929 23.2445 13.9585 23.6946 12.7788 23.687C11.5976 23.6795 10.468 23.2137 9.63429 22.3922C8.80072 21.5709 8.32998 20.4602 8.32233 19.3009C8.31468 18.1429 8.76963 17.0276 9.5904 16.196L16.7793 9.11256C17.2983 8.60109 18.0034 8.31288 18.7396 8.31288C19.4758 8.31288 20.1809 8.60109 20.7 9.11256C21.2189 9.62386 21.5094 10.3162 21.5094 11.0371C21.5094 11.7579 21.2189 12.4503 20.7 12.9616L13.7154 19.8437C13.518 20.0382 13.2493 20.1483 12.968 20.1483C12.6868 20.1483 12.4181 20.0382 12.2207 19.8437C12.0235 19.6494 11.9137 19.387 11.9137 19.1145C11.9137 18.8419 12.0235 18.5795 12.2207 18.3852L19.1479 11.5596L18.2093 10.6348L11.2893 17.4533C10.8431 17.893 10.5915 18.4904 10.5915 19.1145C10.5915 19.7385 10.8431 20.336 11.2893 20.7757C11.7354 21.2152 12.3393 21.4612 12.968 21.4612C13.5968 21.4612 14.2007 21.2152 14.6468 20.7757L21.6313 13.8935C22.3993 13.1368 22.8317 12.1094 22.8317 11.0371C22.8317 9.96471 22.3993 8.93733 21.6313 8.18065C20.8636 7.42413 19.8233 7 18.7396 7Z" fill="#0DA574"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
|
|
3
|
+
<path d="M14.1818 10.8333H17.8182C17.8182 10.3637 17.6266 9.91326 17.2856 9.58117C16.9447 9.24907 16.4822 9.0625 16 9.0625C15.5178 9.0625 15.0553 9.24907 14.7144 9.58117C14.3734 9.91326 14.1818 10.3637 14.1818 10.8333ZM13.0909 10.8333C13.0909 10.0819 13.3974 9.36122 13.943 8.82986C14.4885 8.29851 15.2285 8 16 8C16.7715 8 17.5115 8.29851 18.057 8.82986C18.6026 9.36122 18.9091 10.0819 18.9091 10.8333H23.4545C23.5992 10.8333 23.7379 10.8893 23.8402 10.9889C23.9425 11.0886 24 11.2237 24 11.3646C24 11.5055 23.9425 11.6406 23.8402 11.7402C23.7379 11.8399 23.5992 11.8958 23.4545 11.8958H22.5018L21.6167 22.2396C21.5523 22.9921 21.2 23.6935 20.6295 24.2048C20.059 24.7161 19.312 24.9999 18.5367 25H13.4633C12.688 24.9999 11.941 24.7161 11.3705 24.2048C10.8001 23.6935 10.4477 22.9921 10.3833 22.2396L9.49818 11.8958H8.54545C8.40079 11.8958 8.26205 11.8399 8.15976 11.7402C8.05747 11.6406 8 11.5055 8 11.3646C8 11.2237 8.05747 11.0886 8.15976 10.9889C8.26205 10.8893 8.40079 10.8333 8.54545 10.8333H13.0909ZM14.9091 14.9062C14.9091 14.7654 14.8516 14.6302 14.7493 14.5306C14.647 14.431 14.5083 14.375 14.3636 14.375C14.219 14.375 14.0802 14.431 13.9779 14.5306C13.8756 14.6302 13.8182 14.7654 13.8182 14.9062V20.9271C13.8182 21.068 13.8756 21.2031 13.9779 21.3027C14.0802 21.4024 14.219 21.4583 14.3636 21.4583C14.5083 21.4583 14.647 21.4024 14.7493 21.3027C14.8516 21.2031 14.9091 21.068 14.9091 20.9271V14.9062ZM17.6364 14.375C17.4917 14.375 17.353 14.431 17.2507 14.5306C17.1484 14.6302 17.0909 14.7654 17.0909 14.9062V20.9271C17.0909 21.068 17.1484 21.2031 17.2507 21.3027C17.353 21.4024 17.4917 21.4583 17.6364 21.4583C17.781 21.4583 17.9198 21.4024 18.0221 21.3027C18.1244 21.2031 18.1818 21.068 18.1818 20.9271V14.9062C18.1818 14.7654 18.1244 14.6302 18.0221 14.5306C17.9198 14.431 17.781 14.375 17.6364 14.375Z" fill="#EE0000"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="20" height="20" rx="0.5" fill="white" stroke="#EEEEEE"/>
|
|
3
|
+
<path d="M10.4914 13.998C10.3081 13.9984 10.1305 13.9287 9.98939 13.8009L5.28335 9.51743C5.12317 9.37202 5.02244 9.16306 5.00332 8.93652C4.9842 8.70999 5.04825 8.48444 5.18138 8.30948C5.31451 8.13453 5.50582 8.02451 5.71322 8.00363C5.92062 7.98274 6.12713 8.0527 6.2873 8.19811L10.4914 12.0361L14.6954 8.33519C14.7757 8.26402 14.868 8.21088 14.9671 8.17881C15.0662 8.14675 15.1701 8.13638 15.2729 8.14833C15.3756 8.16027 15.4752 8.19428 15.5659 8.2484C15.6566 8.30252 15.7366 8.37568 15.8014 8.46369C15.8732 8.55178 15.9276 8.65512 15.9612 8.76724C15.9947 8.87936 16.0067 8.99784 15.9964 9.11526C15.9861 9.23268 15.9537 9.34652 15.9013 9.44963C15.8488 9.55273 15.7774 9.6429 15.6916 9.71447L10.9855 13.8523C10.8403 13.9599 10.6664 14.0111 10.4914 13.998Z" fill="#3C393E"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
|
|
3
|
+
<path d="M22.7692 8H9.23077C8.9044 8 8.59121 8.12967 8.36044 8.36044C8.12967 8.59121 8 8.9044 8 9.23077V22.7692C8 23.0956 8.12967 23.4088 8.36044 23.6396C8.59121 23.8703 8.9044 24 9.23077 24H22.7692C23.0956 24 23.4088 23.8703 23.6396 23.6396C23.8703 23.4088 24 23.0956 24 22.7692V9.23077C24 8.9044 23.8703 8.59121 23.6396 8.36044C23.4088 8.12967 23.0956 8 22.7692 8ZM20.8676 16.6154H11.1326C10.7924 16.6154 10.5172 16.3398 10.5172 16C10.5172 15.6602 10.7924 15.3846 11.1326 15.3846H20.8676C21.2077 15.3846 21.483 15.6602 21.483 16C21.483 16.3398 21.2077 16.6154 20.8676 16.6154Z" fill="#D1D1D1"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="31" height="31" rx="5.5" stroke="#EEEEEE"/>
|
|
3
|
+
<path d="M22.7692 8H9.23077C8.9044 8 8.59121 8.12967 8.36044 8.36044C8.12967 8.59121 8 8.9044 8 9.23077V22.7692C8 23.0956 8.12967 23.4088 8.36044 23.6396C8.59121 23.8703 8.9044 24 9.23077 24H22.7692C23.0956 24 23.4088 23.8703 23.6396 23.6396C23.8703 23.4088 24 23.0956 24 22.7692V9.23077C24 8.9044 23.8703 8.59121 23.6396 8.36044C23.4088 8.12967 23.0956 8 22.7692 8ZM20.8676 16.6154H16.6154V20.8676C16.6154 21.2077 16.3398 21.483 16 21.483C15.6602 21.483 15.3846 21.2077 15.3846 20.8676V16.6154H11.1324C10.7923 16.6154 10.517 16.3398 10.517 16C10.517 15.6602 10.7923 15.3846 11.1324 15.3846H15.3846V11.1324C15.3846 10.7923 15.6602 10.517 16 10.517C16.3398 10.517 16.6154 10.7923 16.6154 11.1324V15.3846H20.8676C21.2077 15.3846 21.483 15.6602 21.483 16C21.483 16.3398 21.2077 16.6154 20.8676 16.6154Z" fill="#FECD29"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<rect x="0.5" y="0.5" width="20" height="20" rx="0.5" fill="white" stroke="#EEEEEE"/>
|
|
3
|
+
<path d="M10.5086 8.00203C10.6919 8.00164 10.8695 8.07135 11.0106 8.19907L15.7167 12.4826C15.8768 12.628 15.9776 12.8369 15.9967 13.0635C16.0158 13.29 15.9518 13.5156 15.8186 13.6905C15.6855 13.8655 15.4942 13.9755 15.2868 13.9964C15.0794 14.0173 14.8729 13.9473 14.7127 13.8019L10.5086 9.96387L6.30456 13.6648C6.22433 13.736 6.13201 13.7891 6.03292 13.8212C5.93383 13.8533 5.82991 13.8636 5.72714 13.8517C5.62437 13.8397 5.52477 13.8057 5.43407 13.7516C5.34337 13.6975 5.26336 13.6243 5.19864 13.5363C5.12681 13.4482 5.0724 13.3449 5.03884 13.2328C5.00528 13.1206 4.99327 13.0022 5.00358 12.8847C5.01389 12.7673 5.04629 12.6535 5.09875 12.5504C5.15121 12.4473 5.2226 12.3571 5.30844 12.2855L10.0145 8.14767C10.1597 8.04014 10.3336 7.98886 10.5086 8.00203Z" fill="#3C393E"/>
|
|
4
|
+
</svg>
|
|
@@ -111,23 +111,20 @@ export const Modal = ({
|
|
|
111
111
|
<div
|
|
112
112
|
style={{
|
|
113
113
|
position: 'relative',
|
|
114
|
+
display: 'flex',
|
|
114
115
|
width: '100%',
|
|
115
|
-
height: '100vh'
|
|
116
|
+
height: '100vh',
|
|
117
|
+
alignItems: 'center',
|
|
118
|
+
justifyContent: 'center'
|
|
116
119
|
}}
|
|
117
120
|
>
|
|
118
121
|
<div
|
|
119
122
|
className={`${classProps} ${styles['animation__modal']}`}
|
|
120
123
|
onClick={handleStopClosing}
|
|
121
124
|
style={{
|
|
122
|
-
top: '0px',
|
|
123
|
-
left: '0px',
|
|
124
|
-
right: '0px',
|
|
125
|
-
bottom: '0px',
|
|
126
|
-
margin: 'auto',
|
|
127
125
|
maxWidth: '95%',
|
|
128
126
|
overflow: 'auto',
|
|
129
127
|
maxHeight: '95vh',
|
|
130
|
-
position: 'absolute',
|
|
131
128
|
width: 'fit-content',
|
|
132
129
|
height: 'fit-content',
|
|
133
130
|
boxSizing: 'border-box',
|
|
@@ -18,7 +18,6 @@ export const NewFile = ({
|
|
|
18
18
|
name,
|
|
19
19
|
color,
|
|
20
20
|
label,
|
|
21
|
-
width,
|
|
22
21
|
weight,
|
|
23
22
|
height,
|
|
24
23
|
radius,
|
|
@@ -26,6 +25,7 @@ export const NewFile = ({
|
|
|
26
25
|
border,
|
|
27
26
|
upload,
|
|
28
27
|
maxSize,
|
|
28
|
+
maxWidth,
|
|
29
29
|
disabled,
|
|
30
30
|
multiple,
|
|
31
31
|
required,
|
|
@@ -227,7 +227,8 @@ export const NewFile = ({
|
|
|
227
227
|
<div
|
|
228
228
|
ref={ref}
|
|
229
229
|
style={{
|
|
230
|
-
width:
|
|
230
|
+
width: '100%',
|
|
231
|
+
maxWidth: maxWidth ? maxWidth : configStyles.File.maxWidth
|
|
231
232
|
}}
|
|
232
233
|
>
|
|
233
234
|
<div
|
|
@@ -441,7 +442,6 @@ NewFile.propTypes = {
|
|
|
441
442
|
or: PropTypes.string,
|
|
442
443
|
size: PropTypes.string,
|
|
443
444
|
label: PropTypes.string,
|
|
444
|
-
width: PropTypes.string,
|
|
445
445
|
color: PropTypes.string,
|
|
446
446
|
height: PropTypes.string,
|
|
447
447
|
disabled: PropTypes.bool,
|
|
@@ -451,6 +451,7 @@ NewFile.propTypes = {
|
|
|
451
451
|
upload: PropTypes.string,
|
|
452
452
|
weight: PropTypes.number,
|
|
453
453
|
maxSize: PropTypes.number,
|
|
454
|
+
maxWidth: PropTypes.string,
|
|
454
455
|
removeFile: PropTypes.func,
|
|
455
456
|
errorSize: PropTypes.string,
|
|
456
457
|
labelSize: PropTypes.string,
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
|
|
4
|
+
import TH from './th';
|
|
5
|
+
import TD from './td';
|
|
6
|
+
|
|
4
7
|
import { compereConfigs } from './../../utils';
|
|
5
8
|
|
|
6
9
|
const Table = ({
|
|
7
|
-
|
|
8
|
-
tableBodyItems,
|
|
10
|
+
data,
|
|
9
11
|
|
|
10
12
|
tHeadColor,
|
|
11
13
|
tHeadFamily,
|
|
@@ -21,12 +23,21 @@ const Table = ({
|
|
|
21
23
|
tBodyFontWeight,
|
|
22
24
|
tBodyFontFamily,
|
|
23
25
|
|
|
24
|
-
tBodyRowBorder
|
|
25
|
-
tBodyMarginTop,
|
|
26
|
+
tBodyRowBorder
|
|
26
27
|
}) => {
|
|
28
|
+
const [body, setBody] = useState([]);
|
|
29
|
+
const [header, setHeader] = useState([]);
|
|
27
30
|
|
|
28
31
|
const configStyles = compereConfigs();
|
|
29
32
|
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
setBody(data.body);
|
|
35
|
+
}, [data.body]);
|
|
36
|
+
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
setHeader(data.header);
|
|
39
|
+
}, [data.header]);
|
|
40
|
+
|
|
30
41
|
return (
|
|
31
42
|
<>
|
|
32
43
|
<table
|
|
@@ -37,7 +48,7 @@ const Table = ({
|
|
|
37
48
|
>
|
|
38
49
|
|
|
39
50
|
{
|
|
40
|
-
|
|
51
|
+
header && header?.length > 0 && <thead>
|
|
41
52
|
<tr
|
|
42
53
|
style={{
|
|
43
54
|
color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
|
|
@@ -45,21 +56,17 @@ const Table = ({
|
|
|
45
56
|
}}
|
|
46
57
|
>
|
|
47
58
|
{
|
|
48
|
-
|
|
59
|
+
header.map((item, index) => {
|
|
49
60
|
return (
|
|
50
|
-
<
|
|
61
|
+
<TH
|
|
62
|
+
item={item}
|
|
51
63
|
key={`${item}_${index}`}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
borderTopRightRadius: index === tableHeadItems.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
|
|
59
|
-
}}
|
|
60
|
-
>
|
|
61
|
-
{item.type === 'show' ? item.content : ''}
|
|
62
|
-
</th>
|
|
64
|
+
tHeadFamily={tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily}
|
|
65
|
+
tHeadPadding={tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding}
|
|
66
|
+
tHeadFontWeight={tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight}
|
|
67
|
+
borderTopLeftRadius={index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
|
|
68
|
+
borderTopRightRadius={index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
|
|
69
|
+
/>
|
|
63
70
|
)
|
|
64
71
|
})
|
|
65
72
|
}
|
|
@@ -68,87 +75,38 @@ const Table = ({
|
|
|
68
75
|
}
|
|
69
76
|
|
|
70
77
|
{
|
|
71
|
-
|
|
78
|
+
body && body?.length > 0 && <tbody
|
|
72
79
|
style={{
|
|
73
|
-
overflow: 'auto',
|
|
74
80
|
boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
|
|
75
81
|
}}
|
|
76
82
|
>
|
|
77
|
-
|
|
78
83
|
{
|
|
79
|
-
|
|
80
|
-
tableBodyItems.map((item, index) => {
|
|
81
|
-
const monst = Object.entries(item);
|
|
84
|
+
body.map((item, index) => {
|
|
82
85
|
return (
|
|
83
|
-
|
|
84
|
-
{
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
style={{
|
|
108
|
-
color: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
|
|
109
|
-
padding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
|
|
110
|
-
fontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
|
|
111
|
-
textAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
|
|
112
|
-
fontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
|
|
113
|
-
fontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
|
|
114
|
-
borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder
|
|
115
|
-
}}
|
|
116
|
-
>
|
|
117
|
-
{
|
|
118
|
-
Array.isArray(innerItem)
|
|
119
|
-
? innerItem.length > 0
|
|
120
|
-
? innerItem.map((newItem, newIndex) => {
|
|
121
|
-
if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
|
|
122
|
-
return Object.values(newItem).map((actionItem, actionIndex) => {
|
|
123
|
-
return (
|
|
124
|
-
<span
|
|
125
|
-
key={`${actionItem}_${actionIndex}`}
|
|
126
|
-
style={{
|
|
127
|
-
cursor: 'pointer'
|
|
128
|
-
}}
|
|
129
|
-
>
|
|
130
|
-
{ actionItem }
|
|
131
|
-
</span>
|
|
132
|
-
)
|
|
133
|
-
})
|
|
134
|
-
} else {
|
|
135
|
-
return <span
|
|
136
|
-
key={`${newItem}_${newIndex}`}
|
|
137
|
-
>
|
|
138
|
-
{newItem}
|
|
139
|
-
</span>
|
|
140
|
-
}
|
|
141
|
-
})
|
|
142
|
-
: ''
|
|
143
|
-
: innerItem
|
|
144
|
-
}
|
|
145
|
-
</td>
|
|
146
|
-
)
|
|
147
|
-
}
|
|
148
|
-
})
|
|
149
|
-
}
|
|
150
|
-
</tr>
|
|
151
|
-
</>
|
|
86
|
+
<tr
|
|
87
|
+
key={`${item}_${index}`}
|
|
88
|
+
style={{
|
|
89
|
+
borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
{
|
|
93
|
+
Object.values(item).map((innerItem, innerIndex) => {
|
|
94
|
+
return (
|
|
95
|
+
<TD
|
|
96
|
+
item={innerItem}
|
|
97
|
+
key={`${innerItem}_${innerIndex}`}
|
|
98
|
+
tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
|
|
99
|
+
tBodyPadding={tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding}
|
|
100
|
+
tBodyFontSize={tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize}
|
|
101
|
+
tBodyTextAlign={tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign}
|
|
102
|
+
tBodyFontFamily={tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily}
|
|
103
|
+
tBodyFontWeight={tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight}
|
|
104
|
+
borderRight={innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder}
|
|
105
|
+
/>
|
|
106
|
+
)
|
|
107
|
+
})
|
|
108
|
+
}
|
|
109
|
+
</tr>
|
|
152
110
|
)
|
|
153
111
|
})
|
|
154
112
|
}
|
|
@@ -160,8 +118,7 @@ const Table = ({
|
|
|
160
118
|
};
|
|
161
119
|
|
|
162
120
|
Table.propTypes = {
|
|
163
|
-
|
|
164
|
-
tableBodyItems: PropTypes.array,
|
|
121
|
+
data: PropTypes.object,
|
|
165
122
|
|
|
166
123
|
tHeadColor: PropTypes.string,
|
|
167
124
|
tHeadFamily: PropTypes.string,
|
|
@@ -177,8 +134,7 @@ Table.propTypes = {
|
|
|
177
134
|
tBodyFontWeight: PropTypes.string,
|
|
178
135
|
tBodyFontFamily: PropTypes.string,
|
|
179
136
|
|
|
180
|
-
tBodyRowBorder: PropTypes.string
|
|
181
|
-
tBodyMarginTop: PropTypes.string
|
|
137
|
+
tBodyRowBorder: PropTypes.string
|
|
182
138
|
};
|
|
183
139
|
|
|
184
140
|
export default Table;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.sorting-arrows::after {
|
|
2
|
+
content: "▲";
|
|
3
|
+
position: absolute;
|
|
4
|
+
right: 0px;
|
|
5
|
+
font-size: 11px;
|
|
6
|
+
top: calc(50% - 12px);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.sorting-arrows::before {
|
|
10
|
+
content: "▼";
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 0px;
|
|
13
|
+
font-size: 11px;
|
|
14
|
+
bottom: calc(50% - 12px);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.td-span {
|
|
18
|
+
position: relative;
|
|
19
|
+
display: inline-block;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.td-span > svg {
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 0px;
|
|
26
|
+
left: 0px;
|
|
27
|
+
z-index: -1;
|
|
28
|
+
}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import Table from './index';
|
|
3
3
|
|
|
4
|
-
import { ReactComponent as
|
|
4
|
+
import { ReactComponent as ReactSVGPlus } from './../../assets/plus.svg';
|
|
5
|
+
import { ReactComponent as ReactSVGMinus } from './../../assets/minus.svg';
|
|
6
|
+
import { ReactComponent as ReactSVGDelete } from './../../assets/delete.svg';
|
|
7
|
+
import { ReactComponent as ReactSVGAttach } from './../../assets/attach.svg';
|
|
8
|
+
import { ReactComponent as ReactSVGArrowUp } from './../../assets/up-arrow.svg';
|
|
9
|
+
import { ReactComponent as ReactSVGArrowDown } from './../../assets/down-arrow.svg';
|
|
10
|
+
import { ReactComponent as ReactSVG } from './../../assets/table-settings-icon.svg';
|
|
5
11
|
|
|
6
12
|
export default {
|
|
7
13
|
component: Table,
|
|
@@ -9,66 +15,153 @@ export default {
|
|
|
9
15
|
};
|
|
10
16
|
|
|
11
17
|
const Template = (args) => {
|
|
12
|
-
const
|
|
18
|
+
const handleHeaderItemClick = (e) => {
|
|
19
|
+
console.log(e.target.innerText);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const handleBodyActionClick = (e) => {
|
|
23
|
+
console.log(e.target.id, 'e.target.id - - - - id');
|
|
24
|
+
console.log(e.target.getAttribute('type'), 'e.target.type - - - - type');
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const [tableDataInfo, setTableDataInfo] = useState({
|
|
13
28
|
header: [
|
|
14
29
|
{
|
|
15
30
|
type: 'show',
|
|
16
|
-
content: 'Հ/Հ'
|
|
31
|
+
content: 'Հ/Հ',
|
|
32
|
+
sortingArrows: true,
|
|
33
|
+
onClick: handleHeaderItemClick
|
|
17
34
|
},
|
|
18
35
|
{
|
|
19
36
|
type: 'show',
|
|
20
|
-
content: 'ՀՎՀՀ'
|
|
37
|
+
content: 'ՀՎՀՀ',
|
|
38
|
+
sortingArrows: true,
|
|
39
|
+
onClick: handleHeaderItemClick
|
|
21
40
|
},
|
|
22
41
|
{
|
|
23
42
|
type: 'show',
|
|
24
|
-
content: 'Վարչ․շրջան'
|
|
43
|
+
content: 'Վարչ․շրջան',
|
|
44
|
+
sortingArrows: true,
|
|
45
|
+
onClick: handleHeaderItemClick
|
|
25
46
|
},
|
|
26
47
|
{
|
|
27
48
|
type: 'show',
|
|
28
|
-
content: 'Վճար'
|
|
49
|
+
content: 'Վճար',
|
|
50
|
+
sortingArrows: true,
|
|
51
|
+
onClick: handleHeaderItemClick
|
|
29
52
|
},
|
|
30
53
|
{
|
|
31
54
|
type: 'show',
|
|
32
|
-
content: 'Ամսաթիվ'
|
|
55
|
+
content: 'Ամսաթիվ',
|
|
56
|
+
sortingArrows: true,
|
|
57
|
+
onClick: handleHeaderItemClick
|
|
33
58
|
},
|
|
34
59
|
{
|
|
35
60
|
type: 'show',
|
|
36
|
-
content: 'Մուտքի ամս․'
|
|
61
|
+
content: 'Մուտքի ամս․',
|
|
62
|
+
sortingArrows: true,
|
|
63
|
+
onClick: handleHeaderItemClick
|
|
37
64
|
},
|
|
38
65
|
{
|
|
39
66
|
type: 'show',
|
|
40
|
-
content: 'Հավելյալ ինֆորմացիա'
|
|
67
|
+
content: 'Հավելյալ ինֆորմացիա',
|
|
68
|
+
sortingArrows: true,
|
|
69
|
+
onClick: handleHeaderItemClick
|
|
41
70
|
},
|
|
42
71
|
{
|
|
43
72
|
type: 'show',
|
|
44
|
-
content: 'Ստեղծված'
|
|
73
|
+
content: 'Ստեղծված',
|
|
74
|
+
sortingArrows: true,
|
|
75
|
+
onClick: handleHeaderItemClick
|
|
45
76
|
},
|
|
46
77
|
{
|
|
47
78
|
type: 'show',
|
|
48
|
-
content: 'Գործողություն'
|
|
79
|
+
content: 'Գործողություն',
|
|
80
|
+
sortingArrows: true,
|
|
81
|
+
onClick: handleHeaderItemClick
|
|
49
82
|
},
|
|
50
83
|
{
|
|
51
84
|
type: 'show',
|
|
52
|
-
content: <ReactSVG
|
|
85
|
+
content: <ReactSVG />,
|
|
86
|
+
sortingArrows: false,
|
|
87
|
+
onClick: handleHeaderItemClick
|
|
53
88
|
}
|
|
54
89
|
],
|
|
55
90
|
body: [
|
|
56
|
-
|
|
91
|
+
{
|
|
92
|
+
hh: 19854,
|
|
93
|
+
hvhh: 10195524,
|
|
94
|
+
shrjan: 'Շենգավիթ',
|
|
95
|
+
pay: 7000,
|
|
96
|
+
startDate: '27.05.2022',
|
|
97
|
+
enterDate: '27.05.2022',
|
|
98
|
+
info: {
|
|
99
|
+
id: 19854,
|
|
100
|
+
openArrow: <ReactSVGArrowUp />,
|
|
101
|
+
closeArrow: <ReactSVGArrowDown />,
|
|
102
|
+
contentTitle: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
103
|
+
contentList: [
|
|
104
|
+
'Ակտիվ է => Այո',
|
|
105
|
+
'Lorem just => ipsum',
|
|
106
|
+
'Dolor sit => amet',
|
|
107
|
+
'text for => test',
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
create: '27.05.2022',
|
|
111
|
+
actions: [
|
|
112
|
+
{
|
|
113
|
+
id: 19854,
|
|
114
|
+
type: 'attach',
|
|
115
|
+
content: <ReactSVGAttach />,
|
|
116
|
+
onClick: handleBodyActionClick
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
id: 19954,
|
|
120
|
+
type: 'plus',
|
|
121
|
+
content: <ReactSVGPlus />,
|
|
122
|
+
onClick: handleBodyActionClick
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
hh: 19954,
|
|
128
|
+
hvhh: 14595524,
|
|
129
|
+
shrjan: 'Շենգավիթ',
|
|
130
|
+
pay: 7840,
|
|
131
|
+
startDate: '27.05.2022',
|
|
132
|
+
enterDate: '27.05.2022',
|
|
133
|
+
info: {
|
|
134
|
+
id: 19854,
|
|
135
|
+
openArrow: <ReactSVGArrowUp />,
|
|
136
|
+
closeArrow: <ReactSVGArrowDown />,
|
|
137
|
+
contentTitle: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
|
|
138
|
+
contentList: [
|
|
139
|
+
'Ակտիվ է => Այո',
|
|
140
|
+
'Lorem just => ipsum',
|
|
141
|
+
'Dolor sit => amet',
|
|
142
|
+
'text for => test',
|
|
143
|
+
]
|
|
144
|
+
},
|
|
145
|
+
create: '27.05.2022',
|
|
146
|
+
actions: [
|
|
147
|
+
{
|
|
148
|
+
id: 20101,
|
|
149
|
+
type: 'minus',
|
|
150
|
+
content: <ReactSVGMinus />,
|
|
151
|
+
onClick: handleBodyActionClick
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
id: 21554,
|
|
155
|
+
type: 'delete',
|
|
156
|
+
content: <ReactSVGDelete />,
|
|
157
|
+
onClick: handleBodyActionClick
|
|
158
|
+
}
|
|
159
|
+
]
|
|
160
|
+
}
|
|
57
161
|
]
|
|
58
|
-
};
|
|
162
|
+
});
|
|
59
163
|
|
|
60
|
-
|
|
61
|
-
{ id: 1, hh: 19854, hvhh: 10195524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: ['item', 'just'] },
|
|
62
|
-
{ id: 3, hh: 22641, hvhh: 12095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: 'text' },
|
|
63
|
-
{ id: 4, hh: 25005, hvhh: 15495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
64
|
-
{ id: 7, hh: 31576, hvhh: 16895524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
65
|
-
{ id: 45, hh: 32586, hvhh: 17495524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
66
|
-
{ id: 78, hh: 32754, hvhh: 20095524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
67
|
-
{ id: 99, hh: 41411, hvhh: 20595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
68
|
-
{ id: 541, hh: 44547, hvhh: 26595524, shrjan: 'Շենգավիթ', pay: 7000, date: '27.05.2022', enterDate: '27.05.2022', info: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ', create: '27.05.2022', actions: [] },
|
|
69
|
-
];
|
|
70
|
-
|
|
71
|
-
return <Table tableHeadItems={tableDataInfo.header} tableBodyItems={tableBodyItems} {...args} />;
|
|
164
|
+
return <Table data={tableDataInfo} {...args} />;
|
|
72
165
|
};
|
|
73
166
|
|
|
74
167
|
export const Default = Template.bind({});
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
|
|
3
|
+
import styles from './table.module.css';
|
|
4
|
+
|
|
5
|
+
const TD = ({
|
|
6
|
+
item,
|
|
7
|
+
tBodyColor,
|
|
8
|
+
borderRight,
|
|
9
|
+
tBodyPadding,
|
|
10
|
+
tBodyFontSize,
|
|
11
|
+
tBodyTextAlign,
|
|
12
|
+
tBodyFontFamily,
|
|
13
|
+
tBodyFontWeight
|
|
14
|
+
}) => {
|
|
15
|
+
const [opend, setOpend] = useState(false);
|
|
16
|
+
|
|
17
|
+
const handleOpenCloseSubTd = () => {
|
|
18
|
+
setOpend(!opend);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<td
|
|
23
|
+
style={{
|
|
24
|
+
color: tBodyColor,
|
|
25
|
+
verticalAlign: 'top',
|
|
26
|
+
padding: tBodyPadding,
|
|
27
|
+
fontSize: tBodyFontSize,
|
|
28
|
+
borderRight: borderRight,
|
|
29
|
+
textAlign: tBodyTextAlign,
|
|
30
|
+
fontFamily: tBodyFontFamily,
|
|
31
|
+
fontWeight: tBodyFontWeight,
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
{
|
|
35
|
+
Array.isArray(item)
|
|
36
|
+
? item.length > 0
|
|
37
|
+
? item.map((newItem, newIndex) => {
|
|
38
|
+
if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
|
|
39
|
+
return (
|
|
40
|
+
<span
|
|
41
|
+
style={{
|
|
42
|
+
width: '32px',
|
|
43
|
+
height: '32px',
|
|
44
|
+
marginRight: '10px'
|
|
45
|
+
}}
|
|
46
|
+
id={newItem.id}
|
|
47
|
+
type={newItem.type}
|
|
48
|
+
onClick={newItem.onClick}
|
|
49
|
+
className={styles['td-span']}
|
|
50
|
+
key={`${newItem}_${newIndex}`}
|
|
51
|
+
>
|
|
52
|
+
{ newItem.content }
|
|
53
|
+
</span>
|
|
54
|
+
)
|
|
55
|
+
} else {
|
|
56
|
+
return <span
|
|
57
|
+
key={`${newItem}_${newIndex}`}
|
|
58
|
+
>
|
|
59
|
+
{newItem}
|
|
60
|
+
</span>
|
|
61
|
+
}
|
|
62
|
+
})
|
|
63
|
+
: <></>
|
|
64
|
+
: item !== null && !Array.isArray(item) && typeof item === 'object'
|
|
65
|
+
? <div
|
|
66
|
+
style={{
|
|
67
|
+
display: 'flex',
|
|
68
|
+
alignItems: 'flex-start',
|
|
69
|
+
justifyContent: 'space-between'
|
|
70
|
+
}}
|
|
71
|
+
>
|
|
72
|
+
<div
|
|
73
|
+
id={item.id}
|
|
74
|
+
style={{
|
|
75
|
+
width: '21px',
|
|
76
|
+
height: '21px'
|
|
77
|
+
}}
|
|
78
|
+
onClick={handleOpenCloseSubTd}
|
|
79
|
+
className={styles['td-span']}
|
|
80
|
+
>
|
|
81
|
+
{ opend === false ? item.closeArrow : item.openArrow }
|
|
82
|
+
</div>
|
|
83
|
+
<div>
|
|
84
|
+
<p
|
|
85
|
+
style={{
|
|
86
|
+
margin: '0px'
|
|
87
|
+
}}
|
|
88
|
+
>{ item.contentTitle }</p>
|
|
89
|
+
<div
|
|
90
|
+
style={{
|
|
91
|
+
overflow: 'hidden',
|
|
92
|
+
marginTop: '10px',
|
|
93
|
+
height: opend === false ? '0px' : 'auto',
|
|
94
|
+
}}
|
|
95
|
+
>
|
|
96
|
+
{item.contentList.map((innerItem, innerIndex) => {
|
|
97
|
+
return <p
|
|
98
|
+
key={`${innerItem}_${innerIndex}`}
|
|
99
|
+
style={{
|
|
100
|
+
margin: '0px',
|
|
101
|
+
textAlign: 'left',
|
|
102
|
+
paddingLeft: '10px'
|
|
103
|
+
}}
|
|
104
|
+
>{innerItem}</p>
|
|
105
|
+
})}
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
: <span key={item}>{item}</span>
|
|
110
|
+
}
|
|
111
|
+
</td>
|
|
112
|
+
)
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
export default TD;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import styles from './table.module.css';
|
|
4
|
+
|
|
5
|
+
const TH = ({
|
|
6
|
+
item,
|
|
7
|
+
tHeadFamily,
|
|
8
|
+
tHeadPadding,
|
|
9
|
+
tHeadFontWeight,
|
|
10
|
+
borderTopLeftRadius,
|
|
11
|
+
borderTopRightRadius
|
|
12
|
+
}) => {
|
|
13
|
+
return (
|
|
14
|
+
<th
|
|
15
|
+
style={{
|
|
16
|
+
cursor: 'pointer',
|
|
17
|
+
position: 'relative',
|
|
18
|
+
padding: tHeadPadding,
|
|
19
|
+
fontFamily: tHeadFamily,
|
|
20
|
+
fontWeight: tHeadFontWeight,
|
|
21
|
+
borderTopLeftRadius: borderTopLeftRadius,
|
|
22
|
+
borderTopRightRadius: borderTopRightRadius
|
|
23
|
+
}}
|
|
24
|
+
onClick={item.onClick ? item.onClick : _ => _}
|
|
25
|
+
className={`${item.sortingArrows && styles['sorting-arrows']}`}
|
|
26
|
+
>
|
|
27
|
+
{item.type === 'show' ? item.content : ''}
|
|
28
|
+
</th>
|
|
29
|
+
)
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export default TH;
|
package/tui.config.js
CHANGED
|
@@ -330,10 +330,10 @@ module.exports = {
|
|
|
330
330
|
weight: 400, // for file place font weight
|
|
331
331
|
size: '12px', // for file font size
|
|
332
332
|
radius: '6px', // for file place border radius
|
|
333
|
-
width: '440px', // for file width
|
|
334
333
|
height: '200px', // for file choose place height
|
|
335
334
|
color: '#3C393E', // for file place color
|
|
336
335
|
upload: 'Բեռնել', // for file place text
|
|
336
|
+
maxWidth: '440px', // for file width
|
|
337
337
|
labelSize: '16px', // for file font size
|
|
338
338
|
border: '2px dashed', // for file choose place border
|
|
339
339
|
errorColor: '#ee0000', // for file error message color
|