Skip to content

Commit

Permalink
Fix primefaces#3922: Dialog responsive breakpoints in strict mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware committed Jan 6, 2023
1 parent f13246b commit 155c32b
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 30 deletions.
8 changes: 4 additions & 4 deletions components/doc/dialog/responsivedoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function ResponsiveDoc(props) {
const code = {
basic: `
<Button label="Show" icon="pi pi-external-link" onClick={() => onClick('displayResponsive')} className="mr-2 mb-2 line-height-3" style={{ minWidth: "10rem" }}/>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw', '641px': '100vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Expand Down Expand Up @@ -70,7 +70,7 @@ export default function ResponsiveDoc() {
return (
<div>
<Button label="Show" icon="pi pi-external-link" onClick={() => onClick('displayResponsive')} className="mr-2 mb-2 line-height-3" style={{ minWidth: "10rem" }}/>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw', '641px': '100vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Expand Down Expand Up @@ -112,7 +112,7 @@ export default function ResponsiveDoc() {
return (
<div>
<Button label="Show" icon="pi pi-external-link" onClick={() => onClick('displayResponsive')} className="mr-2 mb-2 line-height-3" style={{ minWidth: "10rem" }}/>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw', '641px': '100vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Expand All @@ -134,7 +134,7 @@ export default function ResponsiveDoc() {
</DocSectionText>
<div className="card flex justify-content-center ">
<Button label="Show" icon="pi pi-external-link" onClick={() => onClick('displayResponsive')} className="mr-2 mb-2 line-height-3" style={{ minWidth: '10rem' }} />
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<Dialog header="Header" visible={displayResponsive} onHide={() => onHide('displayResponsive')} breakpoints={{ '960px': '75vw', '641px': '100vw' }} style={{ width: '50vw' }} footer={renderFooter('displayResponsive')}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Expand Down
41 changes: 15 additions & 26 deletions components/lib/dialog/Dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { CSSTransition } from '../csstransition/CSSTransition';
import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';

export const Dialog = React.forwardRef((props, ref) => {
const [idState, setIdState] = React.useState(props.id);
const uniqueId = props.id ? props.id : UniqueComponentId();
const [idState, setIdState] = React.useState(uniqueId);
const [maskVisibleState, setMaskVisibleState] = React.useState(false);
const [visibleState, setVisibleState] = React.useState(false);
const [maximizedState, setMaximizedState] = React.useState(props.maximized);
Expand All @@ -22,7 +23,7 @@ export const Dialog = React.forwardRef((props, ref) => {
const lastPageX = React.useRef(null);
const lastPageY = React.useRef(null);
const styleElement = React.useRef(null);
const attributeSelector = React.useRef('');
const attributeSelector = React.useRef(uniqueId);
const maximized = props.onMaximize ? props.maximized : maximizedState;

const [bindDocumentKeyDownListener, unbindDocumentKeyDownListener] = useEventListener({ type: 'keydown', listener: (event) => onKeyDown(event) });
Expand Down Expand Up @@ -332,23 +333,21 @@ export const Dialog = React.forwardRef((props, ref) => {
};

const createStyle = () => {
if (!styleElement.current) {
styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
styleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);

let innerHTML = '';
let innerHTML = '';

for (let breakpoint in props.breakpoints) {
innerHTML += `
@media screen and (max-width: ${breakpoint}) {
.p-dialog[${attributeSelector.current}] {
width: ${props.breakpoints[breakpoint]} !important;
}
for (let breakpoint in props.breakpoints) {
innerHTML += `
@media screen and (max-width: ${breakpoint}) {
.p-dialog[${attributeSelector.current}] {
width: ${props.breakpoints[breakpoint]} !important;
}
`;
}

styleElement.current.innerHTML = innerHTML;
}
`;
}

styleElement.current.innerHTML = innerHTML;
};

const changeScrollOnMaximizable = () => {
Expand All @@ -360,16 +359,6 @@ export const Dialog = React.forwardRef((props, ref) => {
};

useMountEffect(() => {
const unqiueId = UniqueComponentId();

if (!idState) {
setIdState(unqiueId);
}

if (!attributeSelector.current) {
attributeSelector.current = unqiueId;
}

if (props.visible) {
setMaskVisibleState(true);
}
Expand Down

0 comments on commit 155c32b

Please sign in to comment.