@apexcura/ui-components 0.0.12-Beta5 → 0.0.12-Beta51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +465 -0
- package/dist/index.d.mts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +151 -62
- package/dist/index.mjs +158 -69
- package/package.json +4 -1
- package/postcss.config.js +6 -0
- package/tailwind.config.js +10 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,465 @@
|
|
|
1
|
+
/* src/Styles/index.css */
|
|
2
|
+
*,
|
|
3
|
+
::before,
|
|
4
|
+
::after {
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
border-width: 0;
|
|
7
|
+
border-style: solid;
|
|
8
|
+
border-color: #e5e7eb;
|
|
9
|
+
}
|
|
10
|
+
::before,
|
|
11
|
+
::after {
|
|
12
|
+
--tw-content: "";
|
|
13
|
+
}
|
|
14
|
+
html,
|
|
15
|
+
:host {
|
|
16
|
+
line-height: 1.5;
|
|
17
|
+
-webkit-text-size-adjust: 100%;
|
|
18
|
+
-moz-tab-size: 4;
|
|
19
|
+
-o-tab-size: 4;
|
|
20
|
+
tab-size: 4;
|
|
21
|
+
font-family:
|
|
22
|
+
ui-sans-serif,
|
|
23
|
+
system-ui,
|
|
24
|
+
sans-serif,
|
|
25
|
+
"Apple Color Emoji",
|
|
26
|
+
"Segoe UI Emoji",
|
|
27
|
+
"Segoe UI Symbol",
|
|
28
|
+
"Noto Color Emoji";
|
|
29
|
+
font-feature-settings: normal;
|
|
30
|
+
font-variation-settings: normal;
|
|
31
|
+
-webkit-tap-highlight-color: transparent;
|
|
32
|
+
}
|
|
33
|
+
body {
|
|
34
|
+
margin: 0;
|
|
35
|
+
line-height: inherit;
|
|
36
|
+
}
|
|
37
|
+
hr {
|
|
38
|
+
height: 0;
|
|
39
|
+
color: inherit;
|
|
40
|
+
border-top-width: 1px;
|
|
41
|
+
}
|
|
42
|
+
abbr:where([title]) {
|
|
43
|
+
-webkit-text-decoration: underline dotted;
|
|
44
|
+
text-decoration: underline dotted;
|
|
45
|
+
}
|
|
46
|
+
h1,
|
|
47
|
+
h2,
|
|
48
|
+
h3,
|
|
49
|
+
h4,
|
|
50
|
+
h5,
|
|
51
|
+
h6 {
|
|
52
|
+
font-size: inherit;
|
|
53
|
+
font-weight: inherit;
|
|
54
|
+
}
|
|
55
|
+
a {
|
|
56
|
+
color: inherit;
|
|
57
|
+
text-decoration: inherit;
|
|
58
|
+
}
|
|
59
|
+
b,
|
|
60
|
+
strong {
|
|
61
|
+
font-weight: bolder;
|
|
62
|
+
}
|
|
63
|
+
code,
|
|
64
|
+
kbd,
|
|
65
|
+
samp,
|
|
66
|
+
pre {
|
|
67
|
+
font-family:
|
|
68
|
+
ui-monospace,
|
|
69
|
+
SFMono-Regular,
|
|
70
|
+
Menlo,
|
|
71
|
+
Monaco,
|
|
72
|
+
Consolas,
|
|
73
|
+
"Liberation Mono",
|
|
74
|
+
"Courier New",
|
|
75
|
+
monospace;
|
|
76
|
+
font-feature-settings: normal;
|
|
77
|
+
font-variation-settings: normal;
|
|
78
|
+
font-size: 1em;
|
|
79
|
+
}
|
|
80
|
+
small {
|
|
81
|
+
font-size: 80%;
|
|
82
|
+
}
|
|
83
|
+
sub,
|
|
84
|
+
sup {
|
|
85
|
+
font-size: 75%;
|
|
86
|
+
line-height: 0;
|
|
87
|
+
position: relative;
|
|
88
|
+
vertical-align: baseline;
|
|
89
|
+
}
|
|
90
|
+
sub {
|
|
91
|
+
bottom: -0.25em;
|
|
92
|
+
}
|
|
93
|
+
sup {
|
|
94
|
+
top: -0.5em;
|
|
95
|
+
}
|
|
96
|
+
table {
|
|
97
|
+
text-indent: 0;
|
|
98
|
+
border-color: inherit;
|
|
99
|
+
border-collapse: collapse;
|
|
100
|
+
}
|
|
101
|
+
button,
|
|
102
|
+
input,
|
|
103
|
+
optgroup,
|
|
104
|
+
select,
|
|
105
|
+
textarea {
|
|
106
|
+
font-family: inherit;
|
|
107
|
+
font-feature-settings: inherit;
|
|
108
|
+
font-variation-settings: inherit;
|
|
109
|
+
font-size: 100%;
|
|
110
|
+
font-weight: inherit;
|
|
111
|
+
line-height: inherit;
|
|
112
|
+
letter-spacing: inherit;
|
|
113
|
+
color: inherit;
|
|
114
|
+
margin: 0;
|
|
115
|
+
padding: 0;
|
|
116
|
+
}
|
|
117
|
+
button,
|
|
118
|
+
select {
|
|
119
|
+
text-transform: none;
|
|
120
|
+
}
|
|
121
|
+
button,
|
|
122
|
+
input:where([type=button]),
|
|
123
|
+
input:where([type=reset]),
|
|
124
|
+
input:where([type=submit]) {
|
|
125
|
+
-webkit-appearance: button;
|
|
126
|
+
background-color: transparent;
|
|
127
|
+
background-image: none;
|
|
128
|
+
}
|
|
129
|
+
:-moz-focusring {
|
|
130
|
+
outline: auto;
|
|
131
|
+
}
|
|
132
|
+
:-moz-ui-invalid {
|
|
133
|
+
box-shadow: none;
|
|
134
|
+
}
|
|
135
|
+
progress {
|
|
136
|
+
vertical-align: baseline;
|
|
137
|
+
}
|
|
138
|
+
::-webkit-inner-spin-button,
|
|
139
|
+
::-webkit-outer-spin-button {
|
|
140
|
+
height: auto;
|
|
141
|
+
}
|
|
142
|
+
[type=search] {
|
|
143
|
+
-webkit-appearance: textfield;
|
|
144
|
+
outline-offset: -2px;
|
|
145
|
+
}
|
|
146
|
+
::-webkit-search-decoration {
|
|
147
|
+
-webkit-appearance: none;
|
|
148
|
+
}
|
|
149
|
+
::-webkit-file-upload-button {
|
|
150
|
+
-webkit-appearance: button;
|
|
151
|
+
font: inherit;
|
|
152
|
+
}
|
|
153
|
+
summary {
|
|
154
|
+
display: list-item;
|
|
155
|
+
}
|
|
156
|
+
blockquote,
|
|
157
|
+
dl,
|
|
158
|
+
dd,
|
|
159
|
+
h1,
|
|
160
|
+
h2,
|
|
161
|
+
h3,
|
|
162
|
+
h4,
|
|
163
|
+
h5,
|
|
164
|
+
h6,
|
|
165
|
+
hr,
|
|
166
|
+
figure,
|
|
167
|
+
p,
|
|
168
|
+
pre {
|
|
169
|
+
margin: 0;
|
|
170
|
+
}
|
|
171
|
+
fieldset {
|
|
172
|
+
margin: 0;
|
|
173
|
+
padding: 0;
|
|
174
|
+
}
|
|
175
|
+
legend {
|
|
176
|
+
padding: 0;
|
|
177
|
+
}
|
|
178
|
+
ol,
|
|
179
|
+
ul,
|
|
180
|
+
menu {
|
|
181
|
+
list-style: none;
|
|
182
|
+
margin: 0;
|
|
183
|
+
padding: 0;
|
|
184
|
+
}
|
|
185
|
+
dialog {
|
|
186
|
+
padding: 0;
|
|
187
|
+
}
|
|
188
|
+
textarea {
|
|
189
|
+
resize: vertical;
|
|
190
|
+
}
|
|
191
|
+
input::-moz-placeholder,
|
|
192
|
+
textarea::-moz-placeholder {
|
|
193
|
+
opacity: 1;
|
|
194
|
+
color: #9ca3af;
|
|
195
|
+
}
|
|
196
|
+
input::placeholder,
|
|
197
|
+
textarea::placeholder {
|
|
198
|
+
opacity: 1;
|
|
199
|
+
color: #9ca3af;
|
|
200
|
+
}
|
|
201
|
+
button,
|
|
202
|
+
[role=button] {
|
|
203
|
+
cursor: pointer;
|
|
204
|
+
}
|
|
205
|
+
:disabled {
|
|
206
|
+
cursor: default;
|
|
207
|
+
}
|
|
208
|
+
img,
|
|
209
|
+
svg,
|
|
210
|
+
video,
|
|
211
|
+
canvas,
|
|
212
|
+
audio,
|
|
213
|
+
iframe,
|
|
214
|
+
embed,
|
|
215
|
+
object {
|
|
216
|
+
display: block;
|
|
217
|
+
vertical-align: middle;
|
|
218
|
+
}
|
|
219
|
+
img,
|
|
220
|
+
video {
|
|
221
|
+
max-width: 100%;
|
|
222
|
+
height: auto;
|
|
223
|
+
}
|
|
224
|
+
[hidden] {
|
|
225
|
+
display: none;
|
|
226
|
+
}
|
|
227
|
+
*,
|
|
228
|
+
::before,
|
|
229
|
+
::after {
|
|
230
|
+
--tw-border-spacing-x: 0;
|
|
231
|
+
--tw-border-spacing-y: 0;
|
|
232
|
+
--tw-translate-x: 0;
|
|
233
|
+
--tw-translate-y: 0;
|
|
234
|
+
--tw-rotate: 0;
|
|
235
|
+
--tw-skew-x: 0;
|
|
236
|
+
--tw-skew-y: 0;
|
|
237
|
+
--tw-scale-x: 1;
|
|
238
|
+
--tw-scale-y: 1;
|
|
239
|
+
--tw-pan-x: ;
|
|
240
|
+
--tw-pan-y: ;
|
|
241
|
+
--tw-pinch-zoom: ;
|
|
242
|
+
--tw-scroll-snap-strictness: proximity;
|
|
243
|
+
--tw-gradient-from-position: ;
|
|
244
|
+
--tw-gradient-via-position: ;
|
|
245
|
+
--tw-gradient-to-position: ;
|
|
246
|
+
--tw-ordinal: ;
|
|
247
|
+
--tw-slashed-zero: ;
|
|
248
|
+
--tw-numeric-figure: ;
|
|
249
|
+
--tw-numeric-spacing: ;
|
|
250
|
+
--tw-numeric-fraction: ;
|
|
251
|
+
--tw-ring-inset: ;
|
|
252
|
+
--tw-ring-offset-width: 0px;
|
|
253
|
+
--tw-ring-offset-color: #fff;
|
|
254
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
255
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
256
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
257
|
+
--tw-shadow: 0 0 #0000;
|
|
258
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
259
|
+
--tw-blur: ;
|
|
260
|
+
--tw-brightness: ;
|
|
261
|
+
--tw-contrast: ;
|
|
262
|
+
--tw-grayscale: ;
|
|
263
|
+
--tw-hue-rotate: ;
|
|
264
|
+
--tw-invert: ;
|
|
265
|
+
--tw-saturate: ;
|
|
266
|
+
--tw-sepia: ;
|
|
267
|
+
--tw-drop-shadow: ;
|
|
268
|
+
--tw-backdrop-blur: ;
|
|
269
|
+
--tw-backdrop-brightness: ;
|
|
270
|
+
--tw-backdrop-contrast: ;
|
|
271
|
+
--tw-backdrop-grayscale: ;
|
|
272
|
+
--tw-backdrop-hue-rotate: ;
|
|
273
|
+
--tw-backdrop-invert: ;
|
|
274
|
+
--tw-backdrop-opacity: ;
|
|
275
|
+
--tw-backdrop-saturate: ;
|
|
276
|
+
--tw-backdrop-sepia: ;
|
|
277
|
+
--tw-contain-size: ;
|
|
278
|
+
--tw-contain-layout: ;
|
|
279
|
+
--tw-contain-paint: ;
|
|
280
|
+
--tw-contain-style: ;
|
|
281
|
+
}
|
|
282
|
+
::backdrop {
|
|
283
|
+
--tw-border-spacing-x: 0;
|
|
284
|
+
--tw-border-spacing-y: 0;
|
|
285
|
+
--tw-translate-x: 0;
|
|
286
|
+
--tw-translate-y: 0;
|
|
287
|
+
--tw-rotate: 0;
|
|
288
|
+
--tw-skew-x: 0;
|
|
289
|
+
--tw-skew-y: 0;
|
|
290
|
+
--tw-scale-x: 1;
|
|
291
|
+
--tw-scale-y: 1;
|
|
292
|
+
--tw-pan-x: ;
|
|
293
|
+
--tw-pan-y: ;
|
|
294
|
+
--tw-pinch-zoom: ;
|
|
295
|
+
--tw-scroll-snap-strictness: proximity;
|
|
296
|
+
--tw-gradient-from-position: ;
|
|
297
|
+
--tw-gradient-via-position: ;
|
|
298
|
+
--tw-gradient-to-position: ;
|
|
299
|
+
--tw-ordinal: ;
|
|
300
|
+
--tw-slashed-zero: ;
|
|
301
|
+
--tw-numeric-figure: ;
|
|
302
|
+
--tw-numeric-spacing: ;
|
|
303
|
+
--tw-numeric-fraction: ;
|
|
304
|
+
--tw-ring-inset: ;
|
|
305
|
+
--tw-ring-offset-width: 0px;
|
|
306
|
+
--tw-ring-offset-color: #fff;
|
|
307
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
308
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
309
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
310
|
+
--tw-shadow: 0 0 #0000;
|
|
311
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
312
|
+
--tw-blur: ;
|
|
313
|
+
--tw-brightness: ;
|
|
314
|
+
--tw-contrast: ;
|
|
315
|
+
--tw-grayscale: ;
|
|
316
|
+
--tw-hue-rotate: ;
|
|
317
|
+
--tw-invert: ;
|
|
318
|
+
--tw-saturate: ;
|
|
319
|
+
--tw-sepia: ;
|
|
320
|
+
--tw-drop-shadow: ;
|
|
321
|
+
--tw-backdrop-blur: ;
|
|
322
|
+
--tw-backdrop-brightness: ;
|
|
323
|
+
--tw-backdrop-contrast: ;
|
|
324
|
+
--tw-backdrop-grayscale: ;
|
|
325
|
+
--tw-backdrop-hue-rotate: ;
|
|
326
|
+
--tw-backdrop-invert: ;
|
|
327
|
+
--tw-backdrop-opacity: ;
|
|
328
|
+
--tw-backdrop-saturate: ;
|
|
329
|
+
--tw-backdrop-sepia: ;
|
|
330
|
+
--tw-contain-size: ;
|
|
331
|
+
--tw-contain-layout: ;
|
|
332
|
+
--tw-contain-paint: ;
|
|
333
|
+
--tw-contain-style: ;
|
|
334
|
+
}
|
|
335
|
+
.visible {
|
|
336
|
+
visibility: visible;
|
|
337
|
+
}
|
|
338
|
+
.m-\[5px\] {
|
|
339
|
+
margin: 5px;
|
|
340
|
+
}
|
|
341
|
+
.table {
|
|
342
|
+
display: table;
|
|
343
|
+
}
|
|
344
|
+
.h-\[40px\] {
|
|
345
|
+
height: 40px;
|
|
346
|
+
}
|
|
347
|
+
.w-\[126px\] {
|
|
348
|
+
width: 126px;
|
|
349
|
+
}
|
|
350
|
+
.rounded-\[8px\] {
|
|
351
|
+
border-radius: 8px;
|
|
352
|
+
}
|
|
353
|
+
.rounded-full {
|
|
354
|
+
border-radius: 9999px;
|
|
355
|
+
}
|
|
356
|
+
.\!border {
|
|
357
|
+
border-width: 1px !important;
|
|
358
|
+
}
|
|
359
|
+
.border {
|
|
360
|
+
border-width: 1px;
|
|
361
|
+
}
|
|
362
|
+
.border-none {
|
|
363
|
+
border-style: none;
|
|
364
|
+
}
|
|
365
|
+
.\!border-\[\#B8A4DE\] {
|
|
366
|
+
--tw-border-opacity: 1 !important;
|
|
367
|
+
border-color: rgb(184 164 222 / var(--tw-border-opacity)) !important;
|
|
368
|
+
}
|
|
369
|
+
.border-\[\#919191\] {
|
|
370
|
+
--tw-border-opacity: 1;
|
|
371
|
+
border-color: rgb(145 145 145 / var(--tw-border-opacity));
|
|
372
|
+
}
|
|
373
|
+
.\!bg-\[\#E2D6F8\] {
|
|
374
|
+
--tw-bg-opacity: 1 !important;
|
|
375
|
+
background-color: rgb(226 214 248 / var(--tw-bg-opacity)) !important;
|
|
376
|
+
}
|
|
377
|
+
.bg-\[\#F2F2F2\] {
|
|
378
|
+
--tw-bg-opacity: 1;
|
|
379
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
380
|
+
}
|
|
381
|
+
.bg-purple-800 {
|
|
382
|
+
--tw-bg-opacity: 1;
|
|
383
|
+
background-color: rgb(107 33 168 / var(--tw-bg-opacity));
|
|
384
|
+
}
|
|
385
|
+
.p-\[6px_6px\] {
|
|
386
|
+
padding: 6px 6px;
|
|
387
|
+
}
|
|
388
|
+
.text-center {
|
|
389
|
+
text-align: center;
|
|
390
|
+
}
|
|
391
|
+
.italic {
|
|
392
|
+
font-style: italic;
|
|
393
|
+
}
|
|
394
|
+
.\!text-black {
|
|
395
|
+
--tw-text-opacity: 1 !important;
|
|
396
|
+
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
|
|
397
|
+
}
|
|
398
|
+
.text-white {
|
|
399
|
+
--tw-text-opacity: 1;
|
|
400
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
401
|
+
}
|
|
402
|
+
.shadow-\[0px_0px_1px_1px_\#919191\] {
|
|
403
|
+
--tw-shadow: 0px 0px 1px 1px #919191;
|
|
404
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
405
|
+
box-shadow:
|
|
406
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
407
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
408
|
+
var(--tw-shadow);
|
|
409
|
+
}
|
|
410
|
+
.shadow-\[0px_0px_1px_1px_\#B8A4DE\] {
|
|
411
|
+
--tw-shadow: 0px 0px 1px 1px #B8A4DE;
|
|
412
|
+
--tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
|
|
413
|
+
box-shadow:
|
|
414
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
415
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
416
|
+
var(--tw-shadow);
|
|
417
|
+
}
|
|
418
|
+
.shadow-lg {
|
|
419
|
+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
420
|
+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
|
421
|
+
box-shadow:
|
|
422
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
|
423
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
|
424
|
+
var(--tw-shadow);
|
|
425
|
+
}
|
|
426
|
+
.filter {
|
|
427
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
428
|
+
}
|
|
429
|
+
.submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
|
|
430
|
+
color: #472D7A;
|
|
431
|
+
background-color: white;
|
|
432
|
+
border: solid 1px #472D7A;
|
|
433
|
+
}
|
|
434
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
|
|
435
|
+
border: solid 1px #919191;
|
|
436
|
+
width: 275px;
|
|
437
|
+
height: 16px;
|
|
438
|
+
padding: 16px;
|
|
439
|
+
gap: 10px;
|
|
440
|
+
}
|
|
441
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
|
|
442
|
+
border: solid 1px #919191;
|
|
443
|
+
}
|
|
444
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
|
|
445
|
+
border: solid 1px #919191;
|
|
446
|
+
}
|
|
447
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
|
|
448
|
+
border: solid 1px #919191;
|
|
449
|
+
}
|
|
450
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
|
451
|
+
display: none;
|
|
452
|
+
}
|
|
453
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
|
|
454
|
+
display: none;
|
|
455
|
+
}
|
|
456
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
|
|
457
|
+
width: 0;
|
|
458
|
+
}
|
|
459
|
+
:where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
|
|
460
|
+
border-inline-start: 1px solid rgb(145 145 145);
|
|
461
|
+
}
|
|
462
|
+
.hover\:bg-\[\#F2F2F2\]:hover {
|
|
463
|
+
--tw-bg-opacity: 1;
|
|
464
|
+
background-color: rgb(242 242 242 / var(--tw-bg-opacity));
|
|
465
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type ElementType = {
|
|
4
|
+
selectedStyle: boolean;
|
|
5
|
+
style: boolean;
|
|
6
|
+
className: string | undefined;
|
|
4
7
|
placeholder?: string;
|
|
5
8
|
addonBefore?: React.ReactNode;
|
|
6
9
|
defaultValue?: string;
|
|
7
10
|
disabled?: boolean;
|
|
8
11
|
prefix?: React.ReactNode;
|
|
9
12
|
type?: string;
|
|
10
|
-
value?: string | number | boolean | any[];
|
|
13
|
+
value?: string | number | boolean | any[] | null;
|
|
11
14
|
status?: "error" | "warning";
|
|
12
15
|
styles?: React.CSSProperties;
|
|
13
|
-
classNames?: string;
|
|
14
16
|
variant?: "outlined" | "borderless" | "filled";
|
|
15
17
|
label?: string;
|
|
16
18
|
name?: string;
|
|
17
19
|
suffix?: React.ReactNode;
|
|
18
20
|
maxLength?: number;
|
|
19
21
|
fieldNames?: any[];
|
|
22
|
+
options?: any[];
|
|
20
23
|
onChange?: (value: string | number | boolean | any[]) => void;
|
|
21
24
|
dropDownOptions?: any[];
|
|
22
25
|
id?: number;
|
|
23
26
|
thead?: any[];
|
|
24
27
|
tbody?: any[];
|
|
25
28
|
variable_data?: any[];
|
|
29
|
+
optionType?: string;
|
|
30
|
+
selectedClassName?: string;
|
|
31
|
+
action?: React.MouseEventHandler<HTMLElement> | string;
|
|
26
32
|
};
|
|
27
33
|
|
|
28
34
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
73
|
|
|
68
74
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
75
|
|
|
70
|
-
declare const ButtonElement: () => React$1.JSX.Element;
|
|
76
|
+
declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
|
|
71
77
|
|
|
72
78
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
79
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React$1 from 'react';
|
|
2
2
|
|
|
3
3
|
type ElementType = {
|
|
4
|
+
selectedStyle: boolean;
|
|
5
|
+
style: boolean;
|
|
6
|
+
className: string | undefined;
|
|
4
7
|
placeholder?: string;
|
|
5
8
|
addonBefore?: React.ReactNode;
|
|
6
9
|
defaultValue?: string;
|
|
7
10
|
disabled?: boolean;
|
|
8
11
|
prefix?: React.ReactNode;
|
|
9
12
|
type?: string;
|
|
10
|
-
value?: string | number | boolean | any[];
|
|
13
|
+
value?: string | number | boolean | any[] | null;
|
|
11
14
|
status?: "error" | "warning";
|
|
12
15
|
styles?: React.CSSProperties;
|
|
13
|
-
classNames?: string;
|
|
14
16
|
variant?: "outlined" | "borderless" | "filled";
|
|
15
17
|
label?: string;
|
|
16
18
|
name?: string;
|
|
17
19
|
suffix?: React.ReactNode;
|
|
18
20
|
maxLength?: number;
|
|
19
21
|
fieldNames?: any[];
|
|
22
|
+
options?: any[];
|
|
20
23
|
onChange?: (value: string | number | boolean | any[]) => void;
|
|
21
24
|
dropDownOptions?: any[];
|
|
22
25
|
id?: number;
|
|
23
26
|
thead?: any[];
|
|
24
27
|
tbody?: any[];
|
|
25
28
|
variable_data?: any[];
|
|
29
|
+
optionType?: string;
|
|
30
|
+
selectedClassName?: string;
|
|
31
|
+
action?: React.MouseEventHandler<HTMLElement> | string;
|
|
26
32
|
};
|
|
27
33
|
|
|
28
34
|
interface ElementExecuterProps$3 extends ElementType {
|
|
@@ -67,7 +73,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
|
67
73
|
|
|
68
74
|
declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
|
|
69
75
|
|
|
70
|
-
declare const ButtonElement: () => React$1.JSX.Element;
|
|
76
|
+
declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
|
|
71
77
|
|
|
72
78
|
declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
|
|
73
79
|
|
package/dist/index.js
CHANGED
|
@@ -62,7 +62,7 @@ var TextElement = (props) => {
|
|
|
62
62
|
type: props.type,
|
|
63
63
|
status: props.status,
|
|
64
64
|
style: props.styles,
|
|
65
|
-
className: props.
|
|
65
|
+
className: props.className,
|
|
66
66
|
variant: props.variant,
|
|
67
67
|
name: props.name,
|
|
68
68
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -103,7 +103,7 @@ var NumberElement = (props) => {
|
|
|
103
103
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
104
104
|
props.onChange(newValue);
|
|
105
105
|
};
|
|
106
|
-
return /* @__PURE__ */ import_react3.default.createElement(
|
|
106
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
107
107
|
import_antd3.Input,
|
|
108
108
|
{
|
|
109
109
|
placeholder: props.placeholder,
|
|
@@ -115,13 +115,12 @@ var NumberElement = (props) => {
|
|
|
115
115
|
prefix: props.prefix,
|
|
116
116
|
type: props.type,
|
|
117
117
|
status: props.status,
|
|
118
|
-
|
|
119
|
-
className: props.classNames,
|
|
118
|
+
className: props.className,
|
|
120
119
|
variant: props.variant,
|
|
121
120
|
name: props.name,
|
|
122
121
|
onChange: handleInputChange
|
|
123
122
|
}
|
|
124
|
-
)
|
|
123
|
+
);
|
|
125
124
|
};
|
|
126
125
|
|
|
127
126
|
// src/Components/TextareaElement.tsx
|
|
@@ -129,7 +128,7 @@ var import_react4 = __toESM(require("react"));
|
|
|
129
128
|
var import_antd4 = require("antd");
|
|
130
129
|
var { TextArea } = import_antd4.Input;
|
|
131
130
|
var TextareaElement = (props) => {
|
|
132
|
-
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex,
|
|
131
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
133
132
|
TextArea,
|
|
134
133
|
{
|
|
135
134
|
placeholder: props.placeholder,
|
|
@@ -138,8 +137,7 @@ var TextareaElement = (props) => {
|
|
|
138
137
|
disabled: props.disabled,
|
|
139
138
|
id: props.name,
|
|
140
139
|
status: props.status,
|
|
141
|
-
|
|
142
|
-
className: props.classNames,
|
|
140
|
+
className: props.className,
|
|
143
141
|
variant: props.variant,
|
|
144
142
|
name: props.name,
|
|
145
143
|
showCount: true,
|
|
@@ -177,7 +175,7 @@ var SelectElement = (props) => {
|
|
|
177
175
|
id: props.name,
|
|
178
176
|
status: props.status,
|
|
179
177
|
style: props.styles,
|
|
180
|
-
className: props.
|
|
178
|
+
className: props.className,
|
|
181
179
|
variant: props.variant,
|
|
182
180
|
onChange: handleChange
|
|
183
181
|
}
|
|
@@ -187,15 +185,48 @@ var SelectElement = (props) => {
|
|
|
187
185
|
// src/Components/RadioElement.tsx
|
|
188
186
|
var import_react6 = __toESM(require("react"));
|
|
189
187
|
var import_antd6 = require("antd");
|
|
188
|
+
var containerClassName = " ";
|
|
189
|
+
var className = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] p-[6px_6px] m-[5px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
190
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] rounded-[8px] p-[6px_6px] m-[5px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
190
191
|
var RadioElement = (props) => {
|
|
192
|
+
const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
|
|
193
|
+
const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
|
|
194
|
+
let optionType;
|
|
195
|
+
if (props.optionType === "button") {
|
|
196
|
+
optionType = props.optionType;
|
|
197
|
+
}
|
|
191
198
|
const handleChange = (e) => {
|
|
199
|
+
const selectedVal = e.target.value;
|
|
200
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
201
|
+
setSelectedValue(selectedVal);
|
|
202
|
+
setIsDisabled(true);
|
|
192
203
|
if (props.onChange) {
|
|
193
|
-
const selectedVal = e.target.value;
|
|
194
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
195
204
|
props.onChange(selectedOptions);
|
|
196
205
|
}
|
|
197
206
|
};
|
|
198
|
-
|
|
207
|
+
const getButtonStyle = (option) => {
|
|
208
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
209
|
+
};
|
|
210
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(
|
|
211
|
+
import_antd6.Radio.Group,
|
|
212
|
+
{
|
|
213
|
+
onChange: handleChange,
|
|
214
|
+
optionType,
|
|
215
|
+
className: `${containerClassName} ${props.className && props.className}`,
|
|
216
|
+
value: selectedValue
|
|
217
|
+
},
|
|
218
|
+
props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
|
|
219
|
+
import_antd6.Radio,
|
|
220
|
+
{
|
|
221
|
+
key: option.value,
|
|
222
|
+
value: option.value,
|
|
223
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
224
|
+
className: getButtonStyle(option),
|
|
225
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
226
|
+
},
|
|
227
|
+
option.label
|
|
228
|
+
))
|
|
229
|
+
));
|
|
199
230
|
};
|
|
200
231
|
|
|
201
232
|
// src/Components/Checkbox.tsx
|
|
@@ -229,7 +260,7 @@ var CheckboxElement = (props) => {
|
|
|
229
260
|
disabled: props.disabled,
|
|
230
261
|
id: props.name,
|
|
231
262
|
style: props.styles,
|
|
232
|
-
className: props.
|
|
263
|
+
className: props.className,
|
|
233
264
|
onChange: onHandleAllChanges,
|
|
234
265
|
checked: checkAll
|
|
235
266
|
},
|
|
@@ -239,7 +270,7 @@ var CheckboxElement = (props) => {
|
|
|
239
270
|
{
|
|
240
271
|
disabled: props.disabled,
|
|
241
272
|
style: props.styles,
|
|
242
|
-
className: props.
|
|
273
|
+
className: props.className,
|
|
243
274
|
options: plainOptions,
|
|
244
275
|
value: checkedList,
|
|
245
276
|
onChange: handleChange
|
|
@@ -356,7 +387,13 @@ var MultipleSelectElement = (props) => {
|
|
|
356
387
|
// src/Components/Button.tsx
|
|
357
388
|
var import_react12 = __toESM(require("react"));
|
|
358
389
|
var import_antd10 = require("antd");
|
|
359
|
-
var
|
|
390
|
+
var className2 = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
391
|
+
var ButtonElement = (props) => {
|
|
392
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
393
|
+
console.log("Performing action:", props.action);
|
|
394
|
+
} : props.action;
|
|
395
|
+
return /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, null, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { onClick: handleClick, className: `${className2} ${props.className && props.className}` }, props.label));
|
|
396
|
+
};
|
|
360
397
|
|
|
361
398
|
// src/Components/AddMoreTable.tsx
|
|
362
399
|
var import_react13 = __toESM(require("react"));
|
|
@@ -364,77 +401,129 @@ var import_antd11 = require("antd");
|
|
|
364
401
|
var import_icons2 = require("@ant-design/icons");
|
|
365
402
|
var AddMoreTable = (props) => {
|
|
366
403
|
const { thead, tbody } = props;
|
|
367
|
-
const [tableData, setTableData] = (0, import_react13.useState)({});
|
|
368
404
|
const [rows, setRows] = (0, import_react13.useState)(tbody || []);
|
|
369
|
-
function isColumnType(column) {
|
|
370
|
-
return column.dataIndex !== void 0;
|
|
371
|
-
}
|
|
372
|
-
const onHandleChange = (name, value) => {
|
|
373
|
-
setTableData((prev) => ({ ...prev, [name]: value }));
|
|
374
|
-
console.log(tableData);
|
|
375
|
-
};
|
|
376
405
|
const onHandleRows = () => {
|
|
377
|
-
const
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
406
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
407
|
+
let newRow = {
|
|
408
|
+
id: newId,
|
|
409
|
+
label: "Medicine",
|
|
410
|
+
name: "Medicine",
|
|
411
|
+
type: "text",
|
|
412
|
+
element: "single-select",
|
|
413
|
+
variable_data: [
|
|
414
|
+
{
|
|
415
|
+
id: 1,
|
|
416
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
417
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
418
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
419
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
420
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
421
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
422
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
423
|
+
}
|
|
424
|
+
]
|
|
382
425
|
};
|
|
383
426
|
setRows((prevData) => [...prevData, newRow]);
|
|
384
427
|
};
|
|
385
|
-
const
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
428
|
+
const onHandleDelete = (id) => {
|
|
429
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
430
|
+
};
|
|
431
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
432
|
+
setRows((prevRows) => {
|
|
433
|
+
return prevRows.map((row, index) => {
|
|
434
|
+
if (index === rowIndex) {
|
|
435
|
+
const newSubRow = {
|
|
436
|
+
id: row.variable_data.length + 1,
|
|
437
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
438
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
439
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
440
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
441
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
442
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
443
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
444
|
+
};
|
|
445
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
446
|
+
return {
|
|
447
|
+
...row,
|
|
448
|
+
variable_data: updatedVariableData
|
|
449
|
+
};
|
|
450
|
+
}
|
|
451
|
+
return row;
|
|
452
|
+
});
|
|
453
|
+
});
|
|
454
|
+
};
|
|
455
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
456
|
+
setRows((prevRows) => {
|
|
457
|
+
return prevRows.map((row, index) => {
|
|
458
|
+
if (index === rowIndex) {
|
|
459
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
460
|
+
return {
|
|
461
|
+
...row,
|
|
462
|
+
variable_data: updatedVariableData
|
|
463
|
+
};
|
|
464
|
+
}
|
|
465
|
+
return row;
|
|
466
|
+
});
|
|
467
|
+
});
|
|
468
|
+
};
|
|
469
|
+
(0, import_react13.useEffect)(() => {
|
|
470
|
+
console.log(rows);
|
|
471
|
+
}, [rows]);
|
|
472
|
+
const renderInputElement = (element, value) => {
|
|
473
|
+
if (!element)
|
|
474
|
+
return null;
|
|
391
475
|
const { element: type, label } = element;
|
|
392
|
-
console.log("type....", type);
|
|
393
476
|
if (type === "single-select") {
|
|
394
|
-
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (
|
|
477
|
+
return /* @__PURE__ */ import_react13.default.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
395
478
|
} else if (type === "textarea") {
|
|
396
|
-
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (
|
|
479
|
+
return /* @__PURE__ */ import_react13.default.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
397
480
|
} else {
|
|
398
481
|
return null;
|
|
399
482
|
}
|
|
400
483
|
};
|
|
401
|
-
const dataSource = rows.map((eachRow,
|
|
402
|
-
const
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
return acc;
|
|
410
|
-
}
|
|
411
|
-
acc[curr.label] = renderInputElement(curr);
|
|
412
|
-
return acc;
|
|
413
|
-
}, {}) : {};
|
|
414
|
-
return {
|
|
415
|
-
key: index.toString(),
|
|
416
|
-
"#": index + 1,
|
|
417
|
-
...eachRow,
|
|
418
|
-
...rowElements,
|
|
419
|
-
...variableData,
|
|
420
|
-
actions: index === rows.length - 1 ? /* @__PURE__ */ import_react13.default.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)) : null
|
|
484
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
485
|
+
const rowData = {
|
|
486
|
+
key: eachRow.id,
|
|
487
|
+
"#": rowIndex + 1,
|
|
488
|
+
"Medicine": renderInputElement({
|
|
489
|
+
element: eachRow.element,
|
|
490
|
+
label: eachRow.label
|
|
491
|
+
})
|
|
421
492
|
};
|
|
493
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
494
|
+
Object.keys(variable).forEach((key) => {
|
|
495
|
+
if (key === "SubRows") {
|
|
496
|
+
rowData[`${key}`] = /* @__PURE__ */ import_react13.default.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
|
|
497
|
+
} else {
|
|
498
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
499
|
+
}
|
|
500
|
+
});
|
|
501
|
+
});
|
|
502
|
+
rowData.actions = /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_antd11.Button, { onClick: onHandleRows }, /* @__PURE__ */ import_react13.default.createElement(import_icons2.PlusOutlined, null)));
|
|
503
|
+
console.log("=====rowdata", rowData);
|
|
504
|
+
return rowData;
|
|
422
505
|
});
|
|
423
|
-
|
|
506
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
507
|
+
title: eachHeadEl.label,
|
|
508
|
+
dataIndex: eachHeadEl.name,
|
|
509
|
+
key: eachHeadEl.id
|
|
510
|
+
})) : [];
|
|
511
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
424
512
|
columns.push({
|
|
425
513
|
title: "Actions",
|
|
426
514
|
dataIndex: "actions",
|
|
427
515
|
key: "actions"
|
|
428
516
|
});
|
|
429
517
|
}
|
|
430
|
-
return /* @__PURE__ */ import_react13.default.createElement(
|
|
518
|
+
return /* @__PURE__ */ import_react13.default.createElement(
|
|
431
519
|
import_antd11.Table,
|
|
432
520
|
{
|
|
433
521
|
columns,
|
|
434
|
-
|
|
435
|
-
|
|
522
|
+
dataSource,
|
|
523
|
+
pagination: false,
|
|
524
|
+
bordered: true
|
|
436
525
|
}
|
|
437
|
-
)
|
|
526
|
+
);
|
|
438
527
|
};
|
|
439
528
|
// Annotate the CommonJS export names for ESM import in node:
|
|
440
529
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -15,7 +15,7 @@ var TextElement = (props) => {
|
|
|
15
15
|
type: props.type,
|
|
16
16
|
status: props.status,
|
|
17
17
|
style: props.styles,
|
|
18
|
-
className: props.
|
|
18
|
+
className: props.className,
|
|
19
19
|
variant: props.variant,
|
|
20
20
|
name: props.name,
|
|
21
21
|
onChange: (e) => props.onChange(e.target.value)
|
|
@@ -56,7 +56,7 @@ var NumberElement = (props) => {
|
|
|
56
56
|
const newValue = e.target.value.replace(/[^0-9]/g, "");
|
|
57
57
|
props.onChange(newValue);
|
|
58
58
|
};
|
|
59
|
-
return /* @__PURE__ */ React3.createElement(
|
|
59
|
+
return /* @__PURE__ */ React3.createElement(
|
|
60
60
|
AntInput2,
|
|
61
61
|
{
|
|
62
62
|
placeholder: props.placeholder,
|
|
@@ -68,13 +68,12 @@ var NumberElement = (props) => {
|
|
|
68
68
|
prefix: props.prefix,
|
|
69
69
|
type: props.type,
|
|
70
70
|
status: props.status,
|
|
71
|
-
|
|
72
|
-
className: props.classNames,
|
|
71
|
+
className: props.className,
|
|
73
72
|
variant: props.variant,
|
|
74
73
|
name: props.name,
|
|
75
74
|
onChange: handleInputChange
|
|
76
75
|
}
|
|
77
|
-
)
|
|
76
|
+
);
|
|
78
77
|
};
|
|
79
78
|
|
|
80
79
|
// src/Components/TextareaElement.tsx
|
|
@@ -82,7 +81,7 @@ import React4 from "react";
|
|
|
82
81
|
import { Flex, Input as Input2 } from "antd";
|
|
83
82
|
var { TextArea } = Input2;
|
|
84
83
|
var TextareaElement = (props) => {
|
|
85
|
-
return /* @__PURE__ */ React4.createElement(Flex,
|
|
84
|
+
return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
|
|
86
85
|
TextArea,
|
|
87
86
|
{
|
|
88
87
|
placeholder: props.placeholder,
|
|
@@ -91,8 +90,7 @@ var TextareaElement = (props) => {
|
|
|
91
90
|
disabled: props.disabled,
|
|
92
91
|
id: props.name,
|
|
93
92
|
status: props.status,
|
|
94
|
-
|
|
95
|
-
className: props.classNames,
|
|
93
|
+
className: props.className,
|
|
96
94
|
variant: props.variant,
|
|
97
95
|
name: props.name,
|
|
98
96
|
showCount: true,
|
|
@@ -130,7 +128,7 @@ var SelectElement = (props) => {
|
|
|
130
128
|
id: props.name,
|
|
131
129
|
status: props.status,
|
|
132
130
|
style: props.styles,
|
|
133
|
-
className: props.
|
|
131
|
+
className: props.className,
|
|
134
132
|
variant: props.variant,
|
|
135
133
|
onChange: handleChange
|
|
136
134
|
}
|
|
@@ -138,27 +136,60 @@ var SelectElement = (props) => {
|
|
|
138
136
|
};
|
|
139
137
|
|
|
140
138
|
// src/Components/RadioElement.tsx
|
|
141
|
-
import React6 from "react";
|
|
139
|
+
import React6, { useState as useState2 } from "react";
|
|
142
140
|
import { Radio } from "antd";
|
|
141
|
+
var containerClassName = " ";
|
|
142
|
+
var className = "bg-[#F2F2F2] border border-[#919191] rounded-[8px] p-[6px_6px] m-[5px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
143
|
+
var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] rounded-[8px] p-[6px_6px] m-[5px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
|
|
143
144
|
var RadioElement = (props) => {
|
|
145
|
+
const [isDisabled, setIsDisabled] = useState2(props.disabled);
|
|
146
|
+
const [selectedValue, setSelectedValue] = useState2(props.value);
|
|
147
|
+
let optionType;
|
|
148
|
+
if (props.optionType === "button") {
|
|
149
|
+
optionType = props.optionType;
|
|
150
|
+
}
|
|
144
151
|
const handleChange = (e) => {
|
|
152
|
+
const selectedVal = e.target.value;
|
|
153
|
+
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
154
|
+
setSelectedValue(selectedVal);
|
|
155
|
+
setIsDisabled(true);
|
|
145
156
|
if (props.onChange) {
|
|
146
|
-
const selectedVal = e.target.value;
|
|
147
|
-
const selectedOptions = [{ id: selectedVal, value: selectedVal }];
|
|
148
157
|
props.onChange(selectedOptions);
|
|
149
158
|
}
|
|
150
159
|
};
|
|
151
|
-
|
|
160
|
+
const getButtonStyle = (option) => {
|
|
161
|
+
return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
|
|
162
|
+
};
|
|
163
|
+
return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
|
|
164
|
+
Radio.Group,
|
|
165
|
+
{
|
|
166
|
+
onChange: handleChange,
|
|
167
|
+
optionType,
|
|
168
|
+
className: `${containerClassName} ${props.className && props.className}`,
|
|
169
|
+
value: selectedValue
|
|
170
|
+
},
|
|
171
|
+
props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
|
|
172
|
+
Radio,
|
|
173
|
+
{
|
|
174
|
+
key: option.value,
|
|
175
|
+
value: option.value,
|
|
176
|
+
disabled: isDisabled && selectedValue !== option.value,
|
|
177
|
+
className: getButtonStyle(option),
|
|
178
|
+
style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
|
|
179
|
+
},
|
|
180
|
+
option.label
|
|
181
|
+
))
|
|
182
|
+
));
|
|
152
183
|
};
|
|
153
184
|
|
|
154
185
|
// src/Components/Checkbox.tsx
|
|
155
|
-
import React7, { useState as
|
|
186
|
+
import React7, { useState as useState3 } from "react";
|
|
156
187
|
import { Checkbox, Divider } from "antd";
|
|
157
188
|
var CheckboxGroup = Checkbox.Group;
|
|
158
189
|
var plainOptions = ["Apple", "Pear", "Orange"];
|
|
159
190
|
var defaultCheckedList = [];
|
|
160
191
|
var CheckboxElement = (props) => {
|
|
161
|
-
const [checkedList, setCheckedList] =
|
|
192
|
+
const [checkedList, setCheckedList] = useState3(defaultCheckedList);
|
|
162
193
|
const checkAll = plainOptions.length === checkedList.length;
|
|
163
194
|
const handleChange = (list) => {
|
|
164
195
|
setCheckedList(list);
|
|
@@ -182,7 +213,7 @@ var CheckboxElement = (props) => {
|
|
|
182
213
|
disabled: props.disabled,
|
|
183
214
|
id: props.name,
|
|
184
215
|
style: props.styles,
|
|
185
|
-
className: props.
|
|
216
|
+
className: props.className,
|
|
186
217
|
onChange: onHandleAllChanges,
|
|
187
218
|
checked: checkAll
|
|
188
219
|
},
|
|
@@ -192,7 +223,7 @@ var CheckboxElement = (props) => {
|
|
|
192
223
|
{
|
|
193
224
|
disabled: props.disabled,
|
|
194
225
|
style: props.styles,
|
|
195
|
-
className: props.
|
|
226
|
+
className: props.className,
|
|
196
227
|
options: plainOptions,
|
|
197
228
|
value: checkedList,
|
|
198
229
|
onChange: handleChange
|
|
@@ -309,85 +340,143 @@ var MultipleSelectElement = (props) => {
|
|
|
309
340
|
// src/Components/Button.tsx
|
|
310
341
|
import React11 from "react";
|
|
311
342
|
import { Button as Button2, Flex as Flex2 } from "antd";
|
|
312
|
-
var
|
|
343
|
+
var className2 = "w-[126px] h-[40px] bg-purple-800 text-white rounded-full shadow-lg submit border-none";
|
|
344
|
+
var ButtonElement = (props) => {
|
|
345
|
+
const handleClick = typeof props.action === "string" ? () => {
|
|
346
|
+
console.log("Performing action:", props.action);
|
|
347
|
+
} : props.action;
|
|
348
|
+
return /* @__PURE__ */ React11.createElement(Flex2, null, /* @__PURE__ */ React11.createElement(Button2, { onClick: handleClick, className: `${className2} ${props.className && props.className}` }, props.label));
|
|
349
|
+
};
|
|
313
350
|
|
|
314
351
|
// src/Components/AddMoreTable.tsx
|
|
315
|
-
import React12, { useState as
|
|
316
|
-
import { Table } from "antd";
|
|
317
|
-
import { PlusOutlined } from "@ant-design/icons";
|
|
352
|
+
import React12, { useEffect, useState as useState4 } from "react";
|
|
353
|
+
import { Table, Button as Button3 } from "antd";
|
|
354
|
+
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
318
355
|
var AddMoreTable = (props) => {
|
|
319
356
|
const { thead, tbody } = props;
|
|
320
|
-
const [
|
|
321
|
-
const [rows, setRows] = useState3(tbody || []);
|
|
322
|
-
function isColumnType(column) {
|
|
323
|
-
return column.dataIndex !== void 0;
|
|
324
|
-
}
|
|
325
|
-
const onHandleChange = (name, value) => {
|
|
326
|
-
setTableData((prev) => ({ ...prev, [name]: value }));
|
|
327
|
-
console.log(tableData);
|
|
328
|
-
};
|
|
357
|
+
const [rows, setRows] = useState4(tbody || []);
|
|
329
358
|
const onHandleRows = () => {
|
|
330
|
-
const
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
359
|
+
const newId = rows.length > 0 ? rows[rows.length - 1].id + 1 : 1;
|
|
360
|
+
let newRow = {
|
|
361
|
+
id: newId,
|
|
362
|
+
label: "Medicine",
|
|
363
|
+
name: "Medicine",
|
|
364
|
+
type: "text",
|
|
365
|
+
element: "single-select",
|
|
366
|
+
variable_data: [
|
|
367
|
+
{
|
|
368
|
+
id: 1,
|
|
369
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
370
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
371
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
372
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
373
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
374
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
375
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
376
|
+
}
|
|
377
|
+
]
|
|
335
378
|
};
|
|
336
379
|
setRows((prevData) => [...prevData, newRow]);
|
|
337
380
|
};
|
|
338
|
-
const
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
381
|
+
const onHandleDelete = (id) => {
|
|
382
|
+
setRows((prevRows) => prevRows.filter((row) => row.id !== id));
|
|
383
|
+
};
|
|
384
|
+
const onHandleSubRowsAdd = (rowIndex) => {
|
|
385
|
+
setRows((prevRows) => {
|
|
386
|
+
return prevRows.map((row, index) => {
|
|
387
|
+
if (index === rowIndex) {
|
|
388
|
+
const newSubRow = {
|
|
389
|
+
id: row.variable_data.length + 1,
|
|
390
|
+
Route: { label: "Route", element: "single-select", type: "text" },
|
|
391
|
+
Dose: { label: "Dose", element: "single-select", type: "text" },
|
|
392
|
+
Frequency: { label: "Frequency", element: "single-select", type: "text" },
|
|
393
|
+
When: { label: "When", element: "textarea", type: "text" },
|
|
394
|
+
Duration: { label: "Duration", element: "textarea", type: "text" },
|
|
395
|
+
Instructions: { label: "Instructions", element: "textarea", type: "text" },
|
|
396
|
+
SubRows: { delete: "delete", add: "plus" }
|
|
397
|
+
};
|
|
398
|
+
const updatedVariableData = [...row.variable_data, newSubRow];
|
|
399
|
+
return {
|
|
400
|
+
...row,
|
|
401
|
+
variable_data: updatedVariableData
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
return row;
|
|
405
|
+
});
|
|
406
|
+
});
|
|
407
|
+
};
|
|
408
|
+
const onHandleSubRowsDelete = (rowIndex, subIndex) => {
|
|
409
|
+
setRows((prevRows) => {
|
|
410
|
+
return prevRows.map((row, index) => {
|
|
411
|
+
if (index === rowIndex) {
|
|
412
|
+
const updatedVariableData = row.variable_data.filter((_, i) => i !== subIndex);
|
|
413
|
+
return {
|
|
414
|
+
...row,
|
|
415
|
+
variable_data: updatedVariableData
|
|
416
|
+
};
|
|
417
|
+
}
|
|
418
|
+
return row;
|
|
419
|
+
});
|
|
420
|
+
});
|
|
421
|
+
};
|
|
422
|
+
useEffect(() => {
|
|
423
|
+
console.log(rows);
|
|
424
|
+
}, [rows]);
|
|
425
|
+
const renderInputElement = (element, value) => {
|
|
426
|
+
if (!element)
|
|
427
|
+
return null;
|
|
344
428
|
const { element: type, label } = element;
|
|
345
|
-
console.log("type....", type);
|
|
346
429
|
if (type === "single-select") {
|
|
347
|
-
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (
|
|
430
|
+
return /* @__PURE__ */ React12.createElement(SingleSelectElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
348
431
|
} else if (type === "textarea") {
|
|
349
|
-
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (
|
|
432
|
+
return /* @__PURE__ */ React12.createElement(TextareaElement, { onChange: (value2) => console.log(label, value2), optionType: "", className: void 0, selectedStyle: false, style: false });
|
|
350
433
|
} else {
|
|
351
434
|
return null;
|
|
352
435
|
}
|
|
353
436
|
};
|
|
354
|
-
const dataSource = rows.map((eachRow,
|
|
355
|
-
const
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
return acc;
|
|
363
|
-
}
|
|
364
|
-
acc[curr.label] = renderInputElement(curr);
|
|
365
|
-
return acc;
|
|
366
|
-
}, {}) : {};
|
|
367
|
-
return {
|
|
368
|
-
key: index.toString(),
|
|
369
|
-
"#": index + 1,
|
|
370
|
-
...eachRow,
|
|
371
|
-
...rowElements,
|
|
372
|
-
...variableData,
|
|
373
|
-
actions: index === rows.length - 1 ? /* @__PURE__ */ React12.createElement("button", { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)) : null
|
|
437
|
+
const dataSource = rows.map((eachRow, rowIndex) => {
|
|
438
|
+
const rowData = {
|
|
439
|
+
key: eachRow.id,
|
|
440
|
+
"#": rowIndex + 1,
|
|
441
|
+
"Medicine": renderInputElement({
|
|
442
|
+
element: eachRow.element,
|
|
443
|
+
label: eachRow.label
|
|
444
|
+
})
|
|
374
445
|
};
|
|
446
|
+
eachRow.variable_data.forEach((variable, subIndex) => {
|
|
447
|
+
Object.keys(variable).forEach((key) => {
|
|
448
|
+
if (key === "SubRows") {
|
|
449
|
+
rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
|
|
450
|
+
} else {
|
|
451
|
+
rowData[`${key}`] = renderInputElement(variable[key]);
|
|
452
|
+
}
|
|
453
|
+
});
|
|
454
|
+
});
|
|
455
|
+
rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button3, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button3, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
|
|
456
|
+
console.log("=====rowdata", rowData);
|
|
457
|
+
return rowData;
|
|
375
458
|
});
|
|
376
|
-
|
|
459
|
+
const columns = thead && thead.length > 0 ? thead.map((eachHeadEl) => ({
|
|
460
|
+
title: eachHeadEl.label,
|
|
461
|
+
dataIndex: eachHeadEl.name,
|
|
462
|
+
key: eachHeadEl.id
|
|
463
|
+
})) : [];
|
|
464
|
+
if (!columns.some((col) => col.dataIndex === "actions")) {
|
|
377
465
|
columns.push({
|
|
378
466
|
title: "Actions",
|
|
379
467
|
dataIndex: "actions",
|
|
380
468
|
key: "actions"
|
|
381
469
|
});
|
|
382
470
|
}
|
|
383
|
-
return /* @__PURE__ */ React12.createElement(
|
|
471
|
+
return /* @__PURE__ */ React12.createElement(
|
|
384
472
|
Table,
|
|
385
473
|
{
|
|
386
474
|
columns,
|
|
387
|
-
|
|
388
|
-
|
|
475
|
+
dataSource,
|
|
476
|
+
pagination: false,
|
|
477
|
+
bordered: true
|
|
389
478
|
}
|
|
390
|
-
)
|
|
479
|
+
);
|
|
391
480
|
};
|
|
392
481
|
export {
|
|
393
482
|
AddMoreTable,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apexcura/ui-components",
|
|
3
|
-
"version": "0.0.12-
|
|
3
|
+
"version": "0.0.12-Beta51",
|
|
4
4
|
"description": "Apex cura React components library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"apex cura",
|
|
@@ -36,10 +36,13 @@
|
|
|
36
36
|
"@types/react-global-configuration": "^1.3.3",
|
|
37
37
|
"@types/testing-library__react": "^10.2.0",
|
|
38
38
|
"antd": "^5.16.5",
|
|
39
|
+
"autoprefixer": "^10.4.19",
|
|
39
40
|
"jest": "^29.7.0",
|
|
40
41
|
"jest-environment-jsdom": "^29.7.0",
|
|
42
|
+
"postcss": "^8.4.38",
|
|
41
43
|
"react": "^18.3.1",
|
|
42
44
|
"react-dom": "^18.3.1",
|
|
45
|
+
"tailwindcss": "^3.4.3",
|
|
43
46
|
"ts-jest": "^29.1.2",
|
|
44
47
|
"tsup": "^8.0.2",
|
|
45
48
|
"typescript": "^5.4.5"
|