tee3apps-cms-sdk-react 0.0.32 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/PageComponents/BoxComponent.tsx +4 -7
- package/src/PageComponents/Visual-Components/CarouselComponent.tsx +39 -31
- package/src/PageComponents/Visual-Components/GroupBrandComponent.tsx +176 -163
- package/src/PageComponents/Visual-Components/GroupCategoryComponent.tsx +235 -222
- package/src/PageComponents/Visual-Components/GroupImageList.tsx +216 -203
- package/src/PageComponents/Visual-Components/GroupProductComponent.tsx +100 -32
- package/src/PageComponents/Visual-Components/GroupVideoList.tsx +207 -215
- package/src/PageComponents/Visual-Components/ImageComponent.tsx +3 -3
- package/src/PageComponents/Visual-Components/Styles/ProductListViewOne.tsx +54 -33
- package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx +57 -32
- package/src/PageComponents/Visual-Components/TextComponent.tsx +8 -6
|
@@ -348,8 +348,8 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
|
|
|
348
348
|
// height: '180px',
|
|
349
349
|
minHeight: '180px',
|
|
350
350
|
maxHeight: '180px',
|
|
351
|
-
minWidth:'200px',
|
|
352
|
-
maxWidth:'400px',
|
|
351
|
+
minWidth: '200px',
|
|
352
|
+
maxWidth: '400px',
|
|
353
353
|
marginBottom: '8px',
|
|
354
354
|
display: 'flex',
|
|
355
355
|
alignItems: 'center',
|
|
@@ -422,223 +422,236 @@ const GroupImageList: React.FC<GroupImageListMainProps> = ({
|
|
|
422
422
|
};
|
|
423
423
|
|
|
424
424
|
return (
|
|
425
|
-
|
|
426
|
-
style
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
display: 'flex',
|
|
438
|
-
flexDirection: 'column'
|
|
439
|
-
}}
|
|
440
|
-
className='GroupImageListComponent'
|
|
441
|
-
>
|
|
442
|
-
{showHeader && (
|
|
443
|
-
<div
|
|
444
|
-
className="groupImageHeader"
|
|
445
|
-
style={{
|
|
446
|
-
backgroundColor: props.headerBackground,
|
|
447
|
-
padding: '12px 16px',
|
|
448
|
-
borderRadius: '0px',
|
|
449
|
-
marginBottom: '4px',
|
|
450
|
-
display: 'flex',
|
|
451
|
-
alignItems: 'center',
|
|
452
|
-
justifyContent: 'space-between',
|
|
453
|
-
flexWrap: 'wrap',
|
|
454
|
-
gap: '12px',
|
|
455
|
-
}}
|
|
456
|
-
>
|
|
457
|
-
<p style={{
|
|
458
|
-
color: props.headerTextStyle.fontColor,
|
|
459
|
-
fontSize: `${props.headerTextStyle.fontSize}px`,
|
|
460
|
-
fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
|
|
461
|
-
fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
|
|
462
|
-
textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
|
|
463
|
-
margin: 0
|
|
464
|
-
}}>
|
|
465
|
-
{props.headerText || props.nameData || 'Image Gallery'}
|
|
466
|
-
</p>
|
|
467
|
-
{currentLayout === 'NONE' && images.length > 0 && (
|
|
468
|
-
<div style={{ display: 'flex', gap: '8px' }}>
|
|
469
|
-
<button
|
|
470
|
-
onClick={scrollLeft}
|
|
471
|
-
style={{
|
|
472
|
-
width: '32px',
|
|
473
|
-
height: '32px',
|
|
474
|
-
borderRadius: '50%',
|
|
475
|
-
border: '1px solid #ddd',
|
|
476
|
-
backgroundColor: '#fff',
|
|
477
|
-
cursor: 'pointer',
|
|
478
|
-
display: 'flex',
|
|
479
|
-
alignItems: 'center',
|
|
480
|
-
justifyContent: 'center',
|
|
481
|
-
fontSize: '16px',
|
|
482
|
-
fontWeight: 'bold',
|
|
483
|
-
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
484
|
-
}}
|
|
485
|
-
onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
|
|
486
|
-
onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
|
|
487
|
-
>
|
|
488
|
-
‹
|
|
489
|
-
</button>
|
|
490
|
-
<button
|
|
491
|
-
onClick={scrollRight}
|
|
492
|
-
style={{
|
|
493
|
-
width: '32px',
|
|
494
|
-
height: '32px',
|
|
495
|
-
borderRadius: '50%',
|
|
496
|
-
border: '1px solid #ddd',
|
|
497
|
-
backgroundColor: '#fff',
|
|
498
|
-
cursor: 'pointer',
|
|
499
|
-
display: 'flex',
|
|
500
|
-
alignItems: 'center',
|
|
501
|
-
justifyContent: 'center',
|
|
502
|
-
fontSize: '16px',
|
|
503
|
-
fontWeight: 'bold',
|
|
504
|
-
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
505
|
-
}}
|
|
506
|
-
onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
|
|
507
|
-
onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
|
|
508
|
-
>
|
|
509
|
-
›
|
|
510
|
-
</button>
|
|
511
|
-
</div>
|
|
512
|
-
)}
|
|
513
|
-
</div>
|
|
514
|
-
)}
|
|
515
|
-
|
|
516
|
-
|
|
425
|
+
<>
|
|
426
|
+
<style>
|
|
427
|
+
{`
|
|
428
|
+
.scrollable-container::-webkit-scrollbar {
|
|
429
|
+
display: none;
|
|
430
|
+
}
|
|
431
|
+
.scrollable-container {
|
|
432
|
+
scrollbar-width: none;
|
|
433
|
+
-ms-overflow-style: none;
|
|
434
|
+
}
|
|
435
|
+
`}
|
|
436
|
+
</style>
|
|
517
437
|
<div
|
|
518
438
|
style={{
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
backgroundColor: props.carouselBackground || '#fff',
|
|
526
|
-
borderRadius: '8px',
|
|
439
|
+
border: '1px solid #e1e1e1',
|
|
440
|
+
width: '100%',
|
|
441
|
+
maxWidth: '100%',
|
|
442
|
+
borderRadius: '0px',
|
|
443
|
+
height: boxHeight || '100%',
|
|
444
|
+
minHeight: boxHeight ? boxHeight : '100px',
|
|
527
445
|
position: 'relative',
|
|
528
|
-
|
|
529
|
-
|
|
446
|
+
overflow: 'visible',
|
|
447
|
+
marginTop: '0px',
|
|
448
|
+
marginBottom: '20px',
|
|
449
|
+
display: 'flex',
|
|
450
|
+
flexDirection: 'column'
|
|
530
451
|
}}
|
|
531
|
-
className=
|
|
452
|
+
className='GroupImageListComponent'
|
|
532
453
|
>
|
|
533
|
-
{
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
454
|
+
{showHeader && (
|
|
455
|
+
<div
|
|
456
|
+
className="groupImageHeader"
|
|
457
|
+
style={{
|
|
458
|
+
backgroundColor: props.headerBackground,
|
|
459
|
+
padding: '12px 16px',
|
|
460
|
+
borderRadius: '0px',
|
|
461
|
+
marginBottom: '4px',
|
|
462
|
+
display: 'flex',
|
|
463
|
+
alignItems: 'center',
|
|
464
|
+
justifyContent: 'space-between',
|
|
465
|
+
flexWrap: 'wrap',
|
|
466
|
+
gap: '12px',
|
|
467
|
+
}}
|
|
468
|
+
>
|
|
469
|
+
<p style={{
|
|
470
|
+
color: props.headerTextStyle.fontColor,
|
|
471
|
+
fontSize: `${props.headerTextStyle.fontSize}px`,
|
|
472
|
+
fontWeight: props.headerTextStyle.isBold ? 'bold' : 'normal',
|
|
473
|
+
fontStyle: props.headerTextStyle.isItalic ? 'italic' : 'normal',
|
|
474
|
+
textDecoration: props.headerTextStyle.isUnderline ? 'underline' : 'none',
|
|
475
|
+
margin: 0
|
|
476
|
+
}}>
|
|
477
|
+
{props.headerText || props.nameData || 'Image Gallery'}
|
|
478
|
+
</p>
|
|
479
|
+
{currentLayout === 'NONE' && images.length > 0 && (
|
|
480
|
+
<div style={{ display: 'flex', gap: '8px' }}>
|
|
481
|
+
<button
|
|
482
|
+
onClick={scrollLeft}
|
|
549
483
|
style={{
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
484
|
+
width: '32px',
|
|
485
|
+
height: '32px',
|
|
486
|
+
borderRadius: '50%',
|
|
487
|
+
border: '1px solid #ddd',
|
|
488
|
+
backgroundColor: '#fff',
|
|
489
|
+
cursor: 'pointer',
|
|
553
490
|
display: 'flex',
|
|
554
|
-
|
|
555
|
-
|
|
491
|
+
alignItems: 'center',
|
|
492
|
+
justifyContent: 'center',
|
|
493
|
+
fontSize: '16px',
|
|
494
|
+
fontWeight: 'bold',
|
|
495
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
556
496
|
}}
|
|
497
|
+
onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
|
|
498
|
+
onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
|
|
557
499
|
>
|
|
558
|
-
|
|
559
|
-
</
|
|
560
|
-
|
|
561
|
-
|
|
500
|
+
‹
|
|
501
|
+
</button>
|
|
502
|
+
<button
|
|
503
|
+
onClick={scrollRight}
|
|
504
|
+
style={{
|
|
505
|
+
width: '32px',
|
|
506
|
+
height: '32px',
|
|
507
|
+
borderRadius: '50%',
|
|
508
|
+
border: '1px solid #ddd',
|
|
509
|
+
backgroundColor: '#fff',
|
|
510
|
+
cursor: 'pointer',
|
|
511
|
+
display: 'flex',
|
|
512
|
+
alignItems: 'center',
|
|
513
|
+
justifyContent: 'center',
|
|
514
|
+
fontSize: '16px',
|
|
515
|
+
fontWeight: 'bold',
|
|
516
|
+
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
|
|
517
|
+
}}
|
|
518
|
+
onMouseOver={(e) => { e.currentTarget.style.backgroundColor = '#f8f9fa'; }}
|
|
519
|
+
onMouseOut={(e) => { e.currentTarget.style.backgroundColor = '#fff'; }}
|
|
520
|
+
>
|
|
521
|
+
›
|
|
522
|
+
</button>
|
|
523
|
+
</div>
|
|
524
|
+
)}
|
|
525
|
+
</div>
|
|
526
|
+
)}
|
|
562
527
|
|
|
563
|
-
) : currentLayout === 'SMALL' ? (
|
|
564
|
-
<div style={{
|
|
565
|
-
display: 'grid',
|
|
566
|
-
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
567
|
-
gap: '16px',
|
|
568
|
-
padding: '8px',
|
|
569
|
-
height: '100%'
|
|
570
|
-
}}>
|
|
571
|
-
{images.map((image) => (
|
|
572
|
-
<div key={image.id} style={{
|
|
573
|
-
height: '100%',
|
|
574
|
-
display: 'flex',
|
|
575
|
-
flexDirection: 'column'
|
|
576
|
-
}}>
|
|
577
|
-
<ImageCard item={image} />
|
|
578
|
-
</div>
|
|
579
|
-
))}
|
|
580
|
-
</div>
|
|
581
|
-
) : currentLayout === 'MEDIUM' ? (
|
|
582
|
-
<div style={{
|
|
583
|
-
display: 'grid',
|
|
584
|
-
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
585
|
-
gap: '16px',
|
|
586
|
-
padding: '8px',
|
|
587
|
-
height: 'auto',
|
|
588
|
-
overflowX: 'auto',
|
|
589
528
|
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
529
|
+
<div
|
|
530
|
+
style={{
|
|
531
|
+
display: currentLayout === 'NONE' ? 'flex' : 'block',
|
|
532
|
+
overflowX: currentLayout === 'NONE' ? 'hidden' : 'visible',
|
|
533
|
+
overflowY: currentLayout === 'NONE' ? 'hidden' : 'visible',
|
|
534
|
+
gap: currentLayout === 'NONE' ? '12px' : '0',
|
|
535
|
+
padding: '12px',
|
|
536
|
+
scrollBehavior: 'smooth',
|
|
537
|
+
backgroundColor: props.carouselBackground || '#fff',
|
|
538
|
+
borderRadius: '8px',
|
|
539
|
+
position: 'relative',
|
|
540
|
+
flex: 1,
|
|
541
|
+
minHeight: 0,
|
|
542
|
+
}}
|
|
543
|
+
className="groupImageCarousel"
|
|
544
|
+
>
|
|
545
|
+
{images.length > 0 ? (
|
|
546
|
+
currentLayout === 'NONE' ? (
|
|
547
|
+
<div
|
|
548
|
+
className="scrollable-container"
|
|
549
|
+
style={{
|
|
594
550
|
display: 'flex',
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
</div>
|
|
602
|
-
) : currentLayout === 'MEDIUM_THREE' ? (
|
|
603
|
-
<div style={{
|
|
604
|
-
display: 'flex',
|
|
605
|
-
flexDirection: 'column',
|
|
606
|
-
gap: '16px',
|
|
607
|
-
padding: '8px',
|
|
608
|
-
height: '100%'
|
|
609
|
-
}}>
|
|
610
|
-
{images.length > 0 && (
|
|
611
|
-
<div style={{ flex: '2', minHeight: '200px' }}>
|
|
612
|
-
<ImageCard item={images[0]} />
|
|
613
|
-
</div>
|
|
614
|
-
)}
|
|
615
|
-
{images.length > 1 && (
|
|
616
|
-
<div style={{
|
|
617
|
-
display: 'grid',
|
|
618
|
-
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
619
|
-
gap: '16px',
|
|
620
|
-
flex: '1'
|
|
551
|
+
gap: '12px',
|
|
552
|
+
overflowX: isHorizontalScroll ? 'auto' : 'hidden',
|
|
553
|
+
overflowY: 'hidden',
|
|
554
|
+
alignItems: 'stretch',
|
|
555
|
+
width: '100%',
|
|
556
|
+
height: '100%',
|
|
621
557
|
}}>
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
558
|
+
{images.map((image) => (
|
|
559
|
+
<div
|
|
560
|
+
key={image.id}
|
|
561
|
+
style={{
|
|
562
|
+
minWidth: '400px',
|
|
563
|
+
width: '400px',
|
|
564
|
+
flexShrink: 0,
|
|
625
565
|
display: 'flex',
|
|
626
|
-
flexDirection: 'column'
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
566
|
+
flexDirection: 'column',
|
|
567
|
+
height: '100%',
|
|
568
|
+
}}
|
|
569
|
+
>
|
|
570
|
+
<ImageCard item={image} />
|
|
571
|
+
</div>
|
|
572
|
+
))}
|
|
573
|
+
</div>
|
|
574
|
+
|
|
575
|
+
) : currentLayout === 'SMALL' ? (
|
|
576
|
+
<div style={{
|
|
577
|
+
display: 'grid',
|
|
578
|
+
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
579
|
+
gap: '16px',
|
|
580
|
+
padding: '8px',
|
|
581
|
+
height: '100%'
|
|
582
|
+
}}>
|
|
583
|
+
{images.map((image) => (
|
|
584
|
+
<div key={image.id} style={{
|
|
585
|
+
height: '100%',
|
|
586
|
+
display: 'flex',
|
|
587
|
+
flexDirection: 'column'
|
|
588
|
+
}}>
|
|
589
|
+
<ImageCard item={image} />
|
|
590
|
+
</div>
|
|
591
|
+
))}
|
|
592
|
+
</div>
|
|
593
|
+
) : currentLayout === 'MEDIUM' ? (
|
|
594
|
+
<div style={{
|
|
595
|
+
display: 'grid',
|
|
596
|
+
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
597
|
+
gap: '16px',
|
|
598
|
+
padding: '8px',
|
|
599
|
+
height: 'auto',
|
|
600
|
+
overflowX: 'auto',
|
|
601
|
+
|
|
602
|
+
}}>
|
|
603
|
+
{images.map((image) => (
|
|
604
|
+
<div key={image.id} style={{
|
|
605
|
+
height: '100%',
|
|
606
|
+
display: 'flex',
|
|
607
|
+
flexDirection: 'column'
|
|
608
|
+
|
|
609
|
+
}}>
|
|
610
|
+
<ImageCard item={image} />
|
|
611
|
+
</div>
|
|
612
|
+
))}
|
|
613
|
+
</div>
|
|
614
|
+
) : currentLayout === 'MEDIUM_THREE' ? (
|
|
615
|
+
<div style={{
|
|
616
|
+
display: 'flex',
|
|
617
|
+
flexDirection: 'column',
|
|
618
|
+
gap: '16px',
|
|
619
|
+
padding: '8px',
|
|
620
|
+
height: '100%'
|
|
621
|
+
}}>
|
|
622
|
+
{images.length > 0 && (
|
|
623
|
+
<div style={{ flex: '2', minHeight: '200px' }}>
|
|
624
|
+
<ImageCard item={images[0]} />
|
|
625
|
+
</div>
|
|
626
|
+
)}
|
|
627
|
+
{images.length > 1 && (
|
|
628
|
+
<div style={{
|
|
629
|
+
display: 'grid',
|
|
630
|
+
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
631
|
+
gap: '16px',
|
|
632
|
+
flex: '1'
|
|
633
|
+
}}>
|
|
634
|
+
{images.slice(1).map((image) => (
|
|
635
|
+
<div key={image.id} style={{
|
|
636
|
+
height: '100%',
|
|
637
|
+
display: 'flex',
|
|
638
|
+
flexDirection: 'column'
|
|
639
|
+
}}>
|
|
640
|
+
<ImageCard item={image} />
|
|
641
|
+
</div>
|
|
642
|
+
))}
|
|
643
|
+
</div>
|
|
644
|
+
)}
|
|
645
|
+
</div>
|
|
646
|
+
) : null
|
|
647
|
+
) : (
|
|
648
|
+
<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
|
|
649
|
+
<p>No images available.</p>
|
|
633
650
|
</div>
|
|
634
|
-
)
|
|
635
|
-
|
|
636
|
-
<div style={{ textAlign: 'center', color: '#666', padding: '40px', width: '100%', border: '2px dashed #ddd', borderRadius: '8px', backgroundColor: '#f9f9f9' }}>
|
|
637
|
-
<p>No images available.</p>
|
|
638
|
-
</div>
|
|
639
|
-
)}
|
|
651
|
+
)}
|
|
652
|
+
</div>
|
|
640
653
|
</div>
|
|
641
|
-
|
|
654
|
+
</>
|
|
642
655
|
);
|
|
643
656
|
};
|
|
644
657
|
|