@visns-studio/visns-components 1.0.6 → 1.0.8

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