mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fb3dd77b66
* enable keyboard navigation for spreadsheet layout * move the logic to table level instead of cell level * fix perf issue that made it unusable * fix scroll issue with navigation * fix build errors
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { useRef } from "react";
|
|
//types
|
|
import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
|
|
//components
|
|
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
|
|
import { HeaderColumn } from "./columns/header-column";
|
|
import { observer } from "mobx-react";
|
|
|
|
interface Props {
|
|
displayProperties: IIssueDisplayProperties;
|
|
property: keyof IIssueDisplayProperties;
|
|
isEstimateEnabled: boolean;
|
|
displayFilters: IIssueDisplayFilterOptions;
|
|
handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
|
|
}
|
|
export const SpreadsheetHeaderColumn = observer((props: Props) => {
|
|
const { displayProperties, displayFilters, property, isEstimateEnabled, handleDisplayFilterUpdate } = props;
|
|
|
|
//hooks
|
|
const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);
|
|
|
|
const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
|
|
|
|
return (
|
|
<WithDisplayPropertiesHOC
|
|
displayProperties={displayProperties}
|
|
displayPropertyKey={property}
|
|
shouldRenderProperty={shouldRenderProperty}
|
|
>
|
|
<th
|
|
className="h-11 w-full min-w-[8rem] items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100 focus:border-custom-primary-70"
|
|
ref={tableHeaderCellRef}
|
|
tabIndex={0}
|
|
>
|
|
<HeaderColumn
|
|
displayFilters={displayFilters}
|
|
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
|
property={property}
|
|
onClose={() => {
|
|
tableHeaderCellRef?.current?.focus();
|
|
}}
|
|
/>
|
|
</th>
|
|
</WithDisplayPropertiesHOC>
|
|
);
|
|
});
|