szld-libs 0.2.37 → 0.2.39

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 (13) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/szld-components.es.js +2392 -2367
  3. package/dist/szld-components.umd.js +33 -33
  4. package/es/components/LoopSlide/index.css +3 -0
  5. package/es/components/LoopSlide/index.d.ts +3 -0
  6. package/es/components/LoopSlide/index.js +34 -3
  7. package/es/index.js +4 -4
  8. package/lib/components/LoopSlide/index.css +3 -0
  9. package/lib/components/LoopSlide/index.d.ts +3 -0
  10. package/lib/components/LoopSlide/index.js +34 -3
  11. package/lib/index.js +4 -4
  12. package/package.json +1 -1
  13. package/readme.md +6 -3
package/es/components/LoopSlide/index.css CHANGED
@@ -10,6 +10,9 @@
10
10
  height: 100%;
11
11
  --content-height: 0px;
12
12
  animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
13
+ backface-visibility: hidden;
14
+ -webkit-font-smoothing: antialiased;
15
+ image-rendering: -webkit-optimize-contrast;
13
16
  }
14
17
 
15
18
  .LoopSlide-module_content_f392a {
package/es/components/LoopSlide/index.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React, { CSSProperties, ReactNode } from 'react';
2
2
  interface LoopSlideProps {
3
3
  speed?: number;
4
+ delay?: number;
5
+ timingFunction?: string;
4
6
  className?: string;
5
7
  style?: CSSProperties;
6
8
  children: ReactNode;
7
9
  height?: string;
10
+ mouseControl?: boolean;
8
11
  }
9
12
  declare const LoopSlide: React.FC<LoopSlideProps>;
10
13
  export default LoopSlide;
package/es/components/LoopSlide/index.js CHANGED
@@ -10,7 +10,16 @@ const styles = {
10
10
  scrollContent,
11
11
  content
12
12
  };
13
- const LoopSlide = ({ speed = 60, className = "", style, children, height = "100vh" }) => {
13
+ const LoopSlide = ({
14
+ speed = 10,
15
+ delay = 1,
16
+ timingFunction = "linear",
17
+ className = "",
18
+ style,
19
+ children,
20
+ height = "100vh",
21
+ mouseControl = false
22
+ }) => {
14
23
  const wrapperRef = useRef(null);
15
24
  const containerRef = useRef(null);
16
25
  const contentRef = useRef(null);
@@ -30,6 +39,8 @@ const LoopSlide = ({ speed = 60, className = "", style, children, height = "100v
30
39
  const scale = contentHeight / container2.clientHeight;
31
40
  container2.style.setProperty("--content-height", `${contentHeight}px`);
32
41
  container2.style.animationDuration = `${speed * scale}s`;
42
+ container2.style.animationDelay = `${delay}s`;
43
+ container2.style.animationTimingFunction = timingFunction;
33
44
  const cloneContent = () => {
34
45
  const clone = content2.cloneNode(true);
35
46
  clone.className = `${styles.content}`;
@@ -51,8 +62,28 @@ const LoopSlide = ({ speed = 60, className = "", style, children, height = "100v
51
62
  resizeObserverRef.current.unobserve(containerRef.current);
52
63
  }
53
64
  };
54
- }, [speed]);
55
- return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: `${styles.wrapper} ${className}`, style: { height, ...style }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) }) });
65
+ }, [speed, delay]);
66
+ const handleMouseEnter = () => {
67
+ if (mouseControl && containerRef.current) {
68
+ containerRef.current.style.animationPlayState = "paused";
69
+ }
70
+ };
71
+ const handleMouseLeave = () => {
72
+ if (mouseControl && containerRef.current) {
73
+ containerRef.current.style.animationPlayState = "running";
74
+ }
75
+ };
76
+ return /* @__PURE__ */ jsx(
77
+ "div",
78
+ {
79
+ ref: wrapperRef,
80
+ className: `${styles.wrapper} ${className}`,
81
+ style: { height, ...style },
82
+ onMouseEnter: handleMouseEnter,
83
+ onMouseLeave: handleMouseLeave,
84
+ children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) })
85
+ }
86
+ );
56
87
  };
57
88
  export {
58
89
  LoopSlide as default
package/es/index.js CHANGED
@@ -61,11 +61,11 @@ const Demo = () => {
61
61
  border: "1px solid #333",
62
62
  margin: "20px"
63
63
  },
64
- children: /* @__PURE__ */ jsx(LoopSlide, { speed: 4, height: "100%", children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
65
- /* @__PURE__ */ jsx("h2", { style: { fontSize: "2rem", marginBottom: "1rem" }, children: section.title }),
64
+ children: /* @__PURE__ */ jsx(LoopSlide, { speed: 6, height: "100%", mouseControl: false, 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 }),
66
66
  section.people.map((person, j) => /* @__PURE__ */ jsxs("div", { children: [
67
- /* @__PURE__ */ jsx("p", { style: { fontSize: "1.5rem", margin: "0.5rem 0" }, children: person.name }),
68
- person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "1rem", color: "#aaa", marginBottom: "1.5rem" }, children: person.role })
67
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
68
+ person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
69
69
  ] }, j))
70
70
  ] }, i)) }) })
71
71
  }
package/lib/components/LoopSlide/index.css CHANGED
@@ -10,6 +10,9 @@
10
10
  height: 100%;
11
11
  --content-height: 0px;
