@visns-studio/visns-components 4.0.7 → 4.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 (11) hide show
  1. package/components/cms/sorting/Item.jsx +1 -1
  2. package/components/crm/Field.jsx +523 -484
  3. package/components/crm/Form.jsx +14 -0
  4. package/components/crm/auth/Profile.jsx +157 -55
  5. package/components/crm/auth/styles/Profile.module.css +219 -0
  6. package/components/crm/generic/GenericDynamic.jsx +96 -108
  7. package/components/crm/generic/GenericFormBuilder.jsx +238 -145
  8. package/components/crm/generic/styles/GenericDynamic.module.css +961 -0
  9. package/components/crm/generic/styles/GenericFormBuilder.module.css +961 -0
  10. package/components/crm/styles/Field.module.css +146 -0
  11. package/package.json +6 -5
package/components/crm/Field.jsx CHANGED
@@ -9,6 +9,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
9
9
  import { NumericFormat, PatternFormat } from 'react-number-format';
10
10
  import { Editor } from '@tinymce/tinymce-react';
11
11
  import { CloudDownload, Copy, TrashCan } from 'akar-icons';
12
+ import styles from './styles/Field.module.css';
12
13
 
13
14
  import CustomFetch from './Fetch';
14
15
  import MultiSelect from './MultiSelect';
