this repo has no description
Refactor truncated class
Also removed the hack fix, not sure why/how it's even fixed.
Don't even know how to explain the logic.
Will revisit and investigate more if the bug happens.
This `useTruncated` can now be reusable.
+20
-34
+3
-34
src/components/status.jsx
+3
-34
src/components/status.jsx
···
48
48
import states, { getStatus, saveStatus, statusKey } from '../utils/states';
49
49
import statusPeek from '../utils/status-peek';
50
50
import store from '../utils/store';
51
+
import useTruncated from '../utils/useTruncated';
51
52
import visibilityIconsMap from '../utils/visibility-icons-map';
52
53
53
54
import Avatar from './avatar';
···
318
319
const [showEdited, setShowEdited] = useState(false);
319
320
const [showReactions, setShowReactions] = useState(false);
320
321
321
-
const spoilerContentRef = useRef(null);
322
-
useResizeObserver({
323
-
ref: spoilerContentRef,
324
-
onResize: () => {
325
-
if (spoilerContentRef.current) {
326
-
const { scrollHeight, clientHeight } = spoilerContentRef.current;
327
-
if (scrollHeight < window.innerHeight * 0.4) {
328
-
spoilerContentRef.current.classList.remove('truncated');
329
-
} else {
330
-
spoilerContentRef.current.classList.toggle(
331
-
'truncated',
332
-
scrollHeight > clientHeight,
333
-
);
334
-
}
335
-
}
336
-
},
337
-
});
338
-
const contentRef = useRef(null);
339
-
useResizeObserver({
340
-
ref: contentRef,
341
-
onResize: () => {
342
-
if (contentRef.current) {
343
-
const { scrollHeight, clientHeight } = contentRef.current;
344
-
if (scrollHeight < window.innerHeight * 0.4) {
345
-
contentRef.current.classList.remove('truncated');
346
-
} else {
347
-
contentRef.current.classList.toggle(
348
-
'truncated',
349
-
scrollHeight > clientHeight,
350
-
);
351
-
}
352
-
}
353
-
},
354
-
});
322
+
const spoilerContentRef = useTruncated();
323
+
const contentRef = useTruncated();
355
324
const readMoreText = 'Read more →';
356
325
357
326
const statusRef = useRef(null);
+17
src/utils/useTruncated.js
+17
src/utils/useTruncated.js
···
1
+
import { useRef } from 'preact/hooks';
2
+
import useResizeObserver from 'use-resize-observer';
3
+
4
+
export default function useTruncated({ className = 'truncated' } = {}) {
5
+
const ref = useRef();
6
+
useResizeObserver({
7
+
ref,
8
+
box: 'border-box',
9
+
onResize: ({ height }) => {
10
+
if (ref.current) {
11
+
const { scrollHeight } = ref.current;
12
+
ref.current.classList.toggle(className, scrollHeight > height);
13
+
}
14
+
},
15
+
});
16
+
return ref;
17
+
}