deepsea-components 5.8.0 → 5.8.2

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 (98) hide show
  1. package/README.md +23 -23
  2. package/dist/cjs/components/AutoFit.js +1 -1
  3. package/dist/cjs/components/AutoFit.js.map +2 -2
  4. package/dist/cjs/components/AutoScroll.js +2 -2
  5. package/dist/cjs/components/AutoScroll.js.map +2 -2
  6. package/dist/cjs/components/AutoSizeTextarea.js +1 -1
  7. package/dist/cjs/components/AutoSizeTextarea.js.map +2 -2
  8. package/dist/cjs/components/CopyButton.d.ts +1 -1
  9. package/dist/cjs/components/CopyButton.js +1 -1
  10. package/dist/cjs/components/CopyButton.js.map +2 -2
  11. package/dist/cjs/components/Echart.d.ts +1 -1
  12. package/dist/cjs/components/Echart.js +1 -1
  13. package/dist/cjs/components/Echart.js.map +2 -2
  14. package/dist/cjs/components/ExportExcel.d.ts +2 -3
  15. package/dist/cjs/components/ExportExcel.js +7 -3
  16. package/dist/cjs/components/ExportExcel.js.map +2 -2
  17. package/dist/cjs/components/Flow.js +2 -2
  18. package/dist/cjs/components/Flow.js.map +2 -2
  19. package/dist/cjs/components/HlsPlayer.js +1 -1
  20. package/dist/cjs/components/HlsPlayer.js.map +2 -2
  21. package/dist/cjs/components/ImportExcel.js +1 -1
  22. package/dist/cjs/components/ImportExcel.js.map +2 -2
  23. package/dist/cjs/components/InfiniteScroll.js +2 -2
  24. package/dist/cjs/components/InfiniteScroll.js.map +2 -2
  25. package/dist/cjs/components/LoopSwiper.js +1 -1
  26. package/dist/cjs/components/LoopSwiper.js.map +2 -2
  27. package/dist/cjs/components/Scroll.js +6 -15
  28. package/dist/cjs/components/Scroll.js.map +2 -2
  29. package/dist/cjs/components/SectionRing.js +1 -1
  30. package/dist/cjs/components/SectionRing.js.map +2 -2
  31. package/dist/cjs/components/Skeleton.js +1 -1
  32. package/dist/cjs/components/Skeleton.js.map +2 -2
  33. package/dist/cjs/components/Title.js +1 -1
  34. package/dist/cjs/components/Title.js.map +2 -2
  35. package/dist/cjs/components/TransitionBox.js +1 -1
  36. package/dist/cjs/components/TransitionBox.js.map +2 -2
  37. package/dist/cjs/components/TransitionNum.js +1 -1
  38. package/dist/cjs/components/TransitionNum.js.map +2 -2
  39. package/dist/cjs/components/Trapezium.js +1 -1
  40. package/dist/cjs/components/Trapezium.js.map +2 -2
  41. package/dist/esm/components/AutoFit.js +1 -1
  42. package/dist/esm/components/AutoFit.js.map +1 -1
  43. package/dist/esm/components/AutoScroll.js +2 -2
  44. package/dist/esm/components/AutoScroll.js.map +1 -1
  45. package/dist/esm/components/AutoSizeTextarea.js +1 -1
  46. package/dist/esm/components/AutoSizeTextarea.js.map +1 -1
  47. package/dist/esm/components/CopyButton.d.ts +1 -1
  48. package/dist/esm/components/CopyButton.js +1 -1
  49. package/dist/esm/components/CopyButton.js.map +1 -1
  50. package/dist/esm/components/Echart.d.ts +1 -1
  51. package/dist/esm/components/Echart.js +1 -1
  52. package/dist/esm/components/Echart.js.map +1 -1
  53. package/dist/esm/components/ExportExcel.d.ts +2 -3
  54. package/dist/esm/components/ExportExcel.js +4 -3
  55. package/dist/esm/components/ExportExcel.js.map +1 -1
  56. package/dist/esm/components/Flow.js +2 -2
  57. package/dist/esm/components/Flow.js.map +1 -1
  58. package/dist/esm/components/HlsPlayer.js +1 -1
  59. package/dist/esm/components/HlsPlayer.js.map +1 -1
  60. package/dist/esm/components/ImportExcel.js +1 -1
  61. package/dist/esm/components/ImportExcel.js.map +1 -1
  62. package/dist/esm/components/InfiniteScroll.js +2 -2
  63. package/dist/esm/components/InfiniteScroll.js.map +1 -1
  64. package/dist/esm/components/LoopSwiper.js +1 -1
  65. package/dist/esm/components/LoopSwiper.js.map +1 -1
  66. package/dist/esm/components/Scroll.js +6 -15
  67. package/dist/esm/components/Scroll.js.map +1 -1
  68. package/dist/esm/components/SectionRing.js +1 -1
  69. package/dist/esm/components/SectionRing.js.map +1 -1
  70. package/dist/esm/components/Skeleton.js +1 -1
  71. package/dist/esm/components/Skeleton.js.map +1 -1
  72. package/dist/esm/components/Title.js +1 -1
  73. package/dist/esm/components/Title.js.map +1 -1
  74. package/dist/esm/components/TransitionBox.js +1 -1
  75. package/dist/esm/components/TransitionBox.js.map +1 -1
  76. package/dist/esm/components/TransitionNum.js +1 -1
  77. package/dist/esm/components/TransitionNum.js.map +1 -1
  78. package/dist/esm/components/Trapezium.js +1 -1
  79. package/dist/esm/components/Trapezium.js.map +1 -1
  80. package/package.json +2 -2
  81. package/src/components/AutoFit.tsx +2 -2
  82. package/src/components/AutoScroll.tsx +3 -2
  83. package/src/components/AutoSizeTextarea.tsx +2 -2
  84. package/src/components/CopyButton.tsx +1 -1
  85. package/src/components/Echart.tsx +11 -11
  86. package/src/components/ExportExcel.tsx +18 -18
  87. package/src/components/Flow.tsx +2 -2
  88. package/src/components/HlsPlayer.tsx +1 -1
  89. package/src/components/ImportExcel.tsx +17 -17
  90. package/src/components/InfiniteScroll.tsx +2 -3
  91. package/src/components/LoopSwiper.tsx +1 -2
  92. package/src/components/Scroll.tsx +14 -15
  93. package/src/components/SectionRing.tsx +1 -1
  94. package/src/components/Skeleton.tsx +1 -2
  95. package/src/components/Title.tsx +1 -1
  96. package/src/components/TransitionBox.tsx +1 -1
  97. package/src/components/TransitionNum.tsx +1 -1
  98. package/src/components/Trapezium.tsx +2 -2
