Skip to content

Commit

Permalink
Better working downfill indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
@jassmith
jassmith committed Mar 31, 2022
1 parent 0d52d01 commit db9a794
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 51 deletions.
101 changes: 53 additions & 48 deletions packages/core/src/data-editor/data-editor.tsx
View file
Expand Up @@ -1207,30 +1207,33 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
[columnSelect, focus, gridSelection.columns, mangledCols, rowMarkerOffset, setSelectedColumns]
);

const fillDown = React.useCallback(() => {
if (gridSelection.current === undefined) return;
const damage: Item[] = [];
const r = gridSelection.current.range;
for (let x = 0; x < r.width; x++) {
const fillCol = x + r.x;
const fillVal = getMangedCellContent([fillCol, r.y]);
if (isInnerOnlyCell(fillVal) || !isEditableGridCell(fillVal)) continue;
for (let y = 1; y < r.height; y++) {
const fillRow = y + r.y;
const target = [fillCol, fillRow] as const;
damage.push(target);
mangledOnCellEdited?.(target, {
...fillVal,
});
const fillDown = React.useCallback(
(reverse: boolean) => {
if (gridSelection.current === undefined) return;
const damage: Item[] = [];
const r = gridSelection.current.range;
for (let x = 0; x < r.width; x++) {
const fillCol = x + r.x;
const fillVal = getMangedCellContent([fillCol, reverse ? r.y + r.height - 1 : r.y]);
if (isInnerOnlyCell(fillVal) || !isEditableGridCell(fillVal)) continue;
for (let y = 1; y < r.height; y++) {
const fillRow = reverse ? r.y + r.height - (y + 1) : y + r.y;
const target = [fillCol, fillRow] as const;
damage.push(target);
mangledOnCellEdited?.(target, {
...fillVal,
});
}
}
}

gridRef.current?.damage(
damage.map(c => ({
cell: c,
}))
);
}, [getMangedCellContent, gridSelection, mangledOnCellEdited]);
gridRef.current?.damage(
damage.map(c => ({
cell: c,
}))
);
},
[getMangedCellContent, gridSelection, mangledOnCellEdited]
);

const onMouseUp = React.useCallback(
(args: GridMouseEventArgs, isOutside: boolean) => {
Expand All @@ -1257,32 +1260,34 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
preventDefault,
});
}
if (mouse?.fillHandle === true) {
fillDown();
} else if (
gridSelection.current !== undefined &&
mouse?.previousSelection?.current?.cell !== undefined &&
!prevented
) {
const [selectedCol, selectedRow] = gridSelection.current.cell;
const [prevCol, prevRow] = mouse.previousSelection.current.cell;
const c = getMangedCellContent([col, row]);
const r = c.kind === GridCellKind.Custom ? undefined : CellRenderers[c.kind];
if (r !== undefined && r.onClick !== undefined) {
const newVal = r.onClick(c, a.localEventX, a.localEventY, a.bounds);
if (newVal !== undefined && !isInnerOnlyCell(newVal) && isEditableGridCell(newVal)) {
mangledOnCellEdited(a.location, newVal);
gridRef.current?.damage([
{
cell: a.location,
},
]);
if (gridSelection.current !== undefined) {
if (mouse?.fillHandle === true) {
fillDown(gridSelection.current.cell[1] !== gridSelection.current.range.y);
} else if (
gridSelection.current !== undefined &&
mouse?.previousSelection?.current?.cell !== undefined &&
!prevented
) {
const [selectedCol, selectedRow] = gridSelection.current.cell;
const [prevCol, prevRow] = mouse.previousSelection.current.cell;
const c = getMangedCellContent([col, row]);
const r = c.kind === GridCellKind.Custom ? undefined : CellRenderers[c.kind];
if (r !== undefined && r.onClick !== undefined) {
const newVal = r.onClick(c, a.localEventX, a.localEventY, a.bounds);
if (newVal !== undefined && !isInnerOnlyCell(newVal) && isEditableGridCell(newVal)) {
mangledOnCellEdited(a.location, newVal);
gridRef.current?.damage([
{
cell: a.location,
},
]);
}
}
if (col === selectedCol && col === prevCol && row === selectedRow && row === prevRow) {
onCellActivated?.([col, row]);
reselect(a.bounds, false);
return true;
}
}
if (col === selectedCol && col === prevCol && row === selectedRow && row === prevRow) {
onCellActivated?.([col, row]);
reselect(a.bounds, false);
return true;
}
}
return false;
Expand Down Expand Up @@ -2017,7 +2022,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
gridSelection.current.range.height > 1
) {
// ctrl/cmd + d
fillDown();
fillDown(false);
event.cancel();
} else if (
keybindings.rightFill &&
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
View file
Expand Up @@ -232,6 +232,7 @@ export const AddData: React.VFC = () => {
getCellsForSelection={getCellsForSelection}
rowMarkers={"both"}
onPaste={true}
fillHandle={true}
onCellEdited={setCellValue}
trailingRowOptions={{
sticky: true,
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/data-grid-dnd/data-grid-dnd.tsx
View file
Expand Up @@ -235,6 +235,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
freezeColumns={p.freezeColumns}
onMouseMove={p.onMouseMove}
groupHeaderHeight={p.groupHeaderHeight}
fillHandle={p.fillHandle}
headerHeight={p.headerHeight}
height={p.height}
lastRowSticky={p.lastRowSticky}
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/data-grid-search/data-grid-search.tsx
View file
Expand Up @@ -391,6 +391,7 @@ const DataGridSearch: React.FunctionComponent<DataGridSearchProps> = p => {
groupHeaderHeight={p.groupHeaderHeight}
headerHeight={p.headerHeight}
isFilling={p.isFilling}
fillHandle={p.fillHandle}
lastRowSticky={p.lastRowSticky}
firstColAccessible={p.firstColAccessible}
lockColumns={p.lockColumns}
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/data-grid/data-grid.stories.tsx
View file
Expand Up @@ -48,6 +48,7 @@ export function Simplenotest() {
height={1000}
cellXOffset={0}
cellYOffset={y}
isFilling={false}
onMouseMove={() => undefined}
groupHeaderHeight={0}
accessibilityHeight={50}
Expand Down Expand Up @@ -88,6 +89,7 @@ export function SelectedCellnotest() {
cellXOffset={0}
onMouseMove={() => undefined}
accessibilityHeight={50}
isFilling={false}
cellYOffset={0}
groupHeaderHeight={34}
enableGroups={false}
Expand Down Expand Up @@ -135,6 +137,7 @@ export function SelectedRownotest() {
cellYOffset={0}
groupHeaderHeight={34}
accessibilityHeight={50}
isFilling={false}
enableGroups={false}
rows={1000}
headerHeight={44}
Expand Down Expand Up @@ -175,6 +178,7 @@ export const SelectedColumnnotest = () => {
cellXOffset={0}
cellYOffset={0}
accessibilityHeight={50}
isFilling={false}
groupHeaderHeight={34}
enableGroups={false}
rows={1000}
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/data-grid/data-grid.test.tsx
View file
Expand Up @@ -31,6 +31,7 @@ const basicProps: DataGridProps = {
width: 190,
},
],
isFilling: false,
enableGroups: false,
freezeColumns: 0,
selection: {
Expand Down
6 changes: 3 additions & 3 deletions packages/core/src/data-grid/data-grid.tsx
View file
Expand Up @@ -157,7 +157,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
cellXOffset: cellXOffsetReal,
cellYOffset,
headerHeight,
fillHandle = true,
fillHandle = false,
groupHeaderHeight,
rowHeight,
rows,
Expand Down Expand Up @@ -393,8 +393,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
const isFillHandle =
fillHandle &&
bounds !== undefined &&
bounds.x + bounds.width - posX < 5 &&
bounds.y + bounds.height - posY < 5;
bounds.x + bounds.width - posX < 6 &&
bounds.y + bounds.height - posY < 6;
result = {
kind: "cell",
location: [col, row],
Expand Down
1 change: 1 addition & 0 deletions packages/core/src/scrolling-data-grid/scrolling-data-grid.stories.tsx
View file
Expand Up @@ -70,6 +70,7 @@ export function Simplenotest() {
cellXOffset={x}
cellYOffset={y}
minColumnWidth={50}
isFilling={false}
maxColumnWidth={500}
accessibilityHeight={50}
translateX={translateX}
Expand Down

0 comments on commit db9a794

Please sign in to comment.