@visns-studio/visns-components 1.7.7 → 1.8.2

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.
Files changed (5) hide show
  1. package/components/crm/visns-data-grid.jsx +6 -1
  2. package/components/crm/visns-fetch.jsx +70 -62
  3. package/components/crm/visns-field.jsx +462 -690
  4. package/components/crm/visns-form.jsx +351 -441
  5. package/package.json +1 -1
package/components/crm/visns-field.jsx CHANGED
@@ -16,697 +16,469 @@ import "react-quill/dist/quill.snow.css";
16
16
  import "react-datepicker/dist/react-datepicker.css";
17
17
 
18
18
  function Field({
19
- childDropdownCallback,
20
- inputValue,
21
- inputClass,
22
- onChange,
23
- onChangeDate,
24
- onChangeSelect,
25
- onChangeRicheditor,
26
- onChangeToggle,
27
- onChangeNumberFormat,
28
- autocompleteCallback,
29
- setFormData,
30
- settings,
31
- style,
19
+ childDropdownCallback,
20
+ inputValue,
21
+ inputClass,
22
+ onChange,
23
+ onChangeDate,
24
+ onChangeSelect,
25
+ onChangeRicheditor,
26
+ onChangeToggle,
27
+ onChangeNumberFormat,
28
+ autocompleteCallback,
29
+ setFormData,
30
+ settings,
31
+ style,
32
32
  }) {
33
- const [options, setOptions] = useState([]);
34
- const [dataOptions, setDataOptions] = useState([]);
35
- const [formItemStyle, setFormItemStyle] = useState({});
36
- const [formItemClass, setFormItemClass] = useState("formItem");
37
-
38
- useEffect(() => {
39
- switch (settings.type) {
40
- case "hidden":
41
- setFormItemStyle({
42
- display: "none",
43
- });
44
- break;
45
- case "dropdown-ajax":
46
- let filter = {};
47
-
48
- if (
49
- settings.hasOwnProperty("where") &&
50
- settings.where.length > 0
51
- ) {
52
- filter = {
53
- where: settings.where,
54
- };
55
- }
56
-
57
- CustomFetch(settings.url, "POST", filter, function (result) {
58
- setOptions(result.data);
59
-
60
- let dataArray = [];
61
-
62
- result.data.forEach((a) => {
63
- let _tempObject = a;
64
-
65
- if (!_.isEmpty(_tempObject)) {
66
- let modifiedObject = {};
67
-
68
- Object.keys(_tempObject).forEach(function (c) {
69
- if (c !== "id" && c !== "label") {
70
- modifiedObject["data-" + c] =
71
- _tempObject[c];
72
- }
73
- });
74
-
75
- dataArray.push(modifiedObject);
76
- }
77
- });
78
-
79
- if (dataArray.length > 0) {
80
- setDataOptions(dataArray);
81
- }
82
- });
83
- break;
84
- case "multi-dropdown-ajax":
85
- let multiFilter = {};
86
-
87
- if (
88
- settings.hasOwnProperty("where") &&
89
- settings.where.length > 0
90
- ) {
91
- multiFilter = {
92
- where: settings.where,
93
- };
94
- }
95
-
96
- CustomFetch(
97
- settings.url,
98
- "POST",
99
- multiFilter,
100
- function (result) {
101
- setOptions(result.data);
102
-
103
- let dataArray = [];
104
-
105
- result.data.forEach((a) => {
106
- let _tempObject = a;
107
-
108
- if (!_.isEmpty(_tempObject)) {
109
- let modifiedObject = {};
110
-
111
- Object.keys(_tempObject).forEach(function (c) {
112
- if (c !== "id" && c !== "label") {
113
- modifiedObject["data-" + c] =
114
- _tempObject[c];
115
- }
116
- });
117
-
118
- dataArray.push(modifiedObject);
119
- }
120
- });
121
-
122
- if (dataArray.length > 0) {
123
- setDataOptions(dataArray);
124
- }
125
- }
126
- );
127
- break;
128
- default:
129
- break;
130
- }
131
-
132
- if (settings.size === "full") {
133
- setFormItemClass("formItem fwItem");
134
- }
135
- }, [settings]);
136
-
137
- useEffect(() => {
138
- let filter = {};
139
-
140
- if (settings.hasOwnProperty("child") && inputValue) {
141
- let _inputValue = inputValue.hasOwnProperty("value")
142
- ? inputValue.value
143
- : inputValue;
144
-
145
- if (_inputValue > 0) {
146
- if (Array.isArray(settings.child)) {
147
- settings.child.forEach((a) => {
148
- filter = {
149
- where: [
150
- {
151
- id: settings.id,
152
- value: _inputValue,
153
- },
154
- ],
155
- };
156
-
157
- CustomFetch(a.url, "POST", filter, function (result) {
158
- childDropdownCallback({
159
- id: a.id,
160
- data: result.data,
161
- });
162
- });
163
- });
164
- } else {
165
- filter = {
166
- where: [
167
- {
168
- id: settings.id,
169
- value: _inputValue,
170
- },
171
- ],
172
- };
173
-
174
- CustomFetch(
175
- settings.child.url,
176
- "POST",
177
- filter,
178
- function (result) {
179
- childDropdownCallback({
180
- id: settings.child.id,
181
- data: result.data,
182
- });
183
- }
184
- );
185
- }
186
- }
187
- }
188
- }, [inputValue, settings]);
189
-
190
- useEffect(() => {
191
- if (settings.hasOwnProperty("options")) {
192
- if (settings.options.length > 0) {
193
- let dataArray = [];
194
-
195
- settings.options.forEach((a) => {
196
- let _tempObject = a;
197
-
198
- if (!_.isEmpty(_tempObject)) {
199
- let modifiedObject = {};
200
-
201
- Object.keys(_tempObject).forEach(function (c) {
202
- if (c !== "id" && c !== "label") {
203
- modifiedObject["data-" + c] = _tempObject[c];
204
- }
205
- });
206
-
207
- dataArray.push(modifiedObject);
208
- }
209
- });
210
-
211
- if (dataArray.length > 0) {
212
- setDataOptions(dataArray);
213
- }
214
- }
215
- }
216
- }, [settings.options, settings]);
217
-
218
- return (
219
- <div className={formItemClass} style={formItemStyle}>
220
- <label className="fi__label">
221
- {(() => {
222
- if (
223
- settings.type === "address" ||
224
- settings.type === "date" ||
225
- settings.type === "datetime" ||
226
- settings.type === "checkbox" ||
227
- settings.type === "multi-dropdown" ||
228
- settings.type === "multi-dropdown-ajax" ||
229
- settings.type === "async-dropdown-ajax" ||
230
- settings.type === "richeditor"
231
- ) {
232
- return (
233
- <span className="fi__span prefocus">
234
- {settings.label}{" "}
235
- {settings.required === true ? "*" : ""}
236
- </span>
237
- );
238
- }
239
- })()}
240
-
241
- {(() => {
242
- let htmlContainer;
243
- switch (settings.type) {
244
- case "text":
245
- htmlContainer = (
246
- <input
247
- type="text"
248
- data-name={settings.id}
249
- className={inputClass[settings.id]}
250
- placeholder=" "
251
- onChange={onChange}
252
- value={
253
- inputValue && inputValue !== "null"
254
- ? inputValue
255
- : ""
256
- }
257
- />
258
- );
259
- break;
260
- case "json":
261
- htmlContainer = (
262
- <input
263
- type="text"
264
- data-name={settings.id}
265
- data-jsonkey={settings.key}
266
- className={inputClass[settings.id]}
267
- placeholder=" "
268
- onChange={onChange}
269
- value={
270
- inputValue && inputValue !== "null"
271
- ? inputValue
272
- : ""
273
- }
274
- />
275
- );
276
- break;
277
- case "password":
278
- htmlContainer = (
279
- <input
280
- type="password"
281
- data-name={settings.id}
282
- className={inputClass[settings.id]}
283
- placeholder=" "
284
- onChange={onChange}
285
- value={
286
- inputValue && inputValue !== "null"
287
- ? inputValue
288
- : ""
289
- }
290
- />
291
- );
292
- break;
293
- case "phone":
294
- htmlContainer = (
295
- <PatternFormat
296
- data-name={settings.id}
297
- className={inputClass[settings.id]}
298
- onValueChange={(values) => {
299
- onChangeNumberFormat(
300
- values,
301
- settings.id
302
- );
303
- }}
304
- format="## #### ####"
305
- allowEmptyFormatting
306
- mask="_"
307
- value={
308
- inputValue && inputValue !== "null"
309
- ? inputValue
310
- : ""
311
- }
312
- />
313
- );
314
- break;
315
- case "mobile":
316
- htmlContainer = (
317
- <PatternFormat
318
- className={inputClass[settings.id]}
319
- onValueChange={(values) => {
320
- onChangeNumberFormat(
321
- values,
322
- settings.id
323
- );
324
- }}
325
- format="#### ### ###"
326
- allowEmptyFormatting
327
- mask="_"
328
- value={
329
- inputValue && inputValue !== "null"
330
- ? inputValue
331
- : ""
332
- }
333
- />
334
- );
335
- break;
336
- case "currency":
337
- htmlContainer = (
338
- <NumericFormat
339
- data-name={settings.id}
340
- className={inputClass[settings.id]}
341
- onValueChange={(values) => {
342
- onChangeNumberFormat(
343
- values,
344
- settings.id
345
- );
346
- }}
347
- thousandSeparator={true}
348
- prefix={"$"}
349
- value={
350
- inputValue && inputValue !== "null"
351
- ? inputValue
352
- : ""
353
- }
354
- />
355
- );
356
- break;
357
- case "number":
358
- htmlContainer = (
359
- <NumericFormat
360
- data-name={settings.id}
361
- className={inputClass[settings.id]}
362
- onValueChange={(values) => {
363
- onChangeNumberFormat(
364
- values,
365
- settings.id
366
- );
367
- }}
368
- thousandSeparator={
369
- settings.hasOwnProperty(
370
- "thousandSeperator"
371
- )
372
- ? settings.thousandSeperator
373
- : true
374
- }
375
- value={
376
- inputValue && inputValue !== "null"
377
- ? inputValue
378
- : ""
379
- }
380
- />
381
- );
382
- break;
383
- case "decimal":
384
- htmlContainer = (
385
- <NumericFormat
386
- data-name={settings.id}
387
- className={inputClass[settings.id]}
388
- onValueChange={(values) => {
389
- onChangeNumberFormat(
390
- values,
391
- settings.id
392
- );
393
- }}
394
- thousandSeparator={
395
- settings.hasOwnProperty(
396
- "thousandSeperator"
397
- )
398
- ? settings.thousandSeperator
399
- : true
400
- }
401
- decimalSeparator="."
402
- decimalScale={2}
403
- value={
404
- inputValue && inputValue !== "null"
405
- ? inputValue
406
- : ""
407
- }
408
- />
409
- );
410
- break;
411
- case "textarea":
412
- htmlContainer = (
413
- <textarea
414
- data-name={settings.id}
415
- className={inputClass[settings.id]}
416
- onChange={onChange}
417
- value={
418
- inputValue && inputValue !== "null"
419
- ? inputValue
420
- : ""
421
- }
422
- style={{ height: "200px" }}
423
- ></textarea>
424
- );
425
- break;
426
- case "address":
427
- htmlContainer = (
428
- <VisnsAutocomplete
429
- api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
430
- country="AU"
431
- field={settings.id}
432
- inputValue={inputValue}
433
- onSelect={autocompleteCallback}
434
- setFormData={setFormData}
435
- style={style}
436
- />
437
- );
438
- break;
439
- case "dropdown":
440
- htmlContainer = (
441
- <Select
442
- settings={settings}
443
- className={inputClass[settings.id]}
444
- onChange={onChange}
445
- inputValue={
446
- inputValue === null ? "" : inputValue
447
- }
448
- options={settings.options}
449
- dataOptions={dataOptions}
450
- />
451
- );
452
- break;
453
- case "dropdown-ajax":
454
- htmlContainer = (
455
- <Select
456
- settings={settings}
457
- className={inputClass[settings.id]}
458
- onChange={onChange}
459
- inputValue={
460
- inputValue === null ? "" : inputValue
461
- }
462
- options={options}
463
- dataOptions={dataOptions}
464
- />
465
- );
466
- break;
467
- case "multi-dropdown":
468
- htmlContainer = (
469
- <MultiSelect
470
- settings={settings}
471
- className={inputClass[settings.id]}
472
- multi={
473
- settings.hasOwnProperty("multi")
474
- ? settings.multi
475
- : false
476
- }
477
- onChange={onChangeSelect}
478
- inputValue={
479
- inputValue === null ? "" : inputValue
480
- }
481
- options={settings.options}
482
- dataOptions={dataOptions}
483
- style={style}
484
- />
485
- );
486
- break;
487
- case "multi-dropdown-ajax":
488
- htmlContainer = (
489
- <MultiSelect
490
- settings={settings}
491
- className={inputClass[settings.id]}
492
- multi={
493
- settings.hasOwnProperty("multi")
494
- ? settings.multi
495
- : false
496
- }
497
- onChange={onChangeSelect}
498
- inputValue={
499
- inputValue === null ? "" : inputValue
500
- }
501
- options={options}
502
- dataOptions={dataOptions}
503
- style={style}
504
- />
505
- );
506
- break;
507
- case "async-dropdown-ajax":
508
- htmlContainer = (
509
- <VisnsAsyncSelect
510
- settings={settings}
511
- className={inputClass[settings.id]}
512
- multi={
513
- settings.hasOwnProperty("multi")
514
- ? settings.multi
515
- : false
516
- }
517
- onChange={onChangeSelect}
518
- inputValue={
519
- inputValue === null ? "" : inputValue
520
- }
521
- options={options}
522
- dataOptions={dataOptions}
523
- />
524
- );
525
- break;
526
- case "file":
527
- htmlContainer = (
528
- <input
529
- type="file"
530
- data-name={settings.id}
531
- className={inputClass[settings.id]}
532
- onChange={onChange}
533
- />
534
- );
535
- break;
536
- case "line-break":
537
- htmlContainer = (
538
- <div className="formbreak">
539
- <span>
540
- {settings.label}{" "}
541
- {settings.required === true ? "*" : ""}
542
- </span>
543
- </div>
544
- );
545
- break;
546
- case "checkbox":
547
- htmlContainer = (
548
- <input
549
- type="checkbox"
550
- data-name={settings.id}
551
- className={inputClass[settings.id]}
552
- placeholder=" "
553
- onChange={onChange}
554
- value={inputValue || ""}
555
- />
556
- );
557
- break;
558
- case "richeditor":
559
- htmlContainer = (
560
- <ReactQuill
561
- theme="snow"
562
- data-name={settings.id}
563
- onChange={(value, event) => {
564
- onChangeRicheditor(
565
- event,
566
- value,
567
- settings.id
568
- );
569
- }}
570
- value={inputValue || ""}
571
- />
572
- );
573
- break;
574
- default:
575
- htmlContainer = "";
576
- break;
577
- }
578
-
579
- return htmlContainer;
580
- })()}
581
-
582
- {(() => {
583
- if (
584
- settings.type !== "address" &&
585
- settings.type !== "date" &&
586
- settings.type !== "datetime" &&
587
- settings.type !== "line-break" &&
588
- settings.type !== "checkbox" &&
589
- settings.type !== "multi-dropdown" &&
590
- settings.type !== "multi-dropdown-ajax" &&
591
- settings.type !== "async-dropdown-ajax" &&
592
- settings.type !== "toggle" &&
593
- settings.type !== "richeditor"
594
- ) {
595
- return (
596
- <span className="fi__span">
597
- {settings.label}{" "}
598
- {settings.required === true ? "*" : ""}
599
- </span>
600
- );
601
- }
602
- })()}
603
- </label>
604
-
605
- {(() => {
606
- let htmlContainer;
607
- switch (settings.type) {
608
- case "date":
609
- htmlContainer = (
610
- <DatePicker
611
- dateFormat={
612
- settings.format
613
- ? settings.format
614
- : "dd-MM-yyyy"
615
- }
616
- isClearable
617
- className={inputClass[settings.id]}
618
- selected={inputValue || ""}
619
- showMonthDropdown
620
- showYearDropdown
621
- scrollableYearDropdown
622
- onChange={(date) =>
623
- onChangeDate(date, settings.id)
624
- }
625
- />
626
- );
627
- break;
628
- case "datetime":
629
- htmlContainer = (
630
- <DatePicker
631
- dateFormat={
632
- settings.format
633
- ? settings.format
634
- : "dd-MM-yyyy hh:mm aa"
635
- }
636
- isClearable
637
- showTimeSelect
638
- className={inputClass[settings.id]}
639
- selected={inputValue || null}
640
- showMonthDropdown
641
- showYearDropdown
642
- scrollableYearDropdown
643
- onChange={(date) =>
644
- onChangeDate(date, settings.id)
645
- }
646
- shouldCloseOnSelect={true}
647
- />
648
- );
649
- break;
650
- case "time":
651
- htmlContainer = (
652
- <DatePicker
653
- dateFormat={
654
- settings.format
655
- ? settings.format
656
- : "hh:mm aa"
657
- }
658
- isClearable
659
- showTimeSelect
660
- showTimeSelectOnly
661
- timeIntervals={15}
662
- timeCaption="Time"
663
- className={inputClass[settings.id]}
664
- selected={inputValue || ""}
665
- onChange={(date) =>
666
- onChangeDate(date, settings.id)
667
- }
668
- shouldCloseOnSelect={true}
669
- />
670
- );
671
- break;
672
- case "toggle":
673
- htmlContainer = (
674
- <div>
675
- <Toggle
676
- name={settings.id}
677
- data-name={settings.id}
678
- data-show={
679
- settings.show
680
- ? JSON.stringify(settings.show)
681
- : ""
682
- }
683
- checked={
684
- inputValue !== undefined
685
- ? inputValue === ""
686
- ? false
687
- : inputValue === "on"
688
- ? false
689
- : inputValue
690
- : false
691
- }
692
- onChange={onChangeToggle}
693
- />
694
- <span className="fi__toggletxt">
695
- {settings.label}{" "}
696
- {settings.required === true ? "*" : ""}
697
- </span>
698
- </div>
699
- );
700
- break;
701
- default:
702
- htmlContainer = "";
703
- break;
704
- }
705
-
706
- return htmlContainer;
707
- })()}
708
- </div>
709
- );
33
+ const [options, setOptions] = useState([]);
34
+ const [dataOptions, setDataOptions] = useState([]);
35
+ const [formItemStyle, setFormItemStyle] = useState({});
36
+ const [formItemClass, setFormItemClass] = useState("formItem");
37
+
38
+ useEffect(() => {
39
+ const fetchOptions = () => {
40
+ let filter = {};
41
+ if (settings.where?.length > 0) {
42
+ filter = {
43
+ where: settings.where,
44
+ };
45
+ }
46
+
47
+ CustomFetch(settings.url, "POST", filter, function (result) {
48
+ setOptions(result.data);
49
+
50
+ let dataArray = [];
51
+
52
+ result.data.forEach((a) => {
53
+ let _tempObject = a;
54
+
55
+ if (!_.isEmpty(_tempObject)) {
56
+ let modifiedObject = {};
57
+
58
+ Object.keys(_tempObject).forEach(function (c) {
59
+ if (c !== "id" && c !== "label") {
60
+ modifiedObject["data-" + c] = _tempObject[c];
61
+ }
62
+ });
63
+
64
+ dataArray.push(modifiedObject);
65
+ }
66
+ });
67
+
68
+ if (dataArray.length > 0) {
69
+ setDataOptions(dataArray);
70
+ }
71
+ });
72
+ };
73
+
74
+ switch (settings.type) {
75
+ case "hidden":
76
+ setFormItemStyle({
77
+ display: "none",
78
+ });
79
+ break;
80
+ case "dropdown-ajax":
81
+ case "multi-dropdown-ajax":
82
+ fetchOptions();
83
+ break;
84
+ default:
85
+ break;
86
+ }
87
+
88
+ if (settings.size === "full") {
89
+ setFormItemClass("formItem fwItem");
90
+ }
91
+ }, [settings]);
92
+
93
+ useEffect(() => {
94
+ const fetchChildDropdownData = () => {
95
+ let filter = {};
96
+
97
+ if (settings.child && inputValue) {
98
+ let _inputValue = inputValue.value
99
+ ? inputValue.value
100
+ : inputValue;
101
+
102
+ if (_inputValue > 0) {
103
+ if (Array.isArray(settings.child)) {
104
+ settings.child.forEach((a) => {
105
+ filter = {
106
+ where: [
107
+ {
108
+ id: settings.id,
109
+ value: _inputValue,
110
+ },
111
+ ],
112
+ };
113
+
114
+ CustomFetch(
115
+ a.url,
116
+ "POST",
117
+ filter,
118
+ function (result) {
119
+ childDropdownCallback({
120
+ id: a.id,
121
+ data: result.data,
122
+ });
123
+ }
124
+ );
125
+ });
126
+ } else {
127
+ filter = {
128
+ where: [
129
+ {
130
+ id: settings.id,
131
+ value: _inputValue,
132
+ },
133
+ ],
134
+ };
135
+
136
+ CustomFetch(
137
+ settings.child.url,
138
+ "POST",
139
+ filter,
140
+ function (result) {
141
+ childDropdownCallback({
142
+ id: settings.child.id,
143
+ data: result.data,
144
+ });
145
+ }
146
+ );
147
+ }
148
+ }
149
+ }
150
+ };
151
+
152
+ fetchChildDropdownData();
153
+ }, [inputValue, settings]);
154
+
155
+ useEffect(() => {
156
+ const processOptions = () => {
157
+ if (settings.options?.length > 0) {
158
+ let dataArray = [];
159
+
160
+ settings.options.forEach((a) => {
161
+ let _tempObject = a;
162
+
163
+ if (!_.isEmpty(_tempObject)) {
164
+ let modifiedObject = {};
165
+
166
+ Object.keys(_tempObject).forEach(function (c) {
167
+ if (c !== "id" && c !== "label") {
168
+ modifiedObject["data-" + c] = _tempObject[c];
169
+ }
170
+ });
171
+
172
+ dataArray.push(modifiedObject);
173
+ }
174
+ });
175
+
176
+ if (dataArray.length > 0) {
177
+ setDataOptions(dataArray);
178
+ }
179
+ }
180
+ };
181
+
182
+ processOptions();
183
+ }, [settings.options, settings]);
184
+
185
+ const renderLabel = () => {
186
+ if (
187
+ [
188
+ "address",
189
+ "date",
190
+ "datetime",
191
+ "checkbox",
192
+ "multi-dropdown",
193
+ "multi-dropdown-ajax",
194
+ "async-dropdown-ajax",
195
+ "richeditor",
196
+ ].includes(settings.type)
197
+ ) {
198
+ return (
199
+ <span className="fi__span prefocus">
200
+ {settings.label} {settings.required ? "*" : ""}
201
+ </span>
202
+ );
203
+ }
204
+ };
205
+
206
+ const renderInput = () => {
207
+ switch (settings.type) {
208
+ case "text":
209
+ case "json":
210
+ case "password":
211
+ return (
212
+ <input
213
+ type={settings.type}
214
+ data-name={settings.id}
215
+ className={inputClass[settings.id]}
216
+ placeholder=" "
217
+ onChange={onChange}
218
+ value={
219
+ inputValue && inputValue !== "null"
220
+ ? inputValue
221
+ : ""
222
+ }
223
+ />
224
+ );
225
+ case "phone":
226
+ case "mobile":
227
+ return (
228
+ <PatternFormat
229
+ className={inputClass[settings.id]}
230
+ onValueChange={(values) => {
231
+ onChangeNumberFormat(values, settings.id);
232
+ }}
233
+ format={
234
+ settings.type === "phone"
235
+ ? "## #### ####"
236
+ : "#### ### ###"
237
+ }
238
+ allowEmptyFormatting
239
+ mask="_"
240
+ value={
241
+ inputValue && inputValue !== "null"
242
+ ? inputValue
243
+ : ""
244
+ }
245
+ />
246
+ );
247
+ case "currency":
248
+ return (
249
+ <NumericFormat
250
+ data-name={settings.id}
251
+ className={inputClass[settings.id]}
252
+ onValueChange={(values) => {
253
+ onChangeNumberFormat(values, settings.id);
254
+ }}
255
+ thousandSeparator={true}
256
+ prefix={"$"}
257
+ value={
258
+ inputValue && inputValue !== "null"
259
+ ? inputValue
260
+ : ""
261
+ }
262
+ />
263
+ );
264
+ case "number":
265
+ case "decimal":
266
+ return (
267
+ <NumericFormat
268
+ data-name={settings.id}
269
+ className={inputClass[settings.id]}
270
+ onValueChange={(values) => {
271
+ onChangeNumberFormat(values, settings.id);
272
+ }}
273
+ thousandSeparator={
274
+ settings.hasOwnProperty("thousandSeperator")
275
+ ? settings.thousandSeperator
276
+ : true
277
+ }
278
+ decimalSeparator={
279
+ settings.type === "decimal" ? "." : undefined
280
+ }
281
+ decimalScale={
282
+ settings.type === "decimal" ? 2 : undefined
283
+ }
284
+ value={
285
+ inputValue && inputValue !== "null"
286
+ ? inputValue
287
+ : ""
288
+ }
289
+ />
290
+ );
291
+ case "textarea":
292
+ return (
293
+ <textarea
294
+ data-name={settings.id}
295
+ className={inputClass[settings.id]}
296
+ onChange={onChange}
297
+ value={
298
+ inputValue && inputValue !== "null"
299
+ ? inputValue
300
+ : ""
301
+ }
302
+ style={{ height: "200px" }}
303
+ ></textarea>
304
+ );
305
+ case "address":
306
+ return (
307
+ <VisnsAutocomplete
308
+ api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
309
+ country="AU"
310
+ field={settings.id}
311
+ inputValue={inputValue}
312
+ onSelect={autocompleteCallback}
313
+ setFormData={setFormData}
314
+ style={style}
315
+ />
316
+ );
317
+ case "dropdown":
318
+ case "dropdown-ajax":
319
+ return (
320
+ <Select
321
+ settings={settings}
322
+ className={inputClass[settings.id]}
323
+ onChange={onChange}
324
+ inputValue={inputValue === null ? "" : inputValue}
325
+ options={
326
+ settings.type === "dropdown"
327
+ ? settings.options
328
+ : options
329
+ }
330
+ dataOptions={dataOptions}
331
+ />
332
+ );
333
+ case "multi-dropdown":
334
+ case "multi-dropdown-ajax":
335
+ return (
336
+ <MultiSelect
337
+ settings={settings}
338
+ className={inputClass[settings.id]}
339
+ multi={
340
+ settings.hasOwnProperty("multi")
341
+ ? settings.multi
342
+ : false
343
+ }
344
+ onChange={onChangeSelect}
345
+ inputValue={inputValue === null ? "" : inputValue}
346
+ options={
347
+ settings.type === "multi-dropdown"
348
+ ? settings.options
349
+ : options
350
+ }
351
+ dataOptions={dataOptions}
352
+ style={style}
353
+ />
354
+ );
355
+ case "async-dropdown-ajax":
356
+ return (
357
+ <VisnsAsyncSelect
358
+ settings={settings}
359
+ className={inputClass[settings.id]}
360
+ multi={
361
+ settings.hasOwnProperty("multi")
362
+ ? settings.multi
363
+ : false
364
+ }
365
+ onChange={onChangeSelect}
366
+ inputValue={inputValue === null ? "" : inputValue}
367
+ options={options}
368
+ dataOptions={dataOptions}
369
+ />
370
+ );
371
+ case "file":
372
+ return (
373
+ <input
374
+ type="file"
375
+ data-name={settings.id}
376
+ className={inputClass[settings.id]}
377
+ onChange={onChange}
378
+ />
379
+ );
380
+ default:
381
+ return "";
382
+ }
383
+ };
384
+
385
+ const renderFieldLabel = () => {
386
+ if (
387
+ ![
388
+ "address",
389
+ "date",
390
+ "datetime",
391
+ "line-break",
392
+ "checkbox",
393
+ "multi-dropdown",
394
+ "multi-dropdown-ajax",
395
+ "async-dropdown-ajax",
396
+ "toggle",
397
+ "richeditor",
398
+ ].includes(settings.type)
399
+ ) {
400
+ return (
401
+ <span className="fi__span">
402
+ {settings.label} {settings.required ? "*" : ""}
403
+ </span>
404
+ );
405
+ }
406
+ };
407
+
408
+ const renderAdditionalContainer = () => {
409
+ switch (settings.type) {
410
+ case "date":
411
+ case "datetime":
412
+ case "time":
413
+ return (
414
+ <DatePicker
415
+ dateFormat={
416
+ settings.format
417
+ ? settings.format
418
+ : settings.type === "datetime"
419
+ ? "dd-MM-yyyy hh:mm aa"
420
+ : "dd-MM-yyyy"
421
+ }
422
+ isClearable
423
+ className={inputClass[settings.id]}
424
+ selected={inputValue || ""}
425
+ showMonthDropdown
426
+ showYearDropdown
427
+ scrollableYearDropdown
428
+ onChange={(date) => onChangeDate(date, settings.id)}
429
+ showTimeSelect={settings.type === "datetime"}
430
+ showTimeSelectOnly={settings.type === "time"}
431
+ timeIntervals={
432
+ settings.type === "time" ? 15 : undefined
433
+ }
434
+ timeCaption={
435
+ settings.type === "time" ? "Time" : undefined
436
+ }
437
+ shouldCloseOnSelect={true}
438
+ />
439
+ );
440
+ case "toggle":
441
+ return (
442
+ <div>
443
+ <Toggle
444
+ name={settings.id}
445
+ data-name={settings.id}
446
+ data-show={
447
+ settings.show
448
+ ? JSON.stringify(settings.show)
449
+ : ""
450
+ }
451
+ checked={
452
+ inputValue !== undefined
453
+ ? inputValue === ""
454
+ ? false
455
+ : inputValue === "on"
456
+ ? false
457
+ : inputValue
458
+ : false
459
+ }
460
+ onChange={onChangeToggle}
461
+ />
462
+ <span className="fi__toggletxt">
463
+ {settings.label} {settings.required ? "*" : ""}
464
+ </span>
465
+ </div>
466
+ );
467
+ default:
468
+ return "";
469
+ }
470
+ };
471
+
472
+ return (
473
+ <div className={formItemClass} style={formItemStyle}>
474
+ <label className="fi__label">
475
+ {renderLabel()}
476
+ {renderInput()}
477
+ {renderFieldLabel()}
478
+ </label>
479
+ {renderAdditionalContainer()}
480
+ </div>
481
+ );
710
482
  }
711
483
 
712
484
  export default Field;