@edu-tosel/design 1.0.289 → 1.0.290

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 (4) hide show
  1. package/layout/template/home/layout/Carousel.d.ts +6 -1
  2. package/layout/template/home/layout/Carousel.js +7 -6
  3. package/package.json +1 -1
  4. package/version.txt +1 -1
package/layout/template/home/layout/Carousel.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  import { CarouselContent } from "../../../../interface";
2
- export default function Carousel({ contents, }: {
2
+ interface CarouselOption {
3
+ isStatic?: boolean;
4
+ }
5
+ export default function Carousel({ contents, option, }: {
3
6
  contents: CarouselContent[];
7
+ option?: CarouselOption;
4
8
  }): import("react/jsx-runtime").JSX.Element;
9
+ export {};
package/layout/template/home/layout/Carousel.js CHANGED
@@ -7,15 +7,14 @@ import { LineBreaks } from "../../../../text";
7
7
  import SVG from "../../../../asset/SVG";
8
8
  import { tagString } from "../../../../interface/domain";
9
9
  import useResponsive from "../../../../hook/useResponsive";
10
- export default function Carousel({ contents, }) {
10
+ export default function Carousel({ contents, option, }) {
11
11
  const [index, setIndex] = useState(0);
12
12
  const [flag, inTime] = useEase(10000, 1000);
13
13
  const [loaded, setLoaded] = useState(false);
14
14
  const isMD = useResponsive("md");
15
15
  const isXL = useResponsive("xl");
16
16
  const intervalRef = useRef(null);
17
- const { tag, titles, image, option } = contents[index];
18
- const { text, background } = option ?? {};
17
+ const { tag, titles, image } = contents[index];
19
18
  // Transition animation using react-spring
20
19
  const transitionStyles = useSpring({
21
20
  opacity: loaded ? 1 : 0,
@@ -36,7 +35,9 @@ export default function Carousel({ contents, }) {
36
35
  }, 3000);
37
36
  }, [contents.length]);
38
37
  useEffect(() => {
39
- resetTimer(); // timerstarts after mounting component
38
+ if (!option?.isStatic) {
39
+ resetTimer(); // timerstarts after mounting component
40
+ }
40
41
  return () => {
41
42
  // clear timer after unmounting component
42
43
  if (intervalRef.current) {
@@ -59,7 +60,7 @@ export default function Carousel({ contents, }) {
59
60
  displays: "relative flex justify-center items-center",
60
61
  sizes: "w-full h-fit md:h-80 ml:h-100",
61
62
  textstyle: "break-keep",
62
- background,
63
+ background: contents[index].option?.background,
63
64
  animations: "duration-300",
64
65
  };
65
66
  const titleWrapper = {
@@ -81,7 +82,7 @@ export default function Carousel({ contents, }) {
81
82
  const body = {
82
83
  displays: "flex flex-none flex-col items-center justify-center md:flex-row",
83
84
  sizes: "w-full max-w-256 h-full",
84
- text: text ?? "text-gray-dark",
85
+ text: contents[index].option?.text ?? "text-gray-dark",
85
86
  animations: "duration-500",
86
87
  };
87
88
  const tagBox = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.289",
3
+ "version": "1.0.290",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.289
1
+ 1.0.290