feat: toggle board field visibilities (#1547)
Closes #1537, Closes #1539
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import type { ComponentProps, ComponentType, Context } from 'react';
|
||||
import type { ComponentProps, Context, ReactNode } from 'react';
|
||||
|
||||
import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
|
||||
import { TopBar } from '@/ui/top-bar/TopBar';
|
||||
@ -22,7 +22,7 @@ import {
|
||||
} from './ViewsDropdownButton';
|
||||
|
||||
export type ViewBarProps<SortField> = ComponentProps<'div'> & {
|
||||
OptionsDropdownButton: ComponentType;
|
||||
optionsDropdownButton: ReactNode;
|
||||
optionsDropdownKey: string;
|
||||
scopeContext: Context<string | null>;
|
||||
} & Pick<
|
||||
@ -41,7 +41,7 @@ export const ViewBar = <SortField,>({
|
||||
onViewsChange,
|
||||
onViewSelect,
|
||||
onViewSubmit,
|
||||
OptionsDropdownButton,
|
||||
optionsDropdownButton,
|
||||
optionsDropdownKey,
|
||||
scopeContext,
|
||||
...props
|
||||
@ -76,7 +76,7 @@ export const ViewBar = <SortField,>({
|
||||
hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
|
||||
isPrimaryButton
|
||||
/>
|
||||
<OptionsDropdownButton />
|
||||
{optionsDropdownButton}
|
||||
</>
|
||||
}
|
||||
bottomComponent={
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
|
||||
import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
|
||||
import type {
|
||||
ViewFieldDefinition,
|
||||
ViewFieldMetadata,
|
||||
} from '@/ui/editable-field/types/ViewField';
|
||||
import { IconMinus, IconPlus } from '@/ui/icon';
|
||||
import { MenuItem } from '@/ui/menu-item/components/MenuItem';
|
||||
|
||||
type OwnProps<Field> = {
|
||||
fields: Field[];
|
||||
onVisibilityChange: (field: Field) => void;
|
||||
title: string;
|
||||
};
|
||||
|
||||
export function ViewFieldsVisibilityDropdownSection<
|
||||
Field extends ViewFieldDefinition<ViewFieldMetadata>,
|
||||
>({ fields, onVisibilityChange, title }: OwnProps<Field>) {
|
||||
return (
|
||||
<>
|
||||
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
|
||||
<StyledDropdownMenuItemsContainer>
|
||||
{fields.map((field) => (
|
||||
<MenuItem
|
||||
key={field.key}
|
||||
LeftIcon={field.Icon}
|
||||
iconButtons={[
|
||||
{
|
||||
Icon: field.isVisible ? IconMinus : IconPlus,
|
||||
onClick: () => onVisibilityChange(field),
|
||||
},
|
||||
]}
|
||||
text={field.name}
|
||||
/>
|
||||
))}
|
||||
</StyledDropdownMenuItemsContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user