-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
181846570 adjustable row height (#1700)
* Adds cell-span styling wo user can add long text * Fixes text styling when row height is greater than the default height * Adds rowHeight as a property of the models * Adds a row divider that can be used as a handle for changing row height * limits the queryselector for the row element to the containing collection * Styles overflow text in a grid cell * Row height changes saves and restores * chore: code review tweaks * chore: fix cypress tests --------- Co-authored-by: Kirk Swenson <[email protected]>
- Loading branch information
Showing
13 changed files
with
188 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,8 @@ | ||
|
|
||
| $header-row-height: 30; | ||
| $header-row-height-px: #{$header-row-height}px; | ||
| $body-row-height: 18; | ||
| $body-row-height-px: #{$body-row-height}px; | ||
|
|
||
| // https://mattferderer.com/use-sass-variables-in-typescript-and-javascript | ||
| :export { | ||
| headerRowHeight: $header-row-height; | ||
| bodyRowHeight: $body-row-height; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { clsx } from "clsx" | ||
| import { observer } from "mobx-react-lite" | ||
| import React, { useEffect, useRef, useState } from "react" | ||
| import { createPortal } from "react-dom" | ||
| import { useCollectionContext } from "../../hooks/use-collection-context" | ||
| import { kDefaultRowHeaderHeight, kDefaultRowHeight, kIndexColumnWidth, kSnapToLineHeight } from "./case-table-types" | ||
| import { useCaseTableModel } from "./use-case-table-model" | ||
| import { useCollectionTableModel } from "./use-collection-table-model" | ||
|
|
||
| const kTableRowDividerHeight = 13 | ||
| const kTableDividerOffset = Math.floor(kTableRowDividerHeight / 2) | ||
| interface IRowDividerProps { | ||
| rowId: string | ||
| } | ||
| export const RowDivider = observer(function RowDivider({ rowId }: IRowDividerProps) { | ||
| const collectionTableModel = useCollectionTableModel() | ||
| const collectionId = useCollectionContext() | ||
| const collectionTable = collectionTableModel?.element | ||
| const caseTableModel = useCaseTableModel() | ||
| const rows = collectionTableModel?.rows | ||
| const isResizing = useRef(false) | ||
| const startY = useRef(0) | ||
| const getRowHeight = () => collectionTableModel?.rowHeight ?? kDefaultRowHeight | ||
| const initialHeight = useRef(getRowHeight()) | ||
| const rowIdx = rows?.findIndex(row => row.__id__ === rowId) | ||
| const [rowElement, setRowElement] = useState<HTMLDivElement | null>(null) | ||
| const getRowBottom = () => { | ||
| if (rowIdx === 0) return getRowHeight() | ||
| else return (rowIdx && collectionTableModel?.getRowBottom(rowIdx)) ?? kDefaultRowHeight | ||
| } | ||
|
|
||
|
|
||
| useEffect(() => { | ||
| (rowIdx != null && collectionTable) && | ||
| setRowElement(collectionTable.querySelector(`[aria-rowindex="${rowIdx + 2}"]`) as HTMLDivElement) | ||
| }, [collectionTable, rowIdx]) | ||
|
|
||
| // allow the user to drag the divider | ||
| const handleMouseDown = (e: React.MouseEvent) => { | ||
| e.stopPropagation() | ||
| isResizing.current = true | ||
| startY.current = e.clientY | ||
| initialHeight.current = getRowHeight() | ||
| document.addEventListener("mousemove", handleMouseMove) | ||
| document.addEventListener("mouseup", handleMouseUp) | ||
| } | ||
|
|
||
| const handleMouseMove = (e: MouseEvent) => { | ||
| e.stopPropagation() | ||
| if (isResizing.current) { | ||
| const deltaY = e.clientY - startY.current | ||
| const tempNewHeight = Math.max(kDefaultRowHeight, initialHeight.current + deltaY) | ||
| const newHeight = kSnapToLineHeight * Math.round((tempNewHeight - 4) / kSnapToLineHeight) + 4 | ||
| collectionTableModel?.setRowHeight(newHeight) | ||
| } | ||
| } | ||
|
|
||
| const handleMouseUp = (e: MouseEvent) => { | ||
| e.stopPropagation() | ||
| isResizing.current = false | ||
| caseTableModel?.applyModelChange(() => { | ||
| caseTableModel?.setRowHeightForCollection(collectionId, getRowHeight()) | ||
| }, | ||
| { | ||
| log: "Change row height", | ||
| undoStringKey: "DG.Undo.caseTable.changeRowHeight", | ||
| redoStringKey: "DG.Redo.caseTable.changeRowHeight" | ||
| } | ||
| ) | ||
| document.removeEventListener("mousemove", handleMouseMove) | ||
| document.removeEventListener("mouseup", handleMouseUp) | ||
| } | ||
|
|
||
| const className = clsx("codap-row-divider") | ||
| const top = getRowBottom() + kDefaultRowHeaderHeight - kTableDividerOffset | ||
| const width = kIndexColumnWidth | ||
| return ( | ||
| rowElement | ||
| ? createPortal(( | ||
| <div className={className} onMouseDown={handleMouseDown} | ||
| data-testid={`row-divider-${rowIdx}`} style={{top, width}} | ||
| /> | ||
| ), rowElement) | ||
| : null | ||
| ) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.