Skip to content

Commit

Permalink
chore: use react-popper 2.x in bootstrap4 packages (permits React 18 …
Browse files Browse the repository at this point in the history 
…support) (#3642)

* chore: use react-popper 2.x (react 18 support)

* downgrade react-popper a little + fix modifiers BC

* tweak tests

* fix rendering in bootstrap 4

* tests

* typo

* default value for iterable

---------

Co-authored-by: Vasily Strelyaev <Vasily.Strelyaev@devexpress.com>
  • Loading branch information
@glsignal @VasilyStrelyaev
glsignal and VasilyStrelyaev committed May 15, 2023
1 parent cf41706 commit 345fa12
Show file tree
Hide file tree
Showing 11 changed files with 115 additions and 21 deletions.
15 changes: 14 additions & 1 deletion packages/dx-react-bootstrap4/components/popover.jsx
View file
Expand Up @@ -77,11 +77,24 @@ export class Popover extends React.PureComponent {
renderPopper() {
const {
children, target, renderInBody,
arrowComponent: ArrowComponent, ...restProps
arrowComponent: ArrowComponent, modifiers = [],
...restProps
} = this.props;

const popperModifiers = [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
...modifiers,
];

return (
<Popper
referenceElement={target}
modifiers={popperModifiers}
{...restProps}
>
{({
Expand Down
8 changes: 4 additions & 4 deletions packages/dx-react-bootstrap4/components/popover.test.jsx
View file
Expand Up @@ -50,7 +50,7 @@ describe('BS4 Popover', () => {
);

expect(tree.root.children).toHaveLength(1);
expect(tree.root.find(Popper)).not.toBeNull();
expect(tree.root.findByType(Popper)).not.toBeNull();
});

it('should render correct elements', () => {
Expand All @@ -59,10 +59,10 @@ describe('BS4 Popover', () => {
<Content />
</Popover>
), container);
expect(tree.root.findByProps({className:'popover show bs-popover-undefined'})).not.toBeNull();
expect(tree.root.findByProps({className:'popover show bs-popover-undefined'}).children).toHaveLength(2);
expect(tree.root.findByProps({className:'popover show bs-popover-bottom'})).not.toBeNull();
expect(tree.root.findByProps({className:'popover show bs-popover-bottom'}).children).toHaveLength(2);
expect(tree.root.findAllByProps({className:'.arrow'})).not.toBeNull();
expect(tree.root.findByProps({className:'popover-inner'}).parent.props.className).toBe('popover show bs-popover-undefined');
expect(tree.root.findByProps({className:'popover-inner'}).parent.props.className).toBe('popover show bs-popover-bottom');
expect(tree.root.findByProps({className:'popover-inner'}).find(Content)).not.toBeNull();
});

Expand Down
2 changes: 1 addition & 1 deletion packages/dx-react-chart-bootstrap4/package.json
View file
Expand Up @@ -94,7 +94,7 @@
"dependencies": {
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-popper": "^1.3.11"
"react-popper": "~2.2.5"
},
"peerDependencies": {
"@devexpress/dx-chart-core": "4.0.3",
Expand Down
15 changes: 12 additions & 3 deletions packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.jsx
View file
Expand Up @@ -3,9 +3,18 @@ import PropTypes from 'prop-types';
import { RIGHT, TOP } from '@devexpress/dx-chart-core';
import { Popover } from '../../../../dx-react-bootstrap4/components';

const popperModifiers = {
flip: { enabled: false },
};
const popperModifiers = [
{
name: 'flip',
enabled: false,
},
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
];

export class Overlay extends React.PureComponent {
render() {
Expand Down
30 changes: 24 additions & 6 deletions packages/dx-react-chart-bootstrap4/src/templates/tooltip/overlay.test.jsx
View file
Expand Up @@ -26,9 +26,18 @@ describe('Overlay', () => {
placement: 'top',
isOpen: true,
target: 'test-target',
modifiers: {
flip: { enabled: false },
},
modifiers: [
{
name: 'flip',
enabled: false,
},
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
],
});
expect(tree.root.findByProps({ className: 'content' })).toBeTruthy();
});
Expand All @@ -46,9 +55,18 @@ describe('Overlay', () => {
placement: 'right',
isOpen: true,
target: 'test-target',
modifiers: {
flip: { enabled: false },
},
modifiers: [
{
name: 'flip',
enabled: false,
},
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
],
});
});
});
2 changes: 1 addition & 1 deletion packages/dx-react-chart-demos/package.json
View file
Expand Up @@ -55,7 +55,7 @@
"react-bootstrap": "=0.33.1",
"react-dom": "^17.0.2",
"react-frame-component": "^4.1.3",
"react-popper": "^1.3.11",
"react-popper": "~2.2.5",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"redux": "^4.0.4",
Expand Down
11 changes: 11 additions & 0 deletions packages/dx-react-chart-demos/src/demo-sources/export/bootstrap4/demo.jsx
View file
Expand Up @@ -141,6 +141,16 @@ const Export = () => {
handleClose();
action(chart);
};

const modifiers = [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
];

return (
<Plugin name="Export">
<Template name="top">
Expand All @@ -157,6 +167,7 @@ const Export = () => {
{ anchorEl
? (
<Popper
modifiers={modifiers}
referenceElement={anchorEl}
>
{({
Expand Down
26 changes: 23 additions & 3 deletions packages/dx-react-chart-material-ui/src/templates/tooltip/overlay.jsx
View file
Expand Up @@ -17,9 +17,29 @@ const StyledPopper = styled(Popper)(() => ({
}));

const popperModifiers = arrowRef => ([
{ name: 'flip', enabled: false },
{ name: 'arrow', enabled: true, options: { element: arrowRef } },
{ name: 'offset', options: { offset: [0, 9] } },
{
name: 'flip',
enabled: false,
},
{
name: 'arrow',
enabled: true,
options: {
element: arrowRef,
},
},
{
name: 'offset',
options: {
offset: [0, 9],
},
},
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
]);

export const Overlay = ({
Expand Down
2 changes: 1 addition & 1 deletion packages/dx-react-grid-bootstrap4/package.json
View file
Expand Up @@ -93,7 +93,7 @@
"dependencies": {
"clsx": "^1.0.4",
"prop-types": "^15.7.2",
"react-popper": "^1.3.11"
"react-popper": "~2.2.5"
},
"peerDependencies": {
"@devexpress/dx-grid-core": "4.0.3",
Expand Down
10 changes: 10 additions & 0 deletions packages/dx-styles/dx-chart-bs4.scss
View file
Expand Up @@ -31,3 +31,13 @@
.dx-c-bs4-rect-opacity {
opacity: 0.2;
}

.popover {
&[class*="bs-popover-"] {
margin: 0;
}

.arrow {
margin: 0;
}
}
15 changes: 14 additions & 1 deletion yarn.lock
View file
Expand Up @@ -19198,6 +19198,11 @@ react-fast-compare@^2.0.2:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

react-fast-compare@^3.0.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==

react-frame-component@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.3.tgz#64c09dd29574720879c5f43ee36c17d8ae74d4ec"
Expand Down Expand Up @@ -19259,7 +19264,7 @@ react-overlays@^0.9.0:
react-transition-group "^2.2.1"
warning "^3.0.0"

react-popper@^1.3.11, react-popper@^1.3.6:
react-popper@^1.3.6:
version "1.3.11"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
Expand All @@ -19272,6 +19277,14 @@ react-popper@^1.3.11, react-popper@^1.3.6:
typed-styles "^0.0.7"
warning "^4.0.2"

react-popper@~2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
dependencies:
react-fast-compare "^3.0.1"
warning "^4.0.2"

react-prop-types@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-prop-types/-/react-prop-types-0.4.0.tgz#f99b0bfb4006929c9af2051e7c1414a5c75b93d0"
Expand Down

0 comments on commit 345fa12

Please sign in to comment.