@sheinx/base 3.9.0-beta.28 → 3.9.0-beta.29

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 (7) hide show
  1. package/cjs/animation-list/animation-list.d.ts +23 -0
  2. package/cjs/animation-list/animation-list.d.ts.map +1 -1
  3. package/cjs/animation-list/animation-list.js +63 -3
  4. package/esm/animation-list/animation-list.d.ts +23 -0
  5. package/esm/animation-list/animation-list.d.ts.map +1 -1
  6. package/esm/animation-list/animation-list.js +63 -3
  7. package/package.json +2 -2
package/cjs/animation-list/animation-list.d.ts CHANGED
@@ -1,4 +1,27 @@
1
1
  import { AnimationListProps } from './animation-list.type';
2
+ /**
3
+ * AnimationList - 动画列表组件
4
+ *
5
+ * 动画状态流程:
6
+ *
7
+ * 展开动画 (show: false -> true):
8
+ * beforeEnter: 设置初始状态(display, height: 0, opacity: 0 等)
9
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
10
+ * enter: 应用过渡动画(height: ${height}px, opacity: 1 等)
11
+ * ↓ 等待 durationNum(240ms) - 动画执行
12
+ * afterEnter: 清理动画状态(height: auto, pointer-events: initial)
13
+ *
14
+ * 收起动画 (show: true -> false):
15
+ * beforeLeave: 固定当前状态(height: ${height}px, pointer-events: none)
16
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
17
+ * leave: 应用过渡动画(height: 0, opacity: 0 等)
18
+ * ↓ 等待 durationNum(240ms) - 动画执行
19
+ * afterLeave: 清理并隐藏(display: none, pointer-events: initial)
20
+ *
21
+ * pointer-events 控制:
22
+ * - beforeLeave: 设置为 'none',防止动画过程中的误操作
23
+ * - afterEnter/afterLeave: 恢复为 'initial',确保动画结束后可正常交互
24
+ */
2
25
  declare const AnimationList: (props: AnimationListProps) => import("react/jsx-runtime").JSX.Element;
3
26
  export default AnimationList;
4
27
  //# sourceMappingURL=animation-list.d.ts.map
package/cjs/animation-list/animation-list.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animation-list.d.ts","sourceRoot":"","sources":["animation-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAe3D,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA8P/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"animation-list.d.ts","sourceRoot":"","sources":["animation-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAgB3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA0R/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/cjs/animation-list/animation-list.js CHANGED
@@ -35,6 +35,30 @@ var getDuration = function getDuration(duration) {
35
35
  }
36
36
  };
37
37
  var mm = 30;
38
+
39
+ /**
40
+ * AnimationList - 动画列表组件
41
+ *
42
+ * 动画状态流程:
43
+ *
44
+ * 展开动画 (show: false -> true):
45
+ * beforeEnter: 设置初始状态(display, height: 0, opacity: 0 等)
46
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
47
+ * enter: 应用过渡动画(height: ${height}px, opacity: 1 等)
48
+ * ↓ 等待 durationNum(240ms) - 动画执行
49
+ * afterEnter: 清理动画状态(height: auto, pointer-events: initial)
50
+ *
51
+ * 收起动画 (show: true -> false):
52
+ * beforeLeave: 固定当前状态(height: ${height}px, pointer-events: none)
53
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
54
+ * leave: 应用过渡动画(height: 0, opacity: 0 等)
55
+ * ↓ 等待 durationNum(240ms) - 动画执行
56
+ * afterLeave: 清理并隐藏(display: none, pointer-events: initial)
57
+ *
58
+ * pointer-events 控制:
59
+ * - beforeLeave: 设置为 'none',防止动画过程中的误操作
60
+ * - afterEnter/afterLeave: 恢复为 'initial',确保动画结束后可正常交互
61
+ */
38
62
  var AnimationList = function AnimationList(props) {
39
63
  var _props$display = props.display,
40
64
  display = _props$display === void 0 ? 'block' : _props$display,
@@ -113,6 +137,11 @@ var AnimationList = function AnimationList(props) {
113
137
  width: 0
114
138
  };
115
139
  };
140
+
141
+ /**
142
+ * 展开动画阶段1: 设置初始状态
143
+ * 设置 display 显示元素,并将动画属性设为起始值(如 height: 0)
144
+ */
116
145
  var beforeEnter = function beforeEnter() {
117
146
  var newStyle = {
118
147
  display: display
@@ -139,6 +168,11 @@ var AnimationList = function AnimationList(props) {
139
168
  return _objectSpread(_objectSpread({}, s), newStyle);
140
169
  });
141
170
  };
171
+
172
+ /**
173
+ * 展开动画阶段2: 执行过渡动画
174
+ * 添加 transition 并将动画属性过渡到目标值
175
+ */
142
176
  var enter = function enter() {
143
177
  var newStyle = {
144
178
  transition: transition
@@ -158,8 +192,15 @@ var AnimationList = function AnimationList(props) {
158
192
  });
159
193
  setStatus('enter');
160
194
  };
