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.

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(AnalyticalTable): allow selecting all rows via keyboard #6168

Merged
merged 2 commits into from
Aug 6, 2024
Merged
Changes from 1 commit
Commits
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
Original file line number Diff line number Diff line change
@@ -44,6 +44,7 @@ export interface ColumnHeaderProps {
id: string;
onClick: MouseEventHandler<HTMLDivElement> | undefined;
onKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;
onKeyUp?: KeyboardEventHandler<HTMLDivElement> | undefined;
className: string;
style: CSSProperties;
column: ColumnType;
@@ -80,6 +81,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
visibleColumnIndex,
onClick,
onKeyDown,
onKeyUp,
isFiltered,
title,
'aria-label': ariaLabel,
@@ -131,7 +133,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
const hasPopover = column.canGroupBy || column.canSort || column.canFilter;

const handleHeaderCellClick = (e) => {
onClick?.(e);
if (typeof onClick === 'function') {
onClick(e);
}
if (hasPopover) {
setPopoverOpen(true);
}
@@ -142,7 +146,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
: { left: 0, transform: `translateX(${virtualColumn.start}px)` };

const handleHeaderCellKeyDown = (e) => {
onKeyDown?.(e);
if (typeof onKeyDown === 'function') {
onKeyDown(e);
}
if (hasPopover && e.code === 'Enter') {
setPopoverOpen(true);
}
@@ -152,6 +158,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
};

const handleHeaderCellKeyUp = (e) => {
if (typeof onKeyUp === 'function') {
onKeyUp(e);
}
if (hasPopover && e.code === 'Space' && !e.target.hasAttribute('ui5-li')) {
setPopoverOpen(true);
}
Original file line number Diff line number Diff line change
@@ -349,6 +349,9 @@ function getPayload(e, column) {
const setHeaderProps = (headerProps, { instance: { dispatch }, column }) => {
// resize col with keyboard
const handleKeyDown = (e) => {
if (typeof headerProps.onKeyDown === 'function') {
headerProps.onKeyDown(e);
}
if (e.nativeEvent.shiftKey) {
if (e.key === 'ArrowRight') {
const payload = getPayload(e, column);
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@ import type { ReactTableHooks } from '../types/index.js';

const customCheckBoxStyling = {
verticalAlign: 'middle',
pointerEvents: 'none'
pointerEvents: 'none',
display: 'block'
} as CSSProperties;

/*
@@ -78,6 +79,9 @@ const headerProps = (props, { instance }) => {
selectionMode === AnalyticalTableSelectionMode.Multiple
) {
const onClick = (e) => {
if (typeof props.onClick === 'function') {
props.onClick(e);
}
toggleAllRowsSelected(!isAllRowsSelected);
const isFiltered = filters?.length > 0 || !!globalFilter;
if (typeof onRowSelect === 'function') {
@@ -97,6 +101,9 @@ const headerProps = (props, { instance }) => {
};

const onKeyDown = (e) => {
if (typeof props.onKeyDown === 'function') {
props.onKeyDown(e);
}
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault();
if (e.code === 'Enter') {
@@ -106,6 +113,9 @@ const headerProps = (props, { instance }) => {
};

const onKeyUp = (e) => {
if (typeof props.onKeyUp === 'function') {
props.onKeyUp(e);
}
if (e.code === 'Space') {
e.preventDefault();
onClick(e);

Unchanged files with check annotations Beta

function ResizeTestComponent({ onChange }: { onChange: (event: { width: number; height: number }) => void }) {
useEffect(() => {
attachResizeHandler(onChange);
}, []);

Check warning on line 12 in packages/base/src/Device/index.cy.tsx

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array
const unregister = () => {
detachResizeHandler(onChange);
}) {
useEffect(() => {
attachOrientationChangeHandler(onChange);
}, []);

Check warning on line 32 in packages/base/src/Device/index.cy.tsx

GitHub Actions / lint

React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array
const unregister = () => {
detachOrientationChangeHandler(onChange);
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 79 in packages/charts/src/components/BarChart/BarChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
}
interface DimensionConfig extends IChartDimension {
? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
: 0;
const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 189 in packages/charts/src/components/BarChart/BarChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
const onItemLegendClick = useLegendItemClick(onLegendClick);
const labelFormatter = useLabelFormatter(primaryDimension);
speed={2}
backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}

Check warning on line 15 in packages/charts/src/components/BarChart/Placeholder.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
>
<rect x="20" y="10" width="1" height="135" />
<rect x="20" y="20" width="85" height="15" />
* @param measure {IChartMeasure} Current measure object
* @param dataElement {object} Current data element
*/
highlightColor?: (value: number, measure: MeasureConfig, dataElement: Record<string, any>) => CSSProperties['color'];

Check warning on line 69 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
}
interface DimensionConfig extends IChartDimension {
...rest
} = props;
const [componentRef, chartRef] = useSyncRef<any>(ref);

Check warning on line 149 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
const chartConfig: BulletChartProps['chartConfig'] = {
yAxisVisible: false,
);
} else {
onDataPointClick(
enrichEventWithDetails({} as any, {

Check warning on line 228 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
value: eventOrIndex.value,
dataKey: eventOrIndex.dataKey,
dataIndex: eventOrIndex.index,
{chartConfig.xAxisVisible &&
dimensions.map((dimension, index) => {
let AxisComponent;
const axisProps: any = {

Check warning on line 304 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
dataKey: dimension.accessor,
interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
tickLine: index < 1,
/>
)}
{sortedMeasures?.map((element, index) => {
const chartElementProps: any = {

Check warning on line 442 in packages/charts/src/components/BulletChart/BulletChart.tsx

GitHub Actions / lint

Unexpected any. Specify a different type
isAnimationActive: !noAnimation
};
let labelPosition = 'top';