@x-plat/design-system 0.5.39 → 0.5.40

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/dist/components/Chart/index.cjs +12 -32
  2. package/dist/components/Chart/index.js +12 -32
  3. package/dist/components/index.cjs +12 -32
  4. package/dist/components/index.js +12 -32
  5. package/dist/index.cjs +12 -32
  6. package/dist/index.js +12 -32
  7. package/package.json +1 -1
package/dist/components/Chart/index.cjs CHANGED
@@ -80,47 +80,27 @@ var toSmoothPath = (points) => {
80
80
  }
81
81
  return d;
82
82
  };
83
- var RESIZE_SETTLE_MS = 150;
84
83
  var useChartSize = (ref) => {
85
84
  const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
86
- const settleTimer = import_react.default.useRef(0);
87
- const committedSize = import_react.default.useRef({ width: 0, height: 0 });
88
- const initialRef = import_react.default.useRef(true);
89
85
  import_react.default.useEffect(() => {
90
86
  const el = ref.current;
91
87
  if (!el) return;
88
+ let rafId = 0;
92
89
  const observer = new ResizeObserver((entries) => {
93
- const entry = entries[0];
94
- if (!entry) return;
95
- const { width, height } = entry.contentRect;
96
- const w = Math.floor(width);
97
- const h = Math.floor(height);
98
- if (w <= 0 || h <= 0) return;
99
- if (w === committedSize.current.width && h === committedSize.current.height) return;
100
- if (initialRef.current) {
101
- initialRef.current = false;
102
- committedSize.current = { width: w, height: h };
103
- setSize({ width: w, height: h });
104
- return;
105
- }
106
- const prev = committedSize.current;
107
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
108
- const svg = el.firstElementChild;
109
- svg.style.transformOrigin = "0 0";
110
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
111
- }
112
- window.clearTimeout(settleTimer.current);
113
- settleTimer.current = window.setTimeout(() => {
114
- if (el.firstElementChild) {
115
- el.firstElementChild.style.transform = "";
116
- }
117
- committedSize.current = { width: w, height: h };
118
- setSize({ width: w, height: h });
119
- }, RESIZE_SETTLE_MS);
90
+ cancelAnimationFrame(rafId);
91
+ rafId = requestAnimationFrame(() => {
92
+ const entry = entries[0];
93
+ if (!entry) return;
94
+ const { width, height } = entry.contentRect;
95
+ const w = Math.floor(width);
96
+ const h = Math.floor(height);
97
+ if (w <= 0 || h <= 0) return;
98
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
99
+ });
120
100
  });
121
101
  observer.observe(el);
122
102
  return () => {
123
- window.clearTimeout(settleTimer.current);
103
+ cancelAnimationFrame(rafId);
124
104
  observer.disconnect();
125
105
  };
126
106
  }, [ref]);
package/dist/components/Chart/index.js CHANGED
@@ -44,47 +44,27 @@ var toSmoothPath = (points) => {
44
44
  }
45
45
  return d;
46
46
  };
