Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Emotion] Memoize batch of basic/simple components #8171

Merged
merged 12 commits into from
Nov 21, 2024
Merged

[Emotion] Memoize batch of basic/simple components #8171

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2f3179f
[Draggable] Memoize styles
cee-chen Mar 29, 2024
4ee7599
[EuiErrorBoundary] Memoize styles
cee-chen Mar 29, 2024
1b1f821
[EuiHealth] Memoize styles
cee-chen Nov 20, 2024
0e4b3fa
[EuiInlineEdit] Memoize styles
cee-chen Nov 20, 2024
4330b53
[EuiKeyPadMenu] Memoize styles
cee-chen Nov 20, 2024
dd3a0a8
[EuiMark] Memoize styles
cee-chen Nov 20, 2024
fd222c4
[EuiOverlayMask] Memoize styles
cee-chen Nov 20, 2024
bdd2a17
[EuiSideNavItem] Memoize styles
cee-chen Nov 20, 2024
d2cc2be
[EuiTextDiff] Memoize styles
cee-chen Nov 20, 2024
943818f
[EuiGlobalToastListItem] Memoize styles
cee-chen Nov 20, 2024
1f8909d
[EuiTour] Memoize styles
cee-chen Nov 20, 2024
42d4994
[EuiTreeView] Memoize styles
cee-chen Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...es/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ges/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Playground.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 19 additions & 17 deletions packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@ import type { DragDropContextProps } from '@hello-pangea/dnd';
import { enableFunctionToggleControls } from '../../../.storybook/utils';
import { within } from '../../../.storybook/test';
import { LOKI_SELECTORS } from '../../../.storybook/loki';
import { sleep } from '../../test';

import { EuiPanel } from '../panel';
import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '../flyout';
import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
import { EuiTitle } from '../title';

import { EuiDroppable } from './droppable';
import { EuiDraggable } from './draggable';
import { EuiDragDropContext } from './drag_drop_context';
import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '../flyout';
import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
import { EuiTitle } from '../title';

const meta: Meta<DragDropContextProps> = {
title: 'Display/EuiDragDropContext',
Expand Down Expand Up @@ -120,21 +122,21 @@ export const WithinFlyouts: Story = {
expect(canvas.getByRole('dialog')).toBeVisible();
});

await setTimeout(async () => {
await waitFor(async () => {
await fireEvent.mouseDown(canvas.getByTestSubject('draggable-item-1'));
await fireEvent.mouseMove(canvas.getByTestSubject('draggable-item-1'), {
clientX: 0,
clientY: 5,
});

expect(
[...canvas.getByTestSubject('draggable-item-1').classList]
.join('')
.includes('isDragging')
).toBe(true);
await waitFor(async () => {
await fireEvent.mouseDown(canvas.getByTestSubject('draggable-item-1'));
await fireEvent.mouseMove(canvas.getByTestSubject('draggable-item-1'), {
clientX: 0,
clientY: 5,
});
}, 150); // add a timeout to prevent differences due to animation

expect(
[...canvas.getByTestSubject('draggable-item-1').classList]
.join('')
.includes('isDragging')
).toBe(true);
});

await sleep(150); // add a timeout to prevent differences due to animation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL this existed! 😄

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol same. We have so many handy utils in services that go unnoticed 😅

},
};

Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/drag_and_drop/draggable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import React, {
import { Draggable, DraggableProps } from '@hello-pangea/dnd';
import classNames from 'classnames';

import { useEuiTheme, cloneElementWithCss } from '../../services';
import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
import { CommonProps } from '../common';

import { EuiDroppableContext, SPACINGS } from './droppable';
Expand Down Expand Up @@ -79,8 +79,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
}) => {
const { cloneItems } = useContext(EuiDroppableContext);

const euiTheme = useEuiTheme();
const styles = euiDraggableStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiDraggableStyles);

const hasCustomDragHandle = customDragHandle !== false;

Expand Down
5 changes: 2 additions & 3 deletions packages/eui/src/components/drag_and_drop/droppable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import React, {
import { Droppable, DroppableProps } from '@hello-pangea/dnd';
import classNames from 'classnames';

import { useEuiTheme } from '../../services';
import { useEuiMemoizedStyles } from '../../services';
import { CommonProps } from '../common';
import { EuiPanel } from '../panel';

Expand Down Expand Up @@ -73,8 +73,7 @@ export const EuiDroppable: FunctionComponent<EuiDroppableProps> = ({
const { isDraggingType } = useContext(EuiDragDropContextContext);
const dropIsDisabled: boolean = cloneDraggables ? true : isDropDisabled;

const euiTheme = useEuiTheme();
const styles = euiDroppableStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiDroppableStyles);

return (
<Droppable
Expand Down
11 changes: 7 additions & 4 deletions packages/eui/src/components/form/range/range_draggable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import React, {
} from 'react';
import classNames from 'classnames';

import { useMouseMove, useEuiTheme } from '../../../services';
import {
useMouseMove,
useEuiTheme,
useEuiMemoizedStyles,
} from '../../../services';
import { logicalStyles } from '../../../global_styling';

import type { EuiDualRangeProps } from './types';
Expand Down Expand Up @@ -48,7 +52,6 @@ export const EuiRangeDraggable: FunctionComponent<EuiRangeDraggableProps> = ({
...rest
}) => {
const euiTheme = useEuiTheme();

const outerStyle: React.CSSProperties = useMemo(() => {
return logicalStyles({
left: lowerPosition,
Expand All @@ -67,13 +70,13 @@ export const EuiRangeDraggable: FunctionComponent<EuiRangeDraggableProps> = ({

const classes = classNames('euiRangeDraggable', className);

const styles = euiRangeDraggableStyles(euiTheme);
const styles = useEuiMemoizedStyles(euiRangeDraggableStyles);
const cssStyles = [
styles.euiRangeDraggable,
showTicks && styles.hasTicks,
disabled && styles.disabled,
];
const innerStyles = euiRangeDraggableInnerStyles(euiTheme);
const innerStyles = useEuiMemoizedStyles(euiRangeDraggableInnerStyles);
const cssInnerStyles = [
innerStyles.euiRangeDraggable__inner,
disabled ? styles.disabled : innerStyles.enabled,
Expand Down