feat: toggle board field visibilities (#1547)

Closes #1537, Closes #1539
This commit is contained in:
Thaïs
2023-09-13 11:58:52 +02:00
committed by GitHub
parent 67f1da038d
commit 28e12d492c
31 changed files with 492 additions and 168 deletions

View File

@ -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={

View File

@ -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>
</>
);
}