47
- var RESIZE_SETTLE_MS = 150;
48
47
  var useChartSize = (ref) => {
49
48
  const [size, setSize] = React.useState({ width: 0, height: 0 });
50
- const settleTimer = React.useRef(0);
51
- const committedSize = React.useRef({ width: 0, height: 0 });
52
- const initialRef = React.useRef(true);
53
49
  React.useEffect(() => {
54
50
  const el = ref.current;
55
51
  if (!el) return;
52
+ let rafId = 0;
56
53
  const observer = new ResizeObserver((entries) => {
57
- const entry = entries[0];
58
- if (!entry) return;
59
- const { width, height } = entry.contentRect;
60
- const w = Math.floor(width);
61
- const h = Math.floor(height);
62
- if (w <= 0 || h <= 0) return;
63
- if (w === committedSize.current.width && h === committedSize.current.height) return;
64
- if (initialRef.current) {
65
- initialRef.current = false;
66
- committedSize.current = { width: w, height: h };
67
- setSize({ width: w, height: h });
68
- return;
69
- }
70
- const prev = committedSize.current;
71
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
72
- const svg = el.firstElementChild;
73
- svg.style.transformOrigin = "0 0";
74
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
75
- }
76
- window.clearTimeout(settleTimer.current);
77
- settleTimer.current = window.setTimeout(() => {
78
- if (el.firstElementChild) {
79
- el.firstElementChild.style.transform = "";
80
- }
81
- committedSize.current = { width: w, height: h };
82
- setSize({ width: w, height: h });
83
- }, RESIZE_SETTLE_MS);
54
+ cancelAnimationFrame(rafId);
55
+ rafId = requestAnimationFrame(() => {
56
+ const entry = entries[0];
57
+ if (!entry) return;
58
+ const { width, height } = entry.contentRect;
59
+ const w = Math.floor(width);
60
+ const h = Math.floor(height);
61
+ if (w <= 0 || h <= 0) return;
62
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
63
+ });
84
64
  });
85
65
  observer.observe(el);
86
66
  return () => {
87
- window.clearTimeout(settleTimer.current);
67
+ cancelAnimationFrame(rafId);
88
68
  observer.disconnect();
89
69
  };
90
70
  }, [ref]);
package/dist/components/index.cjs CHANGED
@@ -2274,47 +2274,27 @@ var toSmoothPath = (points) => {
2274
2274
  }
2275
2275
  return d;
2276
2276
  };
2277
- var RESIZE_SETTLE_MS = 150;
2278
2277
  var useChartSize = (ref) => {
2279
2278
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
2280
- const settleTimer = import_react6.default.useRef(0);
2281
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
2282
- const initialRef = import_react6.default.useRef(true);
2283
2279
  import_react6.default.useEffect(() => {
2284
2280
  const el = ref.current;
2285
2281
  if (!el) return;
2282
+ let rafId = 0;
2286
2283
  const observer = new ResizeObserver((entries) => {
2287
- const entry = entries[0];
2288
- if (!entry) return;
2289
- const { width, height } = entry.contentRect;
2290
- const w = Math.floor(width);
2291
- const h = Math.floor(height);
2292
- if (w <= 0 || h <= 0) return;
2293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2294
- if (initialRef.current) {
2295
- initialRef.current = false;
2296
- committedSize.current = { width: w, height: h };
2297
- setSize({ width: w, height: h });
2298
- return;
2299
- }
2300
- const prev = committedSize.current;
2301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2302
- const svg = el.firstElementChild;
2303
- svg.style.transformOrigin = "0 0";
2304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2305
- }
2306
- window.clearTimeout(settleTimer.current);
2307
- settleTimer.current = window.setTimeout(() => {
2308
- if (el.firstElementChild) {
2309
- el.firstElementChild.style.transform = "";
2310
- }
2311
- committedSize.current = { width: w, height: h };
2312
- setSize({ width: w, height: h });
2313
- }, RESIZE_SETTLE_MS);
2284
+ cancelAnimationFrame(rafId);
2285
+ rafId = requestAnimationFrame(() => {
2286
+ const entry = entries[0];
2287
+ if (!entry) return;
2288
+ const { width, height } = entry.contentRect;
2289
+ const w = Math.floor(width);
2290
+ const h = Math.floor(height);
2291
+ if (w <= 0 || h <= 0) return;
2292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2293
+ });
2314
2294
  });
2315
2295
  observer.observe(el);
2316
2296
  return () => {
2317
- window.clearTimeout(settleTimer.current);
2297
+ cancelAnimationFrame(rafId);
2318
2298
  observer.disconnect();
2319
2299
  };
2320
2300
  }, [ref]);
package/dist/components/index.js CHANGED
@@ -2184,47 +2184,27 @@ var toSmoothPath = (points) => {
2184
2184
  }
