@visns-studio/visns-components 2.1.0 → 2.1.1
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/components/cms/Field.jsx +155 -155
- package/package.json +1 -1
package/components/cms/Field.jsx
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import React, { useState, useEffect, useRef } from
|
|
2
|
-
import DatePicker from
|
|
3
|
-
import _ from
|
|
4
|
-
import ReactQuill, { Quill } from
|
|
5
|
-
import ImageUploader from
|
|
6
|
-
import Toggle from
|
|
7
|
-
import { NumericFormat, PatternFormat } from
|
|
8
|
-
import { motion } from
|
|
9
|
-
import { toast } from
|
|
10
|
-
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
import CustomFetch from
|
|
17
|
-
import Select from
|
|
18
|
-
import MultiSelect from
|
|
19
|
-
import VisnsAutocomplete from
|
|
20
|
-
import moment from
|
|
21
|
-
|
|
22
|
-
Quill.register(
|
|
1
|
+
import React, { useState, useEffect, useRef } from 'react';
|
|
2
|
+
import DatePicker from 'react-datepicker';
|
|
3
|
+
import _ from 'lodash';
|
|
4
|
+
import ReactQuill, { Quill } from 'react-quill';
|
|
5
|
+
import ImageUploader from 'quill-image-uploader';
|
|
6
|
+
import Toggle from 'react-toggle';
|
|
7
|
+
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
8
|
+
import { motion } from 'framer-motion';
|
|
9
|
+
import { toast } from 'react-toastify';
|
|
10
|
+
|
|
11
|
+
import 'react-toggle/style.css';
|
|
12
|
+
import 'react-quill/dist/quill.snow.css';
|
|
13
|
+
import 'react-datepicker/dist/react-datepicker.css';
|
|
14
|
+
import 'quill-image-uploader/dist/quill.imageUploader.min.css';
|
|
15
|
+
|
|
16
|
+
import CustomFetch from '../crm/Fetch';
|
|
17
|
+
import Select from '../crm/Select';
|
|
18
|
+
import MultiSelect from '../crm/MultiSelect';
|
|
19
|
+
import VisnsAutocomplete from '../crm/Autocomplete';
|
|
20
|
+
import moment from 'moment';
|
|
21
|
+
|
|
22
|
+
Quill.register('modules/imageUploader', ImageUploader);
|
|
23
23
|
|
|
24
24
|
const modules = {
|
|
25
25
|
toolbar: {
|
|
26
26
|
container: [
|
|
27
27
|
[{ header: [1, 2, false] }],
|
|
28
|
-
[
|
|
29
|
-
[{ list:
|
|
30
|
-
[
|
|
31
|
-
[
|
|
28
|
+
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
|
29
|
+
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
30
|
+
['link', 'image'],
|
|
31
|
+
['clean'],
|
|
32
32
|
],
|
|
33
33
|
},
|
|
34
34
|
imageUploader: {
|
|
@@ -40,15 +40,15 @@ const modules = {
|
|
|
40
40
|
},
|
|
41
41
|
}).then((response) => {
|
|
42
42
|
CustomFetch(
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
'/ajax/file/upload',
|
|
44
|
+
'POST',
|
|
45
45
|
response,
|
|
46
46
|
function (res) {
|
|
47
|
-
if (res.error ===
|
|
47
|
+
if (res.error === '') {
|
|
48
48
|
resolve(res.path);
|
|
49
49
|
} else {
|
|
50
50
|
toast.error(
|
|
51
|
-
res.error !== undefined ? res.error :
|
|
51
|
+
res.error !== undefined ? res.error : ''
|
|
52
52
|
);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -76,20 +76,20 @@ const Field = ({
|
|
|
76
76
|
const [options, setOptions] = useState([]);
|
|
77
77
|
const [dataOptions, setDataOptions] = useState([]);
|
|
78
78
|
const [formItemStyle, setFormItemStyle] = useState({});
|
|
79
|
-
const [formItemClass, setFormItemClass] = useState(
|
|
79
|
+
const [formItemClass, setFormItemClass] = useState('formItem');
|
|
80
80
|
|
|
81
81
|
useEffect(() => {
|
|
82
82
|
switch (settings.type) {
|
|
83
|
-
case
|
|
83
|
+
case 'hidden':
|
|
84
84
|
setFormItemStyle({
|
|
85
|
-
display:
|
|
85
|
+
display: 'none',
|
|
86
86
|
});
|
|
87
87
|
break;
|
|
88
|
-
case
|
|
88
|
+
case 'dropdown-ajax':
|
|
89
89
|
let filter = {};
|
|
90
90
|
|
|
91
91
|
if (
|
|
92
|
-
settings.hasOwnProperty(
|
|
92
|
+
settings.hasOwnProperty('where') &&
|
|
93
93
|
settings.where.length > 0
|
|
94
94
|
) {
|
|
95
95
|
filter = {
|
|
@@ -97,7 +97,7 @@ const Field = ({
|
|
|
97
97
|
};
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
CustomFetch(settings.url,
|
|
100
|
+
CustomFetch(settings.url, 'POST', filter, function (result) {
|
|
101
101
|
setOptions(result.data);
|
|
102
102
|
|
|
103
103
|
let dataArray = [];
|
|
@@ -109,8 +109,8 @@ const Field = ({
|
|
|
109
109
|
let modifiedObject = {};
|
|
110
110
|
|
|
111
111
|
Object.keys(_tempObject).forEach(function (c) {
|
|
112
|
-
if (c !==
|
|
113
|
-
modifiedObject[
|
|
112
|
+
if (c !== 'id' && c !== 'label') {
|
|
113
|
+
modifiedObject['data-' + c] =
|
|
114
114
|
_tempObject[c];
|
|
115
115
|
}
|
|
116
116
|
});
|
|
@@ -124,11 +124,11 @@ const Field = ({
|
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
126
|
break;
|
|
127
|
-
case
|
|
127
|
+
case 'multi-dropdown-ajax':
|
|
128
128
|
let multiFilter = {};
|
|
129
129
|
|
|
130
130
|
if (
|
|
131
|
-
settings.hasOwnProperty(
|
|
131
|
+
settings.hasOwnProperty('where') &&
|
|
132
132
|
settings.where.length > 0
|
|
133
133
|
) {
|
|
134
134
|
multiFilter = {
|
|
@@ -138,7 +138,7 @@ const Field = ({
|
|
|
138
138
|
|
|
139
139
|
CustomFetch(
|
|
140
140
|
settings.url,
|
|
141
|
-
|
|
141
|
+
'POST',
|
|
142
142
|
multiFilter,
|
|
143
143
|
function (result) {
|
|
144
144
|
setOptions(result.data);
|
|
@@ -152,8 +152,8 @@ const Field = ({
|
|
|
152
152
|
let modifiedObject = {};
|
|
153
153
|
|
|
154
154
|
Object.keys(_tempObject).forEach(function (c) {
|
|
155
|
-
if (c !==
|
|
156
|
-
modifiedObject[
|
|
155
|
+
if (c !== 'id' && c !== 'label') {
|
|
156
|
+
modifiedObject['data-' + c] =
|
|
157
157
|
_tempObject[c];
|
|
158
158
|
}
|
|
159
159
|
});
|
|
@@ -172,15 +172,15 @@ const Field = ({
|
|
|
172
172
|
break;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
if (settings.size ===
|
|
176
|
-
setFormItemClass(
|
|
175
|
+
if (settings.size === 'full') {
|
|
176
|
+
setFormItemClass('formItem fwItem');
|
|
177
177
|
}
|
|
178
178
|
}, [settings]);
|
|
179
179
|
|
|
180
180
|
useEffect(() => {
|
|
181
181
|
let filter = {};
|
|
182
182
|
|
|
183
|
-
if (settings.hasOwnProperty(
|
|
183
|
+
if (settings.hasOwnProperty('child')) {
|
|
184
184
|
if (inputValue > 0) {
|
|
185
185
|
filter = {
|
|
186
186
|
where: [
|
|
@@ -193,7 +193,7 @@ const Field = ({
|
|
|
193
193
|
|
|
194
194
|
CustomFetch(
|
|
195
195
|
settings.child.url,
|
|
196
|
-
|
|
196
|
+
'POST',
|
|
197
197
|
filter,
|
|
198
198
|
function (result) {
|
|
199
199
|
childDropdownCallback({
|
|
@@ -207,7 +207,7 @@ const Field = ({
|
|
|
207
207
|
}, [inputValue, settings]);
|
|
208
208
|
|
|
209
209
|
useEffect(() => {
|
|
210
|
-
if (settings.hasOwnProperty(
|
|
210
|
+
if (settings.hasOwnProperty('options')) {
|
|
211
211
|
if (settings.options.length > 0) {
|
|
212
212
|
let dataArray = [];
|
|
213
213
|
|
|
@@ -218,8 +218,8 @@ const Field = ({
|
|
|
218
218
|
let modifiedObject = {};
|
|
219
219
|
|
|
220
220
|
Object.keys(_tempObject).forEach(function (c) {
|
|
221
|
-
if (c !==
|
|
222
|
-
modifiedObject[
|
|
221
|
+
if (c !== 'id' && c !== 'label') {
|
|
222
|
+
modifiedObject['data-' + c] = _tempObject[c];
|
|
223
223
|
}
|
|
224
224
|
});
|
|
225
225
|
|
|
@@ -238,26 +238,26 @@ const Field = ({
|
|
|
238
238
|
<div className={formItemClass} style={formItemStyle}>
|
|
239
239
|
<label
|
|
240
240
|
className={
|
|
241
|
-
settings.type ===
|
|
242
|
-
?
|
|
243
|
-
: settings.type ===
|
|
244
|
-
?
|
|
245
|
-
:
|
|
241
|
+
settings.type === 'image'
|
|
242
|
+
? 'fi__flabel'
|
|
243
|
+
: settings.type === 'richeditor'
|
|
244
|
+
? 'fi__flabel'
|
|
245
|
+
: 'fi__label'
|
|
246
246
|
}
|
|
247
247
|
>
|
|
248
248
|
{(() => {
|
|
249
249
|
if (
|
|
250
|
-
settings.type ===
|
|
251
|
-
settings.type ===
|
|
252
|
-
settings.type ===
|
|
253
|
-
settings.type ===
|
|
254
|
-
settings.type ===
|
|
255
|
-
settings.type ===
|
|
250
|
+
settings.type === 'address' ||
|
|
251
|
+
settings.type === 'date' ||
|
|
252
|
+
settings.type === 'datetime' ||
|
|
253
|
+
settings.type === 'checkbox' ||
|
|
254
|
+
settings.type === 'multi-dropdown' ||
|
|
255
|
+
settings.type === 'multi-dropdown-ajax'
|
|
256
256
|
) {
|
|
257
257
|
return (
|
|
258
258
|
<span className="fi__span prefocus">
|
|
259
|
-
{settings.label}{
|
|
260
|
-
{settings.required === true ?
|
|
259
|
+
{settings.label}{' '}
|
|
260
|
+
{settings.required === true ? '*' : ''}
|
|
261
261
|
</span>
|
|
262
262
|
);
|
|
263
263
|
}
|
|
@@ -265,13 +265,13 @@ const Field = ({
|
|
|
265
265
|
|
|
266
266
|
{(() => {
|
|
267
267
|
if (
|
|
268
|
-
settings.type ===
|
|
269
|
-
settings.type ===
|
|
268
|
+
settings.type === 'image' ||
|
|
269
|
+
settings.type === 'richeditor'
|
|
270
270
|
) {
|
|
271
271
|
return (
|
|
272
272
|
<>
|
|
273
|
-
{settings.label}{
|
|
274
|
-
{settings.required === true ?
|
|
273
|
+
{settings.label}{' '}
|
|
274
|
+
{settings.required === true ? '*' : ''}
|
|
275
275
|
</>
|
|
276
276
|
);
|
|
277
277
|
}
|
|
@@ -280,13 +280,13 @@ const Field = ({
|
|
|
280
280
|
{(() => {
|
|
281
281
|
let htmlContainer;
|
|
282
282
|
switch (settings.type) {
|
|
283
|
-
case
|
|
283
|
+
case 'text':
|
|
284
284
|
htmlContainer = (
|
|
285
285
|
<input
|
|
286
286
|
type="text"
|
|
287
287
|
name={settings.id}
|
|
288
288
|
readOnly={
|
|
289
|
-
settings.hasOwnProperty(
|
|
289
|
+
settings.hasOwnProperty('readOnly')
|
|
290
290
|
? settings.readOnly
|
|
291
291
|
: false
|
|
292
292
|
}
|
|
@@ -294,14 +294,14 @@ const Field = ({
|
|
|
294
294
|
placeholder=" "
|
|
295
295
|
onChange={onChange}
|
|
296
296
|
value={
|
|
297
|
-
inputValue && inputValue !==
|
|
297
|
+
inputValue && inputValue !== 'null'
|
|
298
298
|
? inputValue
|
|
299
|
-
:
|
|
299
|
+
: ''
|
|
300
300
|
}
|
|
301
301
|
/>
|
|
302
302
|
);
|
|
303
303
|
break;
|
|
304
|
-
case
|
|
304
|
+
case 'json':
|
|
305
305
|
htmlContainer = (
|
|
306
306
|
<input
|
|
307
307
|
type="text"
|
|
@@ -311,14 +311,14 @@ const Field = ({
|
|
|
311
311
|
placeholder=" "
|
|
312
312
|
onChange={onChange}
|
|
313
313
|
value={
|
|
314
|
-
inputValue && inputValue !==
|
|
314
|
+
inputValue && inputValue !== 'null'
|
|
315
315
|
? inputValue
|
|
316
|
-
:
|
|
316
|
+
: ''
|
|
317
317
|
}
|
|
318
318
|
/>
|
|
319
319
|
);
|
|
320
320
|
break;
|
|
321
|
-
case
|
|
321
|
+
case 'password':
|
|
322
322
|
htmlContainer = (
|
|
323
323
|
<input
|
|
324
324
|
type="password"
|
|
@@ -327,14 +327,14 @@ const Field = ({
|
|
|
327
327
|
placeholder=" "
|
|
328
328
|
onChange={onChange}
|
|
329
329
|
value={
|
|
330
|
-
inputValue && inputValue !==
|
|
330
|
+
inputValue && inputValue !== 'null'
|
|
331
331
|
? inputValue
|
|
332
|
-
:
|
|
332
|
+
: ''
|
|
333
333
|
}
|
|
334
334
|
/>
|
|
335
335
|
);
|
|
336
336
|
break;
|
|
337
|
-
case
|
|
337
|
+
case 'phone':
|
|
338
338
|
htmlContainer = (
|
|
339
339
|
<PatternFormat
|
|
340
340
|
name={settings.id}
|
|
@@ -349,14 +349,14 @@ const Field = ({
|
|
|
349
349
|
allowEmptyFormatting
|
|
350
350
|
mask="_"
|
|
351
351
|
value={
|
|
352
|
-
inputValue && inputValue !==
|
|
352
|
+
inputValue && inputValue !== 'null'
|
|
353
353
|
? inputValue
|
|
354
|
-
:
|
|
354
|
+
: ''
|
|
355
355
|
}
|
|
356
356
|
/>
|
|
357
357
|
);
|
|
358
358
|
break;
|
|
359
|
-
case
|
|
359
|
+
case 'mobile':
|
|
360
360
|
htmlContainer = (
|
|
361
361
|
<PatternFormat
|
|
362
362
|
className={inputClass[settings.id]}
|
|
@@ -370,14 +370,14 @@ const Field = ({
|
|
|
370
370
|
allowEmptyFormatting
|
|
371
371
|
mask="_"
|
|
372
372
|
value={
|
|
373
|
-
inputValue && inputValue !==
|
|
373
|
+
inputValue && inputValue !== 'null'
|
|
374
374
|
? inputValue
|
|
375
|
-
:
|
|
375
|
+
: ''
|
|
376
376
|
}
|
|
377
377
|
/>
|
|
378
378
|
);
|
|
379
379
|
break;
|
|
380
|
-
case
|
|
380
|
+
case 'currency':
|
|
381
381
|
htmlContainer = (
|
|
382
382
|
<NumericFormat
|
|
383
383
|
name={settings.id}
|
|
@@ -389,31 +389,31 @@ const Field = ({
|
|
|
389
389
|
);
|
|
390
390
|
}}
|
|
391
391
|
thousandSeparator={true}
|
|
392
|
-
prefix={
|
|
392
|
+
prefix={'$'}
|
|
393
393
|
value={
|
|
394
|
-
inputValue && inputValue !==
|
|
394
|
+
inputValue && inputValue !== 'null'
|
|
395
395
|
? inputValue
|
|
396
|
-
:
|
|
396
|
+
: ''
|
|
397
397
|
}
|
|
398
398
|
/>
|
|
399
399
|
);
|
|
400
400
|
break;
|
|
401
|
-
case
|
|
401
|
+
case 'textarea':
|
|
402
402
|
htmlContainer = (
|
|
403
403
|
<textarea
|
|
404
404
|
name={settings.id}
|
|
405
405
|
className={inputClass[settings.id]}
|
|
406
406
|
onChange={onChange}
|
|
407
407
|
value={
|
|
408
|
-
inputValue && inputValue !==
|
|
408
|
+
inputValue && inputValue !== 'null'
|
|
409
409
|
? inputValue
|
|
410
|
-
:
|
|
410
|
+
: ''
|
|
411
411
|
}
|
|
412
|
-
style={{ height:
|
|
412
|
+
style={{ height: '200px' }}
|
|
413
413
|
></textarea>
|
|
414
414
|
);
|
|
415
415
|
break;
|
|
416
|
-
case
|
|
416
|
+
case 'address':
|
|
417
417
|
htmlContainer = (
|
|
418
418
|
<VisnsAutocomplete
|
|
419
419
|
onSelect={(place) =>
|
|
@@ -426,63 +426,63 @@ const Field = ({
|
|
|
426
426
|
/>
|
|
427
427
|
);
|
|
428
428
|
break;
|
|
429
|
-
case
|
|
429
|
+
case 'dropdown':
|
|
430
430
|
htmlContainer = (
|
|
431
431
|
<Select
|
|
432
432
|
settings={settings}
|
|
433
433
|
className={inputClass[settings.id]}
|
|
434
434
|
onChange={onChange}
|
|
435
435
|
inputValue={
|
|
436
|
-
inputValue === null ?
|
|
436
|
+
inputValue === null ? '' : inputValue
|
|
437
437
|
}
|
|
438
438
|
options={settings.options}
|
|
439
439
|
dataOptions={dataOptions}
|
|
440
440
|
/>
|
|
441
441
|
);
|
|
442
442
|
break;
|
|
443
|
-
case
|
|
443
|
+
case 'dropdown-ajax':
|
|
444
444
|
htmlContainer = (
|
|
445
445
|
<Select
|
|
446
446
|
settings={settings}
|
|
447
447
|
className={inputClass[settings.id]}
|
|
448
448
|
onChange={onChange}
|
|
449
449
|
inputValue={
|
|
450
|
-
inputValue === null ?
|
|
450
|
+
inputValue === null ? '' : inputValue
|
|
451
451
|
}
|
|
452
452
|
options={options}
|
|
453
453
|
dataOptions={dataOptions}
|
|
454
454
|
/>
|
|
455
455
|
);
|
|
456
456
|
break;
|
|
457
|
-
case
|
|
457
|
+
case 'multi-dropdown':
|
|
458
458
|
htmlContainer = (
|
|
459
459
|
<MultiSelect
|
|
460
460
|
settings={settings}
|
|
461
461
|
className={inputClass[settings.id]}
|
|
462
462
|
onChange={onChangeSelect}
|
|
463
463
|
inputValue={
|
|
464
|
-
inputValue === null ?
|
|
464
|
+
inputValue === null ? '' : inputValue
|
|
465
465
|
}
|
|
466
466
|
options={settings.options}
|
|
467
467
|
dataOptions={dataOptions}
|
|
468
468
|
/>
|
|
469
469
|
);
|
|
470
470
|
break;
|
|
471
|
-
case
|
|
471
|
+
case 'multi-dropdown-ajax':
|
|
472
472
|
htmlContainer = (
|
|
473
473
|
<MultiSelect
|
|
474
474
|
settings={settings}
|
|
475
475
|
className={inputClass[settings.id]}
|
|
476
476
|
onChange={onChangeSelect}
|
|
477
477
|
inputValue={
|
|
478
|
-
inputValue === null ?
|
|
478
|
+
inputValue === null ? '' : inputValue
|
|
479
479
|
}
|
|
480
480
|
options={options}
|
|
481
481
|
dataOptions={dataOptions}
|
|
482
482
|
/>
|
|
483
483
|
);
|
|
484
484
|
break;
|
|
485
|
-
case
|
|
485
|
+
case 'file':
|
|
486
486
|
htmlContainer = (
|
|
487
487
|
<input
|
|
488
488
|
type="file"
|
|
@@ -493,17 +493,17 @@ const Field = ({
|
|
|
493
493
|
);
|
|
494
494
|
break;
|
|
495
495
|
|
|
496
|
-
case
|
|
496
|
+
case 'line-break':
|
|
497
497
|
htmlContainer = (
|
|
498
498
|
<div className="formbreak">
|
|
499
499
|
<span>
|
|
500
|
-
{settings.label}{
|
|
501
|
-
{settings.required === true ?
|
|
500
|
+
{settings.label}{' '}
|
|
501
|
+
{settings.required === true ? '*' : ''}
|
|
502
502
|
</span>
|
|
503
503
|
</div>
|
|
504
504
|
);
|
|
505
505
|
break;
|
|
506
|
-
case
|
|
506
|
+
case 'checkbox':
|
|
507
507
|
htmlContainer = (
|
|
508
508
|
<input
|
|
509
509
|
type="checkbox"
|
|
@@ -511,12 +511,12 @@ const Field = ({
|
|
|
511
511
|
className={inputClass[settings.id]}
|
|
512
512
|
placeholder=" "
|
|
513
513
|
onChange={onChange}
|
|
514
|
-
value={inputValue ||
|
|
514
|
+
value={inputValue || ''}
|
|
515
515
|
/>
|
|
516
516
|
);
|
|
517
517
|
break;
|
|
518
518
|
default:
|
|
519
|
-
htmlContainer =
|
|
519
|
+
htmlContainer = '';
|
|
520
520
|
break;
|
|
521
521
|
}
|
|
522
522
|
|
|
@@ -525,21 +525,21 @@ const Field = ({
|
|
|
525
525
|
|
|
526
526
|
{(() => {
|
|
527
527
|
if (
|
|
528
|
-
settings.type !==
|
|
529
|
-
settings.type !==
|
|
530
|
-
settings.type !==
|
|
531
|
-
settings.type !==
|
|
532
|
-
settings.type !==
|
|
533
|
-
settings.type !==
|
|
534
|
-
settings.type !==
|
|
535
|
-
settings.type !==
|
|
536
|
-
settings.type !==
|
|
537
|
-
settings.type !==
|
|
528
|
+
settings.type !== 'address' &&
|
|
529
|
+
settings.type !== 'date' &&
|
|
530
|
+
settings.type !== 'datetime' &&
|
|
531
|
+
settings.type !== 'line-break' &&
|
|
532
|
+
settings.type !== 'checkbox' &&
|
|
533
|
+
settings.type !== 'multi-dropdown' &&
|
|
534
|
+
settings.type !== 'multi-dropdown-ajax' &&
|
|
535
|
+
settings.type !== 'toggle' &&
|
|
536
|
+
settings.type !== 'richeditor' &&
|
|
537
|
+
settings.type !== 'image'
|
|
538
538
|
) {
|
|
539
539
|
return (
|
|
540
540
|
<span className="fi__span">
|
|
541
|
-
{settings.label}{
|
|
542
|
-
{settings.required === true ?
|
|
541
|
+
{settings.label}{' '}
|
|
542
|
+
{settings.required === true ? '*' : ''}
|
|
543
543
|
</span>
|
|
544
544
|
);
|
|
545
545
|
}
|
|
@@ -549,19 +549,19 @@ const Field = ({
|
|
|
549
549
|
{(() => {
|
|
550
550
|
let htmlContainer;
|
|
551
551
|
switch (settings.type) {
|
|
552
|
-
case
|
|
552
|
+
case 'date':
|
|
553
553
|
htmlContainer = (
|
|
554
554
|
<DatePicker
|
|
555
555
|
dateFormat={
|
|
556
556
|
settings.format
|
|
557
557
|
? settings.format
|
|
558
|
-
:
|
|
558
|
+
: 'dd-MM-yyyy'
|
|
559
559
|
}
|
|
560
560
|
className={inputClass[settings.id]}
|
|
561
561
|
selected={
|
|
562
562
|
inputValue
|
|
563
563
|
? moment(inputValue).toDate()
|
|
564
|
-
:
|
|
564
|
+
: ''
|
|
565
565
|
}
|
|
566
566
|
showMonthDropdown
|
|
567
567
|
showYearDropdown
|
|
@@ -572,20 +572,20 @@ const Field = ({
|
|
|
572
572
|
/>
|
|
573
573
|
);
|
|
574
574
|
break;
|
|
575
|
-
case
|
|
575
|
+
case 'datetime':
|
|
576
576
|
htmlContainer = (
|
|
577
577
|
<DatePicker
|
|
578
578
|
dateFormat={
|
|
579
579
|
settings.format
|
|
580
580
|
? settings.format
|
|
581
|
-
:
|
|
581
|
+
: 'dd-MM-yyyy hh:mm aa'
|
|
582
582
|
}
|
|
583
583
|
showTimeSelect
|
|
584
584
|
className={inputClass[settings.id]}
|
|
585
585
|
selected={
|
|
586
586
|
inputValue
|
|
587
587
|
? moment(inputValue).toDate()
|
|
588
|
-
:
|
|
588
|
+
: ''
|
|
589
589
|
}
|
|
590
590
|
showMonthDropdown
|
|
591
591
|
showYearDropdown
|
|
@@ -597,13 +597,13 @@ const Field = ({
|
|
|
597
597
|
/>
|
|
598
598
|
);
|
|
599
599
|
break;
|
|
600
|
-
case
|
|
600
|
+
case 'time':
|
|
601
601
|
htmlContainer = (
|
|
602
602
|
<DatePicker
|
|
603
603
|
dateFormat={
|
|
604
604
|
settings.format
|
|
605
605
|
? settings.format
|
|
606
|
-
:
|
|
606
|
+
: 'hh:mm aa'
|
|
607
607
|
}
|
|
608
608
|
showTimeSelect
|
|
609
609
|
showTimeSelectOnly
|
|
@@ -613,7 +613,7 @@ const Field = ({
|
|
|
613
613
|
selected={
|
|
614
614
|
inputValue
|
|
615
615
|
? moment(inputValue).toDate()
|
|
616
|
-
:
|
|
616
|
+
: ''
|
|
617
617
|
}
|
|
618
618
|
onChange={(date) =>
|
|
619
619
|
onChangeDate(date, settings.id)
|
|
@@ -622,7 +622,7 @@ const Field = ({
|
|
|
622
622
|
/>
|
|
623
623
|
);
|
|
624
624
|
break;
|
|
625
|
-
case
|
|
625
|
+
case 'toggle':
|
|
626
626
|
htmlContainer = (
|
|
627
627
|
<div>
|
|
628
628
|
<Toggle
|
|
@@ -630,13 +630,13 @@ const Field = ({
|
|
|
630
630
|
data-show={
|
|
631
631
|
settings.show
|
|
632
632
|
? JSON.stringify(settings.show)
|
|
633
|
-
:
|
|
633
|
+
: ''
|
|
634
634
|
}
|
|
635
635
|
checked={
|
|
636
636
|
inputValue !== undefined
|
|
637
|
-
? inputValue ===
|
|
637
|
+
? inputValue === ''
|
|
638
638
|
? false
|
|
639
|
-
: inputValue ===
|
|
639
|
+
: inputValue === 'on'
|
|
640
640
|
? false
|
|
641
641
|
: Boolean(inputValue)
|
|
642
642
|
: false
|
|
@@ -644,48 +644,48 @@ const Field = ({
|
|
|
644
644
|
onChange={onChangeToggle}
|
|
645
645
|
/>
|
|
646
646
|
<span className="fi__toggletxt">
|
|
647
|
-
{settings.label}{
|
|
648
|
-
{settings.required === true ?
|
|
647
|
+
{settings.label}{' '}
|
|
648
|
+
{settings.required === true ? '*' : ''}
|
|
649
649
|
</span>
|
|
650
650
|
</div>
|
|
651
651
|
);
|
|
652
652
|
break;
|
|
653
|
-
case
|
|
653
|
+
case 'richeditor':
|
|
654
654
|
htmlContainer = (
|
|
655
|
-
|
|
655
|
+
<React.Fragment style={{ height: '1000px' }}>
|
|
656
656
|
<ReactQuill
|
|
657
657
|
theme="snow"
|
|
658
658
|
name={settings.id}
|
|
659
659
|
onChange={(value) => {
|
|
660
660
|
onChangeRicheditor(value, settings.id);
|
|
661
661
|
}}
|
|
662
|
-
value={inputValue ||
|
|
662
|
+
value={inputValue || ''}
|
|
663
663
|
modules={modules}
|
|
664
664
|
formats={[
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
665
|
+
'header',
|
|
666
|
+
'bold',
|
|
667
|
+
'italic',
|
|
668
|
+
'underline',
|
|
669
|
+
'strike',
|
|
670
|
+
'blockquote',
|
|
671
|
+
'list',
|
|
672
|
+
'bullet',
|
|
673
|
+
'link',
|
|
674
|
+
'image',
|
|
675
675
|
]}
|
|
676
676
|
/>
|
|
677
|
-
|
|
677
|
+
</React.Fragment>
|
|
678
678
|
);
|
|
679
679
|
break;
|
|
680
|
-
case
|
|
680
|
+
case 'image':
|
|
681
681
|
htmlContainer = (
|
|
682
682
|
<>
|
|
683
683
|
<motion.div
|
|
684
684
|
className="progress__bar"
|
|
685
|
-
initial={{ width:
|
|
685
|
+
initial={{ width: '0%' }}
|
|
686
686
|
animate={{
|
|
687
687
|
width:
|
|
688
|
-
uploadProgress[settings.id] +
|
|
688
|
+
uploadProgress[settings.id] + '%',
|
|
689
689
|
}}
|
|
690
690
|
transition={{
|
|
691
691
|
duration: 3,
|
|
@@ -698,17 +698,17 @@ const Field = ({
|
|
|
698
698
|
className={inputClass[settings.id]}
|
|
699
699
|
onChange={onChangeFile}
|
|
700
700
|
ref={inputFile}
|
|
701
|
-
style={{ display:
|
|
701
|
+
style={{ display: 'none' }}
|
|
702
702
|
/>
|
|
703
703
|
<div
|
|
704
704
|
onClick={() => {
|
|
705
705
|
inputFile.current.click();
|
|
706
706
|
}}
|
|
707
707
|
>
|
|
708
|
-
{inputValue && inputValue !==
|
|
708
|
+
{inputValue && inputValue !== '' ? (
|
|
709
709
|
<>
|
|
710
710
|
{inputValue.file_url &&
|
|
711
|
-
inputValue.file_url !==
|
|
711
|
+
inputValue.file_url !== '' ? (
|
|
712
712
|
<img
|
|
713
713
|
src={inputValue.file_url}
|
|
714
714
|
width="200"
|
|
@@ -734,7 +734,7 @@ const Field = ({
|
|
|
734
734
|
);
|
|
735
735
|
break;
|
|
736
736
|
default:
|
|
737
|
-
htmlContainer =
|
|
737
|
+
htmlContainer = '';
|
|
738
738
|
break;
|
|
739
739
|
}
|
|
740
740
|
|
package/package.json
CHANGED