@qsxy/element-plus-react 1.0.0-next.4 → 1.0.0-next.7

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 (138) hide show
  1. package/dist/Carousel/Carousel.d.ts +4 -0
  2. package/dist/Carousel/Carousel.js +168 -0
  3. package/dist/Carousel/CarouselContext.d.ts +4 -0
  4. package/dist/{VirtualList/Item.js → Carousel/CarouselContext.js} +29 -14
  5. package/dist/Carousel/CarouselItem.d.ts +4 -0
  6. package/dist/Carousel/CarouselItem.js +75 -0
  7. package/dist/Carousel/hooks/useCarousel.d.ts +37 -0
  8. package/dist/Carousel/hooks/useCarousel.js +348 -0
  9. package/dist/Carousel/hooks/useCarouselItem.d.ts +8 -0
  10. package/dist/Carousel/hooks/useCarouselItem.js +161 -0
  11. package/dist/Carousel/index.d.ts +3 -0
  12. package/dist/{VirtualList → Carousel}/index.js +10 -7
  13. package/dist/Carousel/typings.d.ts +83 -0
  14. package/dist/{VirtualList/interface.js → Carousel/typings.js} +3 -3
  15. package/dist/Cascader/Cascader.js +147 -182
  16. package/dist/Cascader/CascaderContext.d.ts +4 -10
  17. package/dist/Cascader/CascaderContext.js +2 -6
  18. package/dist/Cascader/CascaderDropdown.js +1 -1
  19. package/dist/Cascader/CascaderMenu.d.ts +0 -7
  20. package/dist/Cascader/CascaderMenu.js +4 -77
  21. package/dist/Cascader/Utils.d.ts +0 -2
  22. package/dist/Cascader/Utils.js +0 -44
  23. package/dist/Cascader/index.d.ts +1 -1
  24. package/dist/Cascader/typings.d.ts +2 -18
  25. package/dist/Cascader/useCascader.d.ts +1 -15
  26. package/dist/Cascader/useCascader.js +14 -41
  27. package/dist/DatePicker/DatePicker.js +6 -6
  28. package/dist/DateTimePicker/DateTimePicker.d.ts +1 -1
  29. package/dist/Dialog/Dialog.js +2 -2
  30. package/dist/Drawer/Drawer.js +8 -8
  31. package/dist/Empty/ImgEmpty.js +1 -1
  32. package/dist/Form/utils/classUtil.js +2 -2
  33. package/dist/Input/InputRange.js +3 -3
  34. package/dist/MessageBox/MessageBox.js +1 -1
  35. package/dist/Popper/Popper.js +7 -7
  36. package/dist/Progress/Progress.js +1 -1
  37. package/dist/Table/hooks/useSelection.d.ts +1 -8
  38. package/dist/Table/util.js +2 -2
  39. package/dist/TimePicker/TimePicker.js +1 -1
  40. package/dist/Tree/DirectoryTree.d.ts +6 -13
  41. package/dist/Tree/DirectoryTree.js +32 -81
  42. package/dist/Tree/DropIndicator.d.ts +4 -2
  43. package/dist/Tree/DropIndicator.js +7 -2
  44. package/dist/Tree/Indent.d.ts +2 -2
  45. package/dist/Tree/Indent.js +4 -4
  46. package/dist/Tree/MotionTreeNode.d.ts +4 -5
  47. package/dist/Tree/MotionTreeNode.js +69 -52
  48. package/dist/Tree/NodeList.d.ts +15 -11
  49. package/dist/Tree/NodeList.js +38 -29
  50. package/dist/Tree/RCTree.d.ts +77 -75
  51. package/dist/Tree/RCTree.js +199 -188
  52. package/dist/Tree/Tree.d.ts +3 -3
  53. package/dist/Tree/Tree.js +27 -27
  54. package/dist/Tree/TreeNode.d.ts +5 -90
  55. package/dist/Tree/TreeNode.js +320 -422
  56. package/dist/Tree/contextTypes.d.ts +36 -30
  57. package/dist/Tree/contextTypes.js +17 -4
  58. package/dist/Tree/index.d.ts +2 -2
  59. package/dist/Tree/typings.d.ts +60 -19
  60. package/dist/Tree/typings.js +1 -13
  61. package/dist/Tree/typings.tsx--bak +245 -0
  62. package/dist/Tree/useUnmount.d.ts +5 -0
  63. package/dist/{VirtualList/hooks/useChildren.js → Tree/useUnmount.js} +24 -16
  64. package/dist/Tree/util.d.ts +17 -21
  65. package/dist/Tree/util.js +21 -52
  66. package/dist/Tree/utils/conductUtil.d.ts +2 -2
  67. package/dist/Tree/utils/conductUtil.js +14 -3
  68. package/dist/Tree/utils/dictUtil.d.ts +7 -3
  69. package/dist/Tree/utils/dictUtil.js +49 -32
  70. package/dist/Tree/utils/diffUtil.d.ts +4 -3
  71. package/dist/Tree/utils/keyUtil.d.ts +2 -0
  72. package/dist/{VirtualList/utils/isFirefox.js → Tree/utils/keyUtil.js} +8 -7
  73. package/dist/Tree/utils/motion.js +6 -5
  74. package/dist/Tree/utils/treeUtil.d.ts +16 -18
  75. package/dist/Tree/utils/treeUtil.js +35 -14
  76. package/dist/TreeSelect/Utils.d.ts +1 -1
  77. package/dist/Util/base.d.ts +1 -1
  78. package/dist/Util/base.js +14 -2
  79. package/dist/hooks/prefix.d.ts +1 -1
  80. package/dist/hooks/prefix.js +4 -4
  81. package/dist/hooks/useClassNames.js +1 -1
  82. package/dist/index.css +228 -4
  83. package/dist/index.d.ts +5 -5
  84. package/dist/index.js +5 -5
  85. package/dist/theme-chalk/calendar/month-table.scss +1 -1
  86. package/dist/theme-chalk/carousel/index.scss +237 -0
  87. package/dist/theme-chalk/dev.scss +2 -0
  88. package/dist/theme-chalk/index.scss +1 -1
  89. package/dist/theme-chalk/input/input.scss +5 -3
  90. package/package.json +2 -1
  91. package/dist/Tree/utils/KeyCode.d.ts +0 -436
  92. package/dist/Tree/utils/KeyCode.js +0 -550
  93. package/dist/VirtualList/Filler.d.ts +0 -16
  94. package/dist/VirtualList/Filler.js +0 -78
  95. package/dist/VirtualList/Item.d.ts +0 -7
  96. package/dist/VirtualList/ScrollBar.d.ts +0 -43
  97. package/dist/VirtualList/ScrollBar.js +0 -216
  98. package/dist/VirtualList/VirtualList.d.ts +0 -36
  99. package/dist/VirtualList/VirtualList.js +0 -280
  100. package/dist/VirtualList/hooks/useChildren.d.ts +0 -3
  101. package/dist/VirtualList/hooks/useDiffItem.d.ts +0 -2
  102. package/dist/VirtualList/hooks/useDiffItem.js +0 -39
  103. package/dist/VirtualList/hooks/useFrameWheel.d.ts +0 -6
  104. package/dist/VirtualList/hooks/useFrameWheel.js +0 -72
  105. package/dist/VirtualList/hooks/useHeights.d.ts +0 -3
  106. package/dist/VirtualList/hooks/useHeights.js +0 -83
  107. package/dist/VirtualList/hooks/useLayoutEffect.d.ts +0 -6
  108. package/dist/VirtualList/hooks/useLayoutEffect.js +0 -30
  109. package/dist/VirtualList/hooks/useMobileTouchMove.d.ts +0 -2
  110. package/dist/VirtualList/hooks/useMobileTouchMove.js +0 -92
  111. package/dist/VirtualList/hooks/useOriginScroll.d.ts +0 -2
  112. package/dist/VirtualList/hooks/useOriginScroll.js +0 -56
  113. package/dist/VirtualList/hooks/useScrollTo.d.ts +0 -5
  114. package/dist/VirtualList/hooks/useScrollTo.js +0 -111
  115. package/dist/VirtualList/index.d.ts +0 -2
  116. package/dist/VirtualList/interface.d.ts +0 -8
  117. package/dist/VirtualList/mock.d.ts +0 -6
  118. package/dist/VirtualList/mock.js +0 -29
  119. package/dist/VirtualList/utils/CacheMap.d.ts +0 -7
  120. package/dist/VirtualList/utils/CacheMap.js +0 -36
  121. package/dist/VirtualList/utils/algorithmUtil.d.ts +0 -23
  122. package/dist/VirtualList/utils/algorithmUtil.js +0 -81
  123. package/dist/VirtualList/utils/findDOMNode.d.ts +0 -5
  124. package/dist/VirtualList/utils/findDOMNode.js +0 -30
  125. package/dist/VirtualList/utils/isFirefox.d.ts +0 -2
  126. package/dist/VirtualList/utils/raf.d.ts +0 -5
  127. package/dist/VirtualList/utils/raf.js +0 -57
  128. package/dist/theme-chalk/bak/common/popup.scss +0 -47
  129. package/dist/theme-chalk/bak/common/transition.scss +0 -118
  130. package/dist/theme-chalk/bak/common/var.scss +0 -1476
  131. package/dist/theme-chalk/bak/mixins/_button.scss +0 -224
  132. package/dist/theme-chalk/bak/mixins/_col.scss +0 -38
  133. package/dist/theme-chalk/bak/mixins/_var.scss +0 -55
  134. package/dist/theme-chalk/bak/mixins/config.scss +0 -5
  135. package/dist/theme-chalk/bak/mixins/function.scss +0 -85
  136. package/dist/theme-chalk/bak/mixins/mixins.scss +0 -215
  137. package/dist/theme-chalk/bak/mixins/utils.scss +0 -39
  138. package/dist/theme-chalk/build.scss +0 -64
