Skip to content

Commit

Permalink
Rework basic DataTable components to be free of errors.
Browse files Browse the repository at this point in the history
  • Loading branch information
mkrause committed Nov 27, 2024
1 parent 04c6f29 commit 7060de8
Show file tree
Hide file tree
Showing 7 changed files with 29 additions and 45 deletions.
7 changes: 0 additions & 7 deletions src/assets/icons/_icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,3 @@ export const icons = {
'warning': {},
'workflows': {},
} as const satisfies Record<string, IconDef>;

export type IconKey = keyof typeof icons;

const iconKeys = new Set(Object.keys(icons));
export const isIconKey = (iconKey: string): iconKey is IconKey => {
return iconKeys.has(iconKey);
};
7 changes: 6 additions & 1 deletion src/components/graphics/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,14 @@ import { icons } from '../../../assets/icons/_icons.ts';
import cl from './Icon.module.scss';


export type IconName = keyof typeof icons;
export { cl as IconClassNames };

export type IconName = keyof typeof icons;
export const iconNames = new Set(Object.keys(icons) as Array<IconName>);
export const isIconName = (iconName: string): iconName is IconName => {
return (iconNames as Set<string>).has(iconName);
};

export type Decoration = (
| { type: 'background-circle' }
);
Expand Down
9 changes: 4 additions & 5 deletions src/components/tables/DataTable/plugins/useCustomFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

import * as React from 'react';
import * as ReactTable from 'react-table';
import { type FilterQuery } from '../../MultiSearch/MultiSearch.tsx';


// Actions
Expand All @@ -26,13 +27,11 @@ const reducer = <D extends object>(
};