195
+
196
+ /**
197
+ * 展开动画阶段3: 清理动画状态
198
+ * 移除固定尺寸,恢复自动布局,恢复交互能力
199
+ */
161
200
  var afterEnter = function afterEnter() {
162
- var newStyle = {};
201
+ var newStyle = {
202
+ pointerEvents: 'initial'
203
+ };
163
204
  if (type.indexOf('collapse') >= 0) {
164
205
  newStyle.height = 'auto';
165
206
  newStyle.overflow = '';
@@ -170,9 +211,16 @@ var AnimationList = function AnimationList(props) {
170
211
  setStatus('afterEnter');
171
212
  onAnimationAfterEnter === null || onAnimationAfterEnter === void 0 || onAnimationAfterEnter();
172
213
  };
214
+
215
+ /**
216
+ * 收起动画阶段1: 固定当前状态
217
+ * 禁用交互,固定当前高度,准备执行收起动画
218
+ */
173
219
  var beforeLeave = function beforeLeave() {
174
220
  var el = ref.current;
175
- var newStyle = {};
221
+ var newStyle = {
222
+ pointerEvents: 'none'
223
+ };
176
224
  if (type.indexOf('collapse') >= 0) {
177
225
  context.height = el.offsetHeight;
178
226
  newStyle.height = "".concat(context.height, "px");
@@ -190,6 +238,11 @@ var AnimationList = function AnimationList(props) {
190
238
  });
191
239
  setStatus('beforeLeave');
192
240
  };
241
+
242
+ /**
243
+ * 收起动画阶段2: 执行过渡动画
244
+ * 添加 transition 并将动画属性过渡到收起状态(如 height: 0)
245
+ */
193
246
  var leave = function leave() {
194
247
  var newStyle = {
195
248
  transition: transition
@@ -209,8 +262,15 @@ var AnimationList = function AnimationList(props) {
209
262
  });
210
263
  setStatus('leave');
211
264
  };
265
+
266
+ /**
267
+ * 收起动画阶段3: 清理并隐藏
268
+ * 恢复交互能力,清理动画状态,设置 display: none 完全隐藏元素
269
+ */
212
270
  var afterLeave = function afterLeave() {
213
- var newStyle = {};
271
+ var newStyle = {
272
+ pointerEvents: 'initial'
273
+ };
214
274
  if (type.indexOf('collapse') >= 0) {
215
275
  newStyle.height = 'auto';
216
276
  newStyle.overflow = '';
package/esm/animation-list/animation-list.d.ts CHANGED
@@ -1,4 +1,27 @@
1
1
  import { AnimationListProps } from './animation-list.type';
2
+ /**
3
+ * AnimationList - 动画列表组件
4
+ *
5
+ * 动画状态流程:
6
+ *
7
+ * 展开动画 (show: false -> true):
8
+ * beforeEnter: 设置初始状态(display, height: 0, opacity: 0 等)
9
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
10
+ * enter: 应用过渡动画(height: ${height}px, opacity: 1 等)
11
+ * ↓ 等待 durationNum(240ms) - 动画执行
12
+ * afterEnter: 清理动画状态(height: auto, pointer-events: initial)
13
+ *
14
+ * 收起动画 (show: true -> false):
15
+ * beforeLeave: 固定当前状态(height: ${height}px, pointer-events: none)
16
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
17
+ * leave: 应用过渡动画(height: 0, opacity: 0 等)
18
+ * ↓ 等待 durationNum(240ms) - 动画执行
19
+ * afterLeave: 清理并隐藏(display: none, pointer-events: initial)
20
+ *
21
+ * pointer-events 控制:
22
+ * - beforeLeave: 设置为 'none',防止动画过程中的误操作
23
+ * - afterEnter/afterLeave: 恢复为 'initial',确保动画结束后可正常交互
24
+ */
2
25
  declare const AnimationList: (props: AnimationListProps) => import("react/jsx-runtime").JSX.Element;
3
26
  export default AnimationList;
4
27
  //# sourceMappingURL=animation-list.d.ts.map
package/esm/animation-list/animation-list.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animation-list.d.ts","sourceRoot":"","sources":["animation-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAe3D,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA8P/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"animation-list.d.ts","sourceRoot":"","sources":["animation-list.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAgB3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,aAAa,UAAW,kBAAkB,4CA0R/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/esm/animation-list/animation-list.js CHANGED
@@ -27,6 +27,30 @@ var getDuration = function getDuration(duration) {
27
27
  }
28
28
  };
29
29
  var mm = 30;
30
+
31
+ /**
32
+ * AnimationList - 动画列表组件
33
+ *
34
+ * 动画状态流程:
35
+ *
36
+ * 展开动画 (show: false -> true):
37
+ * beforeEnter: 设置初始状态(display, height: 0, opacity: 0 等)
38
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
39
+ * enter: 应用过渡动画(height: ${height}px, opacity: 1 等)
40
+ * ↓ 等待 durationNum(240ms) - 动画执行
41
+ * afterEnter: 清理动画状态(height: auto, pointer-events: initial)
42
+ *
43
+ * 收起动画 (show: true -> false):
44
+ * beforeLeave: 固定当前状态(height: ${height}px, pointer-events: none)
45
+ * ↓ 等待 mm(30ms) - 触发浏览器重绘
46
+ * leave: 应用过渡动画(height: 0, opacity: 0 等)
47
+ * ↓ 等待 durationNum(240ms) - 动画执行
48
+ * afterLeave: 清理并隐藏(display: none, pointer-events: initial)
49
+ *
50
+ * pointer-events 控制:
51
+ * - beforeLeave: 设置为 'none',防止动画过程中的误操作
52
+ * - afterEnter/afterLeave: 恢复为 'initial',确保动画结束后可正常交互
53
+ */
30
54
  var AnimationList = function AnimationList(props) {
31
55
  var _props$display = props.display,
32
56
  display = _props$display === void 0 ? 'block' : _props$display,
@@ -105,6 +129,11 @@ var AnimationList = function AnimationList(props) {
105
129
  width: 0
106
130
  };
107
131
  };
132
+
133
+ /**
134
+ * 展开动画阶段1: 设置初始状态
135
+ * 设置 display 显示元素,并将动画属性设为起始值(如 height: 0)
136
+ */
108
137
  var beforeEnter = function beforeEnter() {
109
138
  var newStyle = {
110
139
  display: display
@@ -131,6 +160,11 @@ var AnimationList = function AnimationList(props) {
131
160
  return _objectSpread(_objectSpread({}, s), newStyle);
132
161
  });
133
162
  };
163
+
164
+ /**
165
+ * 展开动画阶段2: 执行过渡动画
166
+ * 添加 transition 并将动画属性过渡到目标值
167
+ */
134
168
  var enter = function enter() {
135
169
  var newStyle = {
136
170
  transition: transition
@@ -150,8 +184,15 @@ var AnimationList = function AnimationList(props) {
150
184
  });
151
185
  setStatus('enter');
152
186
  };
187
+
188
+ /**
189
+ * 展开动画阶段3: 清理动画状态
190
+ * 移除固定尺寸,恢复自动布局,恢复交互能力
191
+ */
153
192
  var afterEnter = function afterEnter() {
154
- var newStyle = {};
193
+ var newStyle = {
194
+ pointerEvents: 'initial'
195
+ };
155
196
  if (type.indexOf('collapse') >= 0) {
156
197
  newStyle.height = 'auto';
157
198
  newStyle.overflow = '';
@@ -162,9 +203,16 @@ var AnimationList = function AnimationList(props) {
162
203
  setStatus('afterEnter');
163
204
  onAnimationAfterEnter === null || onAnimationAfterEnter === void 0 || onAnimationAfterEnter();
164
205
  };
206
+
207
+ /**
208
+ * 收起动画阶段1: 固定当前状态
209
+ * 禁用交互,固定当前高度,准备执行收起动画
210
+ */
165
211
  var beforeLeave = function beforeLeave() {
166
212
  var el = ref.current;
167
- var newStyle = {};
213
+ var newStyle = {
214
+ pointerEvents: 'none'
215
+ };
168
216
  if (type.indexOf('collapse') >= 0) {
169
217
  context.height = el.offsetHeight;
170
218
  newStyle.height = "".concat(context.height, "px");
@@ -182,6 +230,11 @@ var AnimationList = function AnimationList(props) {
182
230
  });
183
231
  setStatus('beforeLeave');
184
232
  };
233
+
234
+ /**
235
+ * 收起动画阶段2: 执行过渡动画
236
+ * 添加 transition 并将动画属性过渡到收起状态(如 height: 0)
237
+ */
185
238
  var leave = function leave() {
186
239
  var newStyle = {
187
240
  transition: transition
@@ -201,8 +254,15 @@ var AnimationList = function AnimationList(props) {
201
254
  });
202
255
  setStatus('leave');
203
256
  };
257
+
258
+ /**
259
+ * 收起动画阶段3: 清理并隐藏
260
+ * 恢复交互能力,清理动画状态,设置 display: none 完全隐藏元素
261
+ */
204
262
  var afterLeave = function afterLeave() {
205
- var newStyle = {};
263
+ var newStyle = {
264
+ pointerEvents: 'initial'
265
+ };
206
266
  if (type.indexOf('collapse') >= 0) {
207
267
  newStyle.height = 'auto';
208
268
  newStyle.overflow = '';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sheinx/base",
3
- "version": "3.9.0-beta.28",
3
+ "version": "3.9.0-beta.29",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -10,7 +10,7 @@
10
10
  "module": "./esm/index.js",
11
11
  "typings": "./cjs/index.d.ts",
12
12
  "dependencies": {
13
- "@sheinx/hooks": "3.9.0-beta.28",
13
+ "@sheinx/hooks": "3.9.0-beta.29",
14
14
  "immer": "^10.0.0",
15
15
  "classnames": "^2.0.0",
16
16
  "@shined/reactive": "^0.3.3"