@seeqdev/qomponents 0.0.133 → 0.0.134
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/Alert/Alert.types.d.ts +1 -0
- package/dist/ButtonGroup/ButtonGroup.types.d.ts +1 -0
- package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +1 -0
- package/dist/Carousel/Carousel.js +28 -25
- package/dist/Carousel/Carousel.js.map +1 -1
- package/dist/Carousel/Carousel.types.d.ts +1 -0
- package/dist/Checkbox/Checkbox.types.d.ts +1 -0
- package/dist/Collapse/Collapse.js +5 -8
- package/dist/Collapse/Collapse.js.map +1 -1
- package/dist/Collapse/Collapse.types.d.ts +1 -0
- package/dist/Icon/Icon.types.d.ts +1 -0
- package/dist/InputGroup/InputGroup.types.d.ts +1 -0
- package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +1 -0
- package/dist/Slider/Slider.types.d.ts +1 -0
- package/dist/Tabs/Tabs.types.d.ts +1 -0
- package/dist/TextArea/TextArea.types.d.ts +1 -0
- package/dist/TextField/TextField.types.d.ts +1 -0
- package/dist/Tooltip/Tooltip.types.d.ts +1 -0
- package/dist/index.esm.js +14026 -7827
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +13985 -7786
- package/dist/index.js.map +1 -1
- package/package.json +10 -9
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { motion } from 'framer-motion';
|
|
3
3
|
import Button from '../Button/Button';
|
|
4
4
|
/**
|
|
5
5
|
* Carousel:
|
|
@@ -9,57 +9,60 @@ import Button from '../Button/Button';
|
|
|
9
9
|
const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '', onSlide = () => { }, autoSlide, showIndicators = true, continuous = true, interval = 4000, prevIcon = 'fc-arrow-dropdown tw-rotate-90', nextIcon = 'fc-arrow-dropdown -tw-rotate-90', showArrows = true, iconExtraClassNames = '', carouselItems = [], }) => {
|
|
10
10
|
const [currentIndex, setCurrentIndex] = useState(activeIndex);
|
|
11
11
|
const changeSlide = (nextIndex) => {
|
|
12
|
-
const newIndex = nextIndex % carouselItems.length;
|
|
12
|
+
const newIndex = (nextIndex + carouselItems.length) % carouselItems.length;
|
|
13
13
|
setCurrentIndex(newIndex);
|
|
14
14
|
onSlide(newIndex, newIndex > currentIndex ? 'right' : 'left');
|
|
15
15
|
};
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
if (autoSlide) {
|
|
18
|
-
const
|
|
19
|
-
if (continuous) {
|
|
20
|
-
|
|
21
|
-
onSlide((prevCurrentIndex + 1) % carouselItems.length, (prevCurrentIndex + 1) % carouselItems.length > prevCurrentIndex ? 'right' : 'left');
|
|
22
|
-
return (prevCurrentIndex + 1) % carouselItems.length;
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
else if (currentIndex === carouselItems.length - 1) {
|
|
26
|
-
clearInterval(currentInterval);
|
|
18
|
+
const slideInterval = setInterval(() => {
|
|
19
|
+
if (continuous || currentIndex < carouselItems.length - 1) {
|
|
20
|
+
changeSlide(currentIndex + 1);
|
|
27
21
|
}
|
|
28
22
|
else {
|
|
29
|
-
|
|
23
|
+
clearInterval(slideInterval);
|
|
30
24
|
}
|
|
31
25
|
}, interval);
|
|
32
|
-
return () => clearInterval(
|
|
26
|
+
return () => clearInterval(slideInterval);
|
|
33
27
|
}
|
|
34
|
-
}, [autoSlide]);
|
|
28
|
+
}, [autoSlide, currentIndex, continuous, interval, carouselItems.length]);
|
|
35
29
|
useEffect(() => {
|
|
36
|
-
if (activeIndex
|
|
30
|
+
if (activeIndex !== currentIndex) {
|
|
37
31
|
setCurrentIndex(activeIndex);
|
|
38
32
|
}
|
|
39
33
|
}, [activeIndex]);
|
|
40
|
-
const transitions = useTransition([currentIndex], {
|
|
41
|
-
keys: null,
|
|
42
|
-
exitBeforeEnter: true,
|
|
43
|
-
from: { transform: 'translate3d(100%,0,0)' },
|
|
44
|
-
enter: { transform: 'translate3d(0%,0,0)' },
|
|
45
|
-
leave: { transform: 'translate3d(0%,0,0)' },
|
|
46
|
-
});
|
|
47
34
|
const onBackClick = () => {
|
|
48
35
|
if (currentIndex === 0 && !continuous) {
|
|
49
36
|
return;
|
|
50
37
|
}
|
|
51
|
-
changeSlide(
|
|
38
|
+
changeSlide(currentIndex - 1);
|
|
52
39
|
};
|
|
53
40
|
const onForwardClick = () => {
|
|
54
41
|
if (currentIndex === carouselItems.length - 1 && !continuous) {
|
|
55
42
|
return;
|
|
56
43
|
}
|
|
57
|
-
changeSlide(
|
|
44
|
+
changeSlide(currentIndex + 1);
|
|
45
|
+
};
|
|
46
|
+
const slideVariants = {
|
|
47
|
+
initial: (direction) => ({
|
|
48
|
+
x: direction > 0 ? '100%' : '-100%',
|
|
49
|
+
opacity: 0,
|
|
50
|
+
}),
|
|
51
|
+
animate: {
|
|
52
|
+
x: 0,
|
|
53
|
+
opacity: 1,
|
|
54
|
+
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
55
|
+
},
|
|
56
|
+
exit: (direction) => ({
|
|
57
|
+
x: direction > 0 ? '-100%' : '100%',
|
|
58
|
+
opacity: 0,
|
|
59
|
+
transition: { type: 'spring', damping: 20, stiffness: 100 },
|
|
60
|
+
}),
|
|
58
61
|
};
|
|
59
62
|
return (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-overflow-hidden ${extraClassNames}` },
|
|
60
63
|
React.createElement("div", { className: "tw-flex tw-items-center tw-w-full tw-h-max tw-gap-1" },
|
|
61
64
|
showArrows && (React.createElement(Button, { icon: prevIcon, size: "lg", variant: "no-border", testId: "carousel-prev", extraClassNames: `${currentIndex === 0 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onBackClick })),
|
|
62
|
-
|
|
65
|
+
React.createElement(motion.div, { key: currentIndex, custom: 1, initial: "initial", animate: "animate", exit: "exit", variants: slideVariants, className: "tw-w-full" }, carouselItems[currentIndex]),
|
|
63
66
|
showArrows && (React.createElement(Button, { icon: nextIcon, testId: "carousel-next", size: "lg", variant: "no-border", extraClassNames: `${currentIndex === carouselItems.length - 1 && !continuous ? 'tw-invisible' : ''} ${iconExtraClassNames} tw-animate-fadeIn`, onClick: onForwardClick }))),
|
|
64
67
|
showIndicators && (React.createElement("div", { className: "tw-flex tw-gap-1 tw-mt-2" }, carouselItems.map((_, i) => (React.createElement("div", { key: i, className: `tw-w-2 tw-h-2 tw-rounded-full tw-cursor-pointer ${i === currentIndex ? 'tw-bg-sq-color-dark' : 'tw-bg-sq-darkish-gray'}`, onClick: () => changeSlide(i) })))))));
|
|
65
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import React, { useRef, useEffect, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { motion, AnimatePresence } from 'framer-motion';
|
|
3
3
|
const Collapse = ({ isVisible, children }) => {
|
|
4
4
|
const contentRef = useRef(null);
|
|
5
|
-
const [contentHeight, setContentHeight] = useState(
|
|
5
|
+
const [contentHeight, setContentHeight] = useState(0);
|
|
6
6
|
useEffect(() => {
|
|
7
7
|
if (contentRef.current) {
|
|
8
|
-
setContentHeight(contentRef.current
|
|
8
|
+
setContentHeight(contentRef.current.scrollHeight);
|
|
9
9
|
}
|
|
10
10
|
}, [children]);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
height: isVisible ? contentHeight : 0,
|
|
14
|
-
});
|
|
15
|
-
return React.createElement(animated.div, { style: styles }, isVisible ? React.createElement("div", { ref: contentRef }, children) : undefined);
|
|
11
|
+
return (React.createElement(AnimatePresence, { initial: false }, isVisible && (React.createElement(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { type: 'spring', damping: 20, stiffness: 100 }, style: { overflow: 'hidden' } },
|
|
12
|
+
React.createElement("div", { ref: contentRef }, children)))));
|
|
16
13
|
};
|
|
17
14
|
export default Collapse;
|
|
18
15
|
//# sourceMappingURL=Collapse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGxD,MAAM,QAAQ,GAA2C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SACnD;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,eAAe,IAAC,OAAO,EAAE,KAAK,IAC5B,SAAS,IAAI,CACZ,oBAAC,MAAM,CAAC,GAAG,IACT,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAClC,OAAO,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC,EAAE,EAC9C,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAC/B,UAAU,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;QAC7B,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CAC3B,CACd,CACe,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
|
|
2
3
|
export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
|
|
3
4
|
export type IconType = (typeof iconTypes)[number];
|