@@ -33,10 +34,11 @@ function Field({
33
34
  onChangeCheckbox,
34
35
  onChangeColour,
35
36
  onChangeDate,
37
+ onChangeNumberFormat,
36
38
  onChangeSelect,
39
+ onChangeSignature,
37
40
  onChangeRicheditor,
38
41
  onChangeToggle,
39
- onChangeNumberFormat,
40
42
  onFileDownload,
41
43
  setFormData,
42
44
  settings,
@@ -251,11 +253,12 @@ function Field({
251
253
  'radio',
252
254
  'radio-ajax',
253
255
  'richeditor',
256
+ 'signature',
254
257
  'time',
255
258
  ].includes(settings.type)
256
259
  ) {
257
260
  return (
258
- <span className="fi__span prefocus">
261
+ <span className={`${styles.fi__span} ${styles.prefocus}`}>
259
262
  {settings.label} {settings.required ? '*' : ''}
260
263
  </span>
261
264
  );
@@ -270,7 +273,7 @@ function Field({
270
273
  );
271
274
  } else {
272
275
  return (
273
- <span className="fi__span prefocus">
276
+ <span className={`${styles.fi__span} ${styles.prefocus}`}>
274
277
  {settings.label} {settings.required ? '*' : ''}
275
278
  </span>
276
279
  );
@@ -318,60 +321,39 @@ function Field({
318
321
 
319
322
  const renderInput = () => {
320
323
  switch (settings.type) {
321
- case 'radio':
322
- return settings.options?.length > 0 ? (
323
- <div className="fi__optionscontainer">
324
- {settings.options.map((option, index) => (
325
- <div
326
- key={`${settings.id}-checkbox-option-${index}`}
327
- className="fi__checkboxcontainer"
328
- >
329
- <input
330
- name={settings.id}
331
- data-name={settings.id}
332
- type="radio"
333
- className="fi__customcheckbox"
334
- value={option.id}
335
- checked={
336
- parseInt(inputValue) ===
337
- parseInt(option.id)
338
- }
339
- onChange={onChange}
340
- />
341
- <label className="fi__checkboxlabel">
342
- {option.label}
343
- </label>{' '}
344
- </div>
345
- ))}
346
- </div>
347
- ) : null;
348
- case 'radio-ajax':
349
- return options?.length > 0 ? (
350
- <div className="fi__optionscontainer">
351
- {options.map((option, index) => (
352
- <div
353
- key={`${settings.id}-checkbox-option-${index}`}
354
- className="fi__checkboxcontainer"
355
- >
356
- <input
357
- name={settings.id}
358
- data-name={settings.id}
359
- type="radio"
360
- className="fi__customcheckbox"
361
- value={option.id}
362
- checked={
363
- parseInt(inputValue) ===
364
- parseInt(option.id)
365
- }
366
- onChange={onChange}
367
- />
368
- <label className="fi__checkboxlabel">
369
- {option.label}
370
- </label>{' '}
371
- </div>
372
- ))}
373
- </div>
374
- ) : null;
324
+ case 'address':
325
+ return (
326
+ <VisnsAutocomplete
327
+ api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
328
+ country="AU"
329
+ field={settings.id}
330
+ inputValue={inputValue}
331
+ mapbox={mapbox}
332
+ onSelect={autocompleteCallback}
333
+ setFormData={setFormData}
334
+ style={style}
335
+ />
336
+ );
337
+ case 'async-dropdown-ajax':
338
+ return (
339
+ <VisnsAsyncSelect
340
+ settings={settings}
341
+ className={inputClass[settings.id]}
342
+ multi={
343
+ settings.hasOwnProperty('multi')
344
+ ? settings.multi
345
+ : false
346
+ }
347
+ onChange={onChangeSelect}
348
+ inputValue={
349
+ inputValue === null || inputValue === undefined
350
+ ? ''
351
+ : inputValue
352
+ }
353
+ options={options}
354
+ dataOptions={dataOptions}
355
+ />
356
+ );
375
357
  case 'checkbox':
376
358
  return settings.options?.length > 0 ? (
377
359
  <div
@@ -399,88 +381,56 @@ function Field({
399
381
  ))}
400
382
  </div>
401
383
  ) : null;
402
- case 'text':
403
- case 'password':
404
- return (
405
- <input
406
- type={settings.type}
407
- data-name={settings.id}
408
- className={inputClass[settings.id]}
409
- placeholder=" "
410
- onChange={onChange}
411
- value={
412
- inputValue && inputValue !== 'null'
413
- ? inputValue
414
- : ''
415
- }
416
- readOnly={settings.readOnly ? settings.readOnly : false}
417
- autoComplete="off"
418
- />
419
- );
420
- case 'json':
421
- return (
422
- <input
423
- type={settings.type}
424
- data-name={settings.id}
425
- data-parent={settings.parent}
426
- className={inputClass[settings.id]}
427
- placeholder=" "
428
- onChange={onChange}
429
- value={
430
- inputValue && inputValue !== 'null'
431
- ? inputValue
432
- : ''
433
- }
434
- autoComplete="off"
435
- />
436
- );
437
- case 'html5_date':
438
- return (
439
- <input
440
- type="date"
441
- data-name={settings.id}
442
- className={inputClass[settings.id]}
443
- placeholder=" "
444
- onChange={onChange}
445
- value={
446
- inputValue && inputValue !== 'null'
447
- ? inputValue
448
- : ''
449
- }
450
- autoComplete="off"
451
- />
452
- );
453
- case 'html5_datetime':
454
- return (
455
- <input
456
- type="datetime-local"
457
- data-name={settings.id}
458
- className={inputClass[settings.id]}
459
- placeholder=" "
460
- onChange={onChange}
461
- value={
462
- inputValue && inputValue !== 'null'
463
- ? inputValue
464
- : ''
465
- }
466
- autoComplete="off"
467
- />
468
- );
469
- case 'html5_time':
384
+ case 'colour':
470
385
  return (
471
- <input
472
- type="time"
473
- data-name={settings.id}
474
- className={inputClass[settings.id]}
475
- placeholder=" "
476
- onChange={onChange}
477
- value={
478
- inputValue && inputValue !== 'null'
479
- ? inputValue
480
- : ''
481
- }
482
- autoComplete="off"
483
- />
386
+ <div className="cpicker">
387
+ <div
388
+ className="cpicker__box"
389
+ style={
390
+ inputValue && inputValue !== 'null'
391
+ ? { background: inputValue }
392
+ : {}
393
+ }
394
+ ></div>
395
+ <div className="cpicker__btn">
396
+ <button
397
+ onClick={(e) => {
398
+ e.preventDefault();
399
+
400
+ setColorPickerShow(
401
+ colorPickerShow === true ? false : true
402
+ );
403
+ }}
404
+ >
405
+ Pick Color
406
+ </button>
407
+ {colorPickerShow === true ? (
408
+ <div style={popover}>
409
+ <div
410
+ style={cover}
411
+ onClick={() => {
412
+ setColorPickerShow(false);
413
+ }}
414
+ />
415
+
416
+ <BlockPicker
417
+ color={
418
+ inputValue && inputValue !== 'null'
419
+ ? inputValue
420
+ : ''
421
+ }
422
+ onChangeComplete={(color, event) => {
423
+ onChangeColour(
424
+ event,
425
+ color,
426
+ settings.id
427
+ );
428
+ }}
429
+ />
430
+ </div>
431
+ ) : null}
432
+ </div>
433
+ </div>
484
434
  );
485
435
  case 'copytoclipboard':
486
436
  return (
@@ -513,181 +463,25 @@ function Field({
513
463
  </CopyToClipboard>
514
464
  </>
515
465
  );
516
- case 'plaindate':
466
+ case 'currency':
517
467
  return (
518
- <div
519
- className="fi__div"
520
- style={
521
- settings.height
522
- ? {
523
- height: settings.height,
524
- }
525
- : {}
468
+ <NumericFormat
469
+ data-name={settings.id}
470
+ className={inputClass[settings.id]}
471
+ onValueChange={(values) => {
472
+ onChangeNumberFormat(values, settings.id);
473
+ }}
474
+ thousandSeparator={true}
475
+ prefix={'$'}
476
+ value={
477
+ inputValue && inputValue !== 'null'
478
+ ? inputValue
479
+ : ''
526
480
  }
527
- >
528
- {inputValue && inputValue !== 'null'
529
- ? moment(inputValue).format('DD-MM-YYYY')
530
- : ''}
531
- </div>
481
+ />
532
482
  );
533
- case 'plaindatetime':
534
- return (
535
- <div
536
- className="fi__div"
537
- style={
538
- settings.height ? { height: settings.height } : {}
539
- }
540
- >
541
- {inputValue && inputValue !== 'null'
542
- ? moment(inputValue).format('DD-MM-YYYY hh:mm A')
543
- : ''}
544
- </div>
545
- );
546
- case 'dynamicdata':
547
- return (
548
- <div
549
- className="fi__div"
550
- style={
551
- settings.height
552
- ? {
553
- height: settings.height,
554
- paddingTop: '10px',
555
- marginLeft: '13px',
556
- }
557
- : {
558
- paddingTop: '10px',
559
- marginLeft: '13px',
560
- }
561
- }
562
- >
563
- {inputValue && inputValue !== 'null' ? inputValue : ''}
564
- </div>
565
- );
566
- case 'plaintext':
567
- return (
568
- <div
569
- className="fi__div"
570
- style={
571
- settings.height
572
- ? {
573
- height: settings.height,
574
- paddingTop: '10px',
575
- marginLeft: '13px',
576
- }
577
- : {
578
- paddingTop: '10px',
579
- marginLeft: '13px',
580
- }
581
- }
582
- >
583
- {inputValue && inputValue !== 'null' ? inputValue : ''}
584
- </div>
585
- );
586
- case 'plaintextheading':
587
- return (
588
- <div
589
- className="fi__div"
590
- style={
591
- settings.height
592
- ? {
593
- height: settings.height,
594
- }
595
- : {}
596
- }
597
- >
598
- {inputValue && inputValue !== 'null'
599
- ? `<h2>${inputValue}</h2>`
600
- : ''}
601
- </div>
602
- );
603
- case 'plainrelation':
604
- return (
605
- <div
606
- className="fi__div"
607
- style={
608
- settings.height
609
- ? {
610
- height: settings.height,
611
- }
612
- : {}
613
- }
614
- >
615
- {renderRelationText(inputValue)}
616
- </div>
617
- );
618
- case 'plainrelationarray':
619
- return (
620
- <div
621
- className="fi__div"
622
- style={
623
- settings.height
624
- ? {
625
- height: settings.height,
626
- }
627
- : {}
628
- }
629
- >
630
- {renderRelationArrayText(inputValue)}
631
- </div>
632
- );
633
- case 'phone':
634
- case 'mobile':
635
- return (
636
- <PatternFormat
637
- className={inputClass[settings.id]}
638
- onValueChange={(values) => {
639
- onChangeNumberFormat(values, settings.id);
640
- }}
641
- format={
642
- settings.type === 'phone'
643
- ? '## #### ####'
644
- : '#### ### ###'
645
- }
646
- allowEmptyFormatting
647
- mask="_"
648
- value={
649
- inputValue && inputValue !== 'null'
650
- ? inputValue
651
- : ''
652
- }
653
- />
654
- );
655
- case 'currency':
656
- return (
657
- <NumericFormat
658
- data-name={settings.id}
659
- className={inputClass[settings.id]}
660
- onValueChange={(values) => {
661
- onChangeNumberFormat(values, settings.id);
662
- }}
663
- thousandSeparator={true}
664
- prefix={'$'}
665
- value={
666
- inputValue && inputValue !== 'null'
667
- ? inputValue
668
- : ''
669
- }
670
- />
671
- );
672
- case 'percentage':
673
- return (
674
- <NumericFormat
675
- data-name={settings.id}
676
- className={inputClass[settings.id]}
677
- onValueChange={(values) => {
678
- onChangeNumberFormat(values, settings.id);
679
- }}
680
- thousandSeparator={true}
681
- suffix={'%'}
682
- value={
683
- inputValue && inputValue !== 'null'
684
- ? inputValue
685
- : ''
686
- }
687
- />
688
- );
689
- case 'number':
690
- case 'decimal':
483
+ case 'decimal':
484
+ case 'number':
691
485
  return (
692
486
  <NumericFormat
693
487
  data-name={settings.id}
@@ -711,33 +505,6 @@ function Field({
711
505
  }
712
506
  />
713
507
  );
714
- case 'textarea':
715
- return (
716
- <textarea
717
- data-name={settings.id}
718
- className={inputClass[settings.id]}
719
- onChange={onChange}
720
- value={
721
- inputValue && inputValue !== 'null'
722
- ? inputValue
723
- : ''
724
- }
725
- style={{ height: '200px' }}
726
- ></textarea>
727
- );
728
- case 'address':
729
- return (
730
- <VisnsAutocomplete
731
- api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
732
- country="AU"
733
- field={settings.id}
734
- inputValue={inputValue}
735
- mapbox={mapbox}
736
- onSelect={autocompleteCallback}
737
- setFormData={setFormData}
738
- style={style}
739
- />
740
- );
741
508
  case 'dropdown':
742
509
  case 'dropdown-ajax':
743
510
  return (
@@ -754,111 +521,25 @@ function Field({
754
521
  dataOptions={dataOptions}
755
522
  />
756
523
  );
757
- case 'line-break':
758
- return (
759
- <div className="formbreak">
760
- <span>
761
- {settings.label}{' '}
762
- {settings.required === true ? '*' : ''}
763
- </span>
764
- </div>
765
- );
766
- case 'colour':
767
- return (
768
- <div className="cpicker">
769
- <div
770
- className="cpicker__box"
771
- style={
772
- inputValue && inputValue !== 'null'
773
- ? { background: inputValue }
774
- : {}
775
- }
776
- ></div>
777
- <div className="cpicker__btn">
778
- <button
779
- onClick={(e) => {
780
- e.preventDefault();
781
-
782
- setColorPickerShow(
783
- colorPickerShow === true ? false : true
784
- );
785
- }}
786
- >
787
- Pick Color
788
- </button>
789
- {colorPickerShow === true ? (
790
- <div style={popover}>
791
- <div
792
- style={cover}
793
- onClick={() => {
794
- setColorPickerShow(false);
795
- }}
796
- />
797
-
798
- <BlockPicker
799
- color={
800
- inputValue && inputValue !== 'null'
801
- ? inputValue
802
- : ''
803
- }
804
- onChangeComplete={(color, event) => {
805
- onChangeColour(
806
- event,
807
- color,
808
- settings.id
809
- );
810
- }}
811
- />
812
- </div>
813
- ) : null}
814
- </div>
815
- </div>
816
- );
817
- case 'multi-dropdown':
818
- case 'multi-dropdown-ajax':
819
- return (
820
- <MultiSelect
821
- settings={settings}
822
- className={inputClass[settings.id]}
823
- multi={
824
- settings.hasOwnProperty('multi')
825
- ? settings.multi
826
- : false
827
- }
828
- onChange={onChangeSelect}
829
- inputValue={
830
- inputValue === null || inputValue === undefined
831
- ? ''
832
- : inputValue
833
- }
834
- options={
835
- settings.type === 'multi-dropdown'
836
- ? settings.options
837
- : options
838
- }
839
- dataOptions={dataOptions}
840
- style={style}
841
- />
842
- );
843
- case 'async-dropdown-ajax':
524
+ case 'dynamicdata':
844
525
  return (
845
- <VisnsAsyncSelect
846
- settings={settings}
847
- className={inputClass[settings.id]}
848
- multi={
849
- settings.hasOwnProperty('multi')
850
- ? settings.multi
851
- : false
852
- }
853
- onChange={onChangeSelect}
854
- inputValue={
855
- inputValue === null || inputValue === undefined
856
- ? ''
857
- : inputValue
526
+ <div
527
+ className="fi__div"
528
+ style={
529
+ settings.height
530
+ ? {
531
+ height: settings.height,
532
+ paddingTop: '10px',
533
+ marginLeft: '13px',
534
+ }
535
+ : {
536
+ paddingTop: '10px',
537
+ marginLeft: '13px',
538
+ }
858
539
  }
859
- options={options}
860
- dataOptions={dataOptions}
861
- />
540
+ >
541
+ {inputValue && inputValue !== 'null' ? inputValue : ''}
542
+ </div>
862
543
  );
863
544
  case 'file':
864
545
  if (
@@ -887,7 +568,6 @@ function Field({
887
568
  e.preventDefault();
888
569
  e.stopPropagation();
889
570
 
890
- // Create a new array excluding the file at `index`
891
571
  const updatedFiles =
892
572
  inputValue.filter(
893
573
  (_, fileIndex) =>
@@ -895,7 +575,6 @@ function Field({
895
575
  index
896
576
  );
897
577
 
898
- // Update formData[settings.id] using setFormData
899
578
  setFormData(
900
579
  (prevFormData) => ({
901
580
  ...prevFormData,
@@ -936,7 +615,6 @@ function Field({
936
615
  cursor: 'pointer',
937
616
  }}
938
617
  >
939
- {console.info(inputValue)}
940
618
  {inputValue?.filename
941
619
  ? 'Replace File...'
942
620
  : 'Choose file...'}
@@ -946,7 +624,7 @@ function Field({
946
624
  data-name={settings.id}
947
625
  name={settings.id}
948
626
  type="file"
949
- className={inputClass[settings.id]} // Ensure inputClass is defined or passed
627
+ className={inputClass[settings.id]}
950
628
  onChange={onChange}
951
629
  style={{ display: 'none' }}
952
630
  />
@@ -1005,49 +683,339 @@ function Field({
1005
683
  }
1006
684
 
1007
685
  return htmlContainer;
686
+ case 'html5_date':
687
+ return (
688
+ <input
689
+ type="date"
690
+ data-name={settings.id}
691
+ className={inputClass[settings.id]}
692
+ placeholder=" "
693
+ onChange={onChange}
694
+ value={
695
+ inputValue && inputValue !== 'null'
696
+ ? inputValue
697
+ : ''
698
+ }
699
+ autoComplete="off"
700
+ />
701
+ );
702
+ case 'html5_datetime':
703
+ return (
704
+ <input
705
+ type="datetime-local"
706
+ data-name={settings.id}
707
+ className={inputClass[settings.id]}
708
+ placeholder=" "
709
+ onChange={onChange}
710
+ value={
711
+ inputValue && inputValue !== 'null'
712
+ ? inputValue
713
+ : ''
714
+ }
715
+ autoComplete="off"
716
+ />
717
+ );
718
+ case 'html5_time':
719
+ return (
720
+ <input
721
+ type="time"
722
+ data-name={settings.id}
723
+ className={inputClass[settings.id]}
724
+ placeholder=" "
725
+ onChange={onChange}
726
+ value={
727
+ inputValue && inputValue !== 'null'
728
+ ? inputValue
729
+ : ''
730
+ }
731
+ autoComplete="off"
732
+ />
733
+ );
1008
734
  case 'image':
1009
735
  return (
1010
- <div
1011
- style={{
1012
- position: 'relative', // Parent container positioned relatively
1013
- display: 'inline-flex',
1014
- alignItems: 'center',
1015
- cursor: 'pointer',
736
+ <div
737
+ style={{
738
+ position: 'relative',
739
+ display: 'inline-flex',
740
+ alignItems: 'center',
741
+ cursor: 'pointer',
742
+ }}
743
+ >
744
+ <input
745
+ type="file"
746
+ data-name={settings.id}
747
+ className={inputClass[settings.id]}
748
+ onChange={onChange}
749
+ ref={fileImageInputRef}
750
+ style={{
751
+ position: 'absolute',
752
+ left: 0,
753
+ top: 0,
754
+ width: '100%',
755
+ height: '100%',
756
+ opacity: 0,
757
+ cursor: 'pointer',
758
+ }}
759
+ />
760
+ {inputValue.imageSrc ? (
761
+ <img
762
+ src={inputValue.imageSrc}
763
+ alt="Uploaded"
764
+ style={{
765
+ marginLeft: '10px',
766
+ maxHeight: '100px',
767
+ }}
768
+ />
769
+ ) : (
770
+ <img
771
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAJ3UlEQVR4nO3b60/aXhwG8KflJijIJQgTt8y5mLkxl73w//8HzBbdXLLFqJsg3rjKnUJ/L0wJpYUC9ovbL8/nlRbac077tOf0tCiHh4c6iFymPncF6P+JwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEvEfmhiBahNiQpEAAAAASUVORK5CYII="
772
+ alt="Placeholder"
773
+ />
774
+ )}
775
+ </div>
776
+ );
777
+ case 'json':
778
+ return (
779
+ <input
780
+ type={settings.type}
781
+ data-name={settings.id}
782
+ data-parent={settings.parent}
783
+ className={inputClass[settings.id]}
784
+ placeholder=" "
785
+ onChange={onChange}
786
+ value={
787
+ inputValue && inputValue !== 'null'
788
+ ? inputValue
789
+ : ''
790
+ }
791
+ autoComplete="off"
792
+ />
793
+ );
794
+ case 'line-break':
795
+ return (
796
+ <div className="formbreak">
797
+ <span>
798
+ {settings.label}{' '}
799
+ {settings.required === true ? '*' : ''}
800
+ </span>
801
+ </div>
802
+ );
803
+ case 'mobile':
804
+ case 'phone':
805
+ return (
806
+ <PatternFormat
807
+ className={inputClass[settings.id]}
808
+ onValueChange={(values) => {
809
+ onChangeNumberFormat(values, settings.id);
810
+ }}
811
+ format={
812
+ settings.type === 'phone'
813
+ ? '## #### ####'
814
+ : '#### ### ###'
815
+ }
816
+ allowEmptyFormatting
817
+ mask="_"
818
+ value={
819
+ inputValue && inputValue !== 'null'
820
+ ? inputValue
821
+ : ''
822
+ }
823
+ />
824
+ );
825
+ case 'multi-dropdown':
826
+ case 'multi-dropdown-ajax':
827
+ return (
828
+ <MultiSelect
829
+ settings={settings}
830
+ className={inputClass[settings.id]}
831
+ multi={
832
+ settings.hasOwnProperty('multi')
833
+ ? settings.multi
834
+ : false
835
+ }
836
+ onChange={onChangeSelect}
837
+ inputValue={
838
+ inputValue === null || inputValue === undefined
839
+ ? ''
840
+ : inputValue
841
+ }
842
+ options={
843
+ settings.type === 'multi-dropdown'
844
+ ? settings.options
845
+ : options
846
+ }
847
+ dataOptions={dataOptions}
848
+ style={style}
849
+ />
850
+ );
851
+ case 'percentage':
852
+ return (
853
+ <NumericFormat
854
+ data-name={settings.id}
855
+ className={inputClass[settings.id]}
856
+ onValueChange={(values) => {
857
+ onChangeNumberFormat(values, settings.id);
1016
858
  }}
859
+ thousandSeparator={true}
860
+ suffix={'%'}
861
+ value={
862
+ inputValue && inputValue !== 'null'
863
+ ? inputValue
864
+ : ''
865
+ }
866
+ />
867
+ );
868
+ case 'plaintext':
869
+ return (
870
+ <div
871
+ className="fi__div"
872
+ style={
873
+ settings.height
874
+ ? {
875
+ height: settings.height,
876
+ paddingTop: '10px',
877
+ marginLeft: '13px',
878
+ }
879
+ : {
880
+ paddingTop: '10px',
881
+ marginLeft: '13px',
882
+ }
883
+ }
1017
884
  >
1018
- <input
1019
- type="file"
1020
- data-name={settings.id}
1021
- className={inputClass[settings.id]} // Assuming inputClass is defined elsewhere in your code
1022
- onChange={onChange}
1023
- ref={fileImageInputRef}
1024
- style={{
1025
- position: 'absolute',
1026
- left: 0,
1027
- top: 0,
1028
- width: '100%',
1029
- height: '100%',
1030
- opacity: 0, // Make the input invisible
1031
- cursor: 'pointer',
1032
- }}
1033
- />
1034
- {inputValue.imageSrc ? (
1035
- <img
1036
- src={inputValue.imageSrc}
1037
- alt="Uploaded"
1038
- style={{
1039
- marginLeft: '10px',
1040
- maxHeight: '100px', // Set a maximum height for the image
1041
- }}
1042
- />
1043
- ) : (
1044
- <img
1045
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAJ3UlEQVR4nO3b60/aXhwG8KflJijIJQgTt8y5mLkxl73w//8HzBbdXLLFqJsg3rjKnUJ/L0wJpYUC9ovbL8/nlRbac077tOf0tCiHh4c6iFymPncF6P+JwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEvEfmhiBahNiQpEAAAAASUVORK5CYII="
1046
- alt="Placeholder"
1047
- />
1048
- )}
885
+ {inputValue && inputValue !== 'null' ? inputValue : ''}
886
+ </div>
887
+ );
888
+ case 'plaintextheading':
889
+ return (
890
+ <div
891
+ className="fi__div"
892
+ style={
893
+ settings.height
894
+ ? {
895
+ height: settings.height,
896
+ }
897
+ : {}
898
+ }
899
+ >
900
+ {inputValue && inputValue !== 'null'
901
+ ? `<h2>${inputValue}</h2>`
902
+ : ''}
903
+ </div>
904
+ );
905
+ case 'plainrelation':
906
+ return (
907
+ <div
908
+ className="fi__div"
909
+ style={
910
+ settings.height
911
+ ? {
912
+ height: settings.height,
913
+ }
914
+ : {}
915
+ }
916
+ >
917
+ {renderRelationText(inputValue)}
918
+ </div>
919
+ );
920
+ case 'plainrelationarray':
921
+ return (
922
+ <div
923
+ className="fi__div"
924
+ style={
925
+ settings.height
926
+ ? {
927
+ height: settings.height,
928
+ }
929
+ : {}
930
+ }
931
+ >
932
+ {renderRelationArrayText(inputValue)}
933
+ </div>
934
+ );
935
+ case 'plaindate':
936
+ return (
937
+ <div
938
+ className="fi__div"
939
+ style={
940
+ settings.height
941
+ ? {
942
+ height: settings.height,
943
+ }
944
+ : {}
945
+ }
946
+ >
947
+ {inputValue && inputValue !== 'null'
948
+ ? moment(inputValue).format('DD-MM-YYYY')
949
+ : ''}
950
+ </div>
951
+ );
952
+ case 'plaindatetime':
953
+ return (
954
+ <div
955
+ className="fi__div"
956
+ style={
957
+ settings.height ? { height: settings.height } : {}
958
+ }
959
+ >
960
+ {inputValue && inputValue !== 'null'
961
+ ? moment(inputValue).format('DD-MM-YYYY hh:mm A')
962
+ : ''}
1049
963
  </div>
1050
964
  );
965
+ case 'radio':
966
+ return settings.options?.length > 0 ? (
967
+ <div className="fi__optionscontainer">
968
+ {settings.options.map((option, index) => (
969
+ <div
970
+ key={`${settings.id}-checkbox-option-${index}`}
971
+ className="fi__checkboxcontainer"
972
+ >
973
+ <input
974
+ name={settings.id}
975
+ data-name={settings.id}
976
+ type="radio"
977
+ className="fi__customcheckbox"
978
+ value={option.id}
979
+ checked={
980
+ parseInt(inputValue) ===
981
+ parseInt(option.id)
982
+ }
983
+ onChange={onChange}
984
+ />
985
+ <label className="fi__checkboxlabel">
986
+ {option.label}
987
+ </label>{' '}
988
+ </div>
989
+ ))}
990
+ </div>
991
+ ) : null;
992
+ case 'radio-ajax':
993
+ return options?.length > 0 ? (
994
+ <div className="fi__optionscontainer">
995
+ {options.map((option, index) => (
996
+ <div
997
+ key={`${settings.id}-checkbox-option-${index}`}
998
+ className="fi__checkboxcontainer"
999
+ >
1000
+ <input
1001
+ name={settings.id}
1002
+ data-name={settings.id}
1003
+ type="radio"
1004
+ className="fi__customcheckbox"
1005
+ value={option.id}
1006
+ checked={
1007
+ parseInt(inputValue) ===
1008
+ parseInt(option.id)
1009
+ }
1010
+ onChange={onChange}
1011
+ />
1012
+ <label className="fi__checkboxlabel">
1013
+ {option.label}
1014
+ </label>{' '}
1015
+ </div>
1016
+ ))}
1017
+ </div>
1018
+ ) : null;
1051
1019
  case 'richeditor':
1052
1020
  return (
1053
1021
  <Editor
@@ -1090,6 +1058,76 @@ function Field({
1090
1058
  }}
1091
1059
  />
1092
1060
  );
1061
+ case 'signature':
1062
+ return (
1063
+ <>
1064
+ {inputValue.signature ? (
1065
+ <div className={styles.signaturePlaceholder}>
1066
+ <img
1067
+ src={inputValue.signature}
1068
+ alt="Signature"
1069
+ className={styles.signatureImage}
1070
+ />
1071
+ <p>
1072
+ <strong>Name:</strong>{' '}
1073
+ {inputValue.name ? inputValue.name : null}
1074
+ </p>
1075
+ <p>
1076
+ <strong>Date:</strong>{' '}
1077
+ {inputValue.date
1078
+ ? moment(inputValue.date).format(
1079
+ 'DD-MM-YYYY'
1080
+ )
1081
+ : null}
1082
+ </p>
1083
+ </div>
1084
+ ) : (
1085
+ <button
1086
+ type="button"
1087
+ className={styles.signButton}
1088
+ onClick={(e) => {
1089
+ e.preventDefault();
1090
+
1091
+ onChangeSignature(settings.id);
1092
+ }}
1093
+ >
1094
+ Click to Sign
1095
+ </button>
1096
+ )}
1097
+ </>
1098
+ );
1099
+ case 'textarea':
1100
+ return (
1101
+ <textarea
1102
+ data-name={settings.id}
1103
+ className={inputClass[settings.id]}
1104
+ onChange={onChange}
1105
+ value={
1106
+ inputValue && inputValue !== 'null'
1107
+ ? inputValue
1108
+ : ''
1109
+ }
1110
+ style={{ height: '200px' }}
1111
+ ></textarea>
1112
+ );
1113
+ case 'text':
1114
+ case 'password':
1115
+ return (
1116
+ <input
1117
+ type={settings.type}
1118
+ data-name={settings.id}
1119
+ className={inputClass[settings.id]}
1120
+ placeholder=" "
1121
+ onChange={onChange}
1122
+ value={
1123
+ inputValue && inputValue !== 'null'
1124
+ ? inputValue
1125
+ : ''
1126
+ }
1127
+ readOnly={settings.readOnly ? settings.readOnly : false}
1128
+ autoComplete="off"
1129
+ />
1130
+ );
1093
1131
  default:
1094
1132
  return '';
1095
1133
  }
@@ -1121,12 +1159,13 @@ function Field({
1121
1159
  'radio',
1122
1160
  'radio-ajax',
1123
1161
  'richeditor',
1162
+ 'signature',
1124
1163
  'time',
1125
1164
  'toggle',
1126
1165
  ].includes(settings.type)
1127
1166
  ) {
1128
1167
  return (
1129
- <span className="fi__span">
1168
+ <span className={styles.fi__span}>
1130
1169
  {settings.label} {settings.required ? '*' : ''}
1131
1170
  </span>
1132
1171
  );
@@ -1204,7 +1243,7 @@ function Field({
1204
1243
  }
1205
1244
  onChange={onChangeToggle}
1206
1245
  />
1207
- <span className="fi__toggletxt">
1246
+ <span className={styles.fi__toggletxt}>
1208
1247
  {settings.label} {settings.required ? '*' : ''}
1209
1248
  </span>
1210
1249
  </div>
@@ -1216,7 +1255,7 @@ function Field({
1216
1255
 
1217
1256
  return (
1218
1257
  <div className={formItemClass} style={formItemStyle}>
1219
- <label className="fi__label">
1258
+ <label className={styles.fi__label}>
1220
1259
  {renderLabel()}
1221
1260
  {renderInput()}
1222
1261
  {renderFieldLabel()}