Skip to content

Commit 1fda857

Browse files
cee-chencee-chen
committed
Update docs to remove measurementRenderAPI
+ update copy/recommendations
1 parent 1d1506e commit 1fda857

2 files changed

Lines changed: 25 additions & 45 deletions

File tree

‎src-docs/src/views/text_truncate/performance.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { FixedSizeList } from 'react-window';
66

77
import {
88
EuiFlexGroup,
9-
EuiFlexItem,
109
EuiPanel,
1110
EuiText,
1211
EuiFormRow,
@@ -18,8 +17,6 @@ import {
1817

1918
export default () => {
2019
// Testing toggles
21-
const [canvasRendering, setCanvasRendering] = useState(true);
22-
const measurementRenderAPI = canvasRendering ? 'canvas' : 'dom';
2320
const [virtualization, setVirtualization] = useState(false);
2421
const [throttleMs, setThrottleMs] = useState(0);
2522
const [lineCount, setLineCount] = useState(100);
@@ -52,12 +49,15 @@ export default () => {
5249

5350
return (
5451
<EuiText>
55-
<EuiFlexGroup alignItems="center">
56-
<EuiSwitch
57-
label="Toggle canvas rendering"
58-
checked={canvasRendering}
59-
onChange={() => setCanvasRendering(!canvasRendering)}
60-
/>
52+
<EuiFlexGroup alignItems="center" gutterSize="xl">
53+
<EuiFormRow label="Lines" display="columnCompressed">
54+
<EuiFieldNumber
55+
value={lineCount}
56+
onChange={(e) => setLineCount(Number(e.target.value))}
57+
style={{ width: 100 }}
58+
compressed
59+
/>
60+
</EuiFormRow>
6161
<EuiSwitch
6262
label="Toggle virtualization"
6363
checked={virtualization}
@@ -71,16 +71,6 @@ export default () => {
7171
compressed
7272
/>
7373
</EuiFormRow>
74-
<EuiFlexItem css={{ justifyContent: 'flex-end', flexDirection: 'row' }}>
75-
<EuiFormRow label="Lines" display="columnCompressed">
76-
<EuiFieldNumber
77-
value={lineCount}
78-
onChange={(e) => setLineCount(Number(e.target.value))}
79-
style={{ width: 100 }}
80-
compressed
81-
/>
82-
</EuiFormRow>
83-
</EuiFlexItem>
8474
</EuiFlexGroup>
8575
<EuiSpacer size="m" />
8676

@@ -109,7 +99,6 @@ export default () => {
10999
text={text[index]}
110100
truncation="middle"
111101
width={width}
112-
measurementRenderAPI={measurementRenderAPI}
113102
/>
114103
)}
115104
</FixedSizeList>
@@ -120,7 +109,6 @@ export default () => {
120109
text={text}
121110
truncation="middle"
122111
width={width}
123-
measurementRenderAPI={measurementRenderAPI}
124112
/>
125113
))
126114
)}

‎src-docs/src/views/text_truncate/text_truncate_example.js‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -233,17 +233,17 @@ export const TextTruncateExample = {
233233
text: (
234234
<>
235235
<p>
236-
<strong>EuiTextTruncate</strong> uses an extra DOM element under the
236+
<strong>EuiTextTruncate</strong> uses a canvas element under the
237237
hood to manipulate text and calculate whether the text width fits
238238
within the available width. Additionally, by default, the component
239239
will include its own resize observer in order to react to width
240240
changes.
241241
</p>
242242
<p>
243243
These functionalities can cause performance issues if the component
244-
is rendered many times per page, and we would strongly recommend
245-
using caution when doing so. Several escape hatches are available
246-
for performance improvements:
244+
is rendered over hundreds of times per page, and we would strongly
245+
recommend using caution when doing so. Several escape hatches are
246+
available for performance improvements:
247247
</p>
248248
<ol
249249
css={({ euiTheme }) =>
@@ -258,37 +258,30 @@ export const TextTruncateExample = {
258258
Pass a <EuiCode>width</EuiCode> prop to skip initializing a resize
259259
observer for each component instance. For text within a container
260260
of the same width, we would strongly recommend applying a single
261-
resize observer to the parent container and passing down that
262-
width to all child <strong>EuiTextTruncate</strong>s.
263-
</li>
264-
<li>
265-
Use the <EuiCode>measurementRenderAPI="canvas"</EuiCode> prop to
266-
utilize the Canvas API for text measurement. While this can be
267-
significantly more performant at higher iterations, please do note
268-
that there are minute pixel to subpixel differences in this
269-
rendering method.
261+
resize observer to the parent container and passing that width to
262+
all child <strong>EuiTextTruncate</strong>s. Additionally, you may
263+
want to consider{' '}
264+
<EuiLink href="https://lodash.com/docs/#throttle" target="_blank">
265+
throttling
266+
</EuiLink>{' '}
267+
any resize observers or width-based logic.
270268
</li>
271269
<li>
272-
Strongly consider using{' '}
270+
Use{' '}
273271
<EuiLink
274272
href="https://github.com/bvaughn/react-window"
275273
target="_blank"
276274
>
277275
virtualization
278276
</EuiLink>{' '}
279277
to reduce the number of rendered elements visible at any given
280-
time, or{' '}
281-
<EuiLink href="https://lodash.com/docs/#throttle" target="_blank">
282-
throttling
283-
</EuiLink>{' '}
284-
any resize observers or width-based logic.
278+
time. For over hundreds of instances, this will generally be the
279+
most effective solution for performance or rerender issues.
285280
</li>
286281
<li>
287282
If necessary, consider pulling out the underlying{' '}
288-
<EuiCode>TruncationUtilsForDOM</EuiCode> and{' '}
289-
<EuiCode>TruncationUtilsForCanvas</EuiCode> truncation utils and
290-
re-using the same canvas context or DOM node, as opposed to
291-
repeatedly creating new ones.
283+
<EuiCode>TruncationUtils</EuiCode> and re-using the same canvas
284+
context, as opposed to repeatedly creating new ones.
292285
</li>
293286
</ol>
294287
</>
@@ -299,7 +292,6 @@ export const TextTruncateExample = {
299292
snippet: `<EuiTextTruncate
300293
text="Hello world"
301294
width={width}
302-
measurementRenderAPI="canvas"
303295
/>`,
304296
},
305297
],

0 commit comments

Comments
 (0)