refactor: spreadsheet layout components

This commit is contained in:
Aaryan Khandelwal 2023-10-18 18:39:57 +05:30
parent 2ae71b76c5
commit f82b876379
3 changed files with 163 additions and 176 deletions

View File

@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 54}px`;
return (
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
{properties.key && (
<div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"

View File

@ -34,7 +34,6 @@ import {
} from "types";
// constants
import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
import { Command } from "cmdk";
type Props = {
disableUserActions: boolean;
@ -166,15 +165,10 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
)}
</CustomMenu>
</div>
<div className="h-full min-w-[8rem] w-full">
<Command.Group>
<>
{issues?.map((issue) => (
<Command.Item
key={`${property}-${issue.id}`}
value={`${property}-${issue.id}`}
className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
>
<div className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200">
{property === "state" ? (
<SpreadsheetStateColumn
disabled={disableUserActions}
@ -246,10 +240,8 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
issue={issue}
/>
) : null}
</Command.Item>
</div>
))}
</>
</Command.Group>
</div>
</div>
);

View File

@ -19,7 +19,6 @@ import {
IStateResponse,
IUserLite,
} from "types";
import { Command } from "cmdk";
type Props = {
displayProperties: IIssueDisplayProperties;
@ -81,8 +80,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
}, []);
return (
<Command>
<Command.List>
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
<div className="h-full w-full flex flex-col">
<div
@ -188,7 +185,5 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
</div>
</div>
</div>
</Command.List>
</Command>
);
});