package/README.md CHANGED
@@ -1,23 +1,23 @@
1
- # deepsea-components
2
-
3
- [![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
4
- [![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
5
-
6
- ## Install
7
-
8
- ```bash
9
- $ yarn install
10
- ```
11
-
12
- ```bash
13
- $ npm run dev
14
- $ npm run build
15
- ```
16
-
17
- ## Options
18
-
19
- TODO
20
-
21
- ## LICENSE
22
-
23
- MIT
1
+ # deepsea-components
2
+
3
+ [![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
4
+ [![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
5
+
6
+ ## Install
7
+
8
+ ```bash
9
+ $ yarn install
10
+ ```
11
+
12
+ ```bash
13
+ $ npm run dev
14
+ $ npm run build
15
+ ```
16
+
17
+ ## Options
18
+
19
+ TODO
20
+
21
+ ## LICENSE
22
+
23
+ MIT
@@ -23,9 +23,9 @@ __export(AutoFit_exports, {
23
23
  AutoFit: () => AutoFit
24
24
  });
25
25
  module.exports = __toCommonJS(AutoFit_exports);
26
- var import_deepsea_tools = require("deepsea-tools");
27
26
  var import_react = require("react");
28
27
  var import_css = require("@emotion/css");
28
+ var import_deepsea_tools = require("deepsea-tools");
29
29
  var import_utils = require("../utils");
30
30
  var AutoFit = (0, import_react.forwardRef)((props, ref) => {
31
31
  const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/AutoFit.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAA8G;AAE9G,iBAAoB;AACpB,mBAAyC;AA0BlC,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AAC5E,QAAM,EAAE,OAAO,cAAc,MAAM,QAAQ,eAAe,MAAM,WAAW,WAAW,OAAO,GAAG,KAAK,IAAI;AACzG,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,MAAS;AACxE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA6B,MAAS;AAChE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAElE,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAC1D,oCAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,WAAW,CAAC;AAAQ;AACzB,aAAS,SAAS,SAAgC;AAC9C,YAAM,QAAQ,QAAQ,CAAC;AACvB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,cAAc,cAAc;AAC5B,cAAM,QAAQ,YAAY,QAAQ;AAClC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,SAAS,KAAK,CAAC;AAAA,MAC5C,WAAW,cAAc,YAAY;AACjC,cAAM,QAAQ,YAAY,SAAS;AACnC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,YAAY,QAAQ,KAAK,CAAC;AACtC,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B,OAAO;AACH,cAAM,QAAQ,KAAK,IAAI,YAAY,QAAQ,aAAa,YAAY,SAAS,YAAY;AACzF;AAAA,UACI,eAAe,YAAY,QAAQ,cAAc,SAAS,oBAAoB,YAAY,SAAS,eAAe,SAAS,cAAc;AAAA,QAC7I;AACA,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B;AACA,cAAQ,IAAI;AAAA,IAChB;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,MAAM;AACvB,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,IAAI,SAAS,eAAe,aAAa,cAAc,SAAS,CAAC;AAErE,MAAI,QAAQ,IAAI,aAAa,eAAe;AACxC,gCAAU,MAAM;AACZ,YAAM,SAAS,IAAI,SAAS;AAC5B,UAAI,CAAC;AAAQ;AACb,YAAMA,SAAQ,iBAAiB,MAAM;AACrC,UAAIA,OAAM,aAAa,UAAU;AAC7B,gBAAQ,KAAK,wCAAwC;AAAA,MACzD;AAAA,IACJ,GAAG,CAAC,IAAI,SAAS,aAAa,CAAC;AAAA,EACnC;AAEA,MAAI,CAAC;AAAM,WAAO,oCAAC,SAAI,KAAK,KAAK,OAAO,EAAE,SAAS,OAAO,GAAG;AAE7D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,WAAW,OAAO,OAAO,GAAG,KAAK;AAAA,MAC9D,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8G;AAC9G,iBAAoB;AACpB,2BAAqB;AAErB,mBAAyC;AA0BlC,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AAC5E,QAAM,EAAE,OAAO,cAAc,MAAM,QAAQ,eAAe,MAAM,WAAW,WAAW,OAAO,GAAG,KAAK,IAAI;AACzG,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,MAAS;AACxE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA6B,MAAS;AAChE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAElE,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAC1D,oCAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,WAAW,CAAC;AAAQ;AACzB,aAAS,SAAS,SAAgC;AAC9C,YAAM,QAAQ,QAAQ,CAAC;AACvB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,cAAc,cAAc;AAC5B,cAAM,QAAQ,YAAY,QAAQ;AAClC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,SAAS,KAAK,CAAC;AAAA,MAC5C,WAAW,cAAc,YAAY;AACjC,cAAM,QAAQ,YAAY,SAAS;AACnC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,YAAY,QAAQ,KAAK,CAAC;AACtC,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B,OAAO;AACH,cAAM,QAAQ,KAAK,IAAI,YAAY,QAAQ,aAAa,YAAY,SAAS,YAAY;AACzF;AAAA,UACI,eAAe,YAAY,QAAQ,cAAc,SAAS,oBAAoB,YAAY,SAAS,eAAe,SAAS,cAAc;AAAA,QAC7I;AACA,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B;AACA,cAAQ,IAAI;AAAA,IAChB;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,MAAM;AACvB,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,IAAI,SAAS,eAAe,aAAa,cAAc,SAAS,CAAC;AAErE,MAAI,QAAQ,IAAI,aAAa,eAAe;AACxC,gCAAU,MAAM;AACZ,YAAM,SAAS,IAAI,SAAS;AAC5B,UAAI,CAAC;AAAQ;AACb,YAAMA,SAAQ,iBAAiB,MAAM;AACrC,UAAIA,OAAM,aAAa,UAAU;AAC7B,gBAAQ,KAAK,wCAAwC;AAAA,MACzD;AAAA,IACJ,GAAG,CAAC,IAAI,SAAS,aAAa,CAAC;AAAA,EACnC;AAEA,MAAI,CAAC;AAAM,WAAO,oCAAC,SAAI,KAAK,KAAK,OAAO,EAAE,SAAS,OAAO,GAAG;AAE7D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,WAAW,OAAO,OAAO,GAAG,KAAK;AAAA,MAC9D,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
6
6
  "names": ["style"]
7
7
  }
@@ -23,10 +23,10 @@ __export(AutoScroll_exports, {
23
23
  AutoScroll: () => AutoScroll
24
24
  });
25
25
  module.exports = __toCommonJS(AutoScroll_exports);
26
- var import_ahooks = require("ahooks");
27
- var import_deepsea_tools = require("deepsea-tools");
28
26
  var import_react = require("react");
29
27
  var import_css = require("@emotion/css");
28
+ var import_ahooks = require("ahooks");
29
+ var import_deepsea_tools = require("deepsea-tools");
30
30
  var import_utils = require("../utils");
31
31
  var import_Scroll = require("./Scroll");
32
32
  var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/AutoScroll.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"@/utils\"\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAIjH,iBAAoB;AACpB,mBAAyC;AACzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAE3D;AAAA,EACL,CACJ;AAER,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAiH;AACjH,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAI/B,mBAAyC;AAEzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAE3D;AAAA,EACL,CACJ;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -23,9 +23,9 @@ __export(AutoSizeTextarea_exports, {
23
23
  AutoSizeTextArea: () => AutoSizeTextArea
24
24
  });
25
25
  module.exports = __toCommonJS(AutoSizeTextarea_exports);
26
- var import_deepsea_tools = require("deepsea-tools");
27
26
  var import_react = require("react");
28
27
  var import_css = require("@emotion/css");
28
+ var import_deepsea_tools = require("deepsea-tools");
29
29
  var import_utils = require("../utils");
30
30
  var AutoSizeTextArea = (0, import_react.forwardRef)((props, ref) => {
31
31
  const { className, style, ...rest } = props;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/AutoSizeTextarea.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAA2G;AAE3G,iBAAoB;AACpB,mBAAyC;AAKlC,IAAM,uBAAmB,yBAA6E,CAAC,OAAO,QAAQ;AACzH,QAAM,EAAE,WAAW,OAAO,GAAG,KAAK,IAAI;AACtC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,QAAM,UAAM,qBAA4B,IAAI;AAE5C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,oCAAgB,MAAM;AAClB,UAAM,WAAW,IAAI;AACrB,aAAS,iBAAiB;AACtB,gBAAU,MAAM;AAChB,oBAAU,iBAAG,SAAS,eAAe,SAAS,eAAe,SAAS,YAAY,CAAC;AAAA,IACvF;AACA,mBAAe;AACf,aAAS,iBAAiB,SAAS,cAAc;AACjD,aAAS,iBAAiB,UAAU,cAAc;AAElD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,cAAc;AACpD,eAAS,oBAAoB,UAAU,cAAc;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,OAAO,GAAG,KAAK;AAAA,MAC5C,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2G;AAC3G,iBAAoB;AACpB,2BAAqB;AAErB,mBAAyC;AAKlC,IAAM,uBAAmB,yBAA6E,CAAC,OAAO,QAAQ;AACzH,QAAM,EAAE,WAAW,OAAO,GAAG,KAAK,IAAI;AACtC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,QAAM,UAAM,qBAA4B,IAAI;AAE5C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,oCAAgB,MAAM;AAClB,UAAM,WAAW,IAAI;AACrB,aAAS,iBAAiB;AACtB,gBAAU,MAAM;AAChB,oBAAU,iBAAG,SAAS,eAAe,SAAS,eAAe,SAAS,YAAY,CAAC;AAAA,IACvF;AACA,mBAAe;AACf,aAAS,iBAAiB,SAAS,cAAc;AACjD,aAAS,iBAAiB,UAAU,cAAc;AAElD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,cAAc;AACpD,eAAS,oBAAoB,UAAU,cAAc;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,OAAO,GAAG,KAAK;AAAA,MAC5C,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
- import { Event } from "clipboard";
2
1
  import { ComponentPropsWithoutRef } from "react";
2
+ import { Event } from "clipboard";
3
3
  export { Event } from "clipboard";
4
4
  export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
5
5
  text?: string;
@@ -34,9 +34,9 @@ __export(CopyButton_exports, {
34
34
  Event: () => import_clipboard2.Event
35
35
  });
36
36
  module.exports = __toCommonJS(CopyButton_exports);
37
+ var import_react = require("react");
37
38
  var import_ahooks = require("ahooks");
38
39
  var import_clipboard = __toESM(require("clipboard"));
39
- var import_react = require("react");
40
40
  var import_clipboard2 = require("clipboard");
41
41
  var CopyButton = (0, import_react.forwardRef)((props, ref) => {
42
42
  const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/CopyButton.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAA0B;AAC1B,uBAAmC;AACnC,mBAA6F;AAE7F,IAAAA,oBAAsB;AAQf,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,eAAe,gBAAgB,aAAa,cAAc,GAAG,KAAK,IAAI;AACpF,QAAM,UAAM,qBAA0B,IAAI;AAC1C,QAAM,oBAAgB,yBAAU,cAAc;AAC9C,QAAM,kBAAc,yBAAU,YAAY;AAE1C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAE1D,8BAAU,MAAM;AACZ,UAAM,YAAY,IAAI,iBAAAC,QAAY,IAAI,OAAQ;AAC9C,cAAU,GAAG,WAAW,WAAS,cAAc,UAAU,KAAK,CAAC;AAC/D,cAAU,GAAG,SAAS,WAAS,YAAY,UAAU,KAAK,CAAC;AAC3D,WAAO,MAAM,UAAU,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,YAAO,KAAK,KAAM,GAAG,MAAM,uBAAqB,MAAM;AAClE,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6F;AAC7F,oBAA0B;AAC1B,uBAAmC;AAEnC,IAAAA,oBAAsB;AAQf,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,eAAe,gBAAgB,aAAa,cAAc,GAAG,KAAK,IAAI;AACpF,QAAM,UAAM,qBAA0B,IAAI;AAC1C,QAAM,oBAAgB,yBAAU,cAAc;AAC9C,QAAM,kBAAc,yBAAU,YAAY;AAE1C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAE1D,8BAAU,MAAM;AACZ,UAAM,YAAY,IAAI,iBAAAC,QAAY,IAAI,OAAQ;AAC9C,cAAU,GAAG,WAAW,WAAS,cAAc,UAAU,KAAK,CAAC;AAC/D,cAAU,GAAG,SAAS,WAAS,YAAY,UAAU,KAAK,CAAC;AAC3D,WAAO,MAAM,UAAU,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,YAAO,KAAK,KAAM,GAAG,MAAM,uBAAqB,MAAM;AAClE,CAAC;",
6
6
  "names": ["import_clipboard", "ClipboardJS"]
7
7
  }
@@ -1,5 +1,5 @@
1
- import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
2
1
  import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from "react";
2
+ import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
3
3
  export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
4
4
  export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
5
5
  export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
@@ -25,8 +25,8 @@ __export(Echart_exports, {
25
25
  Pie: () => Pie
26
26
  });
27
27
  module.exports = __toCommonJS(Echart_exports);
28
- var import_echarts = require("echarts");
29
28
  var import_react = require("react");
29
+ var import_echarts = require("echarts");
30
30
  var Echart = (0, import_react.forwardRef)((props, ref) => {
31
31
  const { width, height, option, chart, ...rest } = props;
32
32
  const container = (0, import_react.useRef)(null);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Echart.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport {\n BarSeriesOption,\n ComposeOption,\n DatasetComponentOption,\n ECharts,\n GridComponentOption,\n LineSeriesOption,\n PieSeriesOption,\n TitleComponentOption,\n TooltipComponentOption,\n init,\n} from \"echarts\"\nimport {\n ComponentPropsWithoutRef,\n ForwardRefExoticComponent,\n ForwardedRef,\n RefAttributes,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n} from \"react\"\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAWO;AACP,mBAUO;AAmBP,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AACnE,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AAClB,UAAM,MAAM,UAAU;AACtB,aAAS,cAAU,qBAAK,KAAK,QAAQ,EAAE,OAAO,OAAO,CAAC;AACtD,WAAO,MAAM,SAAS,SAAS,QAAQ;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,UAAU,SAAU,CAAC,CAAC;AAErD,wCAAoB,OAAO,MAAM,SAAS,SAAU,CAAC,CAAC;AAEtD,8BAAU,MAAM;AACZ,aAAS,SAAS,UAAU,MAAM;AAClC,aAAS,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAC9C,CAAC;AAED,SAAO,oCAAC,SAAI,KAAK,WAAY,GAAG,MAAM;AAC1C,CAAC;AAEM,IAAM,MAAM;AACZ,IAAM,MAAM;AACZ,IAAM,OAAO;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAUO;AACP,qBAWO;AAmBP,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AACnE,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AAClB,UAAM,MAAM,UAAU;AACtB,aAAS,cAAU,qBAAK,KAAK,QAAQ,EAAE,OAAO,OAAO,CAAC;AACtD,WAAO,MAAM,SAAS,SAAS,QAAQ;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,UAAU,SAAU,CAAC,CAAC;AAErD,wCAAoB,OAAO,MAAM,SAAS,SAAU,CAAC,CAAC;AAEtD,8BAAU,MAAM;AACZ,aAAS,SAAS,UAAU,MAAM;AAClC,aAAS,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAC9C,CAAC;AAED,SAAO,oCAAC,SAAI,KAAK,WAAY,GAAG,MAAM;AAC1C,CAAC;AAEM,IAAM,MAAM;AACZ,IAAM,MAAM;AACZ,IAAM,OAAO;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,6 @@
1
- import { ExportExcelParams } from "deepsea-tools";
2
1
  import { ComponentPropsWithoutRef } from "react";
2
+ import { ExportExcelParams } from "deepsea-tools";
3
3
  export interface ExportExcelProps extends ComponentPropsWithoutRef<"button">, ExportExcelParams {
4
4
  }
5
5
  /** 导出 excel 的 button 组件 */
6
- declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
7
- export default ExportExcel;
6
+ export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -19,11 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
19
20
  // src/components/ExportExcel.tsx
20
21
  var ExportExcel_exports = {};
21
22
  __export(ExportExcel_exports, {
22
- default: () => ExportExcel_default
23
+ ExportExcel: () => ExportExcel
23
24
  });
24
25
  module.exports = __toCommonJS(ExportExcel_exports);
25
- var import_deepsea_tools = require("deepsea-tools");
26
26
  var import_react = require("react");
27
+ var import_deepsea_tools = require("deepsea-tools");
27
28
  var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
28
29
  const { data, fileName, onClick, ...rest } = props;
29
30
  function onButtonClick(e) {
@@ -32,5 +33,8 @@ var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
32
33
  }
33
34
  return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...rest });
34
35
  });
35
- var ExportExcel_default = ExportExcel;
36
+ // Annotate the CommonJS export names for ESM import in node:
37
+ 0 && (module.exports = {
38
+ ExportExcel
39
+ });
36
40
  //# sourceMappingURL=ExportExcel.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ExportExcel.tsx"],
4
- "sourcesContent": ["import { ExportExcelParams, exportExcel } from \"deepsea-tools\"\r\nimport { ComponentPropsWithoutRef, ComponentRef, MouseEvent as ReactMouseEvent, forwardRef } from \"react\"\r\n\r\nexport interface ExportExcelProps extends ComponentPropsWithoutRef<\"button\">, ExportExcelParams {}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nconst ExportExcel = forwardRef<ComponentRef<\"button\">, ExportExcelProps>((props, ref) => {\r\n const { data, fileName, onClick, ...rest } = props\r\n\r\n function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n exportExcel({ data, fileName })\r\n onClick?.(e)\r\n }\r\n\r\n return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n\r\nexport default ExportExcel\r\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA+C;AAC/C,mBAAkG;AAKlG,IAAM,kBAAc,yBAAqD,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,UAAU,SAAS,GAAG,KAAK,IAAI;AAE7C,WAAS,cAAc,GAAmD;AACtE,0CAAY,EAAE,MAAM,SAAS,CAAC;AAC9B,cAAU,CAAC;AAAA,EACf;AAEA,SAAO,oCAAC,YAAO,KAAU,SAAS,eAAgB,GAAG,MAAM;AAC/D,CAAC;AAED,IAAO,sBAAQ;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, ComponentRef, MouseEvent as ReactMouseEvent, forwardRef } from \"react\"\nimport { ExportExcelParams, exportExcel } from \"deepsea-tools\"\n\nexport interface ExportExcelProps extends ComponentPropsWithoutRef<\"button\">, ExportExcelParams {}\n\n/** 导出 excel 的 button 组件 */\nexport const ExportExcel = forwardRef<ComponentRef<\"button\">, ExportExcelProps>((props, ref) => {\n const { data, fileName, onClick, ...rest } = props\n\n function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n exportExcel({ data, fileName })\n onClick?.(e)\n }\n\n return <button ref={ref} onClick={onButtonClick} {...rest} />\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkG;AAClG,2BAA+C;AAKxC,IAAM,kBAAc,yBAAqD,CAAC,OAAO,QAAQ;AAC5F,QAAM,EAAE,MAAM,UAAU,SAAS,GAAG,KAAK,IAAI;AAE7C,WAAS,cAAc,GAAmD;AACtE,0CAAY,EAAE,MAAM,SAAS,CAAC;AAC9B,cAAU,CAAC;AAAA,EACf;AAEA,SAAO,oCAAC,YAAO,KAAU,SAAS,eAAgB,GAAG,MAAM;AAC/D,CAAC;",
6
6
  "names": []
7
7
  }
@@ -26,10 +26,10 @@ __export(Flow_exports, {
26
26
  getGapRange: () => getGapRange
27
27
  });
28
28
  module.exports = __toCommonJS(Flow_exports);
29
- var import_ahooks = require("ahooks");
30
- var import_deepsea_tools = require("deepsea-tools");
31
29
  var import_react = require("react");
32
30
  var import_css = require("@emotion/css");
31
+ var import_ahooks = require("ahooks");
32
+ var import_deepsea_tools = require("deepsea-tools");
33
33
  var import_utils = require("../utils");
34
34
  function getGapRange(gap) {
35
35
  if (typeof gap === "number")
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Flow.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n /** 容器宽度 */\n width: number\n /** 容器高度 */\n height: number\n /** 元素宽度 */\n itemWidth: number\n /** 元素高度 */\n itemHeight: number\n /** 列间距 */\n columnGap: number\n /** 列数 */\n columnCount: number\n /** 行间距 */\n rowGap: number\n /** 行数 */\n rowCount: number\n /** 元素格数 */\n itemCount: number\n /** 最大行数 */\n maxRows: number | null\n /** 是否有元素被隐藏 */\n overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /** 元素宽度 */\n itemWidth: number\n /** 元素高度 */\n itemHeight: number\n /**\n * 列间距\n * 1. 如果是数字,表示列间距是固定的\n * 2. 如果是 auto,表示会在尽可能放进更多列的情况下,列间距是平均的\n * 2. 如果是数组,表示列间距是区间的,第一个元素是最小值,第二个元素是最大值\n */\n columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n /** 行间距 */\n rowGap?: number\n gap?: number\n /** 最大行数 */\n maxRows?: number | null\n /** 源数据 */\n data?: T[]\n /** 渲染 */\n render: (item: T, index: number, arr: T[]) => ReactNode\n /** key释放器,默认为 index */\n keyExactor?: (item: T, index: number, arr: T[]) => Key\n /**\n * 渲染的元素由两层容器包裹,外层容器类名\n */\n wrapperClassName?: string\n /**\n * 渲染的元素由两层容器包裹,外层容器样式\n */\n wrapperStyle?: CSSProperties\n /**\n * 渲染的元素由两层容器包裹,内层容器类名\n */\n containerClassName?: string\n /**\n * 渲染的元素由两层容器包裹,内层容器样式\n */\n containerStyle?: CSSProperties\n /** 节流时间,单位毫秒,默认200ms,传入 0 不节流 */\n throttle?: number\n /** 动画时间,单位毫秒,默认400ms,传入 0 不展示动画 */\n transitionDuration?: number\n /** 变化的回调函数 */\n onSizeChange?: (sizeData: FlowSizeData) => void\n element?: RefObject<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n if (typeof gap === \"number\") return [gap, gap]\n if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n count: number\n gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n if (count === 1) return { count, gap: 0 }\n const averageGap = (width - itemWidth * count) / (count - 1)\n if (averageGap < minGap) return { count, gap: minGap }\n if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n /** 组件宽度,必须指定 */\n width: number\n}\n\n/** 手动组件,由外界指定宽度,性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n let {\n itemWidth,\n itemHeight,\n columnGap,\n rowGap,\n maxRows,\n data = [],\n render,\n keyExactor,\n className,\n style,\n wrapperClassName,\n wrapperStyle,\n throttle,\n transitionDuration,\n onSizeChange,\n containerClassName,\n containerStyle,\n gap = 0,\n width,\n element,\n ...rest\n } = props\n rowGap ??= gap\n columnGap ??= gap\n const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n const ele = useRef<HTMLDivElement>(null)\n const contentRows = Math.ceil(data.length / columnCount)\n const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n function getPosition(index: number) {\n const y = Math.floor(index / columnCount)\n const x = index - y * columnCount\n return {\n left: x * (itemWidth + columnGapSize),\n top: y * (itemHeight + rowGap!),\n }\n }\n\n function getHidden(index: number) {\n if (typeof maxRows !== \"number\") return false\n return index >= maxRows * columnCount\n }\n\n useImperativeHandle(element, () => ele.current!, [ele.current])\n\n useEffect(() => {\n function task() {\n setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n }\n if (throttle === 0) return task()\n const timeout = setTimeout(task, throttle || 200)\n return () => clearTimeout(timeout)\n }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n useEffect(() => {\n onSizeChange?.({\n width,\n height,\n itemWidth,\n itemHeight,\n columnGap: columnGapSize,\n columnCount,\n rowGap: rowGap!,\n rowCount: contentShownRows,\n overflow: data.length > contentShownRows * columnCount,\n itemCount: data.length,\n maxRows: maxRows ?? null,\n })\n }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n position: relative;\n height: var(--height);\n overflow: hidden;\n `,\n className,\n )}\n style={transformCSSVariable({ height: px(height) }, style)}\n {...rest}\n >\n {data.map((item, index, arr) => (\n <div\n key={keyExactor ? keyExactor(item, index, arr) : index}\n className={clsx(\n css`\n position: absolute;\n width: var(--width);\n height: var(--height);\n transition: var(--transition);\n left: 0;\n top: 0;\n transform: translate(var(--left), var(--top));\n `,\n wrapperClassName,\n )}\n style={transformCSSVariable(\n {\n width: px(itemWidth),\n height: px(itemHeight),\n transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n left: px(getPosition(index).left),\n top: px(getPosition(index).top),\n },\n wrapperStyle,\n )}\n >\n <div\n className={clsx(\n css`\n width: 100%;\n height: 100%;\n display: var(--display);\n `,\n containerClassName,\n )}\n style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n >\n {render(item, index, arr)}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n const {\n itemWidth,\n itemHeight,\n columnGap,\n rowGap,\n gap,\n maxRows,\n data,\n render,\n keyExactor,\n wrapperClassName,\n wrapperStyle,\n containerClassName,\n containerStyle,\n throttle,\n transitionDuration,\n onSizeChange,\n element,\n ...rest\n } = props\n const ele = useRef<HTMLDivElement>(null)\n const size = useSize(ele)\n const width = useRef(size?.width || 0)\n if (size && size.width !== 0) width.current = size.width\n useImperativeHandle(element, () => ele.current!, [ele.current])\n if (width.current === 0) return <div ref={ele} {...rest} />\n return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\nexport interface FlowSizeData {\n /** 容器宽度 */\n width: number\n /** 容器高度 */\n height: number\n /** 元素宽度 */\n itemWidth: number\n /** 元素高度 */\n itemHeight: number\n /** 列间距 */\n columnGap: number\n /** 列数 */\n columnCount: number\n /** 行间距 */\n rowGap: number\n /** 行数 */\n rowCount: number\n /** 元素格数 */\n itemCount: number\n /** 最大行数 */\n maxRows: number | null\n /** 是否有元素被隐藏 */\n overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /** 元素宽度 */\n itemWidth: number\n /** 元素高度 */\n itemHeight: number\n /**\n * 列间距\n * 1. 如果是数字,表示列间距是固定的\n * 2. 如果是 auto,表示会在尽可能放进更多列的情况下,列间距是平均的\n * 2. 如果是数组,表示列间距是区间的,第一个元素是最小值,第二个元素是最大值\n */\n columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n /** 行间距 */\n rowGap?: number\n gap?: number\n /** 最大行数 */\n maxRows?: number | null\n /** 源数据 */\n data?: T[]\n /** 渲染 */\n render: (item: T, index: number, arr: T[]) => ReactNode\n /** key释放器,默认为 index */\n keyExactor?: (item: T, index: number, arr: T[]) => Key\n /**\n * 渲染的元素由两层容器包裹,外层容器类名\n */\n wrapperClassName?: string\n /**\n * 渲染的元素由两层容器包裹,外层容器样式\n */\n wrapperStyle?: CSSProperties\n /**\n * 渲染的元素由两层容器包裹,内层容器类名\n */\n containerClassName?: string\n /**\n * 渲染的元素由两层容器包裹,内层容器样式\n */\n containerStyle?: CSSProperties\n /** 节流时间,单位毫秒,默认200ms,传入 0 不节流 */\n throttle?: number\n /** 动画时间,单位毫秒,默认400ms,传入 0 不展示动画 */\n transitionDuration?: number\n /** 变化的回调函数 */\n onSizeChange?: (sizeData: FlowSizeData) => void\n element?: RefObject<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n if (typeof gap === \"number\") return [gap, gap]\n if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n count: number\n gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n if (count === 1) return { count, gap: 0 }\n const averageGap = (width - itemWidth * count) / (count - 1)\n if (averageGap < minGap) return { count, gap: minGap }\n if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n /** 组件宽度,必须指定 */\n width: number\n}\n\n/** 手动组件,由外界指定宽度,性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n let {\n itemWidth,\n itemHeight,\n columnGap,\n rowGap,\n maxRows,\n data = [],\n render,\n keyExactor,\n className,\n style,\n wrapperClassName,\n wrapperStyle,\n throttle,\n transitionDuration,\n onSizeChange,\n containerClassName,\n containerStyle,\n gap = 0,\n width,\n element,\n ...rest\n } = props\n rowGap ??= gap\n columnGap ??= gap\n const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n const ele = useRef<HTMLDivElement>(null)\n const contentRows = Math.ceil(data.length / columnCount)\n const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n function getPosition(index: number) {\n const y = Math.floor(index / columnCount)\n const x = index - y * columnCount\n return {\n left: x * (itemWidth + columnGapSize),\n top: y * (itemHeight + rowGap!),\n }\n }\n\n function getHidden(index: number) {\n if (typeof maxRows !== \"number\") return false\n return index >= maxRows * columnCount\n }\n\n useImperativeHandle(element, () => ele.current!, [ele.current])\n\n useEffect(() => {\n function task() {\n setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n }\n if (throttle === 0) return task()\n const timeout = setTimeout(task, throttle || 200)\n return () => clearTimeout(timeout)\n }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n useEffect(() => {\n onSizeChange?.({\n width,\n height,\n itemWidth,\n itemHeight,\n columnGap: columnGapSize,\n columnCount,\n rowGap: rowGap!,\n rowCount: contentShownRows,\n overflow: data.length > contentShownRows * columnCount,\n itemCount: data.length,\n maxRows: maxRows ?? null,\n })\n }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n position: relative;\n height: var(--height);\n overflow: hidden;\n `,\n className,\n )}\n style={transformCSSVariable({ height: px(height) }, style)}\n {...rest}\n >\n {data.map((item, index, arr) => (\n <div\n key={keyExactor ? keyExactor(item, index, arr) : index}\n className={clsx(\n css`\n position: absolute;\n width: var(--width);\n height: var(--height);\n transition: var(--transition);\n left: 0;\n top: 0;\n transform: translate(var(--left), var(--top));\n `,\n wrapperClassName,\n )}\n style={transformCSSVariable(\n {\n width: px(itemWidth),\n height: px(itemHeight),\n transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n left: px(getPosition(index).left),\n top: px(getPosition(index).top),\n },\n wrapperStyle,\n )}\n >\n <div\n className={clsx(\n css`\n width: 100%;\n height: 100%;\n display: var(--display);\n `,\n containerClassName,\n )}\n style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n >\n {render(item, index, arr)}\n </div>\n </div>\n ))}\n </div>\n )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>): ReactNode {\n const {\n itemWidth,\n itemHeight,\n columnGap,\n rowGap,\n gap,\n maxRows,\n data,\n render,\n keyExactor,\n wrapperClassName,\n wrapperStyle,\n containerClassName,\n containerStyle,\n throttle,\n transitionDuration,\n onSizeChange,\n element,\n ...rest\n } = props\n const ele = useRef<HTMLDivElement>(null)\n const size = useSize(ele)\n const width = useRef(size?.width || 0)\n if (size && size.width !== 0) width.current = size.width\n useImperativeHandle(element, () => ele.current!, [ele.current])\n if (width.current === 0) return <div ref={ele} {...rest} />\n return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -33,8 +33,8 @@ __export(HlsPlayer_exports, {
33
33
  HlsPlayer: () => HlsPlayer
34
34
  });
35
35
  module.exports = __toCommonJS(HlsPlayer_exports);
36
- var import_hls = __toESM(require("hls.js"));
37
36
  var import_react = require("react");
37
+ var import_hls = __toESM(require("hls.js"));
38
38
  var HlsPlayer = (0, import_react.forwardRef)((props, ref) => {
39
39
  const { src, ...rest } = props;
40
40
  const video = (0, import_react.useRef)(null);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/HlsPlayer.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport Hls from \"hls.js\"\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\n src: string\n}\n\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\n const { src, ...rest } = props\n const video = useRef<HTMLVideoElement>(null)\n\n useImperativeHandle(ref, () => video.current!, [])\n\n useEffect(() => {\n const { current: player } = video\n if (!player || !src) return\n if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\n player.src = src\n return\n }\n if (Hls.isSupported()) {\n const hls = new Hls()\n hls.loadSource(src)\n hls.attachMedia(player)\n return () => {\n hls.destroy()\n }\n }\n }, [src])\n\n return <video ref={video} {...rest} />\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMjF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Hls from \"hls.js\"\n\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\n src: string\n}\n\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\n const { src, ...rest } = props\n const video = useRef<HTMLVideoElement>(null)\n\n useImperativeHandle(ref, () => video.current!, [])\n\n useEffect(() => {\n const { current: player } = video\n if (!player || !src) return\n if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\n player.src = src\n return\n }\n if (Hls.isSupported()) {\n const hls = new Hls()\n hls.loadSource(src)\n hls.attachMedia(player)\n return () => {\n hls.destroy()\n }\n }\n }, [src])\n\n return <video ref={video} {...rest} />\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwF;AACxF,iBAAgB;AAMT,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;",
6
6
  "names": ["Hls"]
7
7
  }
@@ -23,8 +23,8 @@ __export(ImportExcel_exports, {
23
23
  ImportExcel: () => ImportExcel
24
24
  });
25
25
  module.exports = __toCommonJS(ImportExcel_exports);
26
- var import_deepsea_tools = require("deepsea-tools");
27
26
  var import_react = require("react");
27
+ var import_deepsea_tools = require("deepsea-tools");
28
28
  var import_InputFile = require("./InputFile");
29
29
  var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
30
30
  const { onChange, ...rest } = props;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/ImportExcel.tsx"],
4
- "sourcesContent": ["\"use client\"\r\n\r\nimport { readExcel } from \"deepsea-tools\"\r\nimport { forwardRef } from \"react\"\r\n\r\nimport { InputFile, InputFileProps } from \"./InputFile\"\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n onChange?: (data: Record<string, any>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n const { onChange, ...rest } = props\r\n\r\n return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\r\n})\r\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA0B;AAC1B,mBAA2B;AAE3B,uBAA0C;AAOnC,IAAM,kBAAc,yBAA+C,CAAC,OAAO,QAAQ;AACtF,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SAAO,oCAAC,8BAAU,KAAU,QAAO,SAAQ,MAAK,eAAc,UAAU,CAAC,EAAE,OAAO,MAAM,eAAW,gCAAU,MAAM,CAAC,GAAI,GAAG,MAAM;AACrI,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { readExcel } from \"deepsea-tools\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\n onChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\n const { onChange, ...rest } = props\n\n return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2B;AAC3B,2BAA0B;AAE1B,uBAA0C;AAOnC,IAAM,kBAAc,yBAA+C,CAAC,OAAO,QAAQ;AACtF,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SAAO,oCAAC,8BAAU,KAAU,QAAO,SAAQ,MAAK,eAAc,UAAU,CAAC,EAAE,OAAO,MAAM,eAAW,gCAAU,MAAM,CAAC,GAAI,GAAG,MAAM;AACrI,CAAC;",
6
6
  "names": []
7
7
  }
@@ -23,10 +23,10 @@ __export(InfiniteScroll_exports, {
23
23
  InfiniteScroll: () => InfiniteScroll
24
24
  });
25
25
  module.exports = __toCommonJS(InfiniteScroll_exports);
26
- var import_ahooks = require("ahooks");
27
- var import_deepsea_tools = require("deepsea-tools");
28
26
  var import_react = require("react");
29
27
  var import_css = require("@emotion/css");
28
+ var import_ahooks = require("ahooks");
29
+ var import_deepsea_tools = require("deepsea-tools");
30
30
  var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
31
31
  const {
32
32
  className,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/InfiniteScroll.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport type InfiniteScrollProps = ComponentPropsWithoutRef<\"div\"> & {\n /**\n * 滚动的方向\n * @default \"vertical\"\n */\n direction?: \"vertical\" | \"horizontal\"\n /** 渲染 children 的容器的类名 */\n containerClassName?: string\n /** 渲染 children 的容器的样式 */\n containerStyle?: CSSProperties\n /**\n * 两个 children 容器之间的间距\n * @default 0\n */\n gap?: number\n /** 一个周期的时间,单位:毫秒 */\n duration: number\n /** 是否将 gap 的距离也加入 overflow 的计算 */\n withGap?: boolean\n /** 尺寸刚好相同时,是否视为溢出 */\n withEqual?: boolean\n /** 鼠标移入时,是否停止动画 */\n pauseOnHover?: boolean\n}\n\n/**\n * 无限滚动的组件\n * 子元素会内置的容器中被渲染两次,首尾相连,形成无限滚动的效果\n * 但是,如果内部检测到并没有溢出,那么不会渲染两次,并且没有动画\n */\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\n const {\n className,\n direction = \"vertical\",\n children,\n containerClassName,\n containerStyle,\n gap = 0,\n duration,\n withGap,\n withEqual,\n pauseOnHover,\n onMouseEnter,\n onMouseLeave,\n ...rest\n } = props\n\n const wrapper = useRef<HTMLDivElement>(null)\n const wrapperSize = useSize(wrapper)\n\n const ele = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\n\n const container = useRef<HTMLDivElement>(null)\n const containerSize = useSize(container)\n\n function bigger(containerSize: number, wrapperSize: number) {\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\n }\n\n const overflow =\n wrapperSize && containerSize\n ? direction === \"vertical\"\n ? bigger(containerSize.height, wrapperSize.height)\n : bigger(containerSize.width, wrapperSize.width)\n : false\n\n const animation = useRef<Animation | undefined>(undefined)\n\n useEffect(() => {\n if (!wrapperSize || !containerSize || !overflow) return\n animation.current = ele.current?.animate(\n {\n transform:\n direction === \"vertical\"\n ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]\n : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],\n },\n { duration, iterations: Infinity },\n )\n return () => animation.current?.cancel()\n }, [wrapperSize, containerSize, overflow, direction, duration])\n\n function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (pauseOnHover) animation.current?.pause()\n onMouseEnter?.(e)\n }\n\n function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (pauseOnHover) animation.current?.play()\n onMouseLeave?.(e)\n }\n\n useEffect(() => {\n if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\n }, [animation.current, pauseOnHover])\n\n return (\n <div\n ref={wrapper}\n className={clsx(\n css`\n position: relative;\n ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\n `,\n className,\n )}\n onMouseEnter={enter}\n onMouseLeave={leave}\n {...rest}\n >\n <div\n ref={ele}\n style={{\n position: \"absolute\",\n width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\n height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),\n }}\n >\n <div\n ref={container}\n className={clsx(\n css`\n position: absolute;\n left: 0;\n top: 0;\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n `,\n containerClassName,\n )}\n style={containerStyle}\n >\n {children}\n </div>\n {overflow && (\n <div\n ref={container}\n className={clsx(\n css`\n position: absolute;\n right: 0;\n bottom: 0;\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n `,\n containerClassName,\n )}\n style={containerStyle}\n >\n {children}\n </div>\n )}\n </div>\n </div>\n )\n})\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\n\nexport type InfiniteScrollProps = ComponentPropsWithoutRef<\"div\"> & {\n /**\n * 滚动的方向\n * @default \"vertical\"\n */\n direction?: \"vertical\" | \"horizontal\"\n /** 渲染 children 的容器的类名 */\n containerClassName?: string\n /** 渲染 children 的容器的样式 */\n containerStyle?: CSSProperties\n /**\n * 两个 children 容器之间的间距\n * @default 0\n */\n gap?: number\n /** 一个周期的时间,单位:毫秒 */\n duration: number\n /** 是否将 gap 的距离也加入 overflow 的计算 */\n withGap?: boolean\n /** 尺寸刚好相同时,是否视为溢出 */\n withEqual?: boolean\n /** 鼠标移入时,是否停止动画 */\n pauseOnHover?: boolean\n}\n\n/**\n * 无限滚动的组件\n * 子元素会内置的容器中被渲染两次,首尾相连,形成无限滚动的效果\n * 但是,如果内部检测到并没有溢出,那么不会渲染两次,并且没有动画\n */\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\n const {\n className,\n direction = \"vertical\",\n children,\n containerClassName,\n containerStyle,\n gap = 0,\n duration,\n withGap,\n withEqual,\n pauseOnHover,\n onMouseEnter,\n onMouseLeave,\n ...rest\n } = props\n\n const wrapper = useRef<HTMLDivElement>(null)\n const wrapperSize = useSize(wrapper)\n\n const ele = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\n\n const container = useRef<HTMLDivElement>(null)\n const containerSize = useSize(container)\n\n function bigger(containerSize: number, wrapperSize: number) {\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\n }\n\n const overflow =\n wrapperSize && containerSize\n ? direction === \"vertical\"\n ? bigger(containerSize.height, wrapperSize.height)\n : bigger(containerSize.width, wrapperSize.width)\n : false\n\n const animation = useRef<Animation | undefined>(undefined)\n\n useEffect(() => {\n if (!wrapperSize || !containerSize || !overflow) return\n animation.current = ele.current?.animate(\n {\n transform:\n direction === \"vertical\"\n ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]\n : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],\n },\n { duration, iterations: Infinity },\n )\n return () => animation.current?.cancel()\n }, [wrapperSize, containerSize, overflow, direction, duration])\n\n function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (pauseOnHover) animation.current?.pause()\n onMouseEnter?.(e)\n }\n\n function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (pauseOnHover) animation.current?.play()\n onMouseLeave?.(e)\n }\n\n useEffect(() => {\n if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\n }, [animation.current, pauseOnHover])\n\n return (\n <div\n ref={wrapper}\n className={clsx(\n css`\n position: relative;\n ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\n `,\n className,\n )}\n onMouseEnter={enter}\n onMouseLeave={leave}\n {...rest}\n >\n <div\n ref={ele}\n style={{\n position: \"absolute\",\n width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\n height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),\n }}\n >\n <div\n ref={container}\n className={clsx(\n css`\n position: absolute;\n left: 0;\n top: 0;\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n `,\n containerClassName,\n )}\n style={containerStyle}\n >\n {children}\n </div>\n {overflow && (\n <div\n ref={container}\n className={clsx(\n css`\n position: absolute;\n right: 0;\n bottom: 0;\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n `,\n containerClassName,\n )}\n style={containerStyle}\n >\n {children}\n </div>\n )}\n </div>\n </div>\n )\n})\n"],
5
+ "mappings": "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",
6
6
  "names": ["containerSize", "wrapperSize"]
7
7
  }
@@ -23,9 +23,9 @@ __export(LoopSwiper_exports, {
23
23
  LoopSwiper: () => LoopSwiper
24
24
  });
25
25
  module.exports = __toCommonJS(LoopSwiper_exports);
26
- var import_deepsea_tools = require("deepsea-tools");
27
26
  var import_react = require("react");
28
27
  var import_css = require("@emotion/css");
28
+ var import_deepsea_tools = require("deepsea-tools");
29
29
  var LoopSwiper = (0, import_react.forwardRef)((props, ref) => {
30
30
  const { className, style, children, direction, period, reverse, gap, ...rest } = props;
31
31
  const wrapper = (0, import_react.useRef)(null);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/LoopSwiper.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\n direction?: \"horizontal\" | \"vertical\"\n reverse?: boolean\n period: number\n gap?: CSSProperties[\"gap\"]\n}\n\n/** 循环播放组件 */\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\n const { className, style, children, direction, period, reverse, gap, ...rest } = props\n const wrapper = useRef<HTMLDivElement>(null)\n const container = useRef<HTMLDivElement>(null)\n const [swiper, setSwiper] = useState(false)\n const directionRef = useRef(direction)\n directionRef.current = direction\n const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\n const animationName = swiper\n ? direction === \"vertical\"\n ? reverse\n ? \"deepsea-reverse-vertical-loop-swipe\"\n : \"deepsea-vertical-loop-swipe\"\n : reverse\n ? \"deepsea-reverse-horizontal-loop-swipe\"\n : \"deepsea-horizontal-loop-swipe\"\n : \"none\"\n const animationDuration = `${period}ms`\n const animationTimingFunction = \"linear\"\n const animationIterationCount = \"infinite\"\n\n useImperativeHandle(ref, () => wrapper.current!, [])\n\n useEffect(() => {\n const wrapperEle = wrapper.current!\n const containerEle = container.current!\n let wrapperWidth = 0\n let wrapperHeight = 0\n let containerWidth = 0\n let containerHeight = 0\n const observer = new ResizeObserver(entries => {\n entries.forEach(entry => {\n if (entry.target === wrapperEle) {\n wrapperWidth = entry.contentRect.width\n wrapperHeight = entry.contentRect.height\n } else if (entry.target === containerEle) {\n containerWidth = entry.contentRect.width\n containerHeight = entry.contentRect.height\n }\n })\n setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\n })\n observer.observe(wrapperEle)\n observer.observe(containerEle)\n }, [])\n\n return (\n <div\n ref={wrapper}\n className={clsx(\n css`\n @keyframes deepsea-horizontal-loop-swipe {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes deepsea-reverse-horizontal-loop-swipe {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n @keyframes deepsea-vertical-loop-swipe {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n }\n @keyframes deepsea-reverse-vertical-loop-swipe {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n }\n `,\n className,\n )}\n style={{ display: \"flex\", flexDirection, gap, ...style }}\n {...rest}\n >\n <div\n ref={container}\n style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}\n >\n {children}\n </div>\n <div\n style={{\n display: swiper ? \"flex\" : \"none\",\n flexDirection,\n gap,\n animationName,\n animationTimingFunction,\n animationDuration,\n animationIterationCount,\n }}\n >\n {children}\n </div>\n </div>\n )\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAA4G;AAE5G,iBAAoB;AAUb,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,WAAW,OAAO,UAAU,WAAW,QAAQ,SAAS,KAAK,GAAG,KAAK,IAAI;AACjF,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe,qBAAO,SAAS;AACrC,eAAa,UAAU;AACvB,QAAM,gBAAgD,cAAc,aAAc,UAAU,mBAAmB,WAAY,UAAU,gBAAgB;AACrJ,QAAM,gBAAgB,SAChB,cAAc,aACV,UACI,wCACA,gCACJ,UACE,0CACA,kCACN;AACN,QAAM,oBAAoB,GAAG;AAC7B,QAAM,0BAA0B;AAChC,QAAM,0BAA0B;AAEhC,wCAAoB,KAAK,MAAM,QAAQ,SAAU,CAAC,CAAC;AAEnD,8BAAU,MAAM;AACZ,UAAM,aAAa,QAAQ;AAC3B,UAAM,eAAe,UAAU;AAC/B,QAAI,eAAe;AACnB,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,kBAAkB;AACtB,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,cAAQ,QAAQ,WAAS;AACrB,YAAI,MAAM,WAAW,YAAY;AAC7B,yBAAe,MAAM,YAAY;AACjC,0BAAgB,MAAM,YAAY;AAAA,QACtC,WAAW,MAAM,WAAW,cAAc;AACtC,2BAAiB,MAAM,YAAY;AACnC,4BAAkB,MAAM,YAAY;AAAA,QACxC;AAAA,MACJ,CAAC;AACD,gBAAU,aAAa,YAAY,aAAa,kBAAkB,gBAAgB,iBAAiB,YAAY;AAAA,IACnH,CAAC;AACD,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,YAAY;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkCA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,GAAG,MAAM;AAAA,MACtD,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB;AAAA;AAAA,MAEhI;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS,SAAS,SAAS;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,MAEC;AAAA,IACL;AAAA,EACJ;AAER,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\n\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\n direction?: \"horizontal\" | \"vertical\"\n reverse?: boolean\n period: number\n gap?: CSSProperties[\"gap\"]\n}\n\n/** 循环播放组件 */\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\n const { className, style, children, direction, period, reverse, gap, ...rest } = props\n const wrapper = useRef<HTMLDivElement>(null)\n const container = useRef<HTMLDivElement>(null)\n const [swiper, setSwiper] = useState(false)\n const directionRef = useRef(direction)\n directionRef.current = direction\n const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\n const animationName = swiper\n ? direction === \"vertical\"\n ? reverse\n ? \"deepsea-reverse-vertical-loop-swipe\"\n : \"deepsea-vertical-loop-swipe\"\n : reverse\n ? \"deepsea-reverse-horizontal-loop-swipe\"\n : \"deepsea-horizontal-loop-swipe\"\n : \"none\"\n const animationDuration = `${period}ms`\n const animationTimingFunction = \"linear\"\n const animationIterationCount = \"infinite\"\n\n useImperativeHandle(ref, () => wrapper.current!, [])\n\n useEffect(() => {\n const wrapperEle = wrapper.current!\n const containerEle = container.current!\n let wrapperWidth = 0\n let wrapperHeight = 0\n let containerWidth = 0\n let containerHeight = 0\n const observer = new ResizeObserver(entries => {\n entries.forEach(entry => {\n if (entry.target === wrapperEle) {\n wrapperWidth = entry.contentRect.width\n wrapperHeight = entry.contentRect.height\n } else if (entry.target === containerEle) {\n containerWidth = entry.contentRect.width\n containerHeight = entry.contentRect.height\n }\n })\n setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\n })\n observer.observe(wrapperEle)\n observer.observe(containerEle)\n }, [])\n\n return (\n <div\n ref={wrapper}\n className={clsx(\n css`\n @keyframes deepsea-horizontal-loop-swipe {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes deepsea-reverse-horizontal-loop-swipe {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n @keyframes deepsea-vertical-loop-swipe {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n }\n @keyframes deepsea-reverse-vertical-loop-swipe {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n }\n `,\n className,\n )}\n style={{ display: \"flex\", flexDirection, gap, ...style }}\n {...rest}\n >\n <div\n ref={container}\n style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}\n >\n {children}\n </div>\n <div\n style={{\n display: swiper ? \"flex\" : \"none\",\n flexDirection,\n gap,\n animationName,\n animationTimingFunction,\n animationDuration,\n animationIterationCount,\n }}\n >\n {children}\n </div>\n </div>\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4G;AAC5G,iBAAoB;AACpB,2BAAqB;AAUd,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,WAAW,OAAO,UAAU,WAAW,QAAQ,SAAS,KAAK,GAAG,KAAK,IAAI;AACjF,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe,qBAAO,SAAS;AACrC,eAAa,UAAU;AACvB,QAAM,gBAAgD,cAAc,aAAc,UAAU,mBAAmB,WAAY,UAAU,gBAAgB;AACrJ,QAAM,gBAAgB,SAChB,cAAc,aACV,UACI,wCACA,gCACJ,UACE,0CACA,kCACN;AACN,QAAM,oBAAoB,GAAG;AAC7B,QAAM,0BAA0B;AAChC,QAAM,0BAA0B;AAEhC,wCAAoB,KAAK,MAAM,QAAQ,SAAU,CAAC,CAAC;AAEnD,8BAAU,MAAM;AACZ,UAAM,aAAa,QAAQ;AAC3B,UAAM,eAAe,UAAU;AAC/B,QAAI,eAAe;AACnB,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,kBAAkB;AACtB,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,cAAQ,QAAQ,WAAS;AACrB,YAAI,MAAM,WAAW,YAAY;AAC7B,yBAAe,MAAM,YAAY;AACjC,0BAAgB,MAAM,YAAY;AAAA,QACtC,WAAW,MAAM,WAAW,cAAc;AACtC,2BAAiB,MAAM,YAAY;AACnC,4BAAkB,MAAM,YAAY;AAAA,QACxC;AAAA,MACJ,CAAC;AACD,gBAAU,aAAa,YAAY,aAAa,kBAAkB,gBAAgB,iBAAiB,YAAY;AAAA,IACnH,CAAC;AACD,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,YAAY;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkCA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,GAAG,MAAM;AAAA,MACtD,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB;AAAA;AAAA,MAEhI;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS,SAAS,SAAS;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,MAEC;AAAA,IACL;AAAA,EACJ;AAER,CAAC;",
6
6
  "names": []
7
7
  }