@@ -0,0 +1,348 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/Carousel/hooks/useCarousel.ts
30
+ var useCarousel_exports = {};
31
+ __export(useCarousel_exports, {
32
+ useCarousel: () => useCarousel
33
+ });
34
+ module.exports = __toCommonJS(useCarousel_exports);
35
+ var import_ahooks = require("ahooks");
36
+ var import_throttle = __toESM(require("lodash/throttle"));
37
+ var import_react = require("react");
38
+ var import_base = require("../../Util/base");
39
+ var THROTTLE_TIME = 300;
40
+ var useCarousel = (props) => {
41
+ const { direction, arrow, height, type, autoplay, loop, interval, pauseOnHover, trigger, initialIndex, onChange } = props;
42
+ const [items, setItem] = (0, import_react.useState)([]);
43
+ const addItem = (item) => setItem((pre) => [...pre, item]);
44
+ const removeItem = (uid) => setItem((pre) => pre.filter((children) => children.uid !== uid));
45
+ const [activeIndex, setActiveIndex] = (0, import_react.useState)(-1);
46
+ const [hover, setHover] = (0, import_react.useState)(false);
47
+ const [containerHeight, setHeight] = (0, import_react.useState)(0);
48
+ const [isTransitioning, setIsTransitioning] = (0, import_react.useState)(false);
49
+ const preActiveIndex = (0, import_ahooks.usePrevious)(activeIndex);
50
+ const timer = (0, import_react.useRef)(null);
51
+ const root = (0, import_react.useRef)();
52
+ const isItemsTwoLength = (0, import_react.useRef)(true);
53
+ const isTransition = (0, import_react.useRef)(false);
54
+ const resizeObserver = (0, import_react.useRef)();
55
+ const isFirstCall = (0, import_react.useRef)(true);
56
+ const itemLen = (0, import_react.useRef)(0);
57
+ const activeIndexRef = (0, import_react.useRef)(-1);
58
+ const isVertical = (0, import_react.useMemo)(() => direction === "vertical", [direction]);
59
+ const arrowDisplay = (0, import_react.useMemo)(() => arrow !== "never" && !isVertical, [arrow, isVertical]);
60
+ const hasLabel = (0, import_react.useMemo)(() => {
61
+ return items.some((item) => {
62
+ var _a, _b, _c;
63
+ return ((_c = (_b = (_a = item.props) == null ? void 0 : _a.label) == null ? void 0 : _b.toString()) == null ? void 0 : _c.length) > 0;
64
+ });
65
+ }, [items]);
66
+ const isCardType = (0, import_react.useMemo)(() => type === "card", [type]);
67
+ const containerStyle = (0, import_react.useMemo)(() => {
68
+ if (height !== "auto") {
69
+ return {
70
+ height
71
+ };
72
+ }
73
+ return {
74
+ height: containerHeight,
75
+ overflow: "hidden"
76
+ };
77
+ }, [containerHeight, height]);
78
+ const resetItemPosition = (0, import_react.useCallback)(
79
+ (oldIndex) => {
80
+ items.forEach((item, index) => {
81
+ item.translateItem(index, activeIndex, oldIndex);
82
+ });
83
+ },
84
+ [activeIndex, items]
85
+ );
86
+ const playSlides = (0, import_react.useCallback)(() => {
87
+ if (!isFirstCall.current && !isTransition.current) {
88
+ isTransition.current = true;
89
+ setIsTransitioning(true);
90
+ }
91
+ isFirstCall.current = false;
92
+ if (activeIndexRef.current < itemLen.current - 1) {
93
+ setActiveIndex((pre) => pre + 1);
94
+ } else if (loop) {
95
+ setActiveIndex(0);
96
+ } else {
97
+ isTransition.current = false;
98
+ setIsTransitioning(false);
99
+ }
100
+ }, [loop]);
101
+ const startTimer = (0, import_react.useCallback)(() => {
102
+ if (interval <= 0 || !autoplay || timer.current) {
103
+ return;
104
+ }
105
+ timer.current = setInterval(() => playSlides(), interval);
106
+ }, [autoplay, interval, playSlides]);
107
+ const pauseTimer = (0, import_react.useCallback)(() => {
108
+ if (timer.current) {
109
+ clearInterval(timer.current);
110
+ timer.current = null;
111
+ }
112
+ }, []);
113
+ const resetTimer = (0, import_react.useCallback)(() => {
114
+ pauseTimer();
115
+ if (!pauseOnHover) {
116
+ startTimer();
117
+ }
118
+ }, [pauseOnHover, pauseTimer, startTimer]);
119
+ const setActiveItem = (0, import_react.useCallback)(
120
+ (index) => {
121
+ if (!isFirstCall.current) {
122
+ isTransition.current = true;
123
+ setIsTransitioning(true);
124
+ }
125
+ isFirstCall.current = false;
126
+ if ((0, import_base.isString)(index)) {
127
+ const filteredItems = items.filter((item) => item.props.name === index);
128
+ if (filteredItems.length > 0) {
129
+ index = items.indexOf(filteredItems[0]);
130
+ }
131
+ }
132
+ index = Number(index);
133
+ if (Number.isNaN(index) || index !== Math.floor(index)) {
134
+ (0, import_base.warning)(false, "component ElCarouselItem: index must be integer.");
135
+ return;
136
+ }
137
+ const itemCount = items.length;
138
+ const oldIndex = activeIndex;
139
+ if (index < 0) {
140
+ setActiveIndex(loop ? itemCount - 1 : 0);
141
+ } else if (index >= itemCount) {
142
+ setActiveIndex(loop ? 0 : itemCount - 1);
143
+ } else {
144
+ setActiveIndex(index);
145
+ }
146
+ if (oldIndex === activeIndex) {
147
+ resetItemPosition(oldIndex);
148
+ }
149
+ resetTimer();
150
+ },
151
+ [activeIndex, isFirstCall, items, loop, resetItemPosition, resetTimer]
152
+ );
153
+ const throttledArrowClick = (0, import_react.useCallback)(
154
+ (index) => {
155
+ setActiveItem(index);
156
+ },
157
+ [setActiveItem]
158
+ );
159
+ const handleIndicatorHover = (0, import_react.useCallback)(
160
+ (index) => {
161
+ if (trigger === "hover" && index !== activeIndex) {
162
+ setActiveIndex(index);
163
+ if (!isFirstCall.current) {
164
+ isTransition.current = true;
165
+ setIsTransitioning(true);
166
+ }
167
+ }
168
+ },
169
+ [activeIndex, isFirstCall, trigger]
170
+ );
171
+ const throttledIndicatorHover = (0, import_react.useCallback)(
172
+ (index) => {
173
+ handleIndicatorHover(index);
174
+ },
175
+ [handleIndicatorHover]
176
+ );
177
+ const isTwoLengthShow = (0, import_react.useCallback)(
178
+ (index) => {
179
+ if (!isItemsTwoLength.current) {
180
+ return true;
181
+ }
182
+ return activeIndex <= 1 ? index <= 1 : index > 1;
183
+ },
184
+ [activeIndex]
185
+ );
186
+ const itemInStage = (0, import_react.useCallback)(
187
+ (item, index) => {
188
+ var _a, _b, _c, _d;
189
+ const itemCount = items.length;
190
+ if (itemCount === 0 || !item.states.inStage) {
191
+ return false;
192
+ }
193
+ const nextItemIndex = index + 1;
194
+ const prevItemIndex = index - 1;
195
+ const lastItemIndex = itemCount - 1;
196
+ const isLastItemActive = items[lastItemIndex].states.active;
197
+ const isFirstItemActive = items[0].states.active;
198
+ const isNextItemActive = (_b = (_a = items[nextItemIndex]) == null ? void 0 : _a.states) == null ? void 0 : _b.active;
199
+ const isPrevItemActive = (_d = (_c = items[prevItemIndex]) == null ? void 0 : _c.states) == null ? void 0 : _d.active;
200
+ if (index === lastItemIndex && isFirstItemActive || isNextItemActive) {
201
+ return "left";
202
+ } else if (index === 0 && isLastItemActive || isPrevItemActive) {
203
+ return "right";
204
+ }
205
+ return false;
206
+ },
207
+ [items]
208
+ );
209
+ const handleMouseEnter = (0, import_react.useCallback)(() => {
210
+ setHover(true);
211
+ if (pauseOnHover) {
212
+ pauseTimer();
213
+ }
214
+ }, [pauseOnHover, pauseTimer]);
215
+ const handleMouseLeave = (0, import_react.useCallback)(() => {
216
+ setHover(false);
217
+ startTimer();
218
+ }, [startTimer]);
219
+ const handleTransitionEnd = (0, import_react.useCallback)(() => {
220
+ isTransition.current = false;
221
+ setIsTransitioning(false);
222
+ }, []);
223
+ const handleButtonEnter = (0, import_react.useCallback)(
224
+ (_arrow) => {
225
+ if (isVertical) {
226
+ return;
227
+ }
228
+ items.forEach((item, index) => {
229
+ if (_arrow === itemInStage(item, index)) {
230
+ item.setState({ hover: true });
231
+ }
232
+ });
233
+ },
234
+ [isVertical, itemInStage, items]
235
+ );
236
+ const handleButtonLeave = (0, import_react.useCallback)(() => {
237
+ if (isVertical) {
238
+ return;
239
+ }
240
+ items.forEach((item) => {
241
+ item.setState({ hover: false });
242
+ });
243
+ }, [isVertical, items]);
244
+ const handleIndicatorClick = (index) => {
245
+ if (index !== activeIndex) {
246
+ if (!isFirstCall.current) {
247
+ isTransition.current = true;
248
+ setIsTransitioning(true);
249
+ }
250
+ }
251
+ setActiveIndex(index);
252
+ };
253
+ const prev = (0, import_react.useCallback)(() => {
254
+ setActiveItem(activeIndex - 1);
255
+ }, [activeIndex, setActiveItem]);
256
+ const next = (0, import_react.useCallback)(() => {
257
+ setActiveItem(activeIndex + 1);
258
+ }, [activeIndex, setActiveItem]);
259
+ const setContainerHeight = (0, import_react.useCallback)(
260
+ (_height) => {
261
+ if (height !== "auto") {
262
+ return;
263
+ }
264
+ setHeight(_height);
265
+ },
266
+ [height]
267
+ );
268
+ (0, import_react.useEffect)(() => {
269
+ activeIndexRef.current = activeIndex;
270
+ resetItemPosition(preActiveIndex);
271
+ let current, _prev;
272
+ if (isItemsTwoLength.current) {
273
+ current = activeIndex % 2;
274
+ _prev = preActiveIndex % 2;
275
+ }
276
+ if (preActiveIndex > -1) {
277
+ onChange == null ? void 0 : onChange(current, _prev);
278
+ }
279
+ }, [activeIndex]);
280
+ (0, import_react.useEffect)(() => {
281
+ setActiveItem(activeIndex);
282
+ }, [loop]);
283
+ (0, import_react.useEffect)(() => {
284
+ resetTimer();
285
+ }, [interval]);
286
+ (0, import_react.useEffect)(() => {
287
+ if (items.length > 0) {
288
+ setActiveItem(initialIndex);
289
+ }
290
+ itemLen.current = items.length;
291
+ isItemsTwoLength.current = (items == null ? void 0 : items.length) === 2 && props.loop && !isCardType;
292
+ }, [items]);
293
+ (0, import_react.useEffect)(() => {
294
+ if (autoplay) {
295
+ startTimer();
296
+ } else {
297
+ pauseTimer();
298
+ }
299
+ }, [autoplay, items.length]);
300
+ (0, import_react.useEffect)(() => {
301
+ if (root.current) {
302
+ resizeObserver.current = new ResizeObserver(() => {
303
+ resetItemPosition();
304
+ });
305
+ resizeObserver.current.observe(root.current);
306
+ startTimer();
307
+ }
308
+ return () => {
309
+ pauseTimer();
310
+ if (resizeObserver.current) {
311
+ resizeObserver.current.disconnect();
312
+ }
313
+ };
314
+ }, []);
315
+ return {
316
+ items,
317
+ addItem,
318
+ removeItem,
319
+ setContainerHeight,
320
+ root,
321
+ activeIndex,
322
+ arrowDisplay,
323
+ hasLabel,
324
+ hover,
325
+ isCardType,
326
+ isTransitioning,
327
+ isVertical,
328
+ containerStyle,
329
+ isItemsTwoLength,
330
+ handleButtonEnter,
331
+ handleTransitionEnd,
332
+ handleButtonLeave,
333
+ handleIndicatorClick,
334
+ handleMouseEnter,
335
+ handleMouseLeave,
336
+ setActiveItem,
337
+ prev,
338
+ next,
339
+ // PlaceholderItem,
340
+ isTwoLengthShow,
341
+ throttledArrowClick: (0, import_throttle.default)(throttledArrowClick, THROTTLE_TIME, { trailing: true }),
342
+ throttledIndicatorHover: (0, import_throttle.default)(throttledIndicatorHover, THROTTLE_TIME)
343
+ };
344
+ };
345
+ // Annotate the CommonJS export names for ESM import in node:
346
+ 0 && (module.exports = {
347
+ useCarousel
348
+ });
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { CarouselItemProps, CarouselItemStates } from '../typings';
3
+ export declare const useCarouselItem: (props: CarouselItemProps) => {
4
+ carouselItemRef: import("react").MutableRefObject<HTMLDivElement>;
5
+ state: CarouselItemStates;
6
+ setState: (_state: Partial<CarouselItemStates>) => void;
7
+ handleItemClick: () => void;
8
+ };
@@ -0,0 +1,161 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/Carousel/hooks/useCarouselItem.ts
30
+ var useCarouselItem_exports = {};
31
+ __export(useCarouselItem_exports, {
32
+ useCarouselItem: () => useCarouselItem
33
+ });
34
+ module.exports = __toCommonJS(useCarouselItem_exports);
35
+ var import_omit = __toESM(require("lodash/omit"));
36
+ var import_react = require("react");
37
+ var import_CarouselContext = require("../CarouselContext");
38
+ var useCarouselItem = (props) => {
39
+ const { isCardType, loop, isVertical, cardScale, root, items, addItem, removeItem, setActiveItem, setContainerHeight } = (0, import_CarouselContext.useCarouselContext)();
40
+ const id = (0, import_react.useId)();
41
+ const carouselItemRef = (0, import_react.useRef)();
42
+ const ref = (0, import_react.useRef)();
43
+ const reducer = (state2, action) => {
44
+ switch (action.type) {
45
+ case "setState":
46
+ return { ...state2, ...action.payload };
47
+ default:
48
+ return state2;
49
+ }
50
+ };
51
+ const [state, dispatch] = (0, import_react.useReducer)(reducer, { ready: false, hover: false, translate: 0, scale: 1, animating: false, active: false, inStage: false });
52
+ const setState = (_state) => dispatch({
53
+ type: "setState",
54
+ payload: _state
55
+ });
56
+ const calcCardTranslate = (0, import_react.useCallback)(
57
+ (index, activeIndex, inStage) => {
58
+ var _a, _b;
59
+ const parentWidth = isVertical ? ((_a = root.current) == null ? void 0 : _a.offsetHeight) || 0 : ((_b = root.current) == null ? void 0 : _b.offsetWidth) || 0;
60
+ if (inStage) {
61
+ return parentWidth * ((2 - cardScale) * (index - activeIndex) + 1) / 4;
62
+ } else if (index < activeIndex) {
63
+ return -(1 + cardScale) * parentWidth / 4;
64
+ } else {
65
+ return (3 + cardScale) * parentWidth / 4;
66
+ }
67
+ },
68
+ [cardScale, isVertical, root]
69
+ );
70
+ const calcTranslate = (0, import_react.useCallback)(
71
+ (index, activeIndex) => {
72
+ const rootEl = root.current;
73
+ if (!rootEl) {
74
+ return 0;
75
+ }
76
+ const distance = (isVertical ? rootEl.offsetHeight : rootEl.offsetWidth) || 0;
77
+ return distance * (index - activeIndex);
78
+ },
79
+ [isVertical, root]
80
+ );
81
+ const translateItem = (0, import_react.useCallback)(
82
+ (index, activeIndex, oldIndex) => {
83
+ const carouselItemLength = items.length ?? Number.NaN;
84
+ const isActive = index === activeIndex;
85
+ if (!isCardType && oldIndex != void 0) {
86
+ setState({ animating: isActive || index === oldIndex });
87
+ }
88
+ if (!isActive && carouselItemLength > 2 && loop) {
89
+ index = processIndex(index, activeIndex, carouselItemLength);
90
+ }
91
+ setState({ active: isActive });
92
+ if (isCardType) {
93
+ const inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
94
+ setState({
95
+ inStage,
96
+ translate: calcCardTranslate(index, activeIndex, inStage),
97
+ scale: isActive ? 1 : cardScale
98
+ });
99
+ } else {
100
+ setState({
101
+ translate: calcTranslate(index, activeIndex)
102
+ });
103
+ }
104
+ setState({
105
+ ready: true
106
+ });
107
+ if (isActive && carouselItemRef.current) {
108
+ setContainerHeight(carouselItemRef.current.offsetHeight);
109
+ }
110
+ },
111
+ [calcCardTranslate, calcTranslate, cardScale, isCardType, items, loop, setContainerHeight]
112
+ );
113
+ const handleItemClick = (0, import_react.useCallback)(() => {
114
+ if (isCardType) {
115
+ const index = items.findIndex(({ uid }) => uid === id);
116
+ setActiveItem(index);
117
+ }
118
+ }, [id, isCardType, items, setActiveItem]);
119
+ (0, import_react.useImperativeHandle)(ref, () => ({
120
+ translateItem
121
+ }));
122
+ (0, import_react.useEffect)(() => {
123
+ addItem({
124
+ props: (0, import_omit.default)(props, "children"),
125
+ states: state,
126
+ setState,
127
+ uid: id,
128
+ translateItem: (...args) => {
129
+ var _a;
130
+ return (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.translateItem(...args);
131
+ }
132
+ });
133
+ return () => removeItem(id);
134
+ }, []);
135
+ return {
136
+ carouselItemRef,
137
+ state,
138
+ setState,
139
+ handleItemClick
140
+ };
141
+ };
142
+ var processIndex = (index, activeIndex, length) => {
143
+ const lastItemIndex = length - 1;
144
+ const prevItemIndex = activeIndex - 1;
145
+ const nextItemIndex = activeIndex + 1;
146
+ const halfItemIndex = length / 2;
147
+ if (activeIndex === 0 && index === lastItemIndex) {
148
+ return -1;
149
+ } else if (activeIndex === lastItemIndex && index === 0) {
150
+ return length;
151
+ } else if (index < prevItemIndex && activeIndex - index >= halfItemIndex) {
152
+ return length + 1;
153
+ } else if (index > nextItemIndex && index - activeIndex >= halfItemIndex) {
154
+ return -2;
155
+ }
156
+ return index;
157
+ };
158
+ // Annotate the CommonJS export names for ESM import in node:
159
+ 0 && (module.exports = {
160
+ useCarouselItem
161
+ });
@@ -0,0 +1,3 @@
1
+ export { default as Carousel } from './Carousel';
2
+ export { default as CarouselItem } from './CarouselItem';
3
+ export type { CarouselItemProps, CarouselProps, CarouselRef } from './typings';
@@ -26,14 +26,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
26
26
  ));