const useInstance = <D extends object>(instance: ReactTable.TableInstance<D>) => {
const {
state: { customFilters },
dispatch,
} = instance;
const { dispatch, } = instance;
//const customFilters = instance.state.customFilters;

const setCustomFilters = React.useCallback(
customFilters => {
(customFilters: FilterQuery) => {
return dispatch({ type: ReactTable.actions.setCustomFilters, customFilters });
},
[dispatch],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
.bkl-data-table-row-select {
width: bkl.$sizing-7 + bkl.$sizing-1;
max-width: bkl.$sizing-7 + bkl.$sizing-1;

&__header {
.bkl-data-table-row-select__header {
margin-bottom: bkl.$sizing-m;
}

&__cell {
.bkl-data-table-row-select__cell {
margin-bottom: bkl.$sizing-m;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

import * as React from 'react';
import * as ReactTable from 'react-table';
import { Checkbox } from '../../../forms/checkbox/Checkbox';

import { Checkbox } from '../../../forms/controls/Checkbox/Checkbox.tsx';

import './useRowSelectColumn.scss';

Expand All @@ -20,15 +21,15 @@ export const useRowSelectColumn = <D extends object>(hooks: ReactTable.Hooks<D>)
const { checked, onChange } = getToggleAllPageRowsSelectedProps();
return (
<div className="bkl-data-table-row-select__header">
<Checkbox.Item primary checked={checked} onChange={onChange}/>
<Checkbox checked={checked} onChange={onChange}/>
</div>
);
},
Cell: ({ row }: ReactTable.CellProps<D, null>) => {
const { checked, onChange } = row.getToggleRowSelectedProps();
return (
<div className="bkl-data-table-row-select__cell">
<Checkbox.Item primary checked={checked} onChange={onChange}/>
<Checkbox checked={checked} onChange={onChange}/>
</div>
);
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/tables/DataTable/table/DataTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import type { DataTableStatus } from '../DataTableContext.tsx';


// Note: `placeholder` is included in `table` props as part of "Standard HTML Attributes", but it's not actually a
// valid `<table>` attribute, so we can override it.
// valid `<table>` attribute, so we can safely override it.
type DataTableProps<D extends object> = Omit<ComponentProps<'table'>, 'placeholder'> & {
table: ReactTable.TableInstance<D>,
columnGroups?: React.ReactNode,
Expand Down Expand Up @@ -76,7 +76,7 @@ export const DataTable = <D extends object>(props: DataTableProps<D>) => {
{column.render('Header')}
</span>
{column.canSort &&
<Icon icon="arrow-drop-down"
<Icon icon="caret-down"
className={cx('sort-indicator',
{ 'sort-indicator--inactive': !column.isSorted },
{ 'asc': !column.isSorted || (column.isSorted && !column.isSortedDesc) },
Expand Down
32 changes: 9 additions & 23 deletions src/components/tables/DataTable/table/DataTablePlaceholder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@

import * as React from 'react';
import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
import { type IconKey, isIconKey } from '../../../../assets/icons/_icons.ts';
import { Icon, type IconProps } from '../../../graphics/Icon/Icon.tsx';
import { type IconName, isIconName, Icon, type IconProps } from '../../../graphics/Icon/Icon.tsx';

//import './DataTablePlaceholder.scss';


type DataTablePlaceholderProps = ComponentProps<'div'> & {
icon?: IconKey | React.ReactNode,
icon?: IconName | React.ReactNode,
classNameIcon?: ClassNameArgument,
classNameMessage?: ClassNameArgument,
classNameActions?: ClassNameArgument,
Expand All @@ -29,16 +28,10 @@ export const DataTablePlaceholder = (props: DataTablePlaceholderProps) => {
};

const renderIcon = (): React.ReactNode => {
if (typeof icon === 'undefined') {
return renderStandardIcon('view-type-table');
if (typeof icon === 'string' && isIconName(icon)) {
return renderStandardIcon(icon);
}
if (typeof icon === 'string') {
if (isIconKey(icon)) {
return renderStandardIcon(icon);
}
throw new Error(`Invalid icon ${icon}`);
}
return icon;
return renderStandardIcon('file');
};

return (
Expand All @@ -57,7 +50,6 @@ export const DataTablePlaceholder = (props: DataTablePlaceholderProps) => {
</div>
);
};
DataTablePlaceholder.displayName = 'DataTablePlaceholder';


// Loading skeleton (when there's no data to show yet)
Expand All @@ -72,7 +64,6 @@ export const DataTablePlaceholderSkeleton = (props: DataTablePlaceholderSkeleton
</div>
);
};
DataTablePlaceholderSkeleton.displayName = 'DataTablePlaceholderSkeleton';


// Empty table (ready but no data)
Expand All @@ -89,7 +80,6 @@ export const DataTablePlaceholderEmpty = (props: DataTablePlaceholderEmptyProps)
/>
);
};
DataTablePlaceholderEmpty.displayName = 'DataTablePlaceholderEmpty';


type DataTableErrorIconProps = Omit<IconProps, 'icon'> & {
Expand All @@ -100,14 +90,13 @@ export const DataTableErrorIcon = (props: DataTableErrorIconProps) => {
return (
<div className="bk-table-placeholder--error__error-icon">
<Icon icon="cross" className="icon-cross"/>
<Icon decoration={decoration} icon="view-type-table"
<Icon decoration={decoration} icon="file"
{...props}
className={cx('bk-table-placeholder__icon', props.className)}
/>
</div>
);
};
DataTableErrorIcon.displayName = 'DataTableErrorIcon';

type DataTablePlaceholderErrorProps = Omit<DataTablePlaceholderProps, 'placeholderMessage'> & {
// Make `placeholderMessage` optional
Expand All @@ -123,11 +112,10 @@ export const DataTablePlaceholderError = (props: DataTablePlaceholderErrorProps)
/>
);
};
DataTablePlaceholderError.displayName = 'DataTablePlaceholderError';


type DataTableRowPlaceholderProps = ComponentProps<'div'> & {
icon?: IconKey | React.ReactNode,
icon?: IconName | React.ReactNode,
classNameIcon?: ClassNameArgument,
classNameMessage?: ClassNameArgument,
classNameActions?: ClassNameArgument,
Expand All @@ -145,10 +133,10 @@ export const DataTableRowPlaceholder = (props: DataTableRowPlaceholderProps) =>

const renderIcon = (): React.ReactNode => {
if (typeof icon === 'undefined') {
return renderStandardIcon('event-warning');
return renderStandardIcon('alert');
}
if (typeof icon === 'string') {
if (isIconKey(icon)) {
if (isIconName(icon)) {
return renderStandardIcon(icon);
}
throw new Error(`Invalid icon ${icon}`);
Expand All @@ -172,7 +160,6 @@ export const DataTableRowPlaceholder = (props: DataTableRowPlaceholderProps) =>
</div>
);
};
DataTableRowPlaceholder.displayName = 'DataTableRowPlaceholder';

type DataTablePlaceholderEndOfTableProps = Omit<DataTableRowPlaceholderProps, 'placeholderMessage'> & {
// Make `placeholderMessage` optional
Expand All @@ -188,4 +175,3 @@ export const DataTablePlaceholderEndOfTable = (props: DataTablePlaceholderEndOfT
/>
);
};
DataTablePlaceholderEndOfTable.displayName = 'DataTablePlaceholderEndOfTable';

0 comments on commit 7060de8

Please sign in to comment.