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

Fix #6208: Datatable radio and checkbox selection #6210

Closed
wants to merge 1 commit into from
Closed

Fix #6208: Datatable radio and checkbox selection #6210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion components/lib/api/Locale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,10 @@ let locales = {
aria: {
cancelEdit: 'Cancel Edit',
close: 'Close',
collapseLabel: 'Collapse',
collapseRow: 'Row Collapsed',
editRow: 'Edit Row',
expandLabel: 'Expand',
expandRow: 'Row Expanded',
falseLabel: 'False',
filterConstraint: 'Filter Constraint',
Expand All @@ -99,8 +101,8 @@ let locales = {
next: 'Next',
nextPageLabel: 'Next Page',
nullLabel: 'Not Selected',
pageLabel: 'Page {page}',
otpLabel: 'Please enter one time password character {0}',
pageLabel: 'Page {page}',
passwordHide: 'Hide Password',
passwordShow: 'Show Password',
previous: 'Previous',
Expand All @@ -111,6 +113,7 @@ let locales = {
saveEdit: 'Save Edit',
scrollTop: 'Scroll Top',
selectAll: 'All items selected',
selectLabel: 'Select',
selectRow: 'Row Selected',
showFilterMenu: 'Show Filter Menu',
slide: 'Slide',
Expand All @@ -119,6 +122,7 @@ let locales = {
stars: '{star} stars',
trueLabel: 'True',
unselectAll: 'All items unselected',
unselectLabel: 'Unselect',
unselectRow: 'Row Unselected',
zoomImage: 'Zoom Image',
zoomIn: 'Zoom In',
Expand Down
16 changes: 16 additions & 0 deletions components/lib/api/api.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1182,6 +1182,22 @@ export interface LocaleOptions {
* Rotate Left
*/
rotateLeft?: string;
/**
* Select
*/
selectLabel?: string;
/**
* Unselect
*/
unselectLabel?: string;
/**
* Expand
*/
expandLabel?: string;
/**
* Collapse
*/
collapseLabel?: string;
};
}

Expand Down
8 changes: 4 additions & 4 deletions components/lib/datatable/DataTableBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,11 +389,11 @@ const classes = {
emptyMessage: 'p-datatable-emptymessage',
sortBadge: 'p-sortable-column-badge',
sortIcon: 'p-sortable-column-icon',
checkboxWrapper: ({ rowProps: props, focusedState }) => classNames('p-checkbox p-component', { 'p-checkbox-focused': focusedState, 'p-disabled': props.disabled }),
checkbox: ({ rowProps: props, focusedState }) => classNames('p-checkbox-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
checkboxWrapper: ({ rowProps: props, focusedState }) => classNames('p-checkbox p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled }),
checkbox: ({ rowProps: props, focusedState }) => classNames('p-checkbox-box p-component', { 'p-focus': focusedState }),
checkboxIcon: 'p-checkbox-icon',
radiobuttonWrapper: ({ rowProps: props, focusedState }) => classNames('p-radiobutton p-component', { 'p-radiobutton-focused': focusedState, 'p-disabled': props.disabled }),
radiobutton: ({ rowProps: props, focusedState }) => classNames('p-radiobutton-box p-component', { 'p-highlight': props.checked, 'p-focus': focusedState }),
radiobuttonWrapper: ({ rowProps: props, focusedState }) => classNames('p-radiobutton p-component', { 'p-highlight': props.checked, 'p-focus': focusedState, 'p-disabled': props.disabled }),
radiobutton: ({ rowProps: props, focusedState }) => classNames('p-radiobutton-box p-component', { 'p-focus': focusedState }),
radiobuttonIcon: 'p-radiobutton-icon',
headerTitle: 'p-column-title',
headerCheckboxWrapper: 'p-checkbox p-component',
Expand Down
8 changes: 5 additions & 3 deletions components/lib/datatable/RowRadioButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,12 @@ export const RowRadioButton = React.memo((props) => {
};

const name = `${props.tableSelector}_dt_radio`;
const tabIndex = props.disabled ? null : '0';
const radiobuttonWrapperProps = mergeProps(
{
className: cx('radiobuttonWrapper', { rowProps: props, focusedState })
className: cx('radiobuttonWrapper', { rowProps: props, focusedState }),
tabIndex: tabIndex,
'aria-label': props.ariaLabel
},
getColumnPTOptions('radiobuttonWrapper')
);
Expand All @@ -78,8 +81,7 @@ export const RowRadioButton = React.memo((props) => {
onFocus: (e) => onFocus(e),
onBlur: (e) => onBlur(e),
onChange: (e) => onChange(e),
onKeyDown: (e) => onKeyDown(e),
'aria-label': props.ariaLabel
onKeyDown: (e) => onKeyDown(e)
},
getColumnPTOptions('hiddenInput')
);
Expand Down
Loading