2185
2185
  return d;
2186
2186
  };
2187
- var RESIZE_SETTLE_MS = 150;
2188
2187
  var useChartSize = (ref) => {
2189
2188
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
2190
- const settleTimer = React6.useRef(0);
2191
- const committedSize = React6.useRef({ width: 0, height: 0 });
2192
- const initialRef = React6.useRef(true);
2193
2189
  React6.useEffect(() => {
2194
2190
  const el = ref.current;
2195
2191
  if (!el) return;
2192
+ let rafId = 0;
2196
2193
  const observer = new ResizeObserver((entries) => {
2197
- const entry = entries[0];
2198
- if (!entry) return;
2199
- const { width, height } = entry.contentRect;
2200
- const w = Math.floor(width);
2201
- const h = Math.floor(height);
2202
- if (w <= 0 || h <= 0) return;
2203
- if (w === committedSize.current.width && h === committedSize.current.height) return;
2204
- if (initialRef.current) {
2205
- initialRef.current = false;
2206
- committedSize.current = { width: w, height: h };
2207
- setSize({ width: w, height: h });
2208
- return;
2209
- }
2210
- const prev = committedSize.current;
2211
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
2212
- const svg = el.firstElementChild;
2213
- svg.style.transformOrigin = "0 0";
2214
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
2215
- }
2216
- window.clearTimeout(settleTimer.current);
2217
- settleTimer.current = window.setTimeout(() => {
2218
- if (el.firstElementChild) {
2219
- el.firstElementChild.style.transform = "";
2220
- }
2221
- committedSize.current = { width: w, height: h };
2222
- setSize({ width: w, height: h });
2223
- }, RESIZE_SETTLE_MS);
2194
+ cancelAnimationFrame(rafId);
2195
+ rafId = requestAnimationFrame(() => {
2196
+ const entry = entries[0];
2197
+ if (!entry) return;
2198
+ const { width, height } = entry.contentRect;
2199
+ const w = Math.floor(width);
2200
+ const h = Math.floor(height);
2201
+ if (w <= 0 || h <= 0) return;
2202
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
2203
+ });
2224
2204
  });
2225
2205
  observer.observe(el);
2226
2206
  return () => {
2227
- window.clearTimeout(settleTimer.current);
2207
+ cancelAnimationFrame(rafId);
2228
2208
  observer.disconnect();
2229
2209
  };
2230
2210
  }, [ref]);
package/dist/index.cjs CHANGED
@@ -6673,47 +6673,27 @@ var toSmoothPath = (points) => {
6673
6673
  }
6674
6674
  return d;
6675
6675
  };
6676
- var RESIZE_SETTLE_MS = 150;
6677
6676
  var useChartSize = (ref) => {
6678
6677
  const [size, setSize] = import_react6.default.useState({ width: 0, height: 0 });
6679
- const settleTimer = import_react6.default.useRef(0);
6680
- const committedSize = import_react6.default.useRef({ width: 0, height: 0 });
6681
- const initialRef = import_react6.default.useRef(true);
6682
6678
  import_react6.default.useEffect(() => {
6683
6679
  const el = ref.current;
6684
6680
  if (!el) return;
6681
+ let rafId = 0;
6685
6682
  const observer = new ResizeObserver((entries) => {
6686
- const entry = entries[0];
6687
- if (!entry) return;
6688
- const { width, height } = entry.contentRect;
6689
- const w = Math.floor(width);
6690
- const h = Math.floor(height);
6691
- if (w <= 0 || h <= 0) return;
6692
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6693
- if (initialRef.current) {
6694
- initialRef.current = false;
6695
- committedSize.current = { width: w, height: h };
6696
- setSize({ width: w, height: h });
6697
- return;
6698
- }
6699
- const prev = committedSize.current;
6700
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6701
- const svg = el.firstElementChild;
6702
- svg.style.transformOrigin = "0 0";
6703
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6704
- }
6705
- window.clearTimeout(settleTimer.current);
6706
- settleTimer.current = window.setTimeout(() => {
6707
- if (el.firstElementChild) {
6708
- el.firstElementChild.style.transform = "";
6709
- }
6710
- committedSize.current = { width: w, height: h };
6711
- setSize({ width: w, height: h });
6712
- }, RESIZE_SETTLE_MS);
6683
+ cancelAnimationFrame(rafId);
6684
+ rafId = requestAnimationFrame(() => {
6685
+ const entry = entries[0];
6686
+ if (!entry) return;
6687
+ const { width, height } = entry.contentRect;
6688
+ const w = Math.floor(width);
6689
+ const h = Math.floor(height);
6690
+ if (w <= 0 || h <= 0) return;
6691
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6692
+ });
6713
6693
  });
6714
6694
  observer.observe(el);
6715
6695
  return () => {
6716
- window.clearTimeout(settleTimer.current);
6696
+ cancelAnimationFrame(rafId);
6717
6697
  observer.disconnect();
6718
6698
  };
6719
6699
  }, [ref]);
