Skip to content

Commit

Permalink
[!!!] Remove shouldComponentUpdate logic & watchedItemProps
Browse files Browse the repository at this point in the history 
- replace `updateFocus` with `takeInitialFocus`, and do not continue to update/hijack focus once initial focus has been set

 - this removes the need to restrict how often `EuiContextMenuPanel` updates (which also requires a bunch of tedious `items` diffing that we will no longer need)
  • Loading branch information
@cee-chen
cee-chen committed May 5, 2022
1 parent 6ef9342 commit 1fb9b24
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 319 deletions.
140 changes: 0 additions & 140 deletions src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,143 +130,3 @@ exports[`EuiContextMenuPanel props transitionDirection previous with transitionT
<div />
</div>
`;

exports[`EuiContextMenuPanel updating items and content updates to items should not re-render if any items's watchedItemProps did not change 1`] = `
"<EuiContextMenuPanel items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
<EuiContextMenuItem data-counter={0}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option A
</span>
</span>
</button>
</EuiContextMenuItem>
<EuiContextMenuItem data-counter={1}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option B
</span>
</span>
</button>
</EuiContextMenuItem>
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
exports[`EuiContextMenuPanel updating items and content updates to items should not re-render if any items's watchedItemProps did not change 2`] = `
"<EuiContextMenuPanel items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
<EuiContextMenuItem data-counter={0}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option A
</span>
</span>
</button>
</EuiContextMenuItem>
<EuiContextMenuItem data-counter={1}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option B
</span>
</span>
</button>
</EuiContextMenuItem>
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
exports[`EuiContextMenuPanel updating items and content updates to items should re-render at all times when children exists 1`] = `
"<EuiContextMenuPanel items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
Hello World
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
exports[`EuiContextMenuPanel updating items and content updates to items should re-render at all times when children exists 2`] = `
"<EuiContextMenuPanel items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
More Salutations
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
exports[`EuiContextMenuPanel updating items and content updates to items should re-render if any items's watchedItemProps did change 1`] = `
"<EuiContextMenuPanel watchedItemProps={{...}} items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
<EuiContextMenuItem data-counter={0}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option A
</span>
</span>
</button>
</EuiContextMenuItem>
<EuiContextMenuItem data-counter={1}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option B
</span>
</span>
</button>
</EuiContextMenuItem>
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
exports[`EuiContextMenuPanel updating items and content updates to items should re-render if any items's watchedItemProps did change 2`] = `
"<EuiContextMenuPanel watchedItemProps={{...}} items={{...}}>
<div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex={-1} onAnimationEnd={[Function]}>
<EuiResizeObserver onResize={[Function: onResize]}>
<div>
<EuiContextMenuItem data-counter={2}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={2}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option A
</span>
</span>
</button>
</EuiContextMenuItem>
<EuiContextMenuItem data-counter={3}>
<button disabled={false} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={3}>
<span className=\\"euiContextMenu__itemLayout\\">
<span className=\\"euiContextMenuItem__text\\">
Option B
</span>
</span>
</button>
</EuiContextMenuItem>
</div>
</EuiResizeObserver>
</div>
</EuiContextMenuPanel>"
`;
92 changes: 0 additions & 92 deletions src/components/context_menu/context_menu_panel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,96 +255,4 @@ describe('EuiContextMenuPanel', () => {
});

// @see Cypress context_menu_panel.spec.tsx for focus & keyboard nav testing

describe('updating items and content', () => {
describe('updates to items', () => {
it("should not re-render if any items's watchedItemProps did not change", () => {
expect.assertions(2); // make sure the assertion in the `setProps` callback is executed

// by not passing `watchedItemProps` no changes to items should cause a re-render
const component = mount(
<EuiContextMenuPanel
items={[
<EuiContextMenuItem key="A" data-counter={0}>
Option A
</EuiContextMenuItem>,
<EuiContextMenuItem key="B" data-counter={1}>
Option B
</EuiContextMenuItem>,
]}
/>
);

expect(component.debug()).toMatchSnapshot();

component.setProps(
{
items: [
<EuiContextMenuItem key="A" data-counter={2}>
Option A
</EuiContextMenuItem>,
<EuiContextMenuItem key="B" data-counter={3}>
Option B
</EuiContextMenuItem>,
],
},
() => {
expect(component.debug()).toMatchSnapshot();
}
);
});

it("should re-render if any items's watchedItemProps did change", () => {
expect.assertions(2); // make sure the assertion in the `setProps` callback is executed

// by referencing the `data-counter` property in `watchedItemProps`
// changes to the items should be picked up and re-rendered
const component = mount(
<EuiContextMenuPanel
watchedItemProps={['data-counter']}
items={[
<EuiContextMenuItem key="A" data-counter={0}>
Option A
</EuiContextMenuItem>,
<EuiContextMenuItem key="B" data-counter={1}>
Option B
</EuiContextMenuItem>,
]}
/>
);

expect(component.debug()).toMatchSnapshot();

component.setProps(
{
items: [
<EuiContextMenuItem key="A" data-counter={2}>
Option A
</EuiContextMenuItem>,
<EuiContextMenuItem key="B" data-counter={3}>
Option B
</EuiContextMenuItem>,
],
},
() => {
expect(component.debug()).toMatchSnapshot();
}
);
});

it('should re-render at all times when children exists', () => {
expect.assertions(2); // make sure the assertion in the `setProps` callback is executed

const component = mount(
<EuiContextMenuPanel>Hello World</EuiContextMenuPanel>
);

expect(component.debug()).toMatchSnapshot();

component.setProps({ children: 'More Salutations' }, () => {
expect(component.debug()).toMatchSnapshot();
});
});
});
});
});
Loading

0 comments on commit 1fb9b24

Please sign in to comment.