27
27
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
28
 
29
- // src/VirtualList/index.ts
30
- var VirtualList_exports = {};
31
- __export(VirtualList_exports, {
32
- VirtualList: () => import_VirtualList.default
29
+ // src/Carousel/index.ts
30
+ var Carousel_exports = {};
31
+ __export(Carousel_exports, {
32
+ Carousel: () => import_Carousel.default,
33
+ CarouselItem: () => import_CarouselItem.default
33
34
  });
34
- module.exports = __toCommonJS(VirtualList_exports);
35
- var import_VirtualList = __toESM(require("./VirtualList"));
35
+ module.exports = __toCommonJS(Carousel_exports);
36
+ var import_Carousel = __toESM(require("./Carousel"));
37
+ var import_CarouselItem = __toESM(require("./CarouselItem"));
36
38
  // Annotate the CommonJS export names for ESM import in node:
37
39
  0 && (module.exports = {
38
- VirtualList
40
+ Carousel,
41
+ CarouselItem
39
42
  });
@@ -0,0 +1,83 @@
1
+ import { RefObject } from 'react';
2
+ import { BaseProps, NativeProps } from '../types/common';
3
+ export interface CarouselProps extends BaseProps, NativeProps {
4
+ /** carousel 的高度 */
5
+ height?: string | number;
6
+ /** 初始状态激活的幻灯片的索引,从 0 开始 */
7
+ initialIndex?: number;
8
+ /** 指示器的触发方式 */
9
+ trigger?: 'hover' | 'click';
10
+ /** 是否自动切换 */
11
+ autoplay?: boolean;
12
+ /** 自动切换的时间间隔,单位为毫秒 */
13
+ interval?: number;
14
+ /** 指示器的位置 */
15
+ indicatorPosition?: '' | 'none' | 'outside';
16
+ /** 切换箭头的显示时机 */
17
+ arrow?: 'always' | 'hover' | 'never';
18
+ /** carousel 的类型 */
19
+ type?: '' | 'card';
20
+ /** 当 type 为 card时,二级卡的缩放大小 */
21
+ cardScale?: number;
22
+ /** 是否循环显示 */
23
+ loop?: boolean;
24
+ /** 展示的方向 */
25
+ direction?: 'horizontal' | 'vertical';
26
+ /** 鼠标悬浮时暂停自动切换 */
27
+ pauseOnHover?: boolean;
28
+ /** 添加动态模糊以给走马灯注入活力和流畅性。 */
29
+ motionBlur?: boolean;
30
+ /** 当前展示的幻灯片切换时触发,它有两个参数, 一个是新幻灯片的索引,另一个是旧幻灯片的索引 */
31
+ onChange?: (current: number, prev: number) => boolean;
32
+ }
33
+ export interface CarouselItemProps extends BaseProps, NativeProps<'--el-carousel-arrow-font-size' | '--el-carousel-arrow-size' | '--el-carousel-arrow-background' | '--el-carousel-arrow-hover-background' | '--el-carousel-indicator-width' | '--el-carousel-indicator-height' | '--el-carousel-indicator-padding-horizontal' | '--el-carousel-indicator-padding-vertical' | '--el-carousel-indicator-out-color'> {
34
+ /** 幻灯片的名字,可用作 setActiveItem 的参数 */
35
+ name?: string;
36
+ /** 该幻灯片所对应指示器的文本 */
37
+ label?: string;
38
+ }
39
+ export type CarouselRef = {
40
+ /** 当前幻灯片的索引 */
41
+ activeIndex?: number;
42
+ /** 手动切换幻灯片,传入需要切换的幻灯片的索引,从 0 开始;或相应 elCarouselItem 的 name 属性值 */
43
+ setActiveItem?: (index: string | number) => void;
44
+ /** 切换至上一张幻灯片 */
45
+ prev?: () => void;
46
+ /** 切换至下一张幻灯片 */
47
+ next?: () => void;
48
+ };
49
+ export type CarouselItemStates = {
50
+ hover: boolean;
51
+ translate: number;
52
+ scale: number;
53
+ active: boolean;
54
+ ready: boolean;
55
+ inStage: boolean;
56
+ animating: boolean;
57
+ };
58
+ export type CarouselItemContext = {
59
+ props: CarouselItemProps;
60
+ states: CarouselItemStates;
61
+ setState: (_state: Partial<CarouselItemStates>) => void;
62
+ uid: string;
63
+ translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
64
+ };
65
+ export type CarouselContextProps = {
66
+ root: RefObject<HTMLDivElement>;
67
+ isCardType: boolean;
68
+ isVertical: boolean;
69
+ items: CarouselItemContext[];
70
+ loop: boolean;
71
+ cardScale: number;
72
+ addItem: (child: CarouselItemContext) => void;
73
+ removeItem: (uid: string) => void;
74
+ setActiveItem: (index: number | string) => void;
75
+ setContainerHeight: (height: number) => void;
76
+ };
77
+ export interface CarouselItemAction {
78
+ type: 'setState';
79
+ payload: Partial<CarouselItemStates>;
80
+ }
81
+ export type CarouselItemRef = {
82
+ translateItem: (index: number, activeIndex: number, oldIndex?: number) => void;
83
+ };
@@ -12,6 +12,6 @@ var __copyProps = (to, from, except, desc) => {
12
12
  };
13
13
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
14
 
15
- // src/VirtualList/interface.ts
16
- var interface_exports = {};
17
- module.exports = __toCommonJS(interface_exports);
15
+ // src/Carousel/typings.ts
16
+ var typings_exports = {};
17
+ module.exports = __toCommonJS(typings_exports);