-
Notifications
You must be signed in to change notification settings - Fork 843
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into theme-css-variables
- Loading branch information
Showing
35 changed files
with
2,638 additions
and
158 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { EuiPanel, EuiText, EuiTextTruncate } from '../../../../src'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <EuiText> | ||
| <EuiPanel css={{ inlineSize: '40ch', maxInlineSize: '100%' }}> | ||
| <EuiTextTruncate | ||
| text="Opinions differ as to how to render ellipses in printed material. According to The Chicago Manual of Style, it should consist of three periods, each separated from its neighbor by a non-breaking space. According to the AP Stylebook, the periods should be rendered with no space between them." | ||
| ellipsis=". . ." | ||
| /> | ||
| <EuiTextTruncate | ||
| text="In some legal writing, an ellipsis is written as three asterisks, to make it obvious that text has been omitted or to signal that the omitted text extends beyond the end of the paragraph." | ||
| ellipsis=" ***" | ||
| /> | ||
| <EuiTextTruncate | ||
| text="Brackets are often used to indicate that a quotation has been condensed for space, brevity or relevance." | ||
| truncation="middle" | ||
| ellipsis="[...]" | ||
| /> | ||
| </EuiPanel> | ||
| </EuiText> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import { css } from '@emotion/react'; | ||
| import { throttle } from 'lodash'; | ||
| import { faker } from '@faker-js/faker'; | ||
| import { FixedSizeList } from 'react-window'; | ||
|
|
||
| import { | ||
| EuiFlexGroup, | ||
| EuiPanel, | ||
| EuiText, | ||
| EuiFormRow, | ||
| EuiFieldNumber, | ||
| EuiSwitch, | ||
| EuiSpacer, | ||
| EuiTextTruncate, | ||
| } from '../../../../src'; | ||
|
|
||
| const text = Array.from({ length: 100 }, () => faker.lorem.lines(5)); | ||
|
|
||
| export default () => { | ||
| // Testing toggles | ||
| const [canvasRendering, setCanvasRendering] = useState(true); | ||
| const measurementRenderAPI = canvasRendering ? 'canvas' : 'dom'; | ||
| const [virtualization, setVirtualization] = useState(false); | ||
| const [throttleMs, setThrottleMs] = useState(100); | ||
|
|
||
| // Width resize observer | ||
| const widthRef = useRef<HTMLDivElement | null>(null); | ||
| const [width, setWidth] = useState(200); | ||
|
|
||
| useEffect(() => { | ||
| if (!widthRef.current) return; | ||
|
|
||
| const onObserve = throttle((entries) => { | ||
| // Skipping a forEach as we're only observing one element | ||
| setWidth(entries[0].contentRect.width); | ||
| }, throttleMs); | ||
|
|
||
| const resizeObserver = new ResizeObserver(onObserve); | ||
| resizeObserver.observe(widthRef.current); | ||
|
|
||
| () => resizeObserver.disconnect(); | ||
| }, [throttleMs]); | ||
|
|
||
| return ( | ||
| <EuiText> | ||
| <EuiFlexGroup alignItems="center"> | ||
| <EuiSwitch | ||
| label="Toggle canvas rendering" | ||
| checked={canvasRendering} | ||
| onChange={() => setCanvasRendering(!canvasRendering)} | ||
| /> | ||
| <EuiSwitch | ||
| label="Toggle virtualization" | ||
| checked={virtualization} | ||
| onChange={() => setVirtualization(!virtualization)} | ||
| /> | ||
| <EuiFormRow label="Resize throttle" display="columnCompressed"> | ||
| <EuiFieldNumber | ||
| value={throttleMs} | ||
| onChange={(e) => setThrottleMs(Number(e.target.value))} | ||
| style={{ width: 100 }} | ||
| compressed | ||
| /> | ||
| </EuiFormRow> | ||
| </EuiFlexGroup> | ||
| <EuiSpacer size="m" /> | ||
|
|
||
| <EuiPanel | ||
| panelRef={widthRef} | ||
| css={css` | ||
| overflow: auto; | ||
| resize: horizontal; /* Not all browsers support resize logical properties yet */ | ||
| resize: inline; | ||
| max-inline-size: 100%; | ||
| inline-size: 600px; | ||
| block-size: 300px; | ||
| `} | ||
| > | ||
| {virtualization ? ( | ||
| <FixedSizeList | ||
| width={width} | ||
| height={268} | ||
| itemCount={100} | ||
| itemSize={24} | ||
| > | ||
| {({ index, style }) => ( | ||
| <EuiTextTruncate | ||
| style={style} | ||
| key={index} | ||
| text={text[index]} | ||
| truncation="middle" | ||
| width={width} | ||
| measurementRenderAPI={measurementRenderAPI} | ||
| /> | ||
| )} | ||
| </FixedSizeList> | ||
| ) : ( | ||
| text.map((text, i) => ( | ||
| <EuiTextTruncate | ||
| key={i} | ||
| text={text} | ||
| truncation="middle" | ||
| width={width} | ||
| measurementRenderAPI={measurementRenderAPI} | ||
| /> | ||
| )) | ||
| )} | ||
| </EuiPanel> | ||
| <EuiSpacer /> | ||
| <p> | ||
| Drag the panel resize handle to test performance. Use the controls above | ||
| to compare the performance of different approaches. | ||
| </p> | ||
| </EuiText> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import { | ||
| EuiText, | ||
| EuiFormRow, | ||
| EuiFieldText, | ||
| EuiSpacer, | ||
| EuiPanel, | ||
| EuiHighlight, | ||
| EuiMark, | ||
| EuiTextTruncate, | ||
| } from '../../../../src'; | ||
|
|
||
| const text = | ||
| "But the dog wasn't lazy, it was just practicing mindfulness, so it had a greater sense of life-satisfaction than that fox with all its silly jumping."; | ||
|
|
||
| export default () => { | ||
| const [highlight, setHighlight] = useState(''); | ||
| const highlightStartPosition = text | ||
| .toLowerCase() | ||
| .indexOf(highlight.toLowerCase()); | ||
| const highlightCenterPosition = | ||
| highlightStartPosition + Math.floor(highlight.length / 2); | ||
|
|
||
| return ( | ||
| <EuiText> | ||
| <EuiFormRow label="Type to highlight text"> | ||
| <EuiFieldText | ||
| value={highlight} | ||
| onChange={(e) => setHighlight(e.target.value)} | ||
| placeholder={ | ||
| 'For example, try typing "lazy", "mindful", "life", or "silly"' | ||
| } | ||
| /> | ||
| </EuiFormRow> | ||
| <EuiSpacer /> | ||
| <EuiPanel css={{ inlineSize: '40ch', maxInlineSize: '100%' }}> | ||
| <EuiTextTruncate | ||
| text={text} | ||
| truncation="startEnd" | ||
| truncationPosition={highlightCenterPosition} | ||
| > | ||
| {(truncatedText) => ( | ||
| <> | ||
| {truncatedText.length > highlight.length ? ( | ||
| <EuiHighlight search={highlight}>{truncatedText}</EuiHighlight> | ||
| ) : ( | ||
| // Highlight everything if the search match is greater than the visible text | ||
| <EuiMark>{truncatedText}</EuiMark> | ||
| )} | ||
| </> | ||
| )} | ||
| </EuiTextTruncate> | ||
| </EuiPanel> | ||
| </EuiText> | ||
| ); | ||
| }; |
Oops, something went wrong.