diff --git a/src/custom/ViewSwitch/ViewSwitch.tsx b/src/custom/ViewSwitch/ViewSwitch.tsx new file mode 100644 index 000000000..0c06d27d9 --- /dev/null +++ b/src/custom/ViewSwitch/ViewSwitch.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { IconButton } from '../../base/IconButton'; +import { GridOnIcon } from '../../icons/GridOn'; +import { TableChartIcon } from '../../icons/TableChart'; +import { useTheme } from '../../theme'; +import { CustomTooltip } from '../CustomTooltip'; + +export type ViewMode = 'grid' | 'table'; + +export interface ViewSwitchProps { + // The current active view mode. + view: ViewMode; + // Callback invoked with the next view mode when the user clicks the toggle. + changeView: (nextView: ViewMode) => void; + // Optional additional styles for the icon button. + style?: React.CSSProperties; + // If true, the switch is disabled. + disabled?: boolean; + // Optional custom aria-label for the button. + ariaLabel?: string; + // Optional custom tooltip for the grid view icon (shown when in table view). + gridViewTooltip?: string; + // Optional custom tooltip for the table view icon (shown when in grid view). + tableViewTooltip?: string; +} + +function ViewSwitch({ + view, + changeView, + style, + disabled = false, + ariaLabel = 'Switch View', + gridViewTooltip = 'Grid View', + tableViewTooltip = 'Table View' +}: ViewSwitchProps): JSX.Element { + const theme = useTheme(); + const isGrid = view === 'grid'; + const tooltipTitle = isGrid ? tableViewTooltip : gridViewTooltip; + + return ( + + + { + changeView(isGrid ? 'table' : 'grid'); + }} + aria-label={ariaLabel} + sx={{ ...style }} + > + {isGrid ? ( + + ) : ( + + )} + + + + ); +} + +export default ViewSwitch; + diff --git a/src/custom/ViewSwitch/index.ts b/src/custom/ViewSwitch/index.ts new file mode 100644 index 000000000..eb2cace89 --- /dev/null +++ b/src/custom/ViewSwitch/index.ts @@ -0,0 +1,4 @@ +import ViewSwitch from './ViewSwitch'; + +export { ViewSwitch }; +export type { ViewMode, ViewSwitchProps } from './ViewSwitch'; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 51a104ce5..ab400fd16 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -52,6 +52,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList'; import UniversalFilter, { UniversalFilterProps } from './UniversalFilter'; import { UsersTable, UserTableAvatarInfo } from './UsersTable'; import { VisibilityChipMenu } from './VisibilityChipMenu'; +import { ViewSwitch, ViewSwitchProps, ViewMode } from './ViewSwitch'; export { CatalogCard } from './CatalogCard'; export { CatalogFilterSidebar } from './CatalogFilterSection'; export type { FilterListType } from './CatalogFilterSection'; @@ -121,6 +122,7 @@ export { UsersTable, UserTableAvatarInfo, useWindowDimensions, + ViewSwitch, VisibilityChipMenu, withErrorBoundary, withSuppressedErrorBoundary @@ -161,7 +163,9 @@ export type { StyledCardProps, TableAction, TransferListProps, - UniversalFilterProps + UniversalFilterProps, + ViewMode, + ViewSwitchProps }; export * from './CatalogDesignTable';