package/dist/index.js CHANGED
@@ -6274,47 +6274,27 @@ var toSmoothPath = (points) => {
6274
6274
  }
6275
6275
  return d;
6276
6276
  };
6277
- var RESIZE_SETTLE_MS = 150;
6278
6277
  var useChartSize = (ref) => {
6279
6278
  const [size, setSize] = React6.useState({ width: 0, height: 0 });
6280
- const settleTimer = React6.useRef(0);
6281
- const committedSize = React6.useRef({ width: 0, height: 0 });
6282
- const initialRef = React6.useRef(true);
6283
6279
  React6.useEffect(() => {
6284
6280
  const el = ref.current;
6285
6281
  if (!el) return;
6282
+ let rafId = 0;
6286
6283
  const observer = new ResizeObserver((entries) => {
6287
- const entry = entries[0];
6288
- if (!entry) return;
6289
- const { width, height } = entry.contentRect;
6290
- const w = Math.floor(width);
6291
- const h = Math.floor(height);
6292
- if (w <= 0 || h <= 0) return;
6293
- if (w === committedSize.current.width && h === committedSize.current.height) return;
6294
- if (initialRef.current) {
6295
- initialRef.current = false;
6296
- committedSize.current = { width: w, height: h };
6297
- setSize({ width: w, height: h });
6298
- return;
6299
- }
6300
- const prev = committedSize.current;
6301
- if (el.firstElementChild && prev.width > 0 && prev.height > 0) {
6302
- const svg = el.firstElementChild;
6303
- svg.style.transformOrigin = "0 0";
6304
- svg.style.transform = `scale(${w / prev.width}, ${h / prev.height})`;
6305
- }
6306
- window.clearTimeout(settleTimer.current);
6307
- settleTimer.current = window.setTimeout(() => {
6308
- if (el.firstElementChild) {
6309
- el.firstElementChild.style.transform = "";
6310
- }
6311
- committedSize.current = { width: w, height: h };
6312
- setSize({ width: w, height: h });
6313
- }, RESIZE_SETTLE_MS);
6284
+ cancelAnimationFrame(rafId);
6285
+ rafId = requestAnimationFrame(() => {
6286
+ const entry = entries[0];
6287
+ if (!entry) return;
6288
+ const { width, height } = entry.contentRect;
6289
+ const w = Math.floor(width);
6290
+ const h = Math.floor(height);
6291
+ if (w <= 0 || h <= 0) return;
6292
+ setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
6293
+ });
6314
6294
  });
6315
6295
  observer.observe(el);
6316
6296
  return () => {
6317
- window.clearTimeout(settleTimer.current);
6297
+ cancelAnimationFrame(rafId);
6318
6298
  observer.disconnect();
6319
6299
  };
6320
6300
  }, [ref]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.39",
3
+ "version": "0.5.40",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",