react-av-timeline 1.2.3 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +53 -19
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +205 -167
  4. package/dist/utils.d.ts +5 -6
  5. package/package.json +45 -35
package/README.md CHANGED
@@ -2,14 +2,34 @@
2
2
 
3
3
  一根时间线
4
4
 
5
+ ![badge](https://cnb.cool/arsrna/os/react-timeline/-/badge/git/latest/testing/unit/coverage-pr)
6
+
7
+ ![badge](https://cnb.cool/arsrna/os/react-timeline/-/badge/git/latest/testing/unit/coverage)
8
+
9
+ ![badge](https://cnb.cool/arsrna/os/react-timeline/-/badge/git/latest/ci/status/push)
10
+
11
+ ![badge](https://cnb.cool/arsrna/os/react-timeline/-/badge/git/latest/ci/status/tag_push)
12
+
5
13
  ![](image/index.png)
6
14
 
15
+ # Breaking Changes
16
+
17
+ 2.0以后，数据结构发生改变，需要重新更新代码
18
+
19
+ 同时之后项目使用Vibe Coding，实现功能请参考`.trae/commands/code.md`
20
+
21
+ 主要在时间轴数据结构上，以前的结构导致最后一个时间点的内容展示异常，所以现在加入了起始、结束时间点，时间是绝对的，也就是一个时间点内可以有多个轴共存。
22
+
7
23
  ## 安装
8
24
 
9
25
  ```bash
10
- npm install react-av-timeline
26
+ bun i react-av-timeline
27
+ # 或者npm i react-av-timeline
11
28
  ```
12
29
 
30
+ ## demo
31
+ 点击云原生开发后，运行`bun dev`
32
+
13
33
  ## 使用
14
34
 
15
35
  首先引入组件，由于css未注入，需要手动引入css
@@ -78,17 +98,17 @@ import 'react-av-timeline/dist/index.css'
78
98
  ### 基本参数
79
99
  ````typescript
80
100
  interface PropsType {
81
- /**时间轴 */
101
+ /**时间轴数据 */
82
102
  items: itemsType[],
83
- /**时间轴样式 */
103
+ /**每个时间块的统一样式 */
84
104
  itemStyle?: CSSProperties,
85
- /**当前时间点 */
105
+ /**当前播放/指示的时间点 */
86
106
  currentTime: number,
87
- /**总时长 */
107
+ /**总时长（决定了时间轴的总长度基准） */
88
108
  totalTime: number,
89
- /**缩放比例 */
109
+ /**缩放比例（默认 1） */
90
110
  scale?: number,
91
- /**时间轴指示器属性 */
111
+ /**时间轴指示器（中线）的 HTML 属性 */
92
112
  indicator?: HTMLAttributes<HTMLDivElement>
93
113
  }
94
114
  ````
@@ -96,23 +116,37 @@ interface PropsType {
96
116
  ### itemsType
97
117
  ````typescript
98
118
  interface itemsType {
99
- /**时间点 */
100
- time: number,
101
- /**该点对应的样式 */
119
+ /**
120
+ * 时间点定义：
121
+ * - [start, end]: 明确的起止时间范围
122
+ * - number: 仅起始时间，结束时间默认为下一个 item 的起始时间或 totalTime
123
+ */
124
+ time: [number, number] | number,
125
+ /** 该时间块对应的自定义样式 */
102
126
  style?: CSSProperties,
103
- /**该点对应的文字 */
104
- content?: ReactNode
127
+ /** 该时间块对应的内容（ReactNode） */
128
+ content?: ReactNode,
129
+ /**
130
+ * 显示层级（仅水平时间轴有效）：
131
+ * 指定该元素显示在第几行。如果不指定，系统将自动计算不重叠的最小层级。
132
+ */
133
+ level?: number
105
134
  }
106
135
  ````
107
136
 
108
- ## 垂直时间线
137
+ ## 垂直时间线 (Vertical)
138
+ 垂直时间线除了通用参数外，还支持以下扩展参数：
109
139
  ````typescript
110
- PropsType & {
111
- /**保留前几个项目 */
112
- prev?: number
113
- /**距离左边距 */
140
+ {
141
+ /** 距离左侧指示器的保留项目数：当时间轴过去后，保留前几个项目不消失 */
142
+ prev?: number,
143
+ /** 指示器（中线）距离左侧的百分比位置（默认 10） */
114
144
  left?: number,
115
- /**总高度 */
145
+ /** 时间轴容器的总高度 */
116
146
  height?: CSSProperties['height']
117
147
  }
118
- ````
148
+ ````
149
+
150
+ ## 重叠规则 (Level)
151
+ - **水平模式**：当多个 items 时间重叠时，系统会自动将它们纵向排列。你可以通过 `level` 属性手动强制指定某个 item 所在的行数（Level 0 为最上方）。
152
+ - **垂直模式**：垂直时间轴**不受 `level` 影响**。它始终保持每行一个 item，并根据时间进度实现自动消失和后续元素的向上补位。
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- ._timeline_100yd_1{position:relative;overflow:clip;width:100%}._timeline-items_100yd_6{transform:translate(var(--translate));display:flex;transition:all .13s;height:100%;width:100%}._timeline-item_100yd_6{display:flex;align-items:center;justify-content:center;color:#000;background:var(--bg);flex-shrink:0;border-right:2px solid white;box-sizing:border-box;white-space:nowrap}._timeline-indicator_100yd_24{z-index:1;position:absolute;top:0;left:50%;background-color:#000;transform:translate(-50%);width:3px;opacity:.4;height:100%}._timeline_212s7_1{overflow:clip;position:relative;height:200px}._timeline-items_212s7_6{transform:translate(var(--translate));display:flex;flex-direction:column;transition:all .13s}._timeline-item_212s7_6{background:var(--bg);position:relative;display:flex;justify-content:center;align-items:center;white-space:nowrap}._timeline-indicator_212s7_20{z-index:1;position:absolute;top:0;background-color:#000;width:3px;opacity:.4;height:100%}
1
+ ._timeline_x6ik7_1{position:relative;overflow:clip;width:100%}._timeline-items_x6ik7_6{position:relative;transform:translate(var(--translate));transition:all .13s;width:100%}._timeline-item_x6ik7_6{position:absolute;display:flex;align-items:center;justify-content:center;color:#000;background:var(--bg);flex-shrink:0;border-right:2px solid white;box-sizing:border-box;white-space:nowrap;height:40px;top:0}._timeline-indicator_x6ik7_26{z-index:1;position:absolute;top:0;left:50%;background-color:#000;transform:translate(-50%);width:3px;opacity:.4;height:100%}._timeline_kp8su_1{overflow:clip;position:relative;height:200px}._timeline-items_kp8su_6{position:relative;transform:translate(var(--translate));transition:all .13s;height:100%;width:100%}._timeline-item_kp8su_6{background:var(--bg);position:absolute;display:flex;justify-content:center;align-items:center;white-space:nowrap;height:35px;color:#fff;padding:0 10px;box-sizing:border-box}._timeline-indicator_kp8su_25{z-index:1;position:absolute;top:0;background-color:#000;width:3px;opacity:.4;height:100%}
package/dist/index.js CHANGED
@@ -1,122 +1,122 @@
1
- import ae from "react";
2
- var g = { exports: {} }, y = {};
3
- var q;
4
- function oe() {
5
- if (q) return y;
6
- q = 1;
7
- var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
8
- function i(l, u, c) {
9
- var m = null;
10
- if (c !== void 0 && (m = "" + c), u.key !== void 0 && (m = "" + u.key), "key" in u) {
11
- c = {};
12
- for (var f in u)
13
- f !== "key" && (c[f] = u[f]);
14
- } else c = u;
15
- return u = c.ref, {
16
- $$typeof: t,
17
- type: l,
18
- key: m,
19
- ref: u !== void 0 ? u : null,
20
- props: c
1
+ import ne from "react";
2
+ var g = { exports: {} }, T = {};
3
+ var W;
4
+ function ae() {
5
+ if (W) return T;
6
+ W = 1;
7
+ var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), p = /* @__PURE__ */ Symbol.for("react.fragment");
8
+ function u(_, f, m) {
9
+ var b = null;
10
+ if (m !== void 0 && (b = "" + m), f.key !== void 0 && (b = "" + f.key), "key" in f) {
11
+ m = {};
12
+ for (var v in f)
13
+ v !== "key" && (m[v] = f[v]);
14
+ } else m = f;
15
+ return f = m.ref, {
16
+ $$typeof: c,
17
+ type: _,
18
+ key: b,
19
+ ref: f !== void 0 ? f : null,
20
+ props: m
21
21
  };
22
22
  }
23
- return y.Fragment = n, y.jsx = i, y.jsxs = i, y;
23
+ return T.Fragment = p, T.jsx = u, T.jsxs = u, T;
24
24
  }
25
- var T = {};
26
- var J;
27
- function se() {
28
- return J || (J = 1, process.env.NODE_ENV !== "production" && (function() {
29
- function t(e) {
25
+ var x = {};
26
+ var U;
27
+ function oe() {
28
+ return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
29
+ function c(e) {
30
30
  if (e == null) return null;
31
31
  if (typeof e == "function")
32
- return e.$$typeof === re ? null : e.displayName || e.name || null;
32
+ return e.$$typeof === ee ? null : e.displayName || e.name || null;
33
33
  if (typeof e == "string") return e;
34
34
  switch (e) {
35
- case k:
35
+ case O:
36
36
  return "Fragment";
37
- case N:
37
+ case z:
38
38
  return "Profiler";
39
- case S:
39
+ case J:
40
40
  return "StrictMode";
41
- case Z:
41
+ case H:
42
42
  return "Suspense";
43
- case Q:
43
+ case Z:
44
44
  return "SuspenseList";
45
- case ee:
45
+ case K:
46
46
  return "Activity";
47
47
  }
48
48
  if (typeof e == "object")
49
49
  switch (typeof e.tag == "number" && console.error(
50
50
  "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
51
51
  ), e.$$typeof) {
52
- case x:
52
+ case k:
53
53
  return "Portal";
54
- case B:
55
- return e.displayName || "Context";
56
54
  case X:
55
+ return e.displayName || "Context";
56
+ case G:
57
57
  return (e._context.displayName || "Context") + ".Consumer";
58
- case H:
58
+ case B:
59
59
  var r = e.render;
60
60
  return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
61
- case K:
62
- return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
63
- case P:
61
+ case Q:
62
+ return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
63
+ case S:
64
64
  r = e._payload, e = e._init;
65
65
  try {
66
- return t(e(r));
66
+ return c(e(r));
67
67
  } catch {
68
68
  }
69
69
  }
70
70
  return null;
71
71
  }
72
- function n(e) {
72
+ function p(e) {
73
73
  return "" + e;
74
74
  }
75
- function i(e) {
75
+ function u(e) {
76
76
  try {
77
- n(e);
77
+ p(e);
78
78
  var r = !1;
79
79
  } catch {
80
80
  r = !0;
81
81
  }
82
82
  if (r) {
83
83
  r = console;
84
- var a = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
84
+ var a = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
85
85
  return a.call(
86
86
  r,
87
87
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
88
- o
89
- ), n(e);
88
+ s
89
+ ), p(e);
90
90
  }
91
91
  }
92
- function l(e) {
93
- if (e === k) return "<>";
94
- if (typeof e == "object" && e !== null && e.$$typeof === P)
92
+ function _(e) {
93
+ if (e === O) return "<>";
94
+ if (typeof e == "object" && e !== null && e.$$typeof === S)
95
95
  return "<...>";
96
96
  try {
97
- var r = t(e);
97
+ var r = c(e);
98
98
  return r ? "<" + r + ">" : "<...>";
99
99
  } catch {
100
100
  return "<...>";
101
101
  }
102
102
  }
103
- function u() {
104
- var e = $.A;
103
+ function f() {
104
+ var e = P.A;
105
105
  return e === null ? null : e.getOwner();
106
106
  }
107
- function c() {
107
+ function m() {
108
108
  return Error("react-stack-top-frame");
109
109
  }
110
- function m(e) {
110
+ function b(e) {
111
111
  if (I.call(e, "key")) {
112
112
  var r = Object.getOwnPropertyDescriptor(e, "key").get;
113
113
  if (r && r.isReactWarning) return !1;
114
114
  }
115
115
  return e.key !== void 0;
116
116
  }
117
- function f(e, r) {
117
+ function v(e, r) {
118
118
  function a() {
119
- F || (F = !0, console.error(
119
+ Y || (Y = !0, console.error(
120
120
  "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
121
121
  r
122
122
  ));
@@ -126,23 +126,23 @@ function se() {
126
126
  configurable: !0
127
127
  });
128
128
  }
129
- function E() {
130
- var e = t(this.type);
131
- return L[e] || (L[e] = !0, console.error(
129
+ function R() {
130
+ var e = c(this.type);
131
+ return M[e] || (M[e] = !0, console.error(
132
132
  "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
133
133
  )), e = this.props.ref, e !== void 0 ? e : null;
134
134
  }
135
- function R(e, r, a, o, A, Y) {
136
- var s = a.ref;
135
+ function n(e, r, a, s, A, $) {
136
+ var l = a.ref;
137
137
  return e = {
138
- $$typeof: h,
138
+ $$typeof: d,
139
139
  type: e,
140
140
  key: r,
141
141
  props: a,
142
- _owner: o
143
- }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
142
+ _owner: s
143
+ }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
144
144
  enumerable: !1,
145
- get: E
145
+ get: R
146
146
  }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
147
147
  configurable: !1,
148
148
  enumerable: !1,
@@ -162,159 +162,197 @@ function se() {
162
162
  configurable: !1,
163
163
  enumerable: !1,
164
164
  writable: !0,
165
- value: Y
165
+ value: $
166
166
  }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
167
167
  }
168
- function d(e, r, a, o, A, Y) {
169
- var s = r.children;
170
- if (s !== void 0)
171
- if (o)
172
- if (te(s)) {
173
- for (o = 0; o < s.length; o++)
174
- v(s[o]);
175
- Object.freeze && Object.freeze(s);
168
+ function E(e, r, a, s, A, $) {
169
+ var l = r.children;
170
+ if (l !== void 0)
171
+ if (s)
172
+ if (re(l)) {
173
+ for (s = 0; s < l.length; s++)
174
+ t(l[s]);
175
+ Object.freeze && Object.freeze(l);
176
176
  } else
177
177
  console.error(
178
178
  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
179
179
  );
180
- else v(s);
180
+ else t(l);
181
181
  if (I.call(r, "key")) {
182
- s = t(e);
183
- var b = Object.keys(r).filter(function(ne) {
184
- return ne !== "key";
182
+ l = c(e);
183
+ var h = Object.keys(r).filter(function(te) {
184
+ return te !== "key";
185
185
  });
186
- o = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", V[s + o] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
186
+ s = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", D[l + s] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
187
187
  `A props object containing a "key" prop is being spread into JSX:
188
188
  let props = %s;
189
189
  <%s {...props} />
190
190
  React keys must be passed directly to JSX without using spread:
191
191
  let props = %s;
192
192
  <%s key={someKey} {...props} />`,
193
- o,
194
193
  s,
195
- b,
196
- s
197
- ), V[s + o] = !0);
194
+ l,
195
+ h,
196
+ l
197
+ ), D[l + s] = !0);
198
198
  }
199
- if (s = null, a !== void 0 && (i(a), s = "" + a), m(r) && (i(r.key), s = "" + r.key), "key" in r) {
199
+ if (l = null, a !== void 0 && (u(a), l = "" + a), b(r) && (u(r.key), l = "" + r.key), "key" in r) {
200
200
  a = {};
201
- for (var D in r)
202
- D !== "key" && (a[D] = r[D]);
201
+ for (var C in r)
202
+ C !== "key" && (a[C] = r[C]);
203
203
  } else a = r;
204
- return s && f(
204
+ return l && v(
205
205
  a,
206
206
  typeof e == "function" ? e.displayName || e.name || "Unknown" : e
207
- ), R(
207
+ ), n(
208
208
  e,
209
- s,
209
+ l,
210
210
  a,
211
- u(),
211
+ f(),
212
212
  A,
213
- Y
213
+ $
214
214
  );
215
215
  }
216
- function v(e) {
217
- w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
216
+ function t(e) {
217
+ o(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? o(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
218
218
  }
219
- function w(e) {
220
- return typeof e == "object" && e !== null && e.$$typeof === h;
219
+ function o(e) {
220
+ return typeof e == "object" && e !== null && e.$$typeof === d;
221
221
  }
222
- var p = ae, h = Symbol.for("react.transitional.element"), x = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), $ = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, C = console.createTask ? console.createTask : function() {
222
+ var i = ne, d = /* @__PURE__ */ Symbol.for("react.transitional.element"), k = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), G = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), Z = /* @__PURE__ */ Symbol.for("react.suspense_list"), Q = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), K = /* @__PURE__ */ Symbol.for("react.activity"), ee = /* @__PURE__ */ Symbol.for("react.client.reference"), P = i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, N = console.createTask ? console.createTask : function() {
223
223
  return null;
224
224
  };
225
- p = {
225
+ i = {
226
226
  react_stack_bottom_frame: function(e) {
227
227
  return e();
228
228
  }
229
229
  };
230
- var F, L = {}, W = p.react_stack_bottom_frame.bind(
231
- p,
232
- c
233
- )(), U = C(l(c)), V = {};
234
- T.Fragment = k, T.jsx = function(e, r, a) {
235
- var o = 1e4 > $.recentlyCreatedOwnerStacks++;
236
- return d(
230
+ var Y, M = {}, L = i.react_stack_bottom_frame.bind(
231
+ i,
232
+ m
233
+ )(), F = N(_(m)), D = {};
234
+ x.Fragment = O, x.jsx = function(e, r, a) {
235
+ var s = 1e4 > P.recentlyCreatedOwnerStacks++;
236
+ return E(
237
237
  e,
238
238
  r,
239
239
  a,
240
240
  !1,
241
- o ? Error("react-stack-top-frame") : W,
242
- o ? C(l(e)) : U
241
+ s ? Error("react-stack-top-frame") : L,
242
+ s ? N(_(e)) : F
243
243
  );
244
- }, T.jsxs = function(e, r, a) {
245
- var o = 1e4 > $.recentlyCreatedOwnerStacks++;
246
- return d(
244
+ }, x.jsxs = function(e, r, a) {
245
+ var s = 1e4 > P.recentlyCreatedOwnerStacks++;
246
+ return E(
247
247
  e,
248
248
  r,
249
249
  a,
250
250
  !0,
251
- o ? Error("react-stack-top-frame") : W,
252
- o ? C(l(e)) : U
251
+ s ? Error("react-stack-top-frame") : L,
252
+ s ? N(_(e)) : F
253
253
  );
254
254
  };
255
- })()), T;
255
+ })()), x;
256
256
  }
257
- var z;
258
- function ie() {
259
- return z || (z = 1, process.env.NODE_ENV === "production" ? g.exports = oe() : g.exports = se()), g.exports;
257
+ var V;
258
+ function se() {
259
+ return V || (V = 1, process.env.NODE_ENV === "production" ? g.exports = ae() : g.exports = oe()), g.exports;
260
260
  }
261
- var _ = ie();
262
- const le = "_timeline_100yd_1", j = {
261
+ var y = se();
262
+ const le = "_timeline_x6ik7_1", j = {
263
263
  timeline: le,
264
- "timeline-items": "_timeline-items_100yd_6",
265
- "timeline-item": "_timeline-item_100yd_6",
266
- "timeline-indicator": "_timeline-indicator_100yd_24"
264
+ "timeline-items": "_timeline-items_x6ik7_6",
265
+ "timeline-item": "_timeline-item_x6ik7_6",
266
+ "timeline-indicator": "_timeline-indicator_x6ik7_26"
267
267
  };
268
- function G() {
269
- var t = Math.floor(120 + Math.random() * 91), n = Math.floor(120 + Math.random() * 91), i = Math.floor(120 + Math.random() * 91);
270
- return `rgb(${t},${n},${i})`;
271
- }
272
- function M(t, n) {
273
- return n === 0 ? t[n + 1] : n === t.length - 1 ? t[n] - t[n - 1] : t[n + 1] - t[n];
268
+ function q() {
269
+ var c = Math.floor(120 + Math.random() * 91), p = Math.floor(120 + Math.random() * 91), u = Math.floor(120 + Math.random() * 91);
270
+ return `rgb(${c},${p},${u})`;
274
271
  }
275
- function ue(t, n, i = 1) {
276
- return n + i >= t.length ? t.at(-1) : t[n + i];
277
- }
278
- const ce = new Array(20).fill(0).map(G);
279
- function _e({ items: t, currentTime: n, totalTime: i, scale: l = 1, indicator: u, itemStyle: c }) {
280
- t = t.filter((f) => f.time >= 0);
281
- const m = t.map((f) => f.time);
282
- return _.jsxs("div", { className: j.timeline, children: [_.jsx("div", { className: j["timeline-indicator"], ...u }), _.jsx("div", { className: j["timeline-items"], style: {
283
- "--translate": `${l * 50 / l - (n - 1) / i * l * 100}%`
284
- }, children: t.map((f, E) => {
285
- const d = M(m, E) / i * l * 100 + "%";
286
- return _.jsx("span", { className: j["timeline-item"], style: {
287
- "--bg": f.style?.background || ce[E % 20],
288
- width: d,
289
- ...c
290
- }, children: f.content });
272
+ const ie = new Array(20).fill(0).map(q);
273
+ function me({ items: c, currentTime: p, totalTime: u, scale: _ = 1, indicator: f, itemStyle: m }) {
274
+ const b = c.map((n, E) => {
275
+ let t, o;
276
+ if (Array.isArray(n.time))
277
+ [t, o] = n.time;
278
+ else if (t = n.time, E === c.length - 1)
279
+ o = u;
280
+ else {
281
+ const i = c[E + 1];
282
+ o = Array.isArray(i.time) ? i.time[0] : i.time;
283
+ }
284
+ return { ...n, start: t, end: o };
285
+ }).filter((n) => n.start >= 0);
286
+ let v = 0;
287
+ const R = [];
288
+ return b.forEach((n, E) => {
289
+ let t;
290
+ if (n.level !== void 0)
291
+ t = n.level;
292
+ else {
293
+ t = 0;
294
+ const i = R.filter((d) => n.start < d.end && n.end > d.start).map((d) => d.level);
295
+ for (; i.includes(t); )
296
+ t++;
297
+ }
298
+ t > v && (v = t), R.push({ ...n, level: t });
299
+ }), y.jsxs("div", { className: j.timeline, children: [y.jsx("div", { className: j["timeline-indicator"], ...f }), y.jsx("div", { className: j["timeline-items"], style: {
300
+ "--translate": `${50 - p / u * _ * 100}%`,
301
+ height: `${(v + 1) * 40}px`
302
+ // 动态计算总高度
303
+ }, children: R.map((n, E) => {
304
+ const t = (n.end - n.start) / u * _ * 100 + "%", o = n.start / u * _ * 100 + "%";
305
+ return y.jsx("span", { className: j["timeline-item"], style: {
306
+ "--bg": n.style?.background || ie[E % 20],
307
+ width: t,
308
+ left: o,
309
+ top: `${n.level * 40}px`,
310
+ // 重叠时垂直偏移，每一层 40px
311
+ position: "absolute",
312
+ ...m,
313
+ ...n.style
314
+ }, children: n.content }, E);
291
315
  }) })] });
292
316
  }
293
- const fe = "_timeline_212s7_1", O = {
294
- timeline: fe,
295
- "timeline-items": "_timeline-items_212s7_6",
296
- "timeline-item": "_timeline-item_212s7_6",
297
- "timeline-indicator": "_timeline-indicator_212s7_20"
298
- }, me = new Array(20).fill(0).map(G);
299
- function Ee({ items: t, currentTime: n, totalTime: i, scale: l = 1, indicator: u, itemStyle: c, prev: m = 2, height: f, left: E = 10 }) {
300
- const R = t.map((d) => d.time);
301
- return _.jsxs("div", { className: O.timeline, style: { height: f }, children: [_.jsx("div", { className: O["timeline-indicator"], ...u, style: { left: `${E}%` } }), _.jsx("div", { className: O["timeline-items"], style: {
302
- "--translate": `${l * E / l - n / i * l * 100}%`
303
- }, children: t.map((d, v) => {
304
- const p = M(R, v) / i * l * 100 + "%", h = t.slice(0, v).reduce((x, k, S) => {
305
- const N = M(R, S);
306
- return x + N / i * l * 100;
307
- }, 0) + "%";
308
- if (n <= ue(t, v, m).time)
309
- return _.jsx("div", { className: O["timeline-item"], style: {
310
- "--bg": d.style?.background || me[v % 20],
311
- width: p,
312
- left: h,
313
- ...c
314
- }, children: d.content });
317
+ const ce = "_timeline_kp8su_1", w = {
318
+ timeline: ce,
319
+ "timeline-items": "_timeline-items_kp8su_6",
320
+ "timeline-item": "_timeline-item_kp8su_6",
321
+ "timeline-indicator": "_timeline-indicator_kp8su_25"
322
+ }, ue = new Array(20).fill(0).map(q);
323
+ function de({ items: c, currentTime: p, totalTime: u, scale: _ = 1, indicator: f, itemStyle: m, prev: b = 2, height: v, left: R = 10 }) {
324
+ const n = c.map((t, o) => {
325
+ let i, d;
326
+ if (Array.isArray(t.time))
327
+ [i, d] = t.time;
328
+ else if (i = t.time, o === c.length - 1)
329
+ d = u;
330
+ else {
331
+ const k = c[o + 1];
332
+ d = Array.isArray(k.time) ? k.time[0] : k.time;
333
+ }
334
+ return { ...t, start: i, end: d };
335
+ }).filter((t) => t.start >= 0), E = n.filter((t, o) => {
336
+ const i = n[o + b] || n[n.length - 1];
337
+ return p <= i.start;
338
+ });
339
+ return y.jsxs("div", { className: w.timeline, style: { height: v }, children: [y.jsx("div", { className: w["timeline-indicator"], ...f, style: { left: `${R}%` } }), y.jsx("div", { className: w["timeline-items"], style: {
340
+ "--translate": `${R - p / u * _ * 100}%`
341
+ }, children: E.map((t, o) => {
342
+ const i = (t.end - t.start) / u * _ * 100 + "%", d = t.start / u * _ * 100 + "%";
343
+ return y.jsx("div", { className: w["timeline-item"], style: {
344
+ "--bg": t.style?.background || ue[o % 20],
345
+ width: i,
346
+ left: d,
347
+ top: `${o * 35}px`,
348
+ // 垂直时间轴不受 Level 影响，始终使用 index 实现自动补位
349
+ position: "absolute",
350
+ ...m,
351
+ ...t.style
352
+ }, children: t.content }, t.start + o);
315
353
  }) })] });
316
354
  }
317
355
  export {
318
- Ee as Vertical,
319
- _e as default
356
+ de as Vertical,
357
+ me as default
320
358
  };
package/dist/utils.d.ts CHANGED
@@ -1,8 +1,5 @@
1
1
  import { CSSProperties, HTMLAttributes, ReactNode } from "react";
2
2
  export declare function randomRGBColor(): string;
3
- export declare function getDuration(timeline: number[], i: number): number;
4
- export declare function getPrevElement<T>(item: T[], i: number, number?: number): T;
5
- export declare function getNextElement<T>(item: T[], i: number, number?: number): T;
6
3
  export interface PropsType {
7
4
  /**时间轴 */
8
5
  items: itemsType[];
@@ -18,10 +15,12 @@ export interface PropsType {
18
15
  indicator?: HTMLAttributes<HTMLDivElement>;
19
16
  }
20
17
  export interface itemsType {
21
- /**时间点 */
22
- time: number;
18
+ /**时间点（自定义时间点，可以是毫秒也可以是秒，由时间轴totalTime控制） [起始,结束] 或 起始 */
19
+ time: number[] | number;
23
20
  /**该点对应的样式 */
24
21
  style?: CSSProperties;
25
- /**该点对应的文字 */
22
+ /**该点对应的内容 */
26
23
  content?: ReactNode;
24
+ /** 指定显示的层级，level 越大越靠下。如果不指定，则自动计算。 */
25
+ level?: number;
27
26
  }
package/package.json CHANGED
@@ -1,15 +1,38 @@
1
1
  {
2
2
  "name": "react-av-timeline",
3
- "version": "1.2.3",
4
- "description": "React 音视频时间线组件",
5
- "type": "module",
6
- "files": [
7
- "dist",
8
- "image"
9
- ],
3
+ "version": "2.0.0",
4
+ "author": "ArSrNa",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://cnb.cool/arsrna/os/react-timeline"
8
+ },
10
9
  "main": "./dist/index.umd.cjs",
11
10
  "module": "./dist/index.js",
12
- "typings": "./dist/index.d.ts",
11
+ "devDependencies": {
12
+ "@happy-dom/global-registrator": "^20.9.0",
13
+ "@rollup/plugin-typescript": "^12.1.4",
14
+ "@testing-library/dom": "^10.4.1",
15
+ "@testing-library/jest-dom": "^6.9.1",
16
+ "@testing-library/react": "^16.3.2",
17
+ "@types/bun": "^1.3.13",
18
+ "@types/node": "^24.7.0",
19
+ "@types/react": "^19.2.2",
20
+ "@types/react-dom": "^19.2.1",
21
+ "@vitejs/plugin-react": "^5.0.4",
22
+ "bun": "^1.3.13",
23
+ "bun-plugin-dts": "^0.4.0",
24
+ "happy-dom": "^20.9.0",
25
+ "sass": "^1.93.2",
26
+ "tslib": "^2.8.1",
27
+ "typescript": "^5.9.3",
28
+ "typescript-plugin-css-modules": "^5.2.0",
29
+ "vite": "^7.1.9",
30
+ "vite-plugin-sass": "^0.1.0"
31
+ },
32
+ "peerDependencies": {
33
+ "react": ">16",
34
+ "react-dom": ">16"
35
+ },
13
36
  "exports": {
14
37
  ".": {
15
38
  "import": "./dist/index.js",
@@ -17,10 +40,15 @@
17
40
  },
18
41
  "./dist/index.css": "./dist/index.css"
19
42
  },
20
- "repository": {
21
- "type": "git",
22
- "url": "https://cnb.cool/arsrna/os/react-timeline"
43
+ "bugs": {
44
+ "url": "https://cnb.cool/arsrna/os/react-timeline/-/issues"
23
45
  },
46
+ "description": "React 音视频时间线组件",
47
+ "files": [
48
+ "dist",
49
+ "image"
50
+ ],
51
+ "homepage": "https://os.arsrna.cn/demo/nodejs/react-timeline",
24
52
  "keywords": [
25
53
  "slider",
26
54
  "react",
@@ -29,31 +57,13 @@
29
57
  "video",
30
58
  "visualize"
31
59
  ],
60
+ "license": "GNU",
32
61
  "scripts": {
33
62
  "build": "vite build",
34
- "start": "vite"
63
+ "dev": "vite",
64
+ "test": "bun test",
65
+ "test:coverage": "bun test --coverage"
35
66
  },
36
- "author": "ArSrNa",
37
- "license": "GNU",
38
- "bugs": {
39
- "url": "https://cnb.cool/arsrna/os/react-timeline/-/issues"
40
- },
41
- "homepage": "https://os.arsrna.cn/demo/nodejs/react-timeline",
42
- "devDependencies": {
43
- "@rollup/plugin-typescript": "^12.1.4",
44
- "@types/node": "^24.7.0",
45
- "@types/react": "^19.2.2",
46
- "@types/react-dom": "^19.2.1",
47
- "@vitejs/plugin-react": "^5.0.4",
48
- "sass": "^1.93.2",
49
- "tslib": "^2.8.1",
50
- "typescript-plugin-css-modules": "^5.2.0",
51
- "vite": "^7.1.9",
52
- "typescript": "^5.9.3",
53
- "vite-plugin-sass": "^0.1.0"
54
- },
55
- "peerDependencies": {
56
- "react": ">16",
57
- "react-dom": ">16"
58
- }
67
+ "type": "module",
68
+ "typings": "./dist/index.d.ts"
59
69
  }