Skip to content

Commit

Permalink
Fix #5640 (#5703)
Browse files Browse the repository at this point in the history
Fix #5556
Fix #5487
Fix #5457
Fix #5370
Fix #4051
  • Loading branch information
melloware authored Jan 8, 2024
1 parent b6aee40 commit abb41e6
Show file tree
Hide file tree
Showing 10 changed files with 91 additions and 45 deletions.
5 changes: 4 additions & 1 deletion components/lib/confirmdialog/ConfirmDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const ConfirmDialog = React.memo(
}));

const createFooter = () => {
const defaultFocus = getPropValue('defaultFocus');
const acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
const rejectClassName = classNames(
'p-confirm-dialog-reject',
Expand All @@ -141,6 +142,7 @@ export const ConfirmDialog = React.memo(

const rejectButtonProps = {
label: rejectLabel,
autoFocus: defaultFocus === 'reject',
icon: getPropValue('rejectIcon'),
className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })),
onClick: reject,
Expand All @@ -154,6 +156,7 @@ export const ConfirmDialog = React.memo(
const acceptButtonProps = mergeProps(
{
label: acceptLabel,
autoFocus: defaultFocus === undefined || defaultFocus === 'accept',
icon: getPropValue('acceptIcon'),
className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
onClick: accept,
Expand All @@ -168,7 +171,7 @@ export const ConfirmDialog = React.memo(
const content = (
<>
<Button {...rejectButtonProps} />
<Button {...acceptButtonProps} autoFocus />
<Button {...acceptButtonProps} />
</>
);

Expand Down
27 changes: 14 additions & 13 deletions components/lib/confirmdialog/ConfirmDialogBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,25 @@ const classes = {
export const ConfirmDialogBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmDialog',
tagKey: undefined,
visible: undefined,
message: null,
rejectLabel: null,
acceptLabel: null,
icon: null,
rejectIcon: null,
acceptIcon: null,
rejectClassName: null,
accept: null,
acceptClassName: null,
className: null,
acceptIcon: null,
acceptLabel: null,
appendTo: null,
footer: null,
breakpoints: null,
children: undefined,
className: null,
defaultFocus: 'accept',
footer: null,
icon: null,
message: null,
onHide: null,
accept: null,
reject: null,
children: undefined
rejectClassName: null,
rejectIcon: null,
rejectLabel: null,
tagKey: undefined,
visible: undefined
},
css: {
classes
Expand Down
10 changes: 10 additions & 0 deletions components/lib/confirmdialog/confirmdialog.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,11 @@ interface ConfirmDialogOptions {
* @defaultValue No
*/
rejectLabel: string;
/**
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
* @defaultValue accept
*/
defaultFocus: string;
/**
* Default element created by the component.
*/
Expand Down Expand Up @@ -194,6 +199,11 @@ export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer
* Style class of the accept button.
*/
acceptClassName?: string | undefined;
/**
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
* @defaultValue accept
*/
defaultFocus?: string | undefined;
/**
* DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
* @defaultValue document.body
Expand Down
12 changes: 9 additions & 3 deletions components/lib/confirmpopup/ConfirmPopup.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { useOnEscapeKey } from '../../lib/hooks/Hooks';
import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
import { Button } from '../button/Button';
import { useHandleStyle } from '../componentbase/ComponentBase';
Expand All @@ -8,7 +9,6 @@ import { OverlayService } from '../overlayservice/OverlayService';
import { Portal } from '../portal/Portal';
import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
import { ConfirmPopupBase } from './ConfirmPopupBase';
import { useOnEscapeKey } from '../../lib/hooks/Hooks';

export const confirmPopup = (props = {}) => {
props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
Expand Down Expand Up @@ -143,8 +143,14 @@ export const ConfirmPopup = React.memo(
const onEntered = () => {
bindOverlayListener();

if (acceptBtnRef.current) {
acceptBtnRef.current.focus();
const defaultFocus = getPropValue('defaultFocus');

if (defaultFocus === undefined || defaultFocus === 'accept') {
acceptBtnRef.current && acceptBtnRef.current.focus();
}

if (defaultFocus === 'reject') {
rejectBtnRef.current && rejectBtnRef.current.focus();
}

callbackFromProp('onShow');
Expand Down
33 changes: 17 additions & 16 deletions components/lib/confirmpopup/ConfirmPopupBase.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,29 +74,30 @@ const classes = {
export const ConfirmPopupBase = ComponentBase.extend({
defaultProps: {
__TYPE: 'ConfirmPopup',
tagKey: undefined,
target: null,
visible: false,
message: null,
rejectLabel: null,
acceptLabel: null,
icon: null,
rejectIcon: null,
acceptIcon: null,
rejectClassName: null,
accept: null,
acceptClassName: null,
className: null,
style: null,
acceptIcon: null,
acceptLabel: null,
appendTo: null,
children: undefined,
className: null,
closeOnEscape: true,
defaultFocus: 'accept',
dismissable: true,
footer: null,
onShow: null,
icon: null,
message: null,
onHide: null,
accept: null,
onShow: null,
reject: null,
rejectClassName: null,
rejectIcon: null,
rejectLabel: null,
style: null,
tagKey: undefined,
target: null,
transitionOptions: null,
children: undefined,
closeOnEscape: true
visible: false
},
css: {
classes,
Expand Down
10 changes: 10 additions & 0 deletions components/lib/confirmpopup/confirmpopup.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,11 @@ interface ConfirmPopupOptions {
* @defaultValue No
*/
rejectLabel: string;
/**
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
* @defaultValue accept
*/
defaultFocus: string;
/**
* Default element created by the component.
*/
Expand Down Expand Up @@ -178,6 +183,11 @@ export interface ConfirmPopupProps {
* @defaultValue false
*/
visible?: boolean | undefined;
/**
* Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
* @defaultValue accept
*/
defaultFocus?: string | undefined;
/**
* Message of the confirmation.
*/
Expand Down
12 changes: 7 additions & 5 deletions components/lib/datatable/BodyCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,6 @@ export const BodyCell = React.memo((props) => {
options: true
});

if (props.editMode === 'row' && props.editing !== editingState) {
setEditingState(props.editing);
}

const isEditable = () => {
return getColumnProp('editor');
};
Expand Down Expand Up @@ -512,6 +508,12 @@ export const BodyCell = React.memo((props) => {
}
});

React.useEffect(() => {
if (props.editMode === 'row' && props.editing !== editingState) {
setEditingState(props.editing);
}
}, [props.editMode, props.editing, editingState]);

useUpdateEffect(() => {
if (props.editMode === 'cell' || props.editMode === 'row') {
setEditingRowDataState(getEditingRowData());
Expand Down Expand Up @@ -558,14 +560,14 @@ export const BodyCell = React.memo((props) => {
const tabIndex = getTabIndex(cellSelected);
const selectionMode = getColumnProp('selectionMode');
const rowReorder = getColumnProp('rowReorder');
const rowEditor = getColumnProp('rowEditor');
const header = getColumnProp('header');
const body = getColumnProp('body');
const editor = getColumnProp('editor');
const frozen = getColumnProp('frozen');
const align = getColumnProp('align');
const value = resolveFieldData();
const columnBodyOptions = { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
Expand Down
8 changes: 6 additions & 2 deletions components/lib/tabmenu/TabMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,21 @@ export const TabMenu = React.memo(
const navRef = React.useRef(null);
const tabsRef = React.useRef({});
const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;

const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
const metaData = {
props,
state: {
id: idState,
activeIndex: activeIndexState
}
};

const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
...metaData
});

const getPTOptions = (key, item, index) => {
return ptm(key, {
parent: metaData,
context: {
item,
index
Expand Down
7 changes: 5 additions & 2 deletions components/lib/treetable/TreeTableRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -332,8 +332,11 @@ export const TreeTableRow = React.memo((props) => {
};

const isSelected = () => {
if ((props.selectionMode === 'single' || props.selectionMode === 'multiple') && props.selectionKeys) return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
else return false;
if (props.selectionMode === 'single' || ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys)) {
return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
}

return false;
};

const isChecked = () => {
Expand Down
12 changes: 9 additions & 3 deletions components/lib/treetable/TreeTableScrollableView.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ export const TreeTableScrollableView = React.memo((props) => {
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
}

scrollHeaderBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;

if (scrollFooterBoxRef.current) {
scrollFooterBoxRef.current.style.marginLeft = -1 * scrollBodyRef.current.scrollLeft + 'px';
scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
}

if (frozenScrollBody) {
Expand All @@ -78,6 +78,12 @@ export const TreeTableScrollableView = React.memo((props) => {
};

useMountEffect(() => {
let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');

el = el.length > 1 ? el[1] : el[0];

const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);

if (!props.frozen) {
const scrollBarWidth = DomHandler.calculateScrollbarWidth();

Expand All @@ -87,7 +93,7 @@ export const TreeTableScrollableView = React.memo((props) => {
scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
}
} else {
scrollBodyRef.current.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
}
});

Expand Down

0 comments on commit abb41e6

Please sign in to comment.