szld-libs 0.2.40 → 0.2.42

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 (12) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/szld-components.es.js +5311 -5310
  3. package/dist/szld-components.umd.js +38 -38
  4. package/es/components/LoopSlide/index.css +1 -1
  5. package/es/components/LoopSlide/index.d.ts +4 -0
  6. package/es/components/LoopSlide/index.js +21 -16
  7. package/es/index.js +8 -1
  8. package/lib/components/LoopSlide/index.css +1 -1
  9. package/lib/components/LoopSlide/index.d.ts +4 -0
  10. package/lib/components/LoopSlide/index.js +19 -14
  11. package/lib/index.js +8 -1
  12. package/package.json +1 -1
package/es/components/LoopSlide/index.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .LoopSlide-module_content_f392a {
19
19
  position: relative;
20
20
  width: 100%;
21
- padding: 10px 0;
21
+ padding: 1px 0;
22
22
  box-sizing: border-box;
23
23
  }
24
24
 
package/es/components/LoopSlide/index.d.ts CHANGED
@@ -8,6 +8,10 @@ interface LoopSlideProps {
8
8
  children: ReactNode;
9
9
  height?: string;
10
10
  mouseControl?: boolean;
11
+ classes?: {
12
+ container?: string;
13
+ content?: string;
14
+ };
11
15
  }
12
16
  declare const LoopSlide: React.FC<LoopSlideProps>;
13
17
  export default LoopSlide;
package/es/components/LoopSlide/index.js CHANGED
@@ -1,5 +1,6 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { useRef, useEffect } from "react";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import classNames from "classnames";
3
+ import { useRef, useMemo, useEffect } from "react";
3
4
  const wrapper = "LoopSlide-module_wrapper_dde90";
4
5
  const container = "LoopSlide-module_container_be123";
5
6
  const scrollContent = "LoopSlide-module_scrollContent_36ed7";
@@ -18,23 +19,32 @@ const LoopSlide = ({
18
19
  style,
19
20
  children,
20
21
  height = "100vh",
21
- mouseControl = false
22
+ mouseControl = false,
23
+ classes
22
24
  }) => {
23
25
  const wrapperRef = useRef(null);
24
26
  const containerRef = useRef(null);
25
27
  const contentRef = useRef(null);
26
28
  const resizeObserverRef = useRef(null);
27
- useRef(false);
28
29
  const scrollVelocity = useRef(0);
29
30
  const animationFrameId = useRef();
30
31
  const lastScrollTime = useRef(0);
32
+ const extraClone = useMemo(() => {
33
+ if (!containerRef.current || !contentRef.current)
34
+ return;
35
+ const container2 = containerRef.current;
36
+ const content2 = contentRef.current;
37
+ const contentHeight = parseFloat(content2.scrollHeight.toString());
38
+ if (contentHeight * 2 - container2.clientHeight < contentHeight) {
39
+ return true;
40
+ }
41
+ return false;
42
+ }, []);
31
43
  const setupAnimation = () => {
32
44
  if (!containerRef.current || !contentRef.current)
33
45
  return;
34
46
  const container2 = containerRef.current;
35
47
  const content2 = contentRef.current;
36
- const clones = container2.querySelectorAll(`.${styles.content}:not(:first-child)`);
37
- clones.forEach((clone) => container2.removeChild(clone));
38
48
  const contentHeight = parseFloat(content2.scrollHeight.toString());
39
49
  if (contentHeight * 2 <= container2.clientHeight) {
40
50
  container2.style.animation = "none";
@@ -45,15 +55,6 @@ const LoopSlide = ({
45
55
  container2.style.animationDuration = `${speed * scale}s`;
46
56
  container2.style.animationDelay = `${delay}s`;
47
57
  container2.style.animationTimingFunction = timingFunction;
48
- const cloneContent = () => {
49
- const clone = content2.cloneNode(true);
50
- clone.className = `${styles.content}`;
51
- container2.appendChild(clone);
52
- };
53
- cloneContent();
54
- if (contentHeight * 2 - container2.clientHeight < contentHeight) {
55
- cloneContent();
56
- }
57
58
  };
58
59
  useEffect(() => {
59
60
  setupAnimation();
@@ -143,7 +144,11 @@ const LoopSlide = ({
143
144
  style: { height, ...style },
144
145
  onMouseEnter: handleMouseEnter,
145
146
  onMouseLeave: handleMouseLeave,
146
- children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) })
147
+ children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(styles.container, classes == null ? void 0 : classes.container), children: [
148
+ /* @__PURE__ */ jsx("div", { ref: contentRef, className: classNames(styles.content, classes == null ? void 0 : classes.content), children }),
149
+ /* @__PURE__ */ jsx("div", { className: classNames(styles.content, classes == null ? void 0 : classes.content), children }),
150
+ extraClone && /* @__PURE__ */ jsx("div", { className: classNames(styles.content, classes == null ? void 0 : classes.content), children })
151
+ ] })
147
152
  }
148
153
  );
149
154
  };
package/es/index.js CHANGED
@@ -62,7 +62,14 @@ const Demo = () => {
62
62
  margin: "20px"
63
63
  },
