aio-entitykit 1.0.0 → 2.0.0
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/d1.css +177 -45
- package/index.css +81 -0
- package/index.d.ts +8 -11
- package/index.js +131 -54
- package/package.json +1 -1
package/d1.css
CHANGED
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
--d1-gray-grad: linear-gradient(0deg, #343434, #727272);
|
|
10
10
|
--d1-cream: #ffe29d;
|
|
11
11
|
--d1-active: #ffe29d;
|
|
12
|
+
--d1-active-grad: linear-gradient(180deg, #f7e5b3, #9a7e2f);
|
|
12
13
|
--d1-cream-grad: linear-gradient(180deg, rgb(226 188 80), rgb(67 60 37));
|
|
13
|
-
--d1-active-grad: linear-gradient(0deg, #0c2e5e, #034eb9);
|
|
14
14
|
--d1-green: #04ff69;
|
|
15
|
-
--d1-green-grad: linear-gradient(0deg, #
|
|
16
|
-
--d1-orange: #
|
|
17
|
-
--d1-orange-grad: linear-gradient(0deg, #
|
|
15
|
+
--d1-green-grad: linear-gradient(0deg, #007414, #1dd11f);
|
|
16
|
+
--d1-orange: #ff8900;
|
|
17
|
+
--d1-orange-grad: linear-gradient(0deg, #7a3900, #ff8900);
|
|
18
18
|
--d1-white: #dfdfdf;
|
|
19
19
|
--d1-white-grad: linear-gradient(0deg, #888, #fff);
|
|
20
20
|
--d1-text-in-dark: #ddd;
|
|
@@ -34,13 +34,25 @@
|
|
|
34
34
|
--d1-text-medium: #acacac;
|
|
35
35
|
--d1-text-light: #e7e7e7;
|
|
36
36
|
--d1-text-dark: #383838;
|
|
37
|
-
--d1-bg-dark-
|
|
38
|
-
--d1-bg-dark-
|
|
39
|
-
--d1-bg-dark-
|
|
40
|
-
--d1-bg-dark-
|
|
41
|
-
--d1-bg-dark-
|
|
42
|
-
--d1-bg-dark-
|
|
43
|
-
--
|
|
37
|
+
--d1-bg-dark-05: rgba(0, 0, 0, 0.05);
|
|
38
|
+
--d1-bg-dark-10: rgba(0, 0, 0, 0.10);
|
|
39
|
+
--d1-bg-dark-15: rgba(0, 0, 0, 0.15);
|
|
40
|
+
--d1-bg-dark-20: rgba(0, 0, 0, 0.20);
|
|
41
|
+
--d1-bg-dark-25: rgba(0, 0, 0, 0.25);
|
|
42
|
+
--d1-bg-dark-30: rgba(0, 0, 0, 0.30);
|
|
43
|
+
--d1-bg-dark-35: rgba(0, 0, 0, 0.35);
|
|
44
|
+
--d1-bg-dark-40: rgba(0, 0, 0, 0.40);
|
|
45
|
+
--d1-bg-dark-45: rgba(0, 0, 0, 0.45);
|
|
46
|
+
--d1-bg-dark-50: rgba(0, 0, 0, 0.50);
|
|
47
|
+
--d1-bg-dark-55: rgba(0, 0, 0, 0.55);
|
|
48
|
+
--d1-bg-dark-60: rgba(0, 0, 0, 0.60);
|
|
49
|
+
--d1-bg-dark-65: rgba(0, 0, 0, 0.65);
|
|
50
|
+
--d1-bg-dark-70: rgba(0, 0, 0, 0.70);
|
|
51
|
+
--d1-bg-dark-75: rgba(0, 0, 0, 0.75);
|
|
52
|
+
--d1-bg-dark-80: rgba(0, 0, 0, 0.80);
|
|
53
|
+
--d1-bg-dark-85: rgba(0, 0, 0, 0.85);
|
|
54
|
+
--d1-bg-dark-90: rgba(0, 0, 0, 0.90);
|
|
55
|
+
--d1-bg-dark-95: rgba(0, 0, 0, 0.95);
|
|
44
56
|
--d1-border-radius: 6px;
|
|
45
57
|
}
|
|
46
58
|
|
|
@@ -49,35 +61,75 @@
|
|
|
49
61
|
color: var(--d1-text-in-dark);
|
|
50
62
|
}
|
|
51
63
|
|
|
52
|
-
.d1 .d1-bg-dark-
|
|
64
|
+
.d1 .d1-bg-dark- {
|
|
53
65
|
background: var(--d1-bg-dark-1)
|
|
54
66
|
}
|
|
55
67
|
|
|
56
|
-
.d1 .d1-bg-dark-
|
|
57
|
-
background: var(--d1-bg-dark-
|
|
68
|
+
.d1 .d1-bg-dark-05 {
|
|
69
|
+
background: var(--d1-bg-dark-05)
|
|
58
70
|
}
|
|
59
71
|
|
|
60
|
-
.d1 .d1-bg-dark-
|
|
61
|
-
background: var(--d1-bg-dark-
|
|
72
|
+
.d1 .d1-bg-dark-10 {
|
|
73
|
+
background: var(--d1-bg-dark-10)
|
|
62
74
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
background: var(--d1-bg-dark-4)
|
|
75
|
+
.d1 .d1-bg-dark-15 {
|
|
76
|
+
background: var(--d1-bg-dark-15)
|
|
66
77
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
background: var(--d1-bg-dark-5)
|
|
78
|
+
.d1 .d1-bg-dark-20 {
|
|
79
|
+
background: var(--d1-bg-dark-20)
|
|
70
80
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
81
|
+
.d1 .d1-bg-dark-25 {
|
|
82
|
+
background: var(--d1-bg-dark-25)
|
|
83
|
+
}
|
|
84
|
+
.d1 .d1-bg-dark-30 {
|
|
85
|
+
background: var(--d1-bg-dark-30)
|
|
86
|
+
}
|
|
87
|
+
.d1 .d1-bg-dark-35 {
|
|
88
|
+
background: var(--d1-bg-dark-35)
|
|
89
|
+
}
|
|
90
|
+
.d1 .d1-bg-dark-40 {
|
|
91
|
+
background: var(--d1-bg-dark-40)
|
|
92
|
+
}
|
|
93
|
+
.d1 .d1-bg-dark-45 {
|
|
94
|
+
background: var(--d1-bg-dark-45)
|
|
95
|
+
}
|
|
96
|
+
.d1 .d1-bg-dark-50 {
|
|
97
|
+
background: var(--d1-bg-dark-50)
|
|
98
|
+
}
|
|
99
|
+
.d1 .d1-bg-dark-55 {
|
|
100
|
+
background: var(--d1-bg-dark-55)
|
|
101
|
+
}
|
|
102
|
+
.d1 .d1-bg-dark-60 {
|
|
103
|
+
background: var(--d1-bg-dark-60)
|
|
104
|
+
}
|
|
105
|
+
.d1 .d1-bg-dark-65 {
|
|
106
|
+
background: var(--d1-bg-dark-65)
|
|
107
|
+
}
|
|
108
|
+
.d1 .d1-bg-dark-70 {
|
|
109
|
+
background: var(--d1-bg-dark-70)
|
|
110
|
+
}
|
|
111
|
+
.d1 .d1-bg-dark-75 {
|
|
112
|
+
background: var(--d1-bg-dark-75)
|
|
113
|
+
}
|
|
114
|
+
.d1 .d1-bg-dark-80 {
|
|
115
|
+
background: var(--d1-bg-dark-80)
|
|
116
|
+
}
|
|
117
|
+
.d1 .d1-bg-dark-85 {
|
|
118
|
+
background: var(--d1-bg-dark-85)
|
|
119
|
+
}
|
|
120
|
+
.d1 .d1-bg-dark-90 {
|
|
121
|
+
background: var(--d1-bg-dark-90)
|
|
74
122
|
}
|
|
123
|
+
.d1 .d1-bg-dark-95 {
|
|
124
|
+
background: var(--d1-bg-dark-95)
|
|
125
|
+
}
|
|
126
|
+
|
|
75
127
|
.d1 .d1-border-medium {
|
|
76
|
-
border: 1px solid var(--d1-border-medium)
|
|
128
|
+
border: 1px solid var(--d1-border-medium) !important;
|
|
77
129
|
}
|
|
78
130
|
|
|
79
131
|
.d1 .d1-border-light {
|
|
80
|
-
border: 1px solid var(--d1-border-light)
|
|
132
|
+
border: 1px solid var(--d1-border-light) !important;
|
|
81
133
|
}
|
|
82
134
|
|
|
83
135
|
.d1 .d1-border-dark {
|
|
@@ -139,10 +191,7 @@
|
|
|
139
191
|
}
|
|
140
192
|
|
|
141
193
|
.d1 .ai-form .aio-input {
|
|
142
|
-
border: none !important;
|
|
143
194
|
color: var(--d1-text-in-dark) !important;
|
|
144
|
-
background: var(--d1-black) !important;
|
|
145
|
-
box-shadow: var(--shadow-dep) !important;
|
|
146
195
|
border-radius: var(--d1-border-radius) !important;
|
|
147
196
|
}
|
|
148
197
|
|
|
@@ -184,7 +233,9 @@
|
|
|
184
233
|
box-shadow: var(--shadow-dep);
|
|
185
234
|
margin: 4px 0;
|
|
186
235
|
}
|
|
187
|
-
|
|
236
|
+
.d1 .ai-form-panel{
|
|
237
|
+
border:1px solid var(--d1-border-medium);
|
|
238
|
+
}
|
|
188
239
|
|
|
189
240
|
.d1 .aio-input-switch-groove {
|
|
190
241
|
background: var(--d1-black) !important;
|
|
@@ -201,8 +252,8 @@
|
|
|
201
252
|
|
|
202
253
|
}
|
|
203
254
|
|
|
204
|
-
.d1 .aio-input-switch-
|
|
205
|
-
background: var(--active-
|
|
255
|
+
.d1 .aio-input-switch-button.active {
|
|
256
|
+
background: var(--active-grad);
|
|
206
257
|
}
|
|
207
258
|
|
|
208
259
|
.d1 .aio-input-range {
|
|
@@ -225,7 +276,7 @@
|
|
|
225
276
|
}
|
|
226
277
|
|
|
227
278
|
.d1 .ai-range-point {
|
|
228
|
-
background: var(--active-
|
|
279
|
+
background: var(--d1-active-grad);
|
|
229
280
|
box-shadow: var(--thumb-shadow);
|
|
230
281
|
color: var(--d1-text-in-dark);
|
|
231
282
|
}
|
|
@@ -338,7 +389,7 @@
|
|
|
338
389
|
|
|
339
390
|
.d1 .d1-bg-green-grad {
|
|
340
391
|
background: var(--d1-green-grad) !important;
|
|
341
|
-
box-shadow: inset 0px 1px 0px 0px #
|
|
392
|
+
box-shadow: inset 0px 1px 0px 0px #00e82c;
|
|
342
393
|
color: #000 !important;
|
|
343
394
|
}
|
|
344
395
|
|
|
@@ -413,20 +464,14 @@
|
|
|
413
464
|
}
|
|
414
465
|
|
|
415
466
|
.d1 .ai-indent-line {
|
|
416
|
-
stroke: var(--d1-border-
|
|
467
|
+
stroke: var(--d1-border-light);
|
|
417
468
|
}
|
|
418
469
|
|
|
419
|
-
|
|
420
|
-
background: var(--d1-gray-grad);
|
|
421
|
-
border-radius: 24px;
|
|
422
|
-
width: 2em;
|
|
423
|
-
height: 2em;
|
|
424
|
-
box-shadow: var(--d1-shadow-1);
|
|
425
|
-
}
|
|
470
|
+
|
|
426
471
|
|
|
427
472
|
.d1 .aio-input-date-theme-active {
|
|
428
473
|
background: var(--d1-active);
|
|
429
|
-
color: #
|
|
474
|
+
color: #666;
|
|
430
475
|
}
|
|
431
476
|
|
|
432
477
|
.d1 .aio-input-date-cell.today {
|
|
@@ -602,6 +647,17 @@
|
|
|
602
647
|
color: #fff;
|
|
603
648
|
border: none !important;
|
|
604
649
|
}
|
|
650
|
+
.d1 .d1-panel{
|
|
651
|
+
display: flex;
|
|
652
|
+
flex-direction: column;
|
|
653
|
+
gap:1em;
|
|
654
|
+
border: 1px solid var(--d1-border-medium);
|
|
655
|
+
padding:0.4em;
|
|
656
|
+
padding-top:1.2em;
|
|
657
|
+
border-radius:0.4em;
|
|
658
|
+
width:100%;
|
|
659
|
+
position: relative;
|
|
660
|
+
}
|
|
605
661
|
|
|
606
662
|
.d1 .d1-panel-label {
|
|
607
663
|
font-weight: bold;
|
|
@@ -645,7 +701,6 @@
|
|
|
645
701
|
|
|
646
702
|
.d1 .aio-input-tag {
|
|
647
703
|
background: var(--d1-gray);
|
|
648
|
-
color: #fff;
|
|
649
704
|
border: none !important;
|
|
650
705
|
}
|
|
651
706
|
|
|
@@ -779,4 +834,81 @@
|
|
|
779
834
|
.ai-form-wizard-step-button:disabled,.ai-form-wizard-submit-button:disabled{
|
|
780
835
|
cursor:pointer;
|
|
781
836
|
opacity:0.5;
|
|
837
|
+
}
|
|
838
|
+
.d1 .entity-card{
|
|
839
|
+
background: var(--d1-active);
|
|
840
|
+
padding:0.5em;
|
|
841
|
+
display:flex;
|
|
842
|
+
flex-direction: column;
|
|
843
|
+
gap:0.5em;
|
|
844
|
+
border-radius:0.8em;
|
|
845
|
+
color:#333;
|
|
846
|
+
}
|
|
847
|
+
.d1 .entity-card-header{
|
|
848
|
+
display: flex;
|
|
849
|
+
align-items: center;
|
|
850
|
+
}
|
|
851
|
+
.d1 .entity-card-toggle-icon{
|
|
852
|
+
display: flex;
|
|
853
|
+
align-items: center;
|
|
854
|
+
justify-content: center;
|
|
855
|
+
width:24px;
|
|
856
|
+
height:30px;
|
|
857
|
+
}
|
|
858
|
+
.d1 .entity-card-title{
|
|
859
|
+
cursor: pointer;
|
|
860
|
+
flex:1;
|
|
861
|
+
font-weight:bold;
|
|
862
|
+
}
|
|
863
|
+
.d1 .entity-row{
|
|
864
|
+
display: flex;
|
|
865
|
+
flex-direction: column;
|
|
866
|
+
padding: 0.2em;
|
|
867
|
+
justify-content: center;
|
|
868
|
+
gap:0.4em;
|
|
869
|
+
}
|
|
870
|
+
.d1 .entity-row-header{
|
|
871
|
+
display: flex;
|
|
872
|
+
align-items: center;
|
|
873
|
+
}
|
|
874
|
+
.d1 .entity-table-deselect-all{
|
|
875
|
+
height:30px;
|
|
876
|
+
width: 30px;
|
|
877
|
+
display:flex;
|
|
878
|
+
align-items: center;
|
|
879
|
+
justify-content: center;
|
|
880
|
+
}
|
|
881
|
+
.d1 .entity-table-selected-options{
|
|
882
|
+
display: flex;
|
|
883
|
+
align-items: center;
|
|
884
|
+
justify-content: center;
|
|
885
|
+
}
|
|
886
|
+
.d1 .entity-table-today{
|
|
887
|
+
font-size:0.7em;
|
|
888
|
+
width:100%;
|
|
889
|
+
display: flex;
|
|
890
|
+
justify-content: center;
|
|
891
|
+
}
|
|
892
|
+
.d1 .entity-table .aio-table{
|
|
893
|
+
flex:1;
|
|
894
|
+
overflow: hidden;
|
|
895
|
+
}
|
|
896
|
+
.d1 .entity-table-toolbar{
|
|
897
|
+
display: flex;
|
|
898
|
+
align-items: center;
|
|
899
|
+
gap:3em;
|
|
900
|
+
font-size:0.8em;
|
|
901
|
+
}
|
|
902
|
+
.d1 .date-box{
|
|
903
|
+
display:flex;
|
|
904
|
+
align-items: center;
|
|
905
|
+
justify-content: center;
|
|
906
|
+
border-radius:1em;
|
|
907
|
+
cursor:pointer;
|
|
908
|
+
font-size:0.8em;
|
|
909
|
+
width:48px;
|
|
910
|
+
height:48px;
|
|
911
|
+
text-align: center;
|
|
912
|
+
border:1px solid var(--d1-border-medium);
|
|
913
|
+
padding:0;
|
|
782
914
|
}
|
package/index.css
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
.date-filter{
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0.5em;
|
|
5
|
+
padding: 0 0.5em;
|
|
6
|
+
padding-bottom:0.5em;
|
|
7
|
+
}
|
|
8
|
+
.date-filter-toolbar{
|
|
9
|
+
display:flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
align-items: center;
|
|
12
|
+
}
|
|
13
|
+
.date-filter-toolbar-buttons{
|
|
14
|
+
display:flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
gap: 0.5em;
|
|
17
|
+
}
|
|
18
|
+
.date-filter-input{
|
|
19
|
+
display:flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
border-radius: 0.4em;
|
|
23
|
+
cursor:pointer;
|
|
24
|
+
font-size: 1em;
|
|
25
|
+
width: 48px;
|
|
26
|
+
height: 48px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
border:none;
|
|
29
|
+
}
|
|
30
|
+
.date-filter-result{
|
|
31
|
+
border:none;
|
|
32
|
+
border-radius: 0.4em;
|
|
33
|
+
padding:0 1em;
|
|
34
|
+
height:2.4em;
|
|
35
|
+
font-size:1em;
|
|
36
|
+
font-weight: bold;
|
|
37
|
+
background:linear-gradient(180deg, #f7e5b3, #9a7e2f);
|
|
38
|
+
}
|
|
39
|
+
.time-range{
|
|
40
|
+
display:flex;
|
|
41
|
+
flex-direction: row;
|
|
42
|
+
align-items: center;
|
|
43
|
+
border-radius: 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
border: 1px solid #444;
|
|
46
|
+
}
|
|
47
|
+
.time-range-splitter{
|
|
48
|
+
width: 1px;
|
|
49
|
+
background-color: #444;
|
|
50
|
+
height: 100%;
|
|
51
|
+
}
|
|
52
|
+
.time-range-input{
|
|
53
|
+
border:none;
|
|
54
|
+
font-size: 1em;
|
|
55
|
+
border-radius: 0;
|
|
56
|
+
background: none;
|
|
57
|
+
}
|
|
58
|
+
.card-row{
|
|
59
|
+
display: flex;
|
|
60
|
+
padding: 0.5em 0.75em;
|
|
61
|
+
margin: 0.25em 0;
|
|
62
|
+
border-radius: 0.4em;
|
|
63
|
+
align-items: center;
|
|
64
|
+
background:rgba(0,0,0,0.2);
|
|
65
|
+
}
|
|
66
|
+
.entity-row-title{
|
|
67
|
+
flex:1;
|
|
68
|
+
font-size:0.8em;
|
|
69
|
+
font-weight:bold;
|
|
70
|
+
}
|
|
71
|
+
.entity-table-selected{
|
|
72
|
+
padding:0 1em;
|
|
73
|
+
height:2.4em;
|
|
74
|
+
display:flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
color:orange;
|
|
77
|
+
}
|
|
78
|
+
.entity-card-title{
|
|
79
|
+
display:flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
}
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { type FC, type ReactNode } from "react";
|
|
2
|
-
import { type I_table } from 'aio-table';
|
|
3
|
-
import type { AIOCordova } from 'aio-cordova';
|
|
4
|
-
import
|
|
2
|
+
import { type I_table } from './../aio-table';
|
|
3
|
+
import type { AIOCordova } from './../aio-cordova';
|
|
4
|
+
import { useEntity } from './../aio-entity';
|
|
5
|
+
import './index.css';
|
|
5
6
|
type I_option = {
|
|
6
7
|
text: string;
|
|
7
8
|
title?: string;
|
|
@@ -22,16 +23,17 @@ type I_EntityTable<T> = {
|
|
|
22
23
|
}[];
|
|
23
24
|
header?: () => ReactNode;
|
|
24
25
|
footer?: () => ReactNode;
|
|
25
|
-
entity: ReturnType<typeof useEntity<T
|
|
26
|
+
entity: ReturnType<typeof useEntity<T>>;
|
|
26
27
|
table: Partial<I_table<T>>;
|
|
27
28
|
attrs?: any;
|
|
28
29
|
moveTo?: (moveFrom: T, moveTo: T) => boolean;
|
|
29
30
|
getCardContent: (row: T, parent: T | false, type: 'root' | 'leaf' | 'node') => ReactNode;
|
|
30
31
|
getCardOptions?: (row: T, parent: T | false) => I_option[];
|
|
32
|
+
getSelectedOptions?: (selected: T[], parent?: T) => I_option[];
|
|
31
33
|
getRootOptions?: () => I_option[];
|
|
32
34
|
getCardTitle: (row: T) => string;
|
|
33
35
|
archive?: boolean;
|
|
34
|
-
|
|
36
|
+
filteredData?: T[];
|
|
35
37
|
};
|
|
36
38
|
export declare const EntityTable: <T>(props: I_EntityTable<T>) => import("react/jsx-runtime").JSX.Element;
|
|
37
39
|
export declare const Card: <T>({ row }: {
|
|
@@ -56,11 +58,6 @@ export declare const TimeRange: FC<{
|
|
|
56
58
|
toDate?: number;
|
|
57
59
|
}) => void;
|
|
58
60
|
}>;
|
|
59
|
-
export declare const TimeInput: FC<{
|
|
60
|
-
value?: number;
|
|
61
|
-
onChange: (date: number) => void;
|
|
62
|
-
disabled?: boolean;
|
|
63
|
-
}>;
|
|
64
61
|
export declare const CardRow: FC<{
|
|
65
62
|
label: string;
|
|
66
63
|
value: ReactNode;
|
|
@@ -82,10 +79,10 @@ export declare const CardBox: FC<{
|
|
|
82
79
|
onClick?: () => void;
|
|
83
80
|
type: number;
|
|
84
81
|
isPrice?: boolean;
|
|
82
|
+
thin?: boolean;
|
|
85
83
|
}>;
|
|
86
84
|
export declare const Panel: FC<{
|
|
87
85
|
label?: ReactNode;
|
|
88
86
|
content: ReactNode;
|
|
89
87
|
}>;
|
|
90
|
-
export declare const dateStringToDateNumber: (dateNumber: number) => any;
|
|
91
88
|
export {};
|
package/index.js
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { createContext, useContext, useEffect, useState } from "react";
|
|
2
12
|
import { AIDate, AISelect, AITime, AITree } from 'aio-input';
|
|
3
|
-
import { createContext, useContext, useState } from "react";
|
|
4
13
|
import AIOTable from 'aio-table';
|
|
5
|
-
import { AddToAttrs, GetSvg, SplitNumber, useSide } from 'aio-utils';
|
|
14
|
+
import { AddToAttrs, classListToString, GetSvg, SplitNumber, useSide } from 'aio-utils';
|
|
6
15
|
import AIODate from 'aio-date';
|
|
7
16
|
import Icon from '@mdi/react';
|
|
8
|
-
import { mdiDownload, mdiListBox, mdiUpload } from "@mdi/js";
|
|
17
|
+
import { mdiCheckboxMarked, mdiClose, mdiDownload, mdiListBox, mdiUpload } from "@mdi/js";
|
|
18
|
+
import './index.css';
|
|
9
19
|
const Context = createContext({});
|
|
10
20
|
const Provider = ({ children, value }) => {
|
|
11
21
|
return _jsx(Context.Provider, { value: value, children: children });
|
|
@@ -13,14 +23,57 @@ const Provider = ({ children, value }) => {
|
|
|
13
23
|
const useProvider = () => useContext(Context);
|
|
14
24
|
export const EntityTable = (props) => {
|
|
15
25
|
const DATE = new AIODate();
|
|
16
|
-
const { table, moveTo, entity, popup, archive } = props;
|
|
26
|
+
const { table, moveTo, entity, popup, archive, filteredData } = props;
|
|
17
27
|
const [showArchive, setShowArchive] = useState(false);
|
|
18
|
-
const { getId,
|
|
19
|
-
const [
|
|
28
|
+
const { getId, data } = entity;
|
|
29
|
+
const [selected, setSelected] = useState({});
|
|
30
|
+
const select = (row) => {
|
|
31
|
+
if (!props.getSelectedOptions) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
const rowId = entity.getId(row);
|
|
35
|
+
const keys = Object.keys(selected);
|
|
36
|
+
const firstSelected = keys.length ? selected[keys[0]] : undefined;
|
|
37
|
+
if (firstSelected) {
|
|
38
|
+
const firstSelectedParent = entity.getParentByRowId({ rowId: entity.getId(firstSelected), rows: entity.data });
|
|
39
|
+
const firstSelectedParentId = firstSelectedParent ? entity.getId(firstSelectedParent) : undefined;
|
|
40
|
+
const rowParent = entity.getParentByRowId({ rowId: entity.getId(row), rows: entity.data });
|
|
41
|
+
const rowParentId = rowParent ? entity.getId(rowParent) : undefined;
|
|
42
|
+
if (firstSelectedParentId !== rowParentId) {
|
|
43
|
+
setSelected({ [rowId]: row });
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
if (selected[rowId]) {
|
|
48
|
+
setSelected((prev) => {
|
|
49
|
+
const newSelected = {};
|
|
50
|
+
for (let prop in prev) {
|
|
51
|
+
if (rowId.toString() !== prop.toString()) {
|
|
52
|
+
newSelected[prop] = prev[prop];
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return newSelected;
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
setSelected((prev) => (Object.assign(Object.assign({}, prev), { [rowId]: row })));
|
|
60
|
+
}
|
|
61
|
+
};
|
|
20
62
|
const canMoveTo = (row) => {
|
|
21
|
-
|
|
63
|
+
const rowId = entity.getId(row);
|
|
64
|
+
if (selected[rowId.toString()]) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
if (!moveTo) {
|
|
68
|
+
return false;
|
|
69
|
+
}
|
|
70
|
+
const keys = Object.keys(selected);
|
|
71
|
+
if (!keys.length) {
|
|
72
|
+
return false;
|
|
73
|
+
}
|
|
74
|
+
return true;
|
|
22
75
|
};
|
|
23
|
-
const getOptionDetails = (options) => {
|
|
76
|
+
const getOptionDetails = (options, deselect) => {
|
|
24
77
|
return options.map((o) => {
|
|
25
78
|
return {
|
|
26
79
|
text: o.text, show: o.show,
|
|
@@ -31,6 +84,9 @@ export const EntityTable = (props) => {
|
|
|
31
84
|
if (o.onClick) {
|
|
32
85
|
o.onClick();
|
|
33
86
|
}
|
|
87
|
+
if (deselect) {
|
|
88
|
+
setTimeout(() => setSelected({}), 0);
|
|
89
|
+
}
|
|
34
90
|
}
|
|
35
91
|
};
|
|
36
92
|
});
|
|
@@ -53,12 +109,25 @@ export const EntityTable = (props) => {
|
|
|
53
109
|
return [
|
|
54
110
|
...res,
|
|
55
111
|
{
|
|
56
|
-
show: canMoveTo(row), text: 'انتقال به اینجا', onClick: () => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
112
|
+
show: canMoveTo(row), text: 'انتقال به اینجا', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
113
|
+
const keys = Object.keys(selected);
|
|
114
|
+
const toRow = row;
|
|
115
|
+
const toId = getId(toRow);
|
|
116
|
+
if (!moveTo || !keys.length) {
|
|
117
|
+
return;
|
|
60
118
|
}
|
|
61
|
-
|
|
119
|
+
const { parents } = entity.getRowAndParentsById({ rowId: toId });
|
|
120
|
+
for (let i = 0; i < parents.length; i++) {
|
|
121
|
+
const id = getId(parents[i]).toString();
|
|
122
|
+
if (selected[id]) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
const rows = keys.map((key) => selected[key]).filter((fromRow) => !!moveTo(fromRow, toRow));
|
|
127
|
+
const fromIds = rows.map((o) => getId(o));
|
|
128
|
+
yield entity.moveTo(fromIds, toId);
|
|
129
|
+
setSelected({});
|
|
130
|
+
})
|
|
62
131
|
},
|
|
63
132
|
{ show: !!archive && !row.archive, text: 'انتقال به آرشیو', onClick: () => { if (!!archive) {
|
|
64
133
|
entity.edit(Object.assign(Object.assign({}, row), { archive: true }));
|
|
@@ -66,9 +135,6 @@ export const EntityTable = (props) => {
|
|
|
66
135
|
{ show: !!archive && !!row.archive, text: 'خروج از آرشیو', onClick: () => { if (!!archive) {
|
|
67
136
|
entity.edit(Object.assign(Object.assign({}, row), { archive: false }));
|
|
68
137
|
} } },
|
|
69
|
-
{ show: !!moveTo, text: 'ذخیره برای انتقال', onClick: () => { if (moveTo) {
|
|
70
|
-
setRowForMove(row);
|
|
71
|
-
} } },
|
|
72
138
|
{ text: 'حذف', onClick: () => entity.remove(getId(row)) }
|
|
73
139
|
];
|
|
74
140
|
};
|
|
@@ -77,14 +143,37 @@ export const EntityTable = (props) => {
|
|
|
77
143
|
option: {
|
|
78
144
|
before: (o) => _jsx(Icon, { path: { reports: mdiListBox, export: mdiDownload, import: mdiUpload }[o.value], size: 1 })
|
|
79
145
|
},
|
|
80
|
-
onChange: (
|
|
146
|
+
onChange: () => {
|
|
81
147
|
side.close();
|
|
82
148
|
}
|
|
83
149
|
});
|
|
84
|
-
const rows =
|
|
150
|
+
const rows = filteredData ? filteredData : data;
|
|
85
151
|
const attrs = AddToAttrs(props.attrs, { className: 'entity-table' });
|
|
86
|
-
return (_jsx(Provider, { value: { getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "
|
|
87
|
-
_jsx("div", { className: "border-0 ml-2 px-2 py-2 rounded-full", onClick: () => side.open(), children: _jsx(Icon, { path: mdiListBox, size: 1 }) }), !!props.header && props.header()] }), _jsx(AIOTable, Object.assign({}, table, { value: rows,
|
|
152
|
+
return (_jsx(Provider, { value: { selected, setSelected, getRootOptions, rootProps: props, getOptions, entity, getOptionDetails, showArchive, setShowArchive, select }, children: _jsxs("div", Object.assign({}, attrs, { children: [_jsx("div", { className: "entity-table-today", style: { background: 'rgba(0,0,0,0.2)' }, children: DATE.getDateByPattern(DATE.getToday(true), 'امروز {weekDay} {day} {monthString} {year}') }), _jsxs("div", { className: "flex flex-row", children: [!!props.sideOptions && !!props.sideOptions.length &&
|
|
153
|
+
_jsx("div", { className: "border-0 ml-2 px-2 py-2 rounded-full", onClick: () => side.open(), children: _jsx(Icon, { path: mdiListBox, size: 1 }) }), !!props.header && props.header()] }), _jsx(Selected, {}), _jsx(AIOTable, Object.assign({}, table, { value: rows, headerAttrs: { style: { display: 'none' } }, rowTemplate: ({ row, rowIndex }) => _jsx(Card, { row: row, index: rowIndex }), toolbar: () => _jsx(TableToolbar, {}) })), _jsx("div", { className: "mb-2" }), !!props.footer && props.footer(), side.render()] })) }));
|
|
154
|
+
};
|
|
155
|
+
const Selected = () => {
|
|
156
|
+
const { selected, rootProps, getOptionDetails, entity, setSelected } = useProvider();
|
|
157
|
+
const keys = Object.keys(selected);
|
|
158
|
+
const [options, setOptions] = useState([]);
|
|
159
|
+
function getOptions() {
|
|
160
|
+
const { getSelectedOptions } = rootProps;
|
|
161
|
+
if (!getSelectedOptions || !keys.length) {
|
|
162
|
+
return [];
|
|
163
|
+
}
|
|
164
|
+
const parent = keys.length ? entity.getParentByRowId({ rowId: entity.getId(selected[keys[0]]), rows: entity.data }) : undefined;
|
|
165
|
+
const list = [];
|
|
166
|
+
for (let prop in selected) {
|
|
167
|
+
list.push(selected[prop]);
|
|
168
|
+
}
|
|
169
|
+
const options = getSelectedOptions(list, parent);
|
|
170
|
+
return getOptionDetails(options, true);
|
|
171
|
+
}
|
|
172
|
+
useEffect(() => { setOptions(getOptions); }, [selected]);
|
|
173
|
+
if (!options.length) {
|
|
174
|
+
return null;
|
|
175
|
+
}
|
|
176
|
+
return (_jsxs("div", { className: "entity-table-selected", children: [_jsx("div", { className: "entity-table-deselect-all", onClick: () => setSelected({}), children: _jsx(Icon, { path: mdiClose, size: 0.8 }) }), _jsx("div", { className: "msf", children: `${keys.length} مورد انتخاب شده` }), _jsx("div", { style: { flex: 1 } }), _jsx(AISelect, { rtl: true, options: options, text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, justify: true, className: 'entity-table-selected-options', style: { background: 'orange', color: '#000', border: 'none', height: 30, width: 30, padding: 0, } })] }));
|
|
88
177
|
};
|
|
89
178
|
const TableToolbar = () => {
|
|
90
179
|
const { rootProps, getOptionDetails, getRootOptions } = useProvider();
|
|
@@ -98,38 +187,36 @@ const TableToolbar = () => {
|
|
|
98
187
|
}
|
|
99
188
|
const options = getRootOptions();
|
|
100
189
|
const res = getOptionDetails(options);
|
|
101
|
-
return (_jsxs("div", { className: "
|
|
190
|
+
return (_jsxs("div", { className: "entity-table-toolbar", children: [!!res.length &&
|
|
102
191
|
_jsx(AISelect, { rtl: true, options: res, text: new GetSvg().getIcon('mdiPlusThick', .8), caret: false, justify: true, className: 'd1-bg-cream flex flex-row items-center justify-center', style: { background: 'none', border: 'none', height: 30, width: 30, padding: 0, } }), node] }));
|
|
103
192
|
};
|
|
104
193
|
export const Card = ({ row }) => {
|
|
105
|
-
const { rootProps, getOptions, entity, showArchive } = useProvider();
|
|
106
|
-
const
|
|
194
|
+
const { rootProps, getOptions, entity, showArchive, select, selected } = useProvider();
|
|
195
|
+
const rowId = entity.getId(row);
|
|
196
|
+
const isSelected = selected[rowId];
|
|
107
197
|
const { getCardContent, getCardTitle } = rootProps;
|
|
108
198
|
const [open, setOpen] = useState(false);
|
|
109
199
|
const childs = entity.getChilds(row);
|
|
110
|
-
return (_jsxs("div", { className: "
|
|
111
|
-
_jsx(AITree, { rtl: true,
|
|
200
|
+
return (_jsxs("div", { className: "entity-card", children: [_jsxs("div", { className: "entity-card-header", children: [_jsx("div", { className: "entity-card-toggle-icon", onClick: () => setOpen(!open), children: new GetSvg().getIcon(open ? 'mdiChevronDown' : 'mdiChevronLeft', .8) }), _jsxs("div", { className: "entity-card-title", style: { flex: 1, color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), getCardTitle(row)] }), !!getOptions && _jsx(CardOptions, { row: row, parent: false, isRoot: true })] }), getCardContent(row, false, 'root'), !!childs && !!open &&
|
|
201
|
+
_jsx(AITree, { rtl: true, autoHeight: true, indent: 24, value: childs, option: {
|
|
112
202
|
childs: (o) => entity.getChilds(o),
|
|
113
203
|
text: (row, { parentOptions }) => {
|
|
204
|
+
const rowId = entity.getId(row);
|
|
205
|
+
const isSelected = selected[rowId];
|
|
114
206
|
const childs = entity.getChilds(row);
|
|
115
207
|
const parentOption = parentOptions.length ? parentOptions[parentOptions.length - 1] : undefined;
|
|
116
208
|
const parent = parentOption ? parentOption.optionOrg : false;
|
|
117
|
-
|
|
118
|
-
return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex flex-row gap-1 flex-1 font-bold items-center", children: [_jsx("div", { className: "flex-1", children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, 'node')] }));
|
|
119
|
-
}
|
|
120
|
-
return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-row font-bold items-center", children: [_jsx("div", { className: "flex-1 flex flex-row items-center h-fit", children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, 'leaf')] }));
|
|
209
|
+
return (_jsxs("div", { className: classListToString(["entity-row", isSelected ? 'selected' : undefined]), children: [_jsxs("div", { className: "entity-row-header", children: [!!isSelected && _jsx(Icon, { path: mdiCheckboxMarked, size: 0.8, color: 'orange' }), _jsx("div", { className: 'entity-row-title', style: { color: isSelected ? 'orange' : undefined }, onClick: () => select(row), children: getCardTitle(row) }), !!getOptions && _jsx(CardOptions, { row: row, parent: parent })] }), getCardContent(row, parent, childs ? 'node' : 'leaf')] }));
|
|
121
210
|
},
|
|
122
211
|
value: (o) => entity.getId(o),
|
|
123
212
|
show: (o) => showArchive ? true : !o.archive,
|
|
124
|
-
className: () => {
|
|
125
|
-
|
|
126
|
-
},
|
|
127
|
-
style: () => ({ fontSize: '0.7em', borderBottom: '2px dashed #333' })
|
|
213
|
+
className: () => `${'d1-bg-dark-gray'} !rounded-md`,
|
|
214
|
+
style: () => ({ borderBottom: '2px dashed #333' })
|
|
128
215
|
} })] }));
|
|
129
216
|
};
|
|
130
217
|
const CardOptions = ({ row, parent, isRoot }) => {
|
|
131
218
|
const { getOptions } = useProvider();
|
|
132
|
-
return (_jsx(AISelect, { text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, options: getOptions(row, parent, !!isRoot), justify: true, className: `${!isRoot ? 'd1-bg-cream' : 'd1-bg-gray'}`, style: { background: 'none', border: 'none', height: 30, width: 42 } }));
|
|
219
|
+
return (_jsx(AISelect, { text: new GetSvg().getIcon('mdiDotsHorizontal', .8), caret: false, options: getOptions(row, parent, !!isRoot), justify: true, className: `${!isRoot ? 'd1-bg-cream' : 'd1-bg-gray'}`, style: { background: 'none', border: 'none', height: 30, width: 42, fontSize: '0.7em' }, popover: { modalAttrs: { style: { fontSize: '0.8em' } } } }));
|
|
133
220
|
};
|
|
134
221
|
export const DateFilter = ({ result, fromDate, toDate, onChange }) => {
|
|
135
222
|
const DATE = new AIODate();
|
|
@@ -139,8 +226,7 @@ export const DateFilter = ({ result, fromDate, toDate, onChange }) => {
|
|
|
139
226
|
const toDate = DATE.getTime([year, month, day, 23, 59]);
|
|
140
227
|
onChange({ fromDate, toDate });
|
|
141
228
|
};
|
|
142
|
-
|
|
143
|
-
return (_jsxs("div", { className: "flex flex-col gap-2 p-2", children: [_jsxs("div", { className: "flex flex-row items-center", children: [result !== undefined && _jsx("button", { className: buttonCls, children: result }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(AIDate, { className: 'flex items-center justify-center rounded-lg! cursor-pointer text-sm w-[48px] h-[48px] text-center border-none!', style: { background: 'none' }, caret: false, justify: true, jalali: true, calendarClose: true, text: _jsx(CalendarIcon, {}), dateUnit: 'day', dateType: 'dateArray', onChange: (v) => { changeDateByDay(v); }, popover: { position: 'center' } }), _jsx(DateBox, { unit: 'day', className: 'd1-bg-blue-grad', onChange: onChange }), _jsx(DateBox, { unit: 'month', className: 'd1-bg-green-grad', onChange: onChange }), _jsx(DateBox, { unit: 'year', className: 'd1-bg-red-grad', onChange: onChange })] })] }), _jsx(TimeRange, { fromDate: fromDate, toDate: toDate, onChange: ({ fromDate, toDate }) => { onChange({ fromDate, toDate }); } })] }));
|
|
229
|
+
return (_jsxs("div", { className: "date-filter", children: [_jsxs("div", { className: "date-filter-toolbar", children: [result !== undefined && _jsx("button", { className: 'date-filter-result', children: result }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { className: "date-filter-toolbar-buttons", children: [_jsx(AIDate, { className: 'date-filter-input', style: { background: 'none' }, caret: false, justify: true, jalali: true, calendarClose: true, text: _jsx(CalendarIcon, {}), dateUnit: 'day', dateType: 'dateArray', onChange: (v) => { changeDateByDay(v); }, popover: { position: 'center' } }), _jsx(DateBox, { unit: 'day', className: 'd1-bg-blue-grad', onChange: onChange }), _jsx(DateBox, { unit: 'month', className: 'd1-bg-green-grad', onChange: onChange }), _jsx(DateBox, { unit: 'year', className: 'd1-bg-red-grad', onChange: onChange })] })] }), _jsx(TimeRange, { fromDate: fromDate, toDate: toDate, onChange: ({ fromDate, toDate }) => { onChange({ fromDate, toDate }); } })] }));
|
|
144
230
|
};
|
|
145
231
|
const DateBox = ({ unit, onChange }) => {
|
|
146
232
|
const DATE = new AIODate();
|
|
@@ -162,12 +248,12 @@ const DateBox = ({ unit, onChange }) => {
|
|
|
162
248
|
onChange({ fromDate, toDate });
|
|
163
249
|
};
|
|
164
250
|
if (unit === 'month') {
|
|
165
|
-
return (_jsx(AISelect, { className: `
|
|
251
|
+
return (_jsx(AISelect, { className: `date-box`, style: { color: '#ddd', background: 'none' }, caret: false, text: dic[unit], popover: { modalAttrs: { style: { width: '100vw' } } }, options: [
|
|
166
252
|
{ text: 'ماه جاری', onClick: () => changeDateByUnit('month') },
|
|
167
253
|
...DATE.getMonths(true).map((o, i) => ({ text: o, onClick: () => changeDateByMonth(i + 1) }))
|
|
168
254
|
] }));
|
|
169
255
|
}
|
|
170
|
-
return (_jsx("div", { className: `
|
|
256
|
+
return (_jsx("div", { className: `date-box`, style: { color: '#ddd' }, onClick: () => {
|
|
171
257
|
if (unit === 'day') {
|
|
172
258
|
changeDateByUnit('day');
|
|
173
259
|
}
|
|
@@ -190,17 +276,12 @@ export const TimeRange = ({ fromDate, toDate, onChange }) => {
|
|
|
190
276
|
};
|
|
191
277
|
const renderTime = (time, field) => {
|
|
192
278
|
const text = getText(time, field);
|
|
193
|
-
return (_jsx(AITime, { dateType: "dateNumber", className: '
|
|
279
|
+
return (_jsx(AITime, { dateType: "dateNumber", className: 'time-range-input', style: { background: 'none' }, value: time, text: text, jalali: true, caret: false, onChange: (v) => onChange({ fromDate, toDate, [field]: v }), deSelect: true }));
|
|
194
280
|
};
|
|
195
|
-
return (_jsxs("div", { className: "
|
|
196
|
-
};
|
|
197
|
-
export const TimeInput = ({ value, onChange, disabled }) => {
|
|
198
|
-
const DATE = new AIODate();
|
|
199
|
-
const str = (_jsx("div", { className: "text-md flex flex-row items-center gap-2 justify-center", children: !!value && _jsx(_Fragment, { children: DATE.getDateByPattern(value, '{weekDay} {day} {monthString} {year}', true) }) }));
|
|
200
|
-
return (_jsxs("div", { className: "flex flex-col gap-4 w-full px-4", children: [_jsx(AITime, { jalali: true, disabled: disabled, dateType: 'dateNumber', className: 'd1-in-shadow', value: value || DATE.getTime(DATE.getToday(true)), onChange: onChange, justify: true, timeUnit: { year: true, month: true, day: true } }), str] }));
|
|
281
|
+
return (_jsxs("div", { className: "time-range", children: [_jsx("div", { style: { flex: 1 }, children: renderTime(fromDate, 'fromDate') }), _jsx("div", { className: "time-range-splitter" }), _jsx("div", { style: { flex: 1 }, children: renderTime(toDate, 'toDate') })] }));
|
|
201
282
|
};
|
|
202
283
|
export const CardRow = ({ label, value, color, onClick }) => {
|
|
203
|
-
return (_jsxs("div", { className:
|
|
284
|
+
return (_jsxs("div", { className: 'card-row', onClick: () => { if (onClick) {
|
|
204
285
|
onClick();
|
|
205
286
|
} }, children: [_jsx("div", { className: "text-sm", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm flex flex-row items-center justify-center", style: { color }, children: value })] }));
|
|
206
287
|
};
|
|
@@ -214,8 +295,8 @@ export const CardRows = ({ rows, placeholder = 'موردی وجود ندارد'
|
|
|
214
295
|
return _jsx(CardRow, { label: r[0], value: value, onClick: onClick }, i);
|
|
215
296
|
})] }));
|
|
216
297
|
};
|
|
217
|
-
export const CardBox = ({ type, label, value, color, onClick, isPrice }) => {
|
|
218
|
-
let cls = `flex flex-col flex-1 items-center rounded-lg py-2`;
|
|
298
|
+
export const CardBox = ({ thin, type, label, value, color, onClick, isPrice }) => {
|
|
299
|
+
let cls = `flex flex-col flex-1 items-center rounded-lg${!thin ? ' py-2' : ''}`;
|
|
219
300
|
if (type === 0) {
|
|
220
301
|
cls += ' d1-bg-cream';
|
|
221
302
|
}
|
|
@@ -232,9 +313,5 @@ export const CardBox = ({ type, label, value, color, onClick, isPrice }) => {
|
|
|
232
313
|
} }, children: [_jsx("div", { className: "text-xs", children: label }), _jsx("div", { className: "flex-1" }), _jsx("div", { className: "font-bold text-sm", style: { color }, children: isPrice ? SplitNumber(value) : value })] }));
|
|
233
314
|
};
|
|
234
315
|
export const Panel = ({ label, content }) => {
|
|
235
|
-
|
|
236
|
-
return (_jsxs("div", { className: panelCls, children: [!!label && _jsx("div", { className: "d1-panel-label d1-panel-label-online-rtl", children: label }), content] }));
|
|
237
|
-
};
|
|
238
|
-
export const dateStringToDateNumber = (dateNumber) => {
|
|
239
|
-
return new AIODate().getDateByPattern(dateNumber, '{year}/{month}/{day}', true);
|
|
316
|
+
return (_jsxs("div", { className: 'd1-panel', children: [!!label && _jsx("div", { className: "d1-panel-label d1-panel-label-online-rtl", children: label }), content] }));
|
|
240
317
|
};
|