mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
b1592adc66
* dev: initialize new date picker * style: selected date focus state * chore: replace custom date filter modal components * chore: replaced inbox snooze popover datepicker * chore: replaced the custom date picker * style: date range picker designed * chore: date range picker implemented throughout the platform * chore: updated tab indices * chore: range-picker in the issue layouts * chore: passed due date color * chore: removed range picker from issue dates
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { useRef } from "react";
|
|
import { useRouter } from "next/router";
|
|
// types
|
|
import { IIssueDisplayProperties, TIssue } from "@plane/types";
|
|
import { EIssueActions } from "../types";
|
|
// constants
|
|
import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
|
|
// components
|
|
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
|
|
import { useEventTracker } from "hooks/store";
|
|
import { observer } from "mobx-react";
|
|
|
|
type Props = {
|
|
displayProperties: IIssueDisplayProperties;
|
|
issueDetail: TIssue;
|
|
disableUserActions: boolean;
|
|
property: keyof IIssueDisplayProperties;
|
|
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
|
|
isEstimateEnabled: boolean;
|
|
};
|
|
|
|
export const IssueColumn = observer((props: Props) => {
|
|
const { displayProperties, issueDetail, disableUserActions, property, handleIssues, isEstimateEnabled } = props;
|
|
// router
|
|
const router = useRouter();
|
|
const tableCellRef = useRef<HTMLTableCellElement | null>(null);
|
|
const { captureIssueEvent } = useEventTracker();
|
|
|
|
const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
|
|
|
|
const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
|
|
|
|
return (
|
|
<WithDisplayPropertiesHOC
|
|
displayProperties={displayProperties}
|
|
displayPropertyKey={property}
|
|
shouldRenderProperty={() => shouldRenderProperty}
|
|
>
|
|
<td
|
|
tabIndex={0}
|
|
className="h-11 w-full min-w-[8rem] bg-custom-background-100 text-sm after:absolute after:w-full after:bottom-[-1px] after:border after:border-custom-border-100 border-r-[1px] border-custom-border-100"
|
|
ref={tableCellRef}
|
|
>
|
|
<Column
|
|
issue={issueDetail}
|
|
onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
|
|
handleIssues({ ...issue, ...data }, EIssueActions.UPDATE).then(() => {
|
|
captureIssueEvent({
|
|
eventName: "Issue updated",
|
|
payload: {
|
|
...issue,
|
|
...data,
|
|
element: "Spreadsheet layout",
|
|
},
|
|
updates: updates,
|
|
path: router.asPath,
|
|
});
|
|
})
|
|
}
|
|
disabled={disableUserActions}
|
|
onClose={() => {
|
|
tableCellRef?.current?.focus();
|
|
}}
|
|
/>
|
|
</td>
|
|
</WithDisplayPropertiesHOC>
|
|
);
|
|
});
|