deepsea-components 5.11.5 → 5.12.0
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/components/AutoFit.cjs +116 -0
- package/dist/components/AutoFit.js +82 -0
- package/dist/components/AutoScroll.cjs +125 -0
- package/dist/components/AutoScroll.js +91 -0
- package/dist/components/AutoSizeTextarea.cjs +73 -0
- package/dist/components/AutoSizeTextarea.js +39 -0
- package/dist/components/CircleText.cjs +68 -0
- package/dist/components/CircleText.js +34 -0
- package/dist/components/CopyButton.cjs +73 -0
- package/dist/{cjs/components → components}/CopyButton.d.ts +3 -3
- package/dist/components/CopyButton.js +27 -0
- package/dist/components/Echart.cjs +74 -0
- package/dist/components/Echart.js +34 -0
- package/dist/components/Flow.cjs +211 -0
- package/dist/components/Flow.js +168 -0
- package/dist/components/FormLabel.cjs +77 -0
- package/dist/components/FormLabel.js +37 -0
- package/dist/components/HlsPlayer.cjs +76 -0
- package/dist/components/HlsPlayer.js +32 -0
- package/dist/components/InfiniteScroll.cjs +135 -0
- package/dist/{cjs/components → components}/InfiniteScroll.d.ts +7 -7
- package/dist/components/InfiniteScroll.js +101 -0
- package/dist/components/InputFile.cjs +102 -0
- package/dist/components/InputFile.js +65 -0
- package/dist/components/InputFileButton.cjs +109 -0
- package/dist/components/InputFileButton.js +75 -0
- package/dist/components/LoopSwiper.cjs +147 -0
- package/dist/components/LoopSwiper.js +113 -0
- package/dist/components/ReadExcel.cjs +48 -0
- package/dist/components/ReadExcel.js +14 -0
- package/dist/components/Ring.cjs +53 -0
- package/dist/components/Ring.js +19 -0
- package/dist/components/Scroll.cjs +143 -0
- package/dist/components/Scroll.js +54 -0
- package/dist/components/SectionRing.cjs +59 -0
- package/dist/components/SectionRing.js +25 -0
- package/dist/components/Skeleton.cjs +66 -0
- package/dist/components/Skeleton.js +32 -0
- package/dist/components/Title.cjs +61 -0
- package/dist/components/Title.js +27 -0
- package/dist/components/TransitionBox.cjs +79 -0
- package/dist/components/TransitionBox.js +45 -0
- package/dist/components/TransitionNum.cjs +83 -0
- package/dist/components/TransitionNum.js +49 -0
- package/dist/components/Trapezium.cjs +67 -0
- package/dist/components/Trapezium.js +33 -0
- package/dist/components/Unify.cjs +68 -0
- package/dist/components/Unify.js +31 -0
- package/dist/components/WriteExcel.cjs +50 -0
- package/dist/components/WriteExcel.js +16 -0
- package/dist/index.cjs +285 -0
- package/dist/index.js +26 -0
- package/dist/utils/getReactVersion.cjs +40 -0
- package/dist/utils/getReactVersion.js +6 -0
- package/dist/utils/index.cjs +57 -0
- package/dist/utils/index.js +17 -0
- package/package.json +26 -17
- package/src/components/WriteExcel.tsx +25 -25
- package/tsconfig.json +16 -0
- package/dist/cjs/components/AutoFit.js +0 -106
- package/dist/cjs/components/AutoFit.js.map +0 -7
- package/dist/cjs/components/AutoScroll.js +0 -127
- package/dist/cjs/components/AutoScroll.js.map +0 -7
- package/dist/cjs/components/AutoSizeTextarea.js +0 -70
- package/dist/cjs/components/AutoSizeTextarea.js.map +0 -7
- package/dist/cjs/components/CircleText.js +0 -77
- package/dist/cjs/components/CircleText.js.map +0 -7
- package/dist/cjs/components/CopyButton.js +0 -60
- package/dist/cjs/components/CopyButton.js.map +0 -7
- package/dist/cjs/components/Echart.js +0 -56
- package/dist/cjs/components/Echart.js.map +0 -7
- package/dist/cjs/components/Flow.js +0 -220
- package/dist/cjs/components/Flow.js.map +0 -7
- package/dist/cjs/components/FormLabel.js +0 -42
- package/dist/cjs/components/FormLabel.js.map +0 -7
- package/dist/cjs/components/HlsPlayer.js +0 -65
- package/dist/cjs/components/HlsPlayer.js.map +0 -7
- package/dist/cjs/components/InfiniteScroll.js +0 -148
- package/dist/cjs/components/InfiniteScroll.js.map +0 -7
- package/dist/cjs/components/InputFile.js +0 -90
- package/dist/cjs/components/InputFile.js.map +0 -7
- package/dist/cjs/components/InputFileButton.js +0 -113
- package/dist/cjs/components/InputFileButton.js.map +0 -7
- package/dist/cjs/components/LoopSwiper.js +0 -137
- package/dist/cjs/components/LoopSwiper.js.map +0 -7
- package/dist/cjs/components/ReadExcel.js +0 -36
- package/dist/cjs/components/ReadExcel.js.map +0 -7
- package/dist/cjs/components/Ring.js +0 -49
- package/dist/cjs/components/Ring.js.map +0 -7
- package/dist/cjs/components/Scroll.js +0 -103
- package/dist/cjs/components/Scroll.js.map +0 -7
- package/dist/cjs/components/SectionRing.js +0 -54
- package/dist/cjs/components/SectionRing.js.map +0 -7
- package/dist/cjs/components/Skeleton.js +0 -66
- package/dist/cjs/components/Skeleton.js.map +0 -7
- package/dist/cjs/components/Title.js +0 -48
- package/dist/cjs/components/Title.js.map +0 -7
- package/dist/cjs/components/TransitionBox.js +0 -53
- package/dist/cjs/components/TransitionBox.js.map +0 -7
- package/dist/cjs/components/TransitionNum.js +0 -62
- package/dist/cjs/components/TransitionNum.js.map +0 -7
- package/dist/cjs/components/Trapezium.js +0 -69
- package/dist/cjs/components/Trapezium.js.map +0 -7
- package/dist/cjs/components/Unify.js +0 -48
- package/dist/cjs/components/Unify.js.map +0 -7
- package/dist/cjs/components/WriteExcel.js +0 -45
- package/dist/cjs/components/WriteExcel.js.map +0 -7
- package/dist/cjs/index.js +0 -74
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/utils/getReactVersion.js +0 -34
- package/dist/cjs/utils/getReactVersion.js.map +0 -7
- package/dist/cjs/utils/index.js +0 -52
- package/dist/cjs/utils/index.js.map +0 -7
- package/dist/esm/components/AutoFit.d.ts +0 -25
- package/dist/esm/components/AutoFit.js +0 -97
- package/dist/esm/components/AutoFit.js.map +0 -1
- package/dist/esm/components/AutoScroll.d.ts +0 -38
- package/dist/esm/components/AutoScroll.js +0 -102
- package/dist/esm/components/AutoScroll.js.map +0 -1
- package/dist/esm/components/AutoSizeTextarea.d.ts +0 -5
- package/dist/esm/components/AutoSizeTextarea.js +0 -48
- package/dist/esm/components/AutoSizeTextarea.js.map +0 -1
- package/dist/esm/components/CircleText.d.ts +0 -25
- package/dist/esm/components/CircleText.js +0 -49
- package/dist/esm/components/CircleText.js.map +0 -1
- package/dist/esm/components/CopyButton.d.ts +0 -13
- package/dist/esm/components/CopyButton.js +0 -31
- package/dist/esm/components/CopyButton.js.map +0 -1
- package/dist/esm/components/Echart.d.ts +0 -15
- package/dist/esm/components/Echart.js +0 -41
- package/dist/esm/components/Echart.js.map +0 -1
- package/dist/esm/components/Flow.d.ts +0 -86
- package/dist/esm/components/Flow.js +0 -186
- package/dist/esm/components/Flow.js.map +0 -1
- package/dist/esm/components/FormLabel.d.ts +0 -22
- package/dist/esm/components/FormLabel.js +0 -52
- package/dist/esm/components/FormLabel.js.map +0 -1
- package/dist/esm/components/HlsPlayer.d.ts +0 -5
- package/dist/esm/components/HlsPlayer.js +0 -36
- package/dist/esm/components/HlsPlayer.js.map +0 -1
- package/dist/esm/components/InfiniteScroll.d.ts +0 -54
- package/dist/esm/components/InfiniteScroll.js +0 -102
- package/dist/esm/components/InfiniteScroll.js.map +0 -1
- package/dist/esm/components/InputFile.d.ts +0 -26
- package/dist/esm/components/InputFile.js +0 -78
- package/dist/esm/components/InputFile.js.map +0 -1
- package/dist/esm/components/InputFileButton.d.ts +0 -11
- package/dist/esm/components/InputFileButton.js +0 -95
- package/dist/esm/components/InputFileButton.js.map +0 -1
- package/dist/esm/components/LoopSwiper.d.ts +0 -9
- package/dist/esm/components/LoopSwiper.js +0 -122
- package/dist/esm/components/LoopSwiper.js.map +0 -1
- package/dist/esm/components/ReadExcel.d.ts +0 -8
- package/dist/esm/components/ReadExcel.js +0 -19
- package/dist/esm/components/ReadExcel.js.map +0 -1
- package/dist/esm/components/Ring.d.ts +0 -7
- package/dist/esm/components/Ring.js +0 -26
- package/dist/esm/components/Ring.js.map +0 -1
- package/dist/esm/components/Scroll.d.ts +0 -24
- package/dist/esm/components/Scroll.js +0 -67
- package/dist/esm/components/Scroll.js.map +0 -1
- package/dist/esm/components/SectionRing.d.ts +0 -8
- package/dist/esm/components/SectionRing.js +0 -33
- package/dist/esm/components/SectionRing.js.map +0 -1
- package/dist/esm/components/Skeleton.d.ts +0 -5
- package/dist/esm/components/Skeleton.js +0 -38
- package/dist/esm/components/Skeleton.js.map +0 -1
- package/dist/esm/components/Title.d.ts +0 -3
- package/dist/esm/components/Title.js +0 -26
- package/dist/esm/components/Title.js.map +0 -1
- package/dist/esm/components/TransitionBox.d.ts +0 -10
- package/dist/esm/components/TransitionBox.js +0 -50
- package/dist/esm/components/TransitionBox.js.map +0 -1
- package/dist/esm/components/TransitionNum.d.ts +0 -16
- package/dist/esm/components/TransitionNum.js +0 -65
- package/dist/esm/components/TransitionNum.js.map +0 -1
- package/dist/esm/components/Trapezium.d.ts +0 -9
- package/dist/esm/components/Trapezium.js +0 -43
- package/dist/esm/components/Trapezium.js.map +0 -1
- package/dist/esm/components/Unify.d.ts +0 -13
- package/dist/esm/components/Unify.js +0 -47
- package/dist/esm/components/Unify.js.map +0 -1
- package/dist/esm/components/WriteExcel.d.ts +0 -8
- package/dist/esm/components/WriteExcel.js +0 -23
- package/dist/esm/components/WriteExcel.js.map +0 -1
- package/dist/esm/index.d.ts +0 -26
- package/dist/esm/index.js +0 -27
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/utils/getReactVersion.d.ts +0 -1
- package/dist/esm/utils/getReactVersion.js +0 -6
- package/dist/esm/utils/getReactVersion.js.map +0 -1
- package/dist/esm/utils/index.d.ts +0 -9
- package/dist/esm/utils/index.js +0 -17
- package/dist/esm/utils/index.js.map +0 -1
- /package/dist/{cjs/components → components}/AutoFit.d.ts +0 -0
- /package/dist/{cjs/components → components}/AutoScroll.d.ts +0 -0
- /package/dist/{cjs/components → components}/AutoSizeTextarea.d.ts +0 -0
- /package/dist/{cjs/components → components}/CircleText.d.ts +0 -0
- /package/dist/{cjs/components → components}/Echart.d.ts +0 -0
- /package/dist/{cjs/components → components}/Flow.d.ts +0 -0
- /package/dist/{cjs/components → components}/FormLabel.d.ts +0 -0
- /package/dist/{cjs/components → components}/HlsPlayer.d.ts +0 -0
- /package/dist/{cjs/components → components}/InputFile.d.ts +0 -0
- /package/dist/{cjs/components → components}/InputFileButton.d.ts +0 -0
- /package/dist/{cjs/components → components}/LoopSwiper.d.ts +0 -0
- /package/dist/{cjs/components → components}/ReadExcel.d.ts +0 -0
- /package/dist/{cjs/components → components}/Ring.d.ts +0 -0
- /package/dist/{cjs/components → components}/Scroll.d.ts +0 -0
- /package/dist/{cjs/components → components}/SectionRing.d.ts +0 -0
- /package/dist/{cjs/components → components}/Skeleton.d.ts +0 -0
- /package/dist/{cjs/components → components}/Title.d.ts +0 -0
- /package/dist/{cjs/components → components}/TransitionBox.d.ts +0 -0
- /package/dist/{cjs/components → components}/TransitionNum.d.ts +0 -0
- /package/dist/{cjs/components → components}/Trapezium.d.ts +0 -0
- /package/dist/{cjs/components → components}/Unify.d.ts +0 -0
- /package/dist/{cjs/components → components}/WriteExcel.d.ts +0 -0
- /package/dist/{cjs/index.d.ts → index.d.ts} +0 -0
- /package/dist/{cjs/utils → utils}/getReactVersion.d.ts +0 -0
- /package/dist/{cjs/utils → utils}/index.d.ts +0 -0
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
-
import { css } from "@emotion/css";
|
|
5
|
-
import { clsx } from "deepsea-tools";
|
|
6
|
-
import { px, transformCSSVariable } from "../utils";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
/**
|
|
9
|
-
* 自适应缩放组件
|
|
10
|
-
*
|
|
11
|
-
* 注意:
|
|
12
|
-
* 1. 父元素必须设置非 static 定位方式
|
|
13
|
-
* 2. 父元素只能有且仅有一个子元素,那就是 AutoFit
|
|
14
|
-
* 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
|
|
15
|
-
* 4. 在第一次完成缩放前,无论 props 是什么,返回的都是 <div style={{ display: "none" }} />
|
|
16
|
-
* 5. 元素的属性、事件、资源并不是立即加载的,会有一帧的延迟,在第一次完成缩放后才会显示
|
|
17
|
-
*/
|
|
18
|
-
export const AutoFit = /*#__PURE__*/forwardRef((props, ref) => {
|
|
19
|
-
const {
|
|
20
|
-
width: designWidth = 1920,
|
|
21
|
-
height: designHeight = 1080,
|
|
22
|
-
direction,
|
|
23
|
-
className,
|
|
24
|
-
style,
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const ele = useRef(null);
|
|
28
|
-
const [show, setShow] = useState(false);
|
|
29
|
-
const [transform, setTransform] = useState(undefined);
|
|
30
|
-
const [width, setWidth] = useState(undefined);
|
|
31
|
-
const [height, setHeight] = useState(undefined);
|
|
32
|
-
useImperativeHandle(ref, () => ele.current, [ele.current]);
|
|
33
|
-
useLayoutEffect(() => {
|
|
34
|
-
const element = ele.current;
|
|
35
|
-
const parent = element?.parentElement;
|
|
36
|
-
if (!element || !parent) return;
|
|
37
|
-
function listener(entries) {
|
|
38
|
-
const entry = entries[0];
|
|
39
|
-
const {
|
|
40
|
-
contentRect
|
|
41
|
-
} = entry;
|
|
42
|
-
if (direction === "horizontal") {
|
|
43
|
-
const scale = contentRect.width / designWidth;
|
|
44
|
-
setTransform(`scale(${scale})`);
|
|
45
|
-
setWidth(px(designWidth));
|
|
46
|
-
setHeight(px(contentRect.height / scale));
|
|
47
|
-
} else if (direction === "vertical") {
|
|
48
|
-
const scale = contentRect.height / designHeight;
|
|
49
|
-
setTransform(`scale(${scale})`);
|
|
50
|
-
setWidth(px(contentRect.width / scale));
|
|
51
|
-
setHeight(px(designHeight));
|
|
52
|
-
} else {
|
|
53
|
-
const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight);
|
|
54
|
-
setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`);
|
|
55
|
-
setWidth(px(designWidth));
|
|
56
|
-
setHeight(px(designHeight));
|
|
57
|
-
}
|
|
58
|
-
setShow(true);
|
|
59
|
-
}
|
|
60
|
-
const observer = new ResizeObserver(listener);
|
|
61
|
-
observer.observe(parent);
|
|
62
|
-
return () => observer.disconnect();
|
|
63
|
-
}, [ele.current?.parentElement, designWidth, designHeight, direction]);
|
|
64
|
-
if (process.env.NODE_ENV === "development") {
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
const parent = ele.current?.parentElement;
|
|
67
|
-
if (!parent) return;
|
|
68
|
-
const style = getComputedStyle(parent);
|
|
69
|
-
if (style.position === "static") {
|
|
70
|
-
console.warn("AutoFit 组件的父元素的 position 属性不应该是 static");
|
|
71
|
-
}
|
|
72
|
-
}, [ele.current?.parentElement]);
|
|
73
|
-
}
|
|
74
|
-
if (!show) return /*#__PURE__*/_jsx("div", {
|
|
75
|
-
ref: ele,
|
|
76
|
-
style: {
|
|
77
|
-
display: "none"
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
return /*#__PURE__*/_jsx("div", {
|
|
81
|
-
ref: ele,
|
|
82
|
-
className: clsx(css`
|
|
83
|
-
position: absolute;
|
|
84
|
-
transform: var(--transform);
|
|
85
|
-
transform-origin: top left;
|
|
86
|
-
width: var(--width);
|
|
87
|
-
height: var(--height);
|
|
88
|
-
`, className),
|
|
89
|
-
style: transformCSSVariable({
|
|
90
|
-
transform,
|
|
91
|
-
width,
|
|
92
|
-
height
|
|
93
|
-
}, style),
|
|
94
|
-
...rest
|
|
95
|
-
});
|
|
96
|
-
});
|
|
97
|
-
//# sourceMappingURL=AutoFit.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","useState","css","clsx","px","transformCSSVariable","jsx","_jsx","AutoFit","props","ref","width","designWidth","height","designHeight","direction","className","style","rest","ele","show","setShow","transform","setTransform","undefined","setWidth","setHeight","current","element","parent","parentElement","listener","entries","entry","contentRect","scale","Math","min","observer","ResizeObserver","observe","disconnect","process","env","NODE_ENV","getComputedStyle","position","console","warn","display"],"sources":["../../../src/components/AutoFit.tsx"],"sourcesContent":["\"use client\"\n\nimport { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\n /** 设计稿宽度,默认 1920 */\n width?: number\n /** 设计稿高度,默认 1080 */\n height?: number\n /**\n * 在哪些方向进行缩放,默认缩放所有方向\n * 1. 水平方向是指,宽度按照设计稿进行占满,高度反向缩放\n * 2. 垂直方向是指,高度按照设计稿进行占满,宽度反向缩放\n * 3. 默认是水平和垂直方向都进行缩放,类似于 background-size: contain 的效果\n */\n direction?: \"horizontal\" | \"vertical\" | \"both\"\n}\n\n/**\n * 自适应缩放组件\n *\n * 注意:\n * 1. 父元素必须设置非 static 定位方式\n * 2. 父元素只能有且仅有一个子元素,那就是 AutoFit\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\n * 4. 在第一次完成缩放前,无论 props 是什么,返回的都是 <div style={{ display: \"none\" }} />\n * 5. 元素的属性、事件、资源并不是立即加载的,会有一帧的延迟,在第一次完成缩放后才会显示\n */\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\n const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props\n const ele = useRef<HTMLDivElement>(null)\n const [show, setShow] = useState(false)\n const [transform, setTransform] = useState<string | undefined>(undefined)\n const [width, setWidth] = useState<string | undefined>(undefined)\n const [height, setHeight] = useState<string | undefined>(undefined)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n useLayoutEffect(() => {\n const element = ele.current\n const parent = element?.parentElement\n if (!element || !parent) return\n function listener(entries: ResizeObserverEntry[]) {\n const entry = entries[0]\n const { contentRect } = entry\n if (direction === \"horizontal\") {\n const scale = contentRect.width / designWidth\n setTransform(`scale(${scale})`)\n setWidth(px(designWidth))\n setHeight(px(contentRect.height / scale))\n } else if (direction === \"vertical\") {\n const scale = contentRect.height / designHeight\n setTransform(`scale(${scale})`)\n setWidth(px(contentRect.width / scale))\n setHeight(px(designHeight))\n } else {\n const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)\n setTransform(\n `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,\n )\n setWidth(px(designWidth))\n setHeight(px(designHeight))\n }\n setShow(true)\n }\n const observer = new ResizeObserver(listener)\n observer.observe(parent)\n return () => observer.disconnect()\n }, [ele.current?.parentElement, designWidth, designHeight, direction])\n\n if (process.env.NODE_ENV === \"development\") {\n useEffect(() => {\n const parent = ele.current?.parentElement\n if (!parent) return\n const style = getComputedStyle(parent)\n if (style.position === \"static\") {\n console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\n }\n }, [ele.current?.parentElement])\n }\n\n if (!show) return <div ref={ele} style={{ display: \"none\" }} />\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n position: absolute;\n transform: var(--transform);\n transform-origin: top left;\n width: var(--width);\n height: var(--height);\n `,\n className,\n )}\n style={transformCSSVariable({ transform, width, height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"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"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from "react";
|
|
2
|
-
import { ScrollProps } from "./Scroll";
|
|
3
|
-
export interface AutoScrollProps extends ScrollProps {
|
|
4
|
-
/** 轮播元素的个数 */
|
|
5
|
-
count: number;
|
|
6
|
-
/** 轮播元素的高度 */
|
|
7
|
-
itemHeight: number;
|
|
8
|
-
/**
|
|
9
|
-
* 轮播动画的时间,单位毫秒
|
|
10
|
-
* @default 1000
|
|
11
|
-
*/
|
|
12
|
-
animation?: number;
|
|
13
|
-
/**
|
|
14
|
-
* 每个元素的停留时间,单位毫秒
|
|
15
|
-
* @default 3000
|
|
16
|
-
*/
|
|
17
|
-
duration?: number;
|
|
18
|
-
/**
|
|
19
|
-
* 元素之间的间距
|
|
20
|
-
* @default 0
|
|
21
|
-
*/
|
|
22
|
-
gap?: number;
|
|
23
|
-
/** 容器类名 */
|
|
24
|
-
containerClassName?: string;
|
|
25
|
-
/** 容器样式 */
|
|
26
|
-
containerStyle?: CSSProperties;
|
|
27
|
-
/**
|
|
28
|
-
* 在鼠标移入时是否继续播放
|
|
29
|
-
* @default false
|
|
30
|
-
*/
|
|
31
|
-
playOnMouseEnter?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* 是否暂停
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
paused?: boolean;
|
|
37
|
-
}
|
|
38
|
-
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
4
|
-
import { css } from "@emotion/css";
|
|
5
|
-
import { clsx, getArray } from "deepsea-tools";
|
|
6
|
-
import { useSize } from "soda-hooks";
|
|
7
|
-
import { px, transformCSSVariable } from "../utils";
|
|
8
|
-
import { Scroll } from "./Scroll";
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
11
|
-
const {
|
|
12
|
-
count,
|
|
13
|
-
itemHeight,
|
|
14
|
-
animation = 1000,
|
|
15
|
-
duration = 3000,
|
|
16
|
-
onMouseEnter,
|
|
17
|
-
onMouseLeave,
|
|
18
|
-
gap = 0,
|
|
19
|
-
containerClassName,
|
|
20
|
-
containerStyle,
|
|
21
|
-
children,
|
|
22
|
-
playOnMouseEnter,
|
|
23
|
-
scrollbar,
|
|
24
|
-
paused,
|
|
25
|
-
...rest
|
|
26
|
-
} = props;
|
|
27
|
-
const bar = useRef(null);
|
|
28
|
-
const timeout = useRef(undefined);
|
|
29
|
-
const ele = useRef(null);
|
|
30
|
-
const size = useSize(ele);
|
|
31
|
-
const pausedRef = useRef(false);
|
|
32
|
-
const pausedProps = useRef(paused);
|
|
33
|
-
pausedProps.current = paused;
|
|
34
|
-
useImperativeHandle(ref, () => ele.current, []);
|
|
35
|
-
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
if (playOnMouseEnter) pausedRef.current = false;
|
|
38
|
-
}, [playOnMouseEnter]);
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
if (!size || count === 0) return;
|
|
41
|
-
const {
|
|
42
|
-
height
|
|
43
|
-
} = size;
|
|
44
|
-
const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0));
|
|
45
|
-
const scrollHeight = range[range.length - 1];
|
|
46
|
-
if (height >= scrollHeight) return;
|
|
47
|
-
function scroll(target) {
|
|
48
|
-
clearTimeout(timeout.current);
|
|
49
|
-
timeout.current = setTimeout(() => {
|
|
50
|
-
if (pausedRef.current || pausedProps.current) return scroll(target);
|
|
51
|
-
bar.current?.scrollTo(0, target, animation);
|
|
52
|
-
}, duration);
|
|
53
|
-
}
|
|
54
|
-
scroll(range[0]);
|
|
55
|
-
function listener(status) {
|
|
56
|
-
const {
|
|
57
|
-
y
|
|
58
|
-
} = status.offset;
|
|
59
|
-
const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05;
|
|
60
|
-
const target = scrollToBottom ? 0 : range.find(item => item > y);
|
|
61
|
-
scroll(target);
|
|
62
|
-
}
|
|
63
|
-
bar.current?.addListener(listener);
|
|
64
|
-
return () => {
|
|
65
|
-
clearTimeout(timeout.current);
|
|
66
|
-
bar.current?.removeListener(listener);
|
|
67
|
-
bar.current?.scrollTo(0, 0);
|
|
68
|
-
};
|
|
69
|
-
}, [size, count, itemHeight, gap, duration, animation]);
|
|
70
|
-
function onContainerMouseEnter(e) {
|
|
71
|
-
if (playOnMouseEnter) return;
|
|
72
|
-
pausedRef.current = true;
|
|
73
|
-
onMouseEnter?.(e);
|
|
74
|
-
}
|
|
75
|
-
function onContainerMouseLeave(e) {
|
|
76
|
-
if (playOnMouseEnter) return;
|
|
77
|
-
pausedRef.current = false;
|
|
78
|
-
onMouseLeave?.(e);
|
|
79
|
-
}
|
|
80
|
-
return /*#__PURE__*/_jsx(Scroll, {
|
|
81
|
-
ref: ele,
|
|
82
|
-
scrollbar: bar,
|
|
83
|
-
onMouseEnter: onContainerMouseEnter,
|
|
84
|
-
onMouseLeave: onContainerMouseLeave,
|
|
85
|
-
...rest,
|
|
86
|
-
children: /*#__PURE__*/_jsx("div", {
|
|
87
|
-
className: clsx(css`
|
|
88
|
-
display: flex;
|
|
89
|
-
flex-direction: column;
|
|
90
|
-
gap: var(--gap, 0);
|
|
91
|
-
& > * {
|
|
92
|
-
flex: none;
|
|
93
|
-
}
|
|
94
|
-
`, containerClassName),
|
|
95
|
-
style: transformCSSVariable({
|
|
96
|
-
gap: px(gap)
|
|
97
|
-
}, containerStyle),
|
|
98
|
-
children: children
|
|
99
|
-
})
|
|
100
|
-
});
|
|
101
|
-
});
|
|
102
|
-
//# sourceMappingURL=AutoScroll.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","clsx","getArray","useSize","px","transformCSSVariable","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\nimport { useSize } from \"soda-hooks\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n /** 轮播元素的个数 */\n count: number\n\n /** 轮播元素的高度 */\n itemHeight: number\n\n /**\n * 轮播动画的时间,单位毫秒\n * @default 1000\n */\n animation?: number\n\n /**\n * 每个元素的停留时间,单位毫秒\n * @default 3000\n */\n duration?: number\n\n /**\n * 元素之间的间距\n * @default 0\n */\n gap?: number\n\n /** 容器类名 */\n containerClassName?: string\n\n /** 容器样式 */\n containerStyle?: CSSProperties\n\n /**\n * 在鼠标移入时是否继续播放\n * @default false\n */\n playOnMouseEnter?: boolean\n\n /**\n * 是否暂停\n * @default false\n */\n paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n const {\n count,\n itemHeight,\n animation = 1000,\n duration = 3000,\n onMouseEnter,\n onMouseLeave,\n gap = 0,\n containerClassName,\n containerStyle,\n children,\n playOnMouseEnter,\n scrollbar,\n paused,\n ...rest\n } = props\n const bar = useRef<Scrollbar | null>(null)\n const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n const ele = useRef<HTMLDivElement>(null)\n const size = useSize(ele)\n const pausedRef = useRef(false)\n const pausedProps = useRef(paused)\n pausedProps.current = paused\n\n useImperativeHandle(ref, () => ele.current!, [])\n useImperativeHandle(scrollbar, () => bar.current!, [])\n\n useEffect(() => {\n if (playOnMouseEnter) pausedRef.current = false\n }, [playOnMouseEnter])\n\n useEffect(() => {\n if (!size || count === 0) return\n const { height } = size\n const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n const scrollHeight = range[range.length - 1]\n if (height >= scrollHeight) return\n function scroll(target: number) {\n clearTimeout(timeout.current)\n timeout.current = setTimeout(() => {\n if (pausedRef.current || pausedProps.current) return scroll(target)\n bar.current?.scrollTo(0, target, animation)\n }, duration)\n }\n scroll(range[0])\n function listener(status: ScrollStatus) {\n const { y } = status.offset\n const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n const target = scrollToBottom ? 0 : range.find(item => item > y)!\n scroll(target)\n }\n bar.current?.addListener(listener)\n return () => {\n clearTimeout(timeout.current)\n bar.current?.removeListener(listener)\n bar.current?.scrollTo(0, 0)\n }\n }, [size, count, itemHeight, gap, duration, animation])\n\n function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = true\n onMouseEnter?.(e)\n }\n\n function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = false\n onMouseLeave?.(e)\n }\n\n return (\n <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n <div\n className={clsx(\n css`\n display: flex;\n flex-direction: column;\n gap: var(--gap, 0);\n & > * {\n flex: none;\n }\n `,\n containerClassName,\n )}\n style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n >\n {children}\n </div>\n </Scroll>\n )\n})\n"],"mappings":"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"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
-
import { css } from "@emotion/css";
|
|
5
|
-
import { clsx } from "deepsea-tools";
|
|
6
|
-
import { px, transformCSSVariable } from "../utils";
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* 自适应高度的文本域
|
|
10
|
-
*/
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
export const AutoSizeTextArea = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
|
-
const {
|
|
14
|
-
className,
|
|
15
|
-
style,
|
|
16
|
-
...rest
|
|
17
|
-
} = props;
|
|
18
|
-
const [height, setHeight] = useState(undefined);
|
|
19
|
-
const ele = useRef(null);
|
|
20
|
-
useImperativeHandle(ref, () => ele.current, []);
|
|
21
|
-
useLayoutEffect(() => {
|
|
22
|
-
const textarea = ele.current;
|
|
23
|
-
function resizeTextarea() {
|
|
24
|
-
setHeight("auto");
|
|
25
|
-
setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight));
|
|
26
|
-
}
|
|
27
|
-
resizeTextarea();
|
|
28
|
-
textarea.addEventListener("input", resizeTextarea);
|
|
29
|
-
textarea.addEventListener("change", resizeTextarea);
|
|
30
|
-
return () => {
|
|
31
|
-
textarea.removeEventListener("input", resizeTextarea);
|
|
32
|
-
textarea.removeEventListener("change", resizeTextarea);
|
|
33
|
-
};
|
|
34
|
-
}, []);
|
|
35
|
-
return /*#__PURE__*/_jsx("textarea", {
|
|
36
|
-
ref: ele,
|
|
37
|
-
className: clsx(css`
|
|
38
|
-
height: var(--height);
|
|
39
|
-
resize: none;
|
|
40
|
-
overflow-y: hidden;
|
|
41
|
-
`, className),
|
|
42
|
-
style: transformCSSVariable({
|
|
43
|
-
height
|
|
44
|
-
}, style),
|
|
45
|
-
...rest
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
//# sourceMappingURL=AutoSizeTextarea.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useImperativeHandle","useLayoutEffect","useRef","useState","css","clsx","px","transformCSSVariable","jsx","_jsx","AutoSizeTextArea","props","ref","className","style","rest","height","setHeight","undefined","ele","current","textarea","resizeTextarea","scrollHeight","offsetHeight","clientHeight","addEventListener","removeEventListener"],"sources":["../../../src/components/AutoSizeTextarea.tsx"],"sourcesContent":["\"use client\"\n\nimport { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\n/**\n * 自适应高度的文本域\n */\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\n const { className, style, ...rest } = props\n const [height, setHeight] = useState<string | undefined>(undefined)\n const ele = useRef<HTMLTextAreaElement>(null)\n\n useImperativeHandle(ref, () => ele.current!, [])\n\n useLayoutEffect(() => {\n const textarea = ele.current!\n function resizeTextarea() {\n setHeight(\"auto\")\n setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))\n }\n resizeTextarea()\n textarea.addEventListener(\"input\", resizeTextarea)\n textarea.addEventListener(\"change\", resizeTextarea)\n\n return () => {\n textarea.removeEventListener(\"input\", resizeTextarea)\n textarea.removeEventListener(\"change\", resizeTextarea)\n }\n }, [])\n\n return (\n <textarea\n ref={ele}\n className={clsx(\n css`\n height: var(--height);\n resize: none;\n overflow-y: hidden;\n `,\n className,\n )}\n style={transformCSSVariable({ height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAiCA,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClH,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,EAAE,EAAEC,oBAAoB;;AAEjC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAGA,OAAO,MAAMC,gBAAgB,gBAAGX,UAAU,CAAmE,CAACY,KAAK,EAAEC,GAAG,KAAK;EACzH,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC3C,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGd,QAAQ,CAAqBe,SAAS,CAAC;EACnE,MAAMC,GAAG,GAAGjB,MAAM,CAAsB,IAAI,CAAC;EAE7CF,mBAAmB,CAACY,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,EAAE,CAAC;EAEhDnB,eAAe,CAAC,MAAM;IAClB,MAAMoB,QAAQ,GAAGF,GAAG,CAACC,OAAQ;IAC7B,SAASE,cAAcA,CAAA,EAAG;MACtBL,SAAS,CAAC,MAAM,CAAC;MACjBA,SAAS,CAACX,EAAE,CAACe,QAAQ,CAACE,YAAY,GAAGF,QAAQ,CAACG,YAAY,GAAGH,QAAQ,CAACI,YAAY,CAAC,CAAC;IACxF;IACAH,cAAc,CAAC,CAAC;IAChBD,QAAQ,CAACK,gBAAgB,CAAC,OAAO,EAAEJ,cAAc,CAAC;IAClDD,QAAQ,CAACK,gBAAgB,CAAC,QAAQ,EAAEJ,cAAc,CAAC;IAEnD,OAAO,MAAM;MACTD,QAAQ,CAACM,mBAAmB,CAAC,OAAO,EAAEL,cAAc,CAAC;MACrDD,QAAQ,CAACM,mBAAmB,CAAC,QAAQ,EAAEL,cAAc,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIb,IAAA;IACIG,GAAG,EAAEO,GAAI;IACTN,SAAS,EAAER,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDS,SACJ,CAAE;IACFC,KAAK,EAAEP,oBAAoB,CAAC;MAAES;IAAO,CAAC,EAAEF,KAAK,CAAE;IAAA,GAC3CC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from "react";
|
|
2
|
-
export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
|
|
3
|
-
/** 每一个方块的宽度 */
|
|
4
|
-
width: number;
|
|
5
|
-
/** 每一个方块的高度 */
|
|
6
|
-
height: number;
|
|
7
|
-
/** 圆弧的半径,不包含方块的高度 */
|
|
8
|
-
radius: number;
|
|
9
|
-
/** 开始旋转的弧度,逆时针增加,0 为 x 轴方向 */
|
|
10
|
-
startAngel?: number;
|
|
11
|
-
/** 每一个方块之间间隔的弧度 */
|
|
12
|
-
gapAngel?: number;
|
|
13
|
-
/** 文字对齐的方式,默认居中 */
|
|
14
|
-
align?: "left" | "center" | "right";
|
|
15
|
-
/** 文字朝向圆心还是外侧,默认外侧 */
|
|
16
|
-
direction?: "inner" | "outer";
|
|
17
|
-
/** 是否反转文字顺序 */
|
|
18
|
-
reverse?: boolean;
|
|
19
|
-
/** 分割文字的方法 */
|
|
20
|
-
separator?: string | RegExp | ((text: string) => string[]);
|
|
21
|
-
/** 显示的文字 */
|
|
22
|
-
children: string;
|
|
23
|
-
}
|
|
24
|
-
/** 环形文字 */
|
|
25
|
-
export declare const CircleText: FC<CircleTextProps>;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { Fragment } from "react";
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
/** 环形文字 */
|
|
6
|
-
export const CircleText = props => {
|
|
7
|
-
const {
|
|
8
|
-
width,
|
|
9
|
-
height,
|
|
10
|
-
radius,
|
|
11
|
-
startAngel = 0,
|
|
12
|
-
gapAngel = 0,
|
|
13
|
-
align = "center",
|
|
14
|
-
style,
|
|
15
|
-
direction = "outer",
|
|
16
|
-
reverse = false,
|
|
17
|
-
separator,
|
|
18
|
-
children,
|
|
19
|
-
...rest
|
|
20
|
-
} = props;
|
|
21
|
-
const unitAngle = Math.atan(width / 2 / radius) * 2;
|
|
22
|
-
const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
|
|
23
|
-
const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
|
|
24
|
-
function getTransform(idx) {
|
|
25
|
-
const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
|
|
26
|
-
const x = (radius + height / 2) * Math.cos(angle) - width / 2;
|
|
27
|
-
const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
|
|
28
|
-
const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0);
|
|
29
|
-
return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
|
|
30
|
-
}
|
|
31
|
-
const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
|
|
32
|
-
if (reverse) words.reverse();
|
|
33
|
-
return /*#__PURE__*/_jsx(Fragment, {
|
|
34
|
-
children: words.map((w, idx) => /*#__PURE__*/_jsx("span", {
|
|
35
|
-
style: {
|
|
36
|
-
position: "absolute",
|
|
37
|
-
...style,
|
|
38
|
-
transform: getTransform(idx),
|
|
39
|
-
textAlign: "center",
|
|
40
|
-
width,
|
|
41
|
-
lineHeight: `${height}px`,
|
|
42
|
-
height: height
|
|
43
|
-
},
|
|
44
|
-
...rest,
|
|
45
|
-
children: w
|
|
46
|
-
}, idx))
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=CircleText.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["Fragment","jsx","_jsx","CircleText","props","width","height","radius","startAngel","gapAngel","align","style","direction","reverse","separator","children","rest","unitAngle","Math","atan","totalAngle","length","offsetAngle","getTransform","idx","angle","x","cos","y","sin","z","PI","words","split","map","w","position","transform","textAlign","lineHeight"],"sources":["../../../src/components/CircleText.tsx"],"sourcesContent":["\"use client\"\n\nimport { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n /** 每一个方块的宽度 */\n width: number\n /** 每一个方块的高度 */\n height: number\n /** 圆弧的半径,不包含方块的高度 */\n radius: number\n /** 开始旋转的弧度,逆时针增加,0 为 x 轴方向 */\n startAngel?: number\n /** 每一个方块之间间隔的弧度 */\n gapAngel?: number\n /** 文字对齐的方式,默认居中 */\n align?: \"left\" | \"center\" | \"right\"\n /** 文字朝向圆心还是外侧,默认外侧 */\n direction?: \"inner\" | \"outer\"\n /** 是否反转文字顺序 */\n reverse?: boolean\n /** 分割文字的方法 */\n separator?: string | RegExp | ((text: string) => string[])\n /** 显示的文字 */\n children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n const {\n width,\n height,\n radius,\n startAngel = 0,\n gapAngel = 0,\n align = \"center\",\n style,\n direction = \"outer\",\n reverse = false,\n separator,\n children,\n ...rest\n } = props\n const unitAngle = Math.atan(width / 2 / radius) * 2\n const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n function getTransform(idx: number) {\n const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n const x = (radius + height / 2) * Math.cos(angle) - width / 2\n const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n }\n\n const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n if (reverse) words.reverse()\n\n return (\n <Fragment>\n {words.map((w, idx) => (\n <span\n key={idx}\n style={{\n position: \"absolute\",\n ...style,\n transform: getTransform(idx),\n textAlign: \"center\",\n width,\n lineHeight: `${height}px`,\n height: height,\n }}\n {...rest}\n >\n {w}\n </span>\n ))}\n </Fragment>\n )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAaA,QAAQ,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBpD;AACA,OAAO,MAAMC,UAA+B,GAAGC,KAAK,IAAI;EACpD,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,UAAU,GAAG,CAAC;IACdC,QAAQ,GAAG,CAAC;IACZC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,OAAO,GAAG,KAAK;IACfC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACP,CAAC,GAAGZ,KAAK;EACT,MAAMa,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACd,KAAK,GAAG,CAAC,GAAGE,MAAM,CAAC,GAAG,CAAC;EACnD,MAAMa,UAAU,GAAG,CAACH,SAAS,GAAGR,QAAQ,IAAIM,QAAQ,CAACM,MAAM,GAAGZ,QAAQ;EACtE,MAAMa,WAAW,GAAGZ,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGA,KAAK,KAAK,OAAO,GAAGU,UAAU,GAAGA,UAAU,GAAG,CAAC;EAE1F,SAASG,YAAYA,CAACC,GAAW,EAAE;IAC/B,MAAMC,KAAK,GAAGjB,UAAU,GAAGgB,GAAG,IAAIP,SAAS,GAAGR,QAAQ,CAAC,GAAGa,WAAW,GAAGL,SAAS,GAAG,CAAC;IACrF,MAAMS,CAAC,GAAG,CAACnB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACS,GAAG,CAACF,KAAK,CAAC,GAAGpB,KAAK,GAAG,CAAC;IAC7D,MAAMuB,CAAC,GAAG,CAACrB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACW,GAAG,CAACJ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGnB,MAAM,GAAG,CAAC;IACnE,MAAMwB,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAG,CAAC,GAAGN,KAAK,IAAIb,SAAS,KAAK,OAAO,GAAGM,IAAI,CAACa,EAAE,GAAG,CAAC,CAAC;IACrE,OAAQ,cAAaL,CAAE,kBAAiBE,CAAE,eAAeE,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAI,GAAI,MAAK;EACrF;EAEA,MAAMC,KAAK,GAAG,OAAOlB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACC,QAAQ,CAAC,GAAGA,QAAQ,CAACkB,KAAK,CAACnB,SAAS,IAAI,EAAE,CAAC;EAErG,IAAID,OAAO,EAAEmB,KAAK,CAACnB,OAAO,CAAC,CAAC;EAE5B,oBACIX,IAAA,CAACF,QAAQ;IAAAe,QAAA,EACJiB,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,EAAEX,GAAG,kBACdtB,IAAA;MAEIS,KAAK,EAAE;QACHyB,QAAQ,EAAE,UAAU;QACpB,GAAGzB,KAAK;QACR0B,SAAS,EAAEd,YAAY,CAACC,GAAG,CAAC;QAC5Bc,SAAS,EAAE,QAAQ;QACnBjC,KAAK;QACLkC,UAAU,EAAG,GAAEjC,MAAO,IAAG;QACzBA,MAAM,EAAEA;MACZ,CAAE;MAAA,GACEU,IAAI;MAAAD,QAAA,EAEPoB;IAAC,GAZGX,GAaH,CACT;EAAC,CACI,CAAC;AAEnB,CAAC"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from "react";
|
|
2
|
-
import { Event } from "clipboard";
|
|
3
|
-
export { Event } from "clipboard";
|
|
4
|
-
export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
|
|
5
|
-
text?: string;
|
|
6
|
-
onCopySuccess?: (e: Event) => void;
|
|
7
|
-
onCopyError?: (e: Event) => void;
|
|
8
|
-
};
|
|
9
|
-
export declare const CopyButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
10
|
-
text?: string | undefined;
|
|
11
|
-
onCopySuccess?: ((e: Event) => void) | undefined;
|
|
12
|
-
onCopyError?: ((e: Event) => void) | undefined;
|
|
13
|
-
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
4
|
-
import ClipboardJS from "clipboard";
|
|
5
|
-
import { useLatest } from "soda-hooks";
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export { Event } from "clipboard";
|
|
8
|
-
export const CopyButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
|
-
const {
|
|
10
|
-
text,
|
|
11
|
-
onCopySuccess: _onCoptSuccess,
|
|
12
|
-
onCopyError: _onCopyError,
|
|
13
|
-
...rest
|
|
14
|
-
} = props;
|
|
15
|
-
const ele = useRef(null);
|
|
16
|
-
const onCopySuccess = useLatest(_onCoptSuccess);
|
|
17
|
-
const onCopyError = useLatest(_onCopyError);
|
|
18
|
-
useImperativeHandle(ref, () => ele.current, [ele.current]);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const clipboard = new ClipboardJS(ele.current);
|
|
21
|
-
clipboard.on("success", event => onCopySuccess.current?.(event));
|
|
22
|
-
clipboard.on("error", event => onCopyError.current?.(event));
|
|
23
|
-
return () => clipboard.destroy();
|
|
24
|
-
}, []);
|
|
25
|
-
return /*#__PURE__*/_jsx("button", {
|
|
26
|
-
ref: ele,
|
|
27
|
-
...rest,
|
|
28
|
-
"data-clipboard-text": text
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
//# sourceMappingURL=CopyButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","ClipboardJS","useLatest","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { useLatest } from \"soda-hooks\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n text?: string\n onCopySuccess?: (e: Event) => void\n onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n const ele = useRef<HTMLButtonElement>(null)\n const onCopySuccess = useLatest(_onCoptSuccess)\n const onCopyError = useLatest(_onCopyError)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n useEffect(() => {\n const clipboard = new ClipboardJS(ele.current!)\n clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n clipboard.on(\"error\", event => onCopyError.current?.(event))\n return () => clipboard.destroy()\n }, [])\n\n return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAmCA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACpG,OAAOC,WAAW,MAAiB,WAAW;AAC9C,SAASC,SAAS,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEtC,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGT,UAAU,CAAqC,CAACU,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGf,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMU,aAAa,GAAGR,SAAS,CAACS,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGV,SAAS,CAACW,YAAY,CAAC;EAE3Cd,mBAAmB,CAACS,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DlB,SAAS,CAAC,MAAM;IACZ,MAAMmB,SAAS,GAAG,IAAIhB,WAAW,CAACc,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from "react";
|
|
2
|
-
import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
|
|
3
|
-
export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
|
|
4
|
-
export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
|
|
5
|
-
export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
|
|
6
|
-
export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
|
|
7
|
-
width: number;
|
|
8
|
-
height: number;
|
|
9
|
-
option: T;
|
|
10
|
-
chart?: ForwardedRef<ECharts>;
|
|
11
|
-
}
|
|
12
|
-
export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
13
|
-
export declare const Pie: EchartComponent<PieOption>;
|
|
14
|
-
export declare const Bar: EchartComponent<BarOption>;
|
|
15
|
-
export declare const Line: EchartComponent<LineOption>;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
4
|
-
import { init } from "echarts";
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
const Echart = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
|
-
const {
|
|
8
|
-
width,
|
|
9
|
-
height,
|
|
10
|
-
option,
|
|
11
|
-
chart,
|
|
12
|
-
...rest
|
|
13
|
-
} = props;
|
|
14
|
-
const container = useRef(null);
|
|
15
|
-
const chartRef = useRef(null);
|
|
16
|
-
useLayoutEffect(() => {
|
|
17
|
-
const ele = container.current;
|
|
18
|
-
chartRef.current = init(ele, option, {
|
|
19
|
-
width,
|
|
20
|
-
height
|
|
21
|
-
});
|
|
22
|
-
return () => chartRef.current?.dispose();
|
|
23
|
-
}, []);
|
|
24
|
-
useImperativeHandle(ref, () => container.current, []);
|
|
25
|
-
useImperativeHandle(chart, () => chartRef.current, []);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
chartRef.current?.setOption(option);
|
|
28
|
-
chartRef.current?.resize({
|
|
29
|
-
width,
|
|
30
|
-
height
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
return /*#__PURE__*/_jsx("div", {
|
|
34
|
-
ref: container,
|
|
35
|
-
...rest
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
export const Pie = Echart;
|
|
39
|
-
export const Bar = Echart;
|
|
40
|
-
export const Line = Echart;
|
|
41
|
-
//# sourceMappingURL=Echart.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","init","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n ComponentPropsWithoutRef,\n ForwardRefExoticComponent,\n ForwardedRef,\n RefAttributes,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n} from \"react\"\nimport {\n BarSeriesOption,\n ComposeOption,\n DatasetComponentOption,\n ECharts,\n GridComponentOption,\n LineSeriesOption,\n PieSeriesOption,\n TitleComponentOption,\n TooltipComponentOption,\n init,\n} from \"echarts\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n width: number\n height: number\n option: T\n chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n const { width, height, option, chart, ...rest } = props\n const container = useRef<HTMLDivElement>(null)\n const chartRef = useRef<ECharts | null>(null)\n\n useLayoutEffect(() => {\n const ele = container.current!\n chartRef.current = init(ele, option, { width, height })\n return () => chartRef.current?.dispose()\n }, [])\n\n useImperativeHandle(ref, () => container.current!, [])\n\n useImperativeHandle(chart, () => chartRef.current!, [])\n\n useEffect(() => {\n chartRef.current?.setOption(option)\n chartRef.current?.resize({ width, height })\n })\n\n return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],"mappings":"AAAA,YAAY;;AAEZ,SAKIA,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,MAAM,QACH,OAAO;AACd,SAUIC,IAAI,QACD,SAAS;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBhB,MAAMC,MAAM,gBAAGR,UAAU,CAA8B,CAACS,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMa,QAAQ,GAAGb,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMe,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGd,IAAI,CAACa,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENlB,mBAAmB,CAACQ,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDjB,mBAAmB,CAACY,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDlB,SAAS,CAAC,MAAM;IACZgB,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref } from "react";
|
|
2
|
-
export interface FlowSizeData {
|
|
3
|
-
/** 容器宽度 */
|
|
4
|
-
width: number;
|
|
5
|
-
/** 容器高度 */
|
|
6
|
-
height: number;
|
|
7
|
-
/** 元素宽度 */
|
|
8
|
-
itemWidth: number;
|
|
9
|
-
/** 元素高度 */
|
|
10
|
-
itemHeight: number;
|
|
11
|
-
/** 列间距 */
|
|
12
|
-
columnGap: number;
|
|
13
|
-
/** 列数 */
|
|
14
|
-
columnCount: number;
|
|
15
|
-
/** 行间距 */
|
|
16
|
-
rowGap: number;
|
|
17
|
-
/** 行数 */
|
|
18
|
-
rowCount: number;
|
|
19
|
-
/** 元素格数 */
|
|
20
|
-
itemCount: number;
|
|
21
|
-
/** 最大行数 */
|
|
22
|
-
maxRows: number | null;
|
|
23
|
-
/** 是否有元素被隐藏 */
|
|
24
|
-
overflow: boolean;
|
|
25
|
-
}
|
|
26
|
-
export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
|
|
27
|
-
/** 元素宽度 */
|
|
28
|
-
itemWidth: number;
|
|
29
|
-
/** 元素高度 */
|
|
30
|
-
itemHeight: number;
|
|
31
|
-
/**
|
|
32
|
-
* 列间距
|
|
33
|
-
* 1. 如果是数字,表示列间距是固定的
|
|
34
|
-
* 2. 如果是 auto,表示会在尽可能放进更多列的情况下,列间距是平均的
|
|
35
|
-
* 2. 如果是数组,表示列间距是区间的,第一个元素是最小值,第二个元素是最大值
|
|
36
|
-
*/
|
|
37
|
-
columnGap?: number | "auto" | [number | "auto", number | "auto"];
|
|
38
|
-
/** 行间距 */
|
|
39
|
-
rowGap?: number;
|
|
40
|
-
gap?: number;
|
|
41
|
-
/** 最大行数 */
|
|
42
|
-
maxRows?: number | null;
|
|
43
|
-
/** 源数据 */
|
|
44
|
-
data?: T[];
|
|
45
|
-
/** 渲染 */
|
|
46
|
-
render: (item: T, index: number, arr: T[]) => ReactNode;
|
|
47
|
-
/** key释放器,默认为 index */
|
|
48
|
-
keyExactor?: (item: T, index: number, arr: T[]) => Key;
|
|
49
|
-
/**
|
|
50
|
-
* 渲染的元素由两层容器包裹,外层容器类名
|
|
51
|
-
*/
|
|
52
|
-
wrapperClassName?: string;
|
|
53
|
-
/**
|
|
54
|
-
* 渲染的元素由两层容器包裹,外层容器样式
|
|
55
|
-
*/
|
|
56
|
-
wrapperStyle?: CSSProperties;
|
|
57
|
-
/**
|
|
58
|
-
* 渲染的元素由两层容器包裹,内层容器类名
|
|
59
|
-
*/
|
|
60
|
-
containerClassName?: string;
|
|
61
|
-
/**
|
|
62
|
-
* 渲染的元素由两层容器包裹,内层容器样式
|
|
63
|
-
*/
|
|
64
|
-
containerStyle?: CSSProperties;
|
|
65
|
-
/** 节流时间,单位毫秒,默认200ms,传入 0 不节流 */
|
|
66
|
-
throttle?: number;
|
|
67
|
-
/** 动画时间,单位毫秒,默认400ms,传入 0 不展示动画 */
|
|
68
|
-
transitionDuration?: number;
|
|
69
|
-
/** 变化的回调函数 */
|
|
70
|
-
onSizeChange?: (sizeData: FlowSizeData) => void;
|
|
71
|
-
element?: Ref<HTMLDivElement>;
|
|
72
|
-
}
|
|
73
|
-
export declare function getGapRange(gap?: undefined | number | "auto" | (number | "auto")[]): [number, number | "auto"];
|
|
74
|
-
export interface GapAndCount {
|
|
75
|
-
count: number;
|
|
76
|
-
gap: number;
|
|
77
|
-
}
|
|
78
|
-
export declare function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | "auto"): GapAndCount;
|
|
79
|
-
export interface ManualFlowProps<T> extends FlowProps<T> {
|
|
80
|
-
/** 组件宽度,必须指定 */
|
|
81
|
-
width: number;
|
|
82
|
-
}
|
|
83
|
-
/** 手动组件,由外界指定宽度,性能更好 */
|
|
84
|
-
export declare function ManualFlow<T>(props: ManualFlowProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
85
|
-
/** 自适应浮动组件 */
|
|
86
|
-
export declare function Flow<T>(props: FlowProps<T>): ReactNode;
|