12
12
  animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
13
+ backface-visibility: hidden;
14
+ -webkit-font-smoothing: antialiased;
15
+ image-rendering: -webkit-optimize-contrast;
13
16
  }
14
17
 
15
18
  .LoopSlide-module_content_f392a {
package/lib/components/LoopSlide/index.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React, { CSSProperties, ReactNode } from 'react';
2
2
  interface LoopSlideProps {
3
3
  speed?: number;
4
+ delay?: number;
5
+ timingFunction?: string;
4
6
  className?: string;
5
7
  style?: CSSProperties;
6
8
  children: ReactNode;
7
9
  height?: string;
10
+ mouseControl?: boolean;
8
11
  }
9
12
  declare const LoopSlide: React.FC<LoopSlideProps>;
10
13
  export default LoopSlide;
package/lib/components/LoopSlide/index.js CHANGED
@@ -11,7 +11,16 @@ const styles = {
11
11
  scrollContent,
12
12
  content
13
13
  };
14
- const LoopSlide = ({ speed = 60, className = "", style, children, height = "100vh" }) => {
14
+ const LoopSlide = ({
15
+ speed = 10,
16
+ delay = 1,
17
+ timingFunction = "linear",
18
+ className = "",
19
+ style,
20
+ children,
21
+ height = "100vh",
22
+ mouseControl = false
23
+ }) => {
15
24
  const wrapperRef = react.useRef(null);
16
25
  const containerRef = react.useRef(null);
17
26
  const contentRef = react.useRef(null);
@@ -31,6 +40,8 @@ const LoopSlide = ({ speed = 60, className = "", style, children, height = "100v
31
40
  const scale = contentHeight / container2.clientHeight;
32
41
  container2.style.setProperty("--content-height", `${contentHeight}px`);
33
42
  container2.style.animationDuration = `${speed * scale}s`;
43
+ container2.style.animationDelay = `${delay}s`;
44
+ container2.style.animationTimingFunction = timingFunction;
34
45
  const cloneContent = () => {
35
46
  const clone = content2.cloneNode(true);
36
47
  clone.className = `${styles.content}`;
@@ -52,7 +63,27 @@ const LoopSlide = ({ speed = 60, className = "", style, children, height = "100v
52
63
  resizeObserverRef.current.unobserve(containerRef.current);
53
64
  }
54
65
  };
55
- }, [speed]);
56
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: `${styles.wrapper} ${className}`, style: { height, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) }) });
66
+ }, [speed, delay]);
67
+ const handleMouseEnter = () => {
68
+ if (mouseControl && containerRef.current) {
69
+ containerRef.current.style.animationPlayState = "paused";
70
+ }
71
+ };
72
+ const handleMouseLeave = () => {
73
+ if (mouseControl && containerRef.current) {
74
+ containerRef.current.style.animationPlayState = "running";
75
+ }
76
+ };
77
+ return /* @__PURE__ */ jsxRuntime.jsx(
78
+ "div",
79
+ {
80
+ ref: wrapperRef,
81
+ className: `${styles.wrapper} ${className}`,
82
+ style: { height, ...style },
83
+ onMouseEnter: handleMouseEnter,
84
+ onMouseLeave: handleMouseLeave,
85
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) })
86
+ }
87
+ );
57
88
  };
58
89
  module.exports = LoopSlide;
package/lib/index.js CHANGED
@@ -62,11 +62,11 @@ const Demo = () => {
62
62
  border: "1px solid #333",
63
63
  margin: "20px"
64
64
  },
65
- children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 4, height: "100%", 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: "2rem", marginBottom: "1rem" }, children: section.title }),
65
+ children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 6, height: "100%", mouseControl: false, 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 }),
67
67
  section.people.map((person, j) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
68
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.5rem", margin: "0.5rem 0" }, children: person.name }),
69
- person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1rem", color: "#aaa", marginBottom: "1.5rem" }, children: person.role })
68
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
69
+ person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
70
70
  ] }, j))
71
71
  ] }, i)) }) })
72
72
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "szld-libs",
3
3
  "private": false,
4
- "version": "0.2.37",
4
+ "version": "0.2.39",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",
package/readme.md CHANGED
@@ -1,17 +1,18 @@
1
- # 前端组件库-基于antd的二次封装
1
+ # 前端组件库-基于 antd 的二次封装
2
2
 
3
3
  ## 组件列表
4
4
 
5
5
  ### 1. BackHeader - 带返回按钮的页面头
6
6
 
7
7
  ### 2. CreateForm - 配置化生成表单
8
- 该组件通过栅格组件将Form表单进行包裹，实现灵活布局。
8
+
9
+ 该组件通过栅格组件将 Form 表单进行包裹，实现灵活布局。
9
10
 
10
11
  ### 3. Echarts
11
12
 
12
13
  ### 4. EditTable - 可编辑表格
13
14
 
14
- ### 5. SearchTable - 带筛选项的表格（筛选项基于CreateForm）
15
+ ### 5. SearchTable - 带筛选项的表格（筛选项基于 CreateForm）
15
16
 
16
17
  ### 6. Upload - 上传
17
18
 
@@ -19,4 +20,6 @@
19
20
 
20
21
  ### 8. WorkFlowNode - 流程节点
21
22
 
23
+ ### 9. LoopSlide - 无限循环滚动器
24
+
22
25
  ## utils