oddsgate-ds 1.0.141 → 1.0.143
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/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/molecules/LicenseCard/LicenseCard.component.d.ts +1 -1
- package/dist/cjs/types/components/organisms/CircularSlider/CircularSlider.component.d.ts +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/molecules/LicenseCard/LicenseCard.component.d.ts +1 -1
- package/dist/esm/types/components/organisms/CircularSlider/CircularSlider.component.d.ts +1 -1
- package/dist/types.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/atoms/FormField/FormField.theme.tsx +1 -1
- package/src/components/molecules/LicenseCard/LicenseCard.component.tsx +2 -1
- package/src/components/organisms/CircularSlider/CircularSlider.component.tsx +118 -91
- package/src/components/organisms/CircularSlider/CircularSlider.theme.ts +1 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ILicenseCard } from './LicenseCard.interface';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
declare const LicenseCard: ({ title, imageElement, description, className, style }: ILicenseCard) => React.JSX.Element;
|
|
3
|
+
declare const LicenseCard: ({ title, imageElement, description, className, style, ...props }: ILicenseCard) => React.JSX.Element;
|
|
4
4
|
export default LicenseCard;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ICircularSlider } from './CircularSlider.interface';
|
|
3
|
-
declare const CircularSlider: ({ cta, content, style, className
|
|
3
|
+
declare const CircularSlider: ({ cta, content, style, className }: ICircularSlider) => React.JSX.Element;
|
|
4
4
|
export default CircularSlider;
|
package/dist/types.d.ts
CHANGED
|
@@ -553,7 +553,7 @@ interface ILicenseCard extends ICard {
|
|
|
553
553
|
description?: string | React.ReactElement;
|
|
554
554
|
}
|
|
555
555
|
|
|
556
|
-
declare const LicenseCard: ({ title, imageElement, description, className, style }: ILicenseCard) => React__default.JSX.Element;
|
|
556
|
+
declare const LicenseCard: ({ title, imageElement, description, className, style, ...props }: ILicenseCard) => React__default.JSX.Element;
|
|
557
557
|
|
|
558
558
|
interface INewsCard extends ICard {
|
|
559
559
|
date?: string;
|
|
@@ -649,7 +649,7 @@ type ICircularSlider = {
|
|
|
649
649
|
cta?: React.ReactNode;
|
|
650
650
|
};
|
|
651
651
|
|
|
652
|
-
declare const CircularSlider: ({ cta, content, style, className
|
|
652
|
+
declare const CircularSlider: ({ cta, content, style, className }: ICircularSlider) => React__default.JSX.Element;
|
|
653
653
|
|
|
654
654
|
type IProductsSlider = {
|
|
655
655
|
id?: string;
|
package/package.json
CHANGED
|
@@ -7,166 +7,176 @@ import {
|
|
|
7
7
|
StyledCircularSliderWrapper
|
|
8
8
|
} from './CircularSlider.theme'
|
|
9
9
|
|
|
10
|
-
import Heading from '@/components/atoms/Heading/Heading.component'
|
|
10
|
+
import Heading from '@/components/atoms/Heading/Heading.component'
|
|
11
11
|
import { ICircularSlider } from './CircularSlider.interface'
|
|
12
|
-
import { debounce } from '@/helpers/events'
|
|
13
|
-
import useMediaMatch from '@/helpers/useMediaMatch'
|
|
12
|
+
import { debounce } from '@/helpers/events'
|
|
13
|
+
import useMediaMatch from '@/helpers/useMediaMatch'
|
|
14
14
|
|
|
15
15
|
const CircularSlider = ({
|
|
16
16
|
cta,
|
|
17
17
|
content,
|
|
18
18
|
style,
|
|
19
|
-
className
|
|
19
|
+
className
|
|
20
20
|
}: ICircularSlider) => {
|
|
21
|
-
|
|
22
21
|
const [slideContent, setSlideContent] = useState({
|
|
23
22
|
name: content && content[0].name,
|
|
24
|
-
role: content && content[0].role
|
|
25
|
-
})
|
|
26
|
-
const slider = useRef<HTMLDivElement>()
|
|
27
|
-
const wrapper = useRef<HTMLDivElement>()
|
|
28
|
-
const svg = useRef<HTMLDivElement>()
|
|
29
|
-
const slidesHolder = useRef<HTMLDivElement>()
|
|
30
|
-
const contentHolder = useRef<HTMLDivElement>()
|
|
23
|
+
role: content && content[0].role
|
|
24
|
+
})
|
|
25
|
+
const slider = useRef<HTMLDivElement>()
|
|
26
|
+
const wrapper = useRef<HTMLDivElement>()
|
|
27
|
+
const svg = useRef<HTMLDivElement>()
|
|
28
|
+
const slidesHolder = useRef<HTMLDivElement>()
|
|
29
|
+
const contentHolder = useRef<HTMLDivElement>()
|
|
31
30
|
|
|
32
|
-
const isMobile = useMediaMatch()
|
|
31
|
+
const isMobile = useMediaMatch()
|
|
33
32
|
|
|
34
33
|
//force 12 items
|
|
35
34
|
if (content && content.length < 12) {
|
|
36
|
-
let counter = 0
|
|
35
|
+
let counter = 0
|
|
37
36
|
for (let i = content.length; i <= 12; i++) {
|
|
38
|
-
content[i] = content[counter]
|
|
39
|
-
counter
|
|
37
|
+
content[i] = content[counter]
|
|
38
|
+
counter++
|
|
40
39
|
}
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
useEffect(() => {
|
|
44
43
|
if (!slidesHolder.current) return //bail out;
|
|
45
44
|
|
|
46
|
-
const animationDuration = 600
|
|
45
|
+
const animationDuration = 600
|
|
47
46
|
|
|
48
|
-
const slides = Array.prototype.slice.call(slidesHolder?.current?.children)
|
|
47
|
+
const slides = Array.prototype.slice.call(slidesHolder?.current?.children)
|
|
49
48
|
|
|
50
|
-
let slidesSize = 0
|
|
49
|
+
let slidesSize = 0
|
|
51
50
|
|
|
52
|
-
let currentAngle = isMobile ? -180 : -90
|
|
51
|
+
let currentAngle = isMobile ? -180 : -90
|
|
53
52
|
|
|
54
|
-
const stepAngle = 2 * Math.PI / slidesHolder?.current?.children.length
|
|
53
|
+
const stepAngle = (2 * Math.PI) / slidesHolder?.current?.children.length
|
|
55
54
|
// const stepAngle = 0.52;
|
|
56
55
|
|
|
57
|
-
let currentSlide = 0
|
|
56
|
+
let currentSlide = 0
|
|
58
57
|
|
|
59
|
-
slidesHolder.current.style.transitionDuration = animationDuration + 'ms'
|
|
60
|
-
const slidesRepositioning =
|
|
58
|
+
slidesHolder.current.style.transitionDuration = animationDuration + 'ms'
|
|
59
|
+
const slidesRepositioning = r => {
|
|
61
60
|
for (let i = 0; i < slides.length; i++) {
|
|
62
|
-
|
|
63
61
|
let x = r * Math.cos(stepAngle * i - Math.PI / 2),
|
|
64
|
-
y = r * Math.sin(stepAngle * i - Math.PI / 2)
|
|
65
|
-
|
|
66
|
-
slides[i].style.transform =
|
|
62
|
+
y = r * Math.sin(stepAngle * i - Math.PI / 2)
|
|
63
|
+
|
|
64
|
+
slides[i].style.transform =
|
|
65
|
+
'translate( ' +
|
|
66
|
+
x +
|
|
67
|
+
'px, ' +
|
|
68
|
+
y +
|
|
69
|
+
'px ) rotate( ' +
|
|
70
|
+
(((stepAngle * 180) / Math.PI) * i + 90) +
|
|
71
|
+
'deg )'
|
|
67
72
|
// slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px )';
|
|
68
|
-
}
|
|
73
|
+
}
|
|
69
74
|
}
|
|
70
75
|
const setSize = (radius: number) => {
|
|
71
76
|
if (!wrapper.current || !slidesHolder.current) return //bail out;
|
|
72
77
|
|
|
73
|
-
const slideSize = isMobile ? 0.
|
|
78
|
+
const slideSize = isMobile ? 0.8 : 0.15
|
|
74
79
|
|
|
75
|
-
wrapper.current.style.width = 2 * radius + 'px'
|
|
76
|
-
wrapper.current.style.height = 2 * radius + 'px'
|
|
80
|
+
wrapper.current.style.width = 2 * radius + 'px'
|
|
81
|
+
wrapper.current.style.height = 2 * radius + 'px'
|
|
77
82
|
|
|
78
|
-
let r = 2 * radius * (1 - slideSize)
|
|
79
|
-
slidesHolder.current.style.width = slidesHolder.current.style.height =
|
|
80
|
-
|
|
83
|
+
let r = 2 * radius * (1 - slideSize)
|
|
84
|
+
slidesHolder.current.style.width = slidesHolder.current.style.height =
|
|
85
|
+
r + 'px'
|
|
86
|
+
slidesRepositioning(r / 2)
|
|
81
87
|
|
|
82
|
-
slidesSize = Math.min(
|
|
88
|
+
slidesSize = Math.min(
|
|
89
|
+
2 * radius * slideSize,
|
|
90
|
+
stepAngle * radius * (1 - slideSize) - 50
|
|
91
|
+
)
|
|
83
92
|
|
|
84
93
|
if (!isMobile) {
|
|
85
|
-
slidesHolder.current.style.marginTop = radius * slideSize + 'px'
|
|
94
|
+
slidesHolder.current.style.marginTop = radius * slideSize + 'px'
|
|
86
95
|
} else {
|
|
87
|
-
wrapper.current.style.marginTop = -(r - slidesSize) + 'px'
|
|
96
|
+
wrapper.current.style.marginTop = -(r - slidesSize) + 'px'
|
|
88
97
|
}
|
|
89
98
|
|
|
90
|
-
|
|
91
99
|
for (let i = 0; i < slides.length; i++) {
|
|
92
|
-
slides[i].style.width = slides[i].style.height = slidesSize + 'px'
|
|
93
|
-
}
|
|
94
|
-
|
|
100
|
+
slides[i].style.width = slides[i].style.height = slidesSize + 'px'
|
|
101
|
+
}
|
|
95
102
|
}
|
|
96
103
|
|
|
97
104
|
const sliderResize = debounce(() => {
|
|
98
|
-
const sliderSize = isMobile ? 2.6 : 1
|
|
105
|
+
const sliderSize = isMobile ? 2.6 : 1
|
|
99
106
|
|
|
100
107
|
let radius,
|
|
101
|
-
w = slider?.current
|
|
102
|
-
|
|
108
|
+
w = slider?.current
|
|
109
|
+
? slider?.current?.getBoundingClientRect().width
|
|
110
|
+
: 0,
|
|
111
|
+
h = slider?.current ? slider?.current.getBoundingClientRect().height : 0
|
|
103
112
|
|
|
104
|
-
2 * h <= w ? radius = h * sliderSize : radius = (w / 2) * sliderSize
|
|
113
|
+
2 * h <= w ? (radius = h * sliderSize) : (radius = (w / 2) * sliderSize)
|
|
105
114
|
|
|
106
|
-
setSize(Math.round(radius))
|
|
115
|
+
setSize(Math.round(radius))
|
|
107
116
|
}, 250)
|
|
108
117
|
|
|
109
118
|
const addStyle = () => {
|
|
110
119
|
setTimeout(() => {
|
|
111
|
-
contentHolder?.current?.classList.add('active')
|
|
112
|
-
slides[currentSlide].classList.add('active')
|
|
113
|
-
}, 400)
|
|
114
|
-
}
|
|
120
|
+
contentHolder?.current?.classList.add('active')
|
|
121
|
+
slides[currentSlide].classList.add('active')
|
|
122
|
+
}, 400)
|
|
123
|
+
}
|
|
115
124
|
const removeStyle = () => {
|
|
116
|
-
contentHolder?.current?.classList.remove('active')
|
|
117
|
-
const prevElement = slides[currentSlide]
|
|
125
|
+
contentHolder?.current?.classList.remove('active')
|
|
126
|
+
const prevElement = slides[currentSlide]
|
|
118
127
|
setTimeout(() => {
|
|
119
128
|
content && setSlideContent(content[currentSlide] as any)
|
|
120
|
-
prevElement.classList.remove('active')
|
|
121
|
-
}, 400)
|
|
122
|
-
}
|
|
129
|
+
prevElement.classList.remove('active')
|
|
130
|
+
}, 400)
|
|
131
|
+
}
|
|
123
132
|
|
|
124
|
-
const rotateSlider =
|
|
125
|
-
const newSlide = slides.indexOf(e.target)
|
|
133
|
+
const rotateSlider = e => {
|
|
134
|
+
const newSlide = slides.indexOf(e.target)
|
|
126
135
|
|
|
127
|
-
if (currentSlide === newSlide || !slidesHolder?.current) return
|
|
136
|
+
if (currentSlide === newSlide || !slidesHolder?.current) return
|
|
128
137
|
|
|
129
|
-
removeStyle()
|
|
138
|
+
removeStyle()
|
|
130
139
|
|
|
131
|
-
let multiplier = 0
|
|
132
|
-
let direction =
|
|
140
|
+
let multiplier = 0
|
|
141
|
+
let direction = ''
|
|
133
142
|
|
|
134
|
-
if (currentSlide === 0 && newSlide ===
|
|
135
|
-
multiplier = -1
|
|
136
|
-
direction =
|
|
137
|
-
} else if (currentSlide ===
|
|
138
|
-
multiplier = 1
|
|
139
|
-
direction =
|
|
143
|
+
if (currentSlide === 0 && newSlide === slides.length - 1) {
|
|
144
|
+
multiplier = -1
|
|
145
|
+
direction = '-'
|
|
146
|
+
} else if (currentSlide === slides.length - 1 && newSlide === 0) {
|
|
147
|
+
multiplier = 1
|
|
148
|
+
direction = '+'
|
|
140
149
|
} else {
|
|
141
150
|
multiplier = newSlide - currentSlide
|
|
142
|
-
direction = currentSlide < newSlide ?
|
|
151
|
+
direction = currentSlide < newSlide ? '+' : '-'
|
|
143
152
|
}
|
|
144
153
|
|
|
145
|
-
const newAngle = Math.abs((stepAngle * 180 / Math.PI) * multiplier)
|
|
154
|
+
const newAngle = Math.abs(((stepAngle * 180) / Math.PI) * multiplier)
|
|
146
155
|
|
|
156
|
+
currentAngle =
|
|
157
|
+
direction === '-' ? currentAngle + newAngle : currentAngle - newAngle
|
|
158
|
+
currentSlide = newSlide
|
|
147
159
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
addStyle();
|
|
160
|
+
if (svg?.current)
|
|
161
|
+
svg.current.style.transform =
|
|
162
|
+
'translate(-50%, -50%) rotate( ' + currentAngle * 4 + 'deg )'
|
|
163
|
+
slidesHolder.current.style.transform = 'rotate( ' + currentAngle + 'deg )'
|
|
164
|
+
addStyle()
|
|
154
165
|
}
|
|
155
166
|
|
|
156
|
-
sliderResize()
|
|
157
|
-
addStyle()
|
|
158
|
-
|
|
167
|
+
sliderResize()
|
|
168
|
+
addStyle()
|
|
159
169
|
|
|
160
170
|
for (let i = 0; i < slides.length; i++) {
|
|
161
|
-
slides[i].addEventListener('click', rotateSlider, { passive: true })
|
|
162
|
-
}
|
|
171
|
+
slides[i].addEventListener('click', rotateSlider, { passive: true })
|
|
172
|
+
}
|
|
163
173
|
|
|
164
174
|
window.addEventListener('resize', sliderResize)
|
|
165
175
|
|
|
166
176
|
return () => {
|
|
167
177
|
for (let i = 0; i < slides.length; i++) {
|
|
168
|
-
slides[i].removeEventListener('click', rotateSlider)
|
|
169
|
-
}
|
|
178
|
+
slides[i].removeEventListener('click', rotateSlider)
|
|
179
|
+
}
|
|
170
180
|
|
|
171
181
|
window.removeEventListener('resize', sliderResize)
|
|
172
182
|
}
|
|
@@ -175,28 +185,45 @@ const CircularSlider = ({
|
|
|
175
185
|
if (!content) return <></>
|
|
176
186
|
|
|
177
187
|
return (
|
|
178
|
-
<StyledCircularSlider
|
|
179
|
-
|
|
180
|
-
|
|
188
|
+
<StyledCircularSlider
|
|
189
|
+
ref={slider as any}
|
|
190
|
+
className={className}
|
|
191
|
+
style={style}
|
|
192
|
+
>
|
|
193
|
+
<svg
|
|
194
|
+
ref={svg as any}
|
|
195
|
+
viewBox="0 0 907 906"
|
|
196
|
+
fill="none"
|
|
197
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
198
|
+
>
|
|
199
|
+
<path
|
|
200
|
+
d="M887.551 584.892L904.187 504.729L531.591 461.981C531.824 459.769 532.012 457.775 531.984 455.735L906.794 468.208L902.047 386.545L531.043 441.754C530.798 439.669 530.336 437.54 529.829 435.627L895.322 350.347L869.628 272.699L525.63 422.1C524.69 420.097 523.922 418.356 522.981 416.353L853.852 239.821L808.868 171.277L515.038 404.535C513.792 402.92 512.328 401.26 510.82 399.817L784.811 143.459L723.799 88.9898L500.604 390.24C498.834 388.969 497.28 387.742 495.465 386.688L693.744 68.2895L620.714 31.439L483.014 380.262C481.154 379.424 479.032 378.757 477.127 378.136L585.693 19.4255L505.53 2.78951L462.783 375.385C460.571 375.152 458.576 374.964 456.537 374.993L469.01 0.182176L387.347 4.92974L442.556 375.933C440.471 376.179 438.342 376.641 436.429 377.148L351.149 11.6549L273.501 37.3486L422.902 381.346C420.899 382.286 419.158 383.055 417.155 383.995L240.361 53.2959L171.817 98.2799L405.12 391.893C403.505 393.14 401.846 394.603 400.403 396.112L144.261 122.166L89.7918 183.178L391.042 406.373C389.77 408.143 388.544 409.696 387.49 411.511L69.2632 213.494L32.4127 286.524L381.235 424.224C380.397 426.084 379.731 428.206 379.11 430.111L20.2275 321.283L3.59147 401.446L376.187 444.194C375.954 446.405 375.766 448.4 375.795 450.44L0.984138 437.967L5.73169 519.63L376.735 464.42C376.981 466.505 377.443 468.635 377.95 470.548L12.4569 555.828L38.1505 633.476L382.148 484.075C383.088 486.078 383.857 487.819 384.797 489.822L54.0979 666.616L99.0819 735.16L392.695 501.857C393.942 503.471 395.405 505.131 396.914 506.574L122.968 762.715L183.98 817.185L407.175 515.935C408.945 517.206 410.498 518.432 412.313 519.487L214.034 837.885L287.064 874.736L424.765 525.913C426.625 526.751 428.746 527.417 430.651 528.038L322.085 886.749L402.248 903.385L444.996 530.789C447.207 531.022 449.202 531.21 451.242 531.182L438.769 905.992L520.432 901.245L465.222 530.241C467.307 529.996 469.437 529.534 471.35 529.027L556.629 894.52L634.278 868.826L484.876 524.828C486.88 523.888 488.621 523.12 490.624 522.179L667.156 853.05L735.7 808.066L502.442 514.236C504.056 512.99 505.716 511.526 507.159 510.018L763.517 784.009L817.987 722.997L516.737 499.802C518.008 498.032 519.234 496.478 520.289 494.663L838.687 692.942L875.538 619.912L526.715 482.212C527.553 480.352 528.219 478.23 528.84 476.325L887.551 584.892Z"
|
|
201
|
+
fill="#FC3151"
|
|
202
|
+
/>
|
|
181
203
|
</svg>
|
|
182
204
|
<StyledCircularSliderWrapper ref={wrapper as any}>
|
|
183
205
|
<StyledCircularSliderSlides ref={slidesHolder as any}>
|
|
184
206
|
{content?.map((item, index) => {
|
|
185
207
|
return (
|
|
186
|
-
<StyledCircularSliderSlide key={`slide-${index}`}>
|
|
208
|
+
<StyledCircularSliderSlide key={`slide-${index}`}>
|
|
209
|
+
{item.img}
|
|
210
|
+
</StyledCircularSliderSlide>
|
|
187
211
|
)
|
|
188
212
|
})}
|
|
189
213
|
</StyledCircularSliderSlides>
|
|
190
214
|
</StyledCircularSliderWrapper>
|
|
191
215
|
<StyledCircularSliderContent ref={contentHolder as any}>
|
|
192
|
-
<div className=
|
|
193
|
-
<Heading tag="span" size="h2" className=
|
|
194
|
-
|
|
216
|
+
<div className="mb-4">
|
|
217
|
+
<Heading tag="span" size="h2" className="color-primary50 fw-bold">
|
|
218
|
+
{slideContent?.name}
|
|
219
|
+
</Heading>
|
|
220
|
+
<Heading tag="span" size="h4" className="color-secondary50">
|
|
221
|
+
{slideContent?.role}
|
|
222
|
+
</Heading>
|
|
195
223
|
</div>
|
|
196
224
|
{cta}
|
|
197
225
|
</StyledCircularSliderContent>
|
|
198
226
|
</StyledCircularSlider>
|
|
199
|
-
|
|
200
227
|
)
|
|
201
228
|
}
|
|
202
229
|
|