64
64
  children: /* @__PURE__ */ jsx(LoopSlide, { speed: 6, height: "100%", mouseControl: true, children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
65
- /* @__PURE__ */ jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
65
+ /* @__PURE__ */ jsx(
66
+ "h2",
67
+ {
68
+ onClick: () => void 0,
69
+ style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" },
70
+ children: section.title
71
+ }
72
+ ),
66
73
  section.people.map((person, j) => /* @__PURE__ */ jsxs("div", { children: [
67
74
  /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
68
75
  person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
package/lib/components/LoopSlide/index.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .LoopSlide-module_content_f392a {
19
19
  position: relative;
20
20
  width: 100%;
21
- padding: 10px 0;
21
+ padding: 1px 0;
22
22
  box-sizing: border-box;
23
23
  }
24
24
 
package/lib/components/LoopSlide/index.d.ts CHANGED
@@ -8,6 +8,10 @@ interface LoopSlideProps {
8
8
  children: ReactNode;
9
9
  height?: string;
10
10
  mouseControl?: boolean;
11
+ classes?: {
12
+ container?: string;
13
+ content?: string;
14
+ };
11
15
  }
12
16
  declare const LoopSlide: React.FC<LoopSlideProps>;
13
17
  export default LoopSlide;
package/lib/components/LoopSlide/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("react/jsx-runtime");
3
+ const classNames = require("classnames");
3
4
  const react = require("react");
4
5
  const wrapper = "LoopSlide-module_wrapper_dde90";
5
6
  const container = "LoopSlide-module_container_be123";
@@ -19,23 +20,32 @@ const LoopSlide = ({
19
20
  style,
20
21
  children,
21
22
  height = "100vh",
22
- mouseControl = false
23
+ mouseControl = false,
24
+ classes
23
25
  }) => {
24
26
  const wrapperRef = react.useRef(null);
25
27
  const containerRef = react.useRef(null);
26
28
  const contentRef = react.useRef(null);
27
29
  const resizeObserverRef = react.useRef(null);
28
- react.useRef(false);
29
30
  const scrollVelocity = react.useRef(0);
30
31
  const animationFrameId = react.useRef();
31
32
  const lastScrollTime = react.useRef(0);
33
+ const extraClone = react.useMemo(() => {
34
+ if (!containerRef.current || !contentRef.current)
35
+ return;
36
+ const container2 = containerRef.current;
37
+ const content2 = contentRef.current;
38
+ const contentHeight = parseFloat(content2.scrollHeight.toString());
39
+ if (contentHeight * 2 - container2.clientHeight < contentHeight) {
40
+ return true;
41
+ }
42
+ return false;
43
+ }, []);
32
44
  const setupAnimation = () => {
33
45
  if (!containerRef.current || !contentRef.current)
34
46
  return;
35
47
  const container2 = containerRef.current;
36
48
  const content2 = contentRef.current;
37
- const clones = container2.querySelectorAll(`.${styles.content}:not(:first-child)`);
38
- clones.forEach((clone) => container2.removeChild(clone));
39
49
  const contentHeight = parseFloat(content2.scrollHeight.toString());
40
50
  if (contentHeight * 2 <= container2.clientHeight) {
41
51
  container2.style.animation = "none";
@@ -46,15 +56,6 @@ const LoopSlide = ({
46
56
  container2.style.animationDuration = `${speed * scale}s`;
47
57
  container2.style.animationDelay = `${delay}s`;
48
58
  container2.style.animationTimingFunction = timingFunction;
49
- const cloneContent = () => {
50
- const clone = content2.cloneNode(true);
51
- clone.className = `${styles.content}`;
52
- container2.appendChild(clone);
53
- };
54
- cloneContent();
55
- if (contentHeight * 2 - container2.clientHeight < contentHeight) {
56
- cloneContent();
57
- }
58
59
  };
59
60
  react.useEffect(() => {
60
61
  setupAnimation();
@@ -144,7 +145,11 @@ const LoopSlide = ({
144
145
  style: { height, ...style },
145
146
  onMouseEnter: handleMouseEnter,
146
147
  onMouseLeave: handleMouseLeave,
147
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) })
148
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(styles.container, classes == null ? void 0 : classes.container), children: [
149
+ /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: classNames(styles.content, classes == null ? void 0 : classes.content), children }),
150
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles.content, classes == null ? void 0 : classes.content), children }),
151
+ extraClone && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles.content, classes == null ? void 0 : classes.content), children })
152
+ ] })
148
153
  }
149
154
  );
150
155
  };
package/lib/index.js CHANGED
@@ -63,7 +63,14 @@ const Demo = () => {
63
63
  margin: "20px"
64
64
  },
65
65
  children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 6, height: "100%", mouseControl: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
66
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
66
+ /* @__PURE__ */ jsxRuntime.jsx(
67
+ "h2",
68
+ {
69
+ onClick: () => void 0,
70
+ style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" },
71
+ children: section.title
72
+ }
73
+ ),
67
74
  section.people.map((person, j) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
68
75
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
69
76
  person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "szld-libs",
3
3
  "private": false,
4
- "version": "0.2.40",
4
+ "version": "0.2.42",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",