From 677648da06059287f5b8212234a7b211e03f500a Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 1/6] Implement custom widths --- package.json | 2 + src/Cell.tsx | 9 +- src/ColumnIndicator.tsx | 10 +- src/CornerIndicator.tsx | 5 +- src/HeaderRow.tsx | 4 +- src/Row.tsx | 4 +- src/RowIndicator.tsx | 7 +- src/Spreadsheet.css | 18 +- src/Spreadsheet.tsx | 41 +++- src/Table.tsx | 10 +- src/column-width-manager.tsx | 262 ++++++++++++++++++++++++++ src/stories/CustomCell.tsx | 14 +- src/stories/CustomCornerIndicator.tsx | 5 +- src/stories/Spreadsheet.stories.tsx | 2 +- src/types.ts | 8 + yarn.lock | 177 ++++++++++++++++- 16 files changed, 547 insertions(+), 31 deletions(-) create mode 100644 src/column-width-manager.tsx diff --git a/package.json b/package.json index 2290a999..190c4009 100755 --- a/package.json +++ b/package.json @@ -35,9 +35,11 @@ "dependencies": { "@reduxjs/toolkit": "^1.7.1", "@types/array.prototype.flatmap": "^1.2.2", + "@types/styled-components": "^5.1.25", "array.prototype.flatmap": "^1.2.5", "classnames": "^2.3.1", "hot-formula-parser": "^4.0.0", + "styled-components": "^5.3.5", "use-context-selector": "^1.3.7" }, "devDependencies": { diff --git a/src/Cell.tsx b/src/Cell.tsx index f266205a..fff53cbe 100644 --- a/src/Cell.tsx +++ b/src/Cell.tsx @@ -24,6 +24,7 @@ export const Cell: React.FC = ({ select, activate, setCellDimensions, + width, }): React.ReactElement => { const rootRef = React.useRef(null); const point = React.useMemo( @@ -75,7 +76,8 @@ export const Cell: React.FC = ({ } return ( - = ({ onMouseOver={handleMouseOver} onMouseDown={handleMouseDown} tabIndex={0} + style={{ + width, + }} > = ({ cell={data} formulaParser={formulaParser} /> - + ); }; diff --git a/src/ColumnIndicator.tsx b/src/ColumnIndicator.tsx index 4ab8caba..54bd3270 100644 --- a/src/ColumnIndicator.tsx +++ b/src/ColumnIndicator.tsx @@ -11,6 +11,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({ column, label, selected, + width, onSelect, }) => { const handleClick = React.useCallback( @@ -19,16 +20,21 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({ }, [onSelect, column] ); + return ( - {label !== undefined ? label : columnIndexToLabel(String(column))} - + ); }; diff --git a/src/CornerIndicator.tsx b/src/CornerIndicator.tsx index cc98b308..410dea94 100644 --- a/src/CornerIndicator.tsx +++ b/src/CornerIndicator.tsx @@ -9,17 +9,20 @@ import useSelector from "./use-selector"; const CornerIndicator: Types.CornerIndicatorComponent = ({ selected, onSelect, + width, }) => { const handleClick = React.useCallback(() => { onSelect(); }, [onSelect]); return ( - ); }; diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index b2b694cc..3a1a344c 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import * as Types from "./types"; -const HeaderRow: Types.HeaderRowComponent = (props) => ; +const HeaderRow: Types.HeaderRowComponent = (props) => ( +
+); export default HeaderRow; diff --git a/src/Row.tsx b/src/Row.tsx index 0d002b20..c50aac6b 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import * as Types from "./types"; -const Row: Types.RowComponent = (props) => ; +const Row: Types.RowComponent = (props) => ( +
+); export default Row; diff --git a/src/RowIndicator.tsx b/src/RowIndicator.tsx index 84667908..9779b1e4 100644 --- a/src/RowIndicator.tsx +++ b/src/RowIndicator.tsx @@ -11,6 +11,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({ label, selected, onSelect, + width, }) => { const handleClick = React.useCallback( (event: React.MouseEvent) => { @@ -20,15 +21,17 @@ const RowIndicator: Types.RowIndicatorComponent = ({ ); return ( - {label !== undefined ? label : row + 1} - +
); }; diff --git a/src/Spreadsheet.css b/src/Spreadsheet.css index 382ca671..8b899eb3 100755 --- a/src/Spreadsheet.css +++ b/src/Spreadsheet.css @@ -15,6 +15,21 @@ display: inline-block; } +.Spreadsheet_body { + display: flex; + flex-direction: column; +} + +.Spreadsheet__header-row { + display: flex; + flex-direction: row; +} + +.Spreadsheet__body-row { + display: flex; + flex-direction: row; +} + .Spreadsheet--dark-mode { --background-color: black; --text-color: white; @@ -37,6 +52,7 @@ .Spreadsheet__table { border-collapse: collapse; table-layout: fixed; + display: "flex"; } .Spreadsheet__cell, @@ -54,7 +70,7 @@ .Spreadsheet__cell, .Spreadsheet__header { - min-width: 6em; + /* min-width: 6em; */ min-height: 1.9em; height: 1.9em; max-height: 1.9em; diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx index 5e8d0dd7..86c76e53 100644 --- a/src/Spreadsheet.tsx +++ b/src/Spreadsheet.tsx @@ -6,6 +6,7 @@ import * as PointMap from "./point-map"; import * as Matrix from "./matrix"; import * as Point from "./point"; import { Parser as FormulaParser } from "hot-formula-parser"; +import { ColumnWidthManager } from "./column-width-manager"; import DefaultTable from "./Table"; import DefaultRow from "./Row"; @@ -120,6 +121,8 @@ export type Props = { ) => void; }; +const DEFAULT_COLUMN_WIDTH = 100; + /** * The Spreadsheet component */ @@ -165,6 +168,14 @@ const Spreadsheet = ( return calculateSpreadsheetSize(state.data, rowLabels, columnLabels); }, [state.data, rowLabels, columnLabels]); + /* Column width manager */ + const columnCountOffset = hideColumnIndicators ? 0 : 1; + const [columnWidths, setColumnWidths] = React.useState( + // TODO: Get initial columns widths from props + range(size.columns + columnCountOffset).map((i) => DEFAULT_COLUMN_WIDTH) + ); + const columnManagerRef = React.useRef(null); + const mode = state.mode; const rootRef = React.useRef(null); @@ -425,14 +436,26 @@ const Spreadsheet = ( const tableNode = React.useMemo( () => ( + - {!hideRowIndicators && !hideColumnIndicators && } + {!hideRowIndicators && !hideColumnIndicators && ( + + )} {!hideColumnIndicators && range(size.columns).map((columnNumber) => columnLabels ? ( ( } /> ) : ( - + ) )} @@ -451,10 +478,15 @@ const Spreadsheet = ( ) : ( - + ))} {range(size.columns).map((columnNumber) => ( ( // @ts-ignore DataViewer={DataViewer} formulaParser={formulaParser} + width={columnWidths[columnNumber + columnCountOffset]} /> ))} @@ -486,6 +519,8 @@ const Spreadsheet = ( Cell, DataViewer, formulaParser, + columnWidths, + columnCountOffset, ] ); diff --git a/src/Table.tsx b/src/Table.tsx index fe10283a..44b7849d 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -10,10 +10,12 @@ const Table: Types.TableComponent = ({ const columnCount = columns + (hideColumnIndicators ? 0 : 1); const columnNodes = range(columnCount).map((i) => ); return ( -
- {columnNodes} - {children} -
+
+
{columnNodes}
+
+ {children} +
+
); }; diff --git a/src/column-width-manager.tsx b/src/column-width-manager.tsx new file mode 100644 index 00000000..ffbc731a --- /dev/null +++ b/src/column-width-manager.tsx @@ -0,0 +1,262 @@ +import React, { useState, useRef, useMemo } from "react"; +import PropTypes from "prop-types"; +import styled from "styled-components"; + +export const scrollbarWidth = (): number => { + // thanks too https://davidwalsh.name/detect-scrollbar-width + const scrollDiv = document.createElement("div"); + scrollDiv.setAttribute( + "style", + "width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;" + ); + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + document.body.removeChild(scrollDiv); + return scrollbarWidth; +}; + +const ColumnManagerStyles = styled.div` + + box-sizing: border-box; + * { + box-sizing: border-box; + } + ** { + box-sizing: border-box; + } + + pointer-events: none; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 100; + // overflow-x: scroll; + -ms-overflow-style: none; /* for Internet Explorer, Edge */ + scrollbar-width: none; /* for Firefox */ + + .columnWidthManager { + position: relative; + height: 100%; + overflow-x: hidden; // Must be set to stop any overflows causing scroll sync issues + -ms-overflow-style: none; /* for Internet Explorer, Edge */ + scrollbar-width: none; /* for Firefox */ + } + + // TODO: Move these to correct location + .columnResizeHandle { + content: ''; + position: absolute; + width: 10px; + height: 100%; + z-index: $resizerZindex; + top: 0, + bottom: 0, + border-bottom: 1px $primaryColour solid; + border-top: 1px $primaryColour solid; + + &:hover { + cursor: e-resize; + background: rgba(0,0,0,0.2); + } + + &:after { + content: ''; + position: absolute; + width: 2px; + background: $primaryColour; + height: 100%; + z-index: $resizerZindex; + left: 4px; + } + } + + .columnResizeCanvas { + position: absolute; + width: 100%; + height: 100%; + z-index: 11; + border: 1px $primaryColour solid; + border-radius: $tableBorderRadius; + overflow: hidden; + } +`; + +export type ColumnManagerTypes = { + columnWidths: number[]; + setColumnWidths: (newWidths: number[]) => void; + minWidth?: number; + maxWidth?: number; + showEdges?: boolean; + liveDragging?: boolean; + innerRef: React.RefObject; +}; + +export const ColumnWidthManager: React.FC = ({ + // columnCount, + columnWidths, + setColumnWidths, + minWidth = 10, + maxWidth = 99999999, + showEdges, + liveDragging, + innerRef, +}) => { + const [currentColumnn, setCurrentColumnn] = useState(-1); + const [resizingColumn, setResizingColumn] = useState(false); + const lastMousePosRef = useRef(0); + const columnWidthOverrideRef = useRef(columnWidths); + const [handlePosition, setHandlePosition] = useState(-1); + const [liveColumnWidths, setLiveColumnWidths] = useState(columnWidths); + + // Use offset column positions to determine + + const columnEdgePositions = useMemo(() => { + let widthSum = 0; + + return liveColumnWidths.map((cwidth) => { + widthSum += cwidth; + return widthSum; + }); + }, [liveColumnWidths]); + + // called on mouse move over resize overlay when dragging + const resizeColumn = (e: React.MouseEvent) => { + const newWidths = [...columnWidthOverrideRef.current]; + const newWidth = + newWidths[currentColumnn] + e.clientX - lastMousePosRef.current; + // TODO: Limit by max width + // if less than min width set as min width + newWidths[currentColumnn] = newWidth > minWidth ? newWidth : minWidth; + if (liveDragging) setColumnWidths(newWidths); + setLiveColumnWidths(newWidths); + setHandlePosition(e.clientX); + columnWidthOverrideRef.current = [...newWidths]; + lastMousePosRef.current = e.clientX; + }; + + const endDragging = () => { + setColumnWidths(columnWidthOverrideRef.current); + setLiveColumnWidths(columnWidthOverrideRef.current); + setResizingColumn(false); + setCurrentColumnn(-1); + setHandlePosition(-1); + lastMousePosRef.current = 0; + }; + + const mouseOverEdge = (i: number) => { + setCurrentColumnn(i); + setHandlePosition(columnEdgePositions[currentColumnn]); + }; + + const onMouseDownResizeHandle = (e: React.MouseEvent) => { + setResizingColumn(true); + lastMousePosRef.current = e.clientX; + columnWidthOverrideRef.current = [...liveColumnWidths]; + let event: EventListener = () => {}; + event = () => { + window.removeEventListener("mouseup", event); + setResizingColumn(false); + setCurrentColumnn(-1); + setHandlePosition(-1); + lastMousePosRef.current = 0; + endDragging(); + }; + window.addEventListener("mouseup", event); + }; + + const scrollBarSize = React.useMemo(() => scrollbarWidth(), []); + + return ( + +
acc + v, 0) + 100, + }} + > + {columnEdgePositions.map((cw, i) => ( +
mouseOverEdge(i)} + > +
+
+ ))} + {/* // eslint-disable-next-line jsx-a11y/no-static-element-interactions, + jsx-a11y/mouse-events-have-key-events */} +
{ + setResizingColumn(false); + lastMousePosRef.current = 0; + }} + onMouseLeave={() => { + setResizingColumn(false); + lastMousePosRef.current = 0; + }} + onMouseMove={(e) => { + if (resizingColumn) resizeColumn(e); + }} + /> + {/* // eslint-disable-next-line max-len + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */} +
+
+ + ); +}; + +ColumnWidthManager.propTypes = { + columnWidths: PropTypes.arrayOf(PropTypes.number.isRequired) + .isRequired, + setColumnWidths: PropTypes.func.isRequired, + minWidth: PropTypes.number, + maxWidth: PropTypes.number, + showEdges: PropTypes.bool, + liveDragging: PropTypes.bool, +}; + +ColumnWidthManager.defaultProps = { + minWidth: 50, + maxWidth: 300, + showEdges: false, + liveDragging: false, +}; diff --git a/src/stories/CustomCell.tsx b/src/stories/CustomCell.tsx index ee34f7a2..df0035f4 100644 --- a/src/stories/CustomCell.tsx +++ b/src/stories/CustomCell.tsx @@ -7,7 +7,7 @@ import classnames from "classnames"; import { CellComponent } from ".."; const HEIGHT = 30; -const WIDTH = 96; +// const WIDTH = 96; const CustomCell: CellComponent = ({ column, @@ -21,6 +21,7 @@ const CustomCell: CellComponent = ({ formulaParser, data, DataViewer, + width, }) => { const rootRef = React.createRef(); @@ -29,12 +30,12 @@ const CustomCell: CellComponent = ({ { row, column }, { height: HEIGHT, - width: WIDTH, - left: WIDTH * (column + 1), + width, + left: width * (column + 1), top: HEIGHT * (row + 1), } ); - }, [setCellDimensions, column, row]); + }, [setCellDimensions, column, row, width]); React.useEffect(() => { if (rootRef.current && active && mode === "view") { @@ -67,7 +68,8 @@ const CustomCell: CellComponent = ({ } return ( - - +
); }; diff --git a/src/stories/CustomCornerIndicator.tsx b/src/stories/CustomCornerIndicator.tsx index 7ba0201b..0da9d86b 100644 --- a/src/stories/CustomCornerIndicator.tsx +++ b/src/stories/CustomCornerIndicator.tsx @@ -2,7 +2,8 @@ import * as React from "react"; export const CustomCornerIndicator: React.FC = () => { return ( - alert("You clicked the corner indicator!")} @@ -20,6 +21,6 @@ export const CustomCornerIndicator: React.FC = () => { transform: "rotate(45deg)", }} /> - +
); }; diff --git a/src/stories/Spreadsheet.stories.tsx b/src/stories/Spreadsheet.stories.tsx index ef868bb7..606feb21 100644 --- a/src/stories/Spreadsheet.stories.tsx +++ b/src/stories/Spreadsheet.stories.tsx @@ -11,7 +11,7 @@ import { CustomCornerIndicator } from "./CustomCornerIndicator"; type StringCell = CellBase; type NumberCell = CellBase; -const INITIAL_ROWS = 6; +const INITIAL_ROWS = 100; const INITIAL_COLUMNS = 4; const EMPTY_DATA = createEmptyMatrix(INITIAL_ROWS, INITIAL_COLUMNS); diff --git a/src/types.ts b/src/types.ts index 9ec90278..32e5c49f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -80,6 +80,8 @@ export type CellComponentProps = { row: number; /** The column of the cell */ column: number; + /** Column width (in px) */ + width: number; /** The DataViewer component to be used by the cell */ DataViewer: DataViewerComponent; /** The FormulaParser instance to be used by the cell */ @@ -171,6 +173,8 @@ export type RowIndicatorProps = { label?: React.ReactNode | null; /** Whether the entire row is selected */ selected: boolean; + /** width in px */ + width: number; /** Callback to be called when the row is selected */ onSelect: (row: number, extend: boolean) => void; }; @@ -186,6 +190,8 @@ export type ColumnIndicatorProps = { label?: React.ReactNode | null; /** Whether the entire column in selected */ selected: boolean; + /** Column width (in px) */ + width: number; /** Callback to be called when the column is selected */ onSelect: (column: number, extend: boolean) => void; }; @@ -200,6 +206,8 @@ export type CornerIndicatorProps = { selected: boolean; /** Callback to select the entire table */ onSelect: () => void; + /** Width in px */ + width: number; }; /** Type of the CornerIndicator component */ diff --git a/yarn.lock b/yarn.lock index e007b50d..59997ad0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23,6 +23,13 @@ dependencies: "@babel/highlight" "^7.16.0" +"@babel/code-frame@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789" + integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg== + dependencies: + "@babel/highlight" "^7.16.7" + "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.0", "@babel/compat-data@^7.16.4": version "7.16.4" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.4.tgz#081d6bbc336ec5c2435c6346b2ae1fb98b5ac68e" @@ -115,6 +122,15 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.17.9": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc" + integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ== + dependencies: + "@babel/types" "^7.17.0" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d" @@ -206,6 +222,13 @@ dependencies: "@babel/types" "^7.16.0" +"@babel/helper-environment-visitor@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7" + integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-explode-assignable-expression@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.0.tgz#753017337a15f46f9c09f674cff10cee9b9d7778" @@ -231,6 +254,14 @@ "@babel/template" "^7.16.0" "@babel/types" "^7.16.0" +"@babel/helper-function-name@^7.17.9": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12" + integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg== + dependencies: + "@babel/template" "^7.16.7" + "@babel/types" "^7.17.0" + "@babel/helper-get-function-arity@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b" @@ -259,6 +290,13 @@ dependencies: "@babel/types" "^7.16.0" +"@babel/helper-hoist-variables@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246" + integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-member-expression-to-functions@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef" @@ -409,6 +447,13 @@ dependencies: "@babel/types" "^7.16.0" +"@babel/helper-split-export-declaration@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b" + integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9": version "7.14.9" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48" @@ -419,6 +464,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389" integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w== +"@babel/helper-validator-identifier@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad" + integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw== + "@babel/helper-validator-option@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3" @@ -470,6 +520,15 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/highlight@^7.16.7": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3" + integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg== + dependencies: + "@babel/helper-validator-identifier" "^7.16.7" + chalk "^2.0.0" + js-tokens "^4.0.0" + "@babel/parser@^7.1.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2": version "7.15.6" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549" @@ -480,6 +539,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.6.tgz#8f194828193e8fa79166f34a4b4e52f3e769a314" integrity sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ== +"@babel/parser@^7.16.7", "@babel/parser@^7.17.9": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef" + integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.2": version "7.16.2" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183" @@ -1282,6 +1346,15 @@ "@babel/parser" "^7.15.4" "@babel/types" "^7.15.4" +"@babel/template@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" + integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/parser" "^7.16.7" + "@babel/types" "^7.16.7" + "@babel/traverse@^7.1.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d" @@ -1313,6 +1386,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.4.5": + version "7.17.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d" + integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.17.9" + "@babel/helper-environment-visitor" "^7.16.7" + "@babel/helper-function-name" "^7.17.9" + "@babel/helper-hoist-variables" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/parser" "^7.17.9" + "@babel/types" "^7.17.0" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.15.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.7.0": version "7.15.6" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f" @@ -1329,6 +1418,14 @@ "@babel/helper-validator-identifier" "^7.15.7" to-fast-properties "^2.0.0" +"@babel/types@^7.16.7", "@babel/types@^7.17.0": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" + integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== + dependencies: + "@babel/helper-validator-identifier" "^7.16.7" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4" @@ -1406,6 +1503,13 @@ dependencies: "@emotion/memoize" "0.7.4" +"@emotion/is-prop-valid@^1.1.0": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/memoize@0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" @@ -1479,12 +1583,12 @@ "@emotion/styled-base" "^10.3.0" babel-plugin-emotion "^10.0.27" -"@emotion/stylis@0.8.5": +"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -3028,6 +3132,14 @@ dependencies: "@types/unist" "*" +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57" @@ -3223,6 +3335,15 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== +"@types/styled-components@^5.1.25": + version "5.1.25" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" + integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + csstype "^3.0.2" + "@types/tapable@^1", "@types/tapable@^1.0.5": version "1.0.8" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310" @@ -4271,6 +4392,17 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.7" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" + integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" + babel-plugin-syntax-jsx "^6.18.0" + lodash "^4.17.11" + picomatch "^2.3.0" + babel-plugin-syntax-jsx@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -4729,6 +4861,11 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== +camelize@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" + integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -5376,6 +5513,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +css-color-keywords@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" + integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= + css-color-names@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-1.0.1.tgz#6ff7ee81a823ad46e020fa2fd6ab40a887e2ba67" @@ -5454,6 +5596,15 @@ css-selector-tokenizer@^0.7.0: cssesc "^3.0.0" fastparse "^1.1.2" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@^1.1.2, css-tree@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" @@ -7500,7 +7651,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -9199,7 +9350,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@4.x, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: +lodash@4.x, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -12850,6 +13001,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +styled-components@^5.3.5: + version "5.3.5" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" + integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^1.1.0" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.0.1.tgz#323ec554198520986806388c7fdaebc38d2c06fb" @@ -12948,7 +13115,7 @@ supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^5.3.0, supports-color@^5.4.0: +supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== From e1f3191f4badee3ec901da38c651b9a85c8a639d Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 2/6] Make column width manager external dependency --- package.json | 1 + src/Spreadsheet.tsx | 2 +- src/column-width-manager.tsx | 262 ----------------------------------- yarn.lock | 21 ++- 4 files changed, 22 insertions(+), 264 deletions(-) delete mode 100644 src/column-width-manager.tsx diff --git a/package.json b/package.json index 190c4009..402cf227 100755 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.7.1", + "@samnbuk/react_db_client.components.column-manager": "^0.1.1", "@types/array.prototype.flatmap": "^1.2.2", "@types/styled-components": "^5.1.25", "array.prototype.flatmap": "^1.2.5", diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx index 86c76e53..c4b92144 100644 --- a/src/Spreadsheet.tsx +++ b/src/Spreadsheet.tsx @@ -6,7 +6,7 @@ import * as PointMap from "./point-map"; import * as Matrix from "./matrix"; import * as Point from "./point"; import { Parser as FormulaParser } from "hot-formula-parser"; -import { ColumnWidthManager } from "./column-width-manager"; +import { ColumnWidthManager } from "@samnbuk/react_db_client.components.column-manager"; import DefaultTable from "./Table"; import DefaultRow from "./Row"; diff --git a/src/column-width-manager.tsx b/src/column-width-manager.tsx deleted file mode 100644 index ffbc731a..00000000 --- a/src/column-width-manager.tsx +++ /dev/null @@ -1,262 +0,0 @@ -import React, { useState, useRef, useMemo } from "react"; -import PropTypes from "prop-types"; -import styled from "styled-components"; - -export const scrollbarWidth = (): number => { - // thanks too https://davidwalsh.name/detect-scrollbar-width - const scrollDiv = document.createElement("div"); - scrollDiv.setAttribute( - "style", - "width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;" - ); - document.body.appendChild(scrollDiv); - const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; - document.body.removeChild(scrollDiv); - return scrollbarWidth; -}; - -const ColumnManagerStyles = styled.div` - - box-sizing: border-box; - * { - box-sizing: border-box; - } - ** { - box-sizing: border-box; - } - - pointer-events: none; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 100; - // overflow-x: scroll; - -ms-overflow-style: none; /* for Internet Explorer, Edge */ - scrollbar-width: none; /* for Firefox */ - - .columnWidthManager { - position: relative; - height: 100%; - overflow-x: hidden; // Must be set to stop any overflows causing scroll sync issues - -ms-overflow-style: none; /* for Internet Explorer, Edge */ - scrollbar-width: none; /* for Firefox */ - } - - // TODO: Move these to correct location - .columnResizeHandle { - content: ''; - position: absolute; - width: 10px; - height: 100%; - z-index: $resizerZindex; - top: 0, - bottom: 0, - border-bottom: 1px $primaryColour solid; - border-top: 1px $primaryColour solid; - - &:hover { - cursor: e-resize; - background: rgba(0,0,0,0.2); - } - - &:after { - content: ''; - position: absolute; - width: 2px; - background: $primaryColour; - height: 100%; - z-index: $resizerZindex; - left: 4px; - } - } - - .columnResizeCanvas { - position: absolute; - width: 100%; - height: 100%; - z-index: 11; - border: 1px $primaryColour solid; - border-radius: $tableBorderRadius; - overflow: hidden; - } -`; - -export type ColumnManagerTypes = { - columnWidths: number[]; - setColumnWidths: (newWidths: number[]) => void; - minWidth?: number; - maxWidth?: number; - showEdges?: boolean; - liveDragging?: boolean; - innerRef: React.RefObject; -}; - -export const ColumnWidthManager: React.FC = ({ - // columnCount, - columnWidths, - setColumnWidths, - minWidth = 10, - maxWidth = 99999999, - showEdges, - liveDragging, - innerRef, -}) => { - const [currentColumnn, setCurrentColumnn] = useState(-1); - const [resizingColumn, setResizingColumn] = useState(false); - const lastMousePosRef = useRef(0); - const columnWidthOverrideRef = useRef(columnWidths); - const [handlePosition, setHandlePosition] = useState(-1); - const [liveColumnWidths, setLiveColumnWidths] = useState(columnWidths); - - // Use offset column positions to determine - - const columnEdgePositions = useMemo(() => { - let widthSum = 0; - - return liveColumnWidths.map((cwidth) => { - widthSum += cwidth; - return widthSum; - }); - }, [liveColumnWidths]); - - // called on mouse move over resize overlay when dragging - const resizeColumn = (e: React.MouseEvent) => { - const newWidths = [...columnWidthOverrideRef.current]; - const newWidth = - newWidths[currentColumnn] + e.clientX - lastMousePosRef.current; - // TODO: Limit by max width - // if less than min width set as min width - newWidths[currentColumnn] = newWidth > minWidth ? newWidth : minWidth; - if (liveDragging) setColumnWidths(newWidths); - setLiveColumnWidths(newWidths); - setHandlePosition(e.clientX); - columnWidthOverrideRef.current = [...newWidths]; - lastMousePosRef.current = e.clientX; - }; - - const endDragging = () => { - setColumnWidths(columnWidthOverrideRef.current); - setLiveColumnWidths(columnWidthOverrideRef.current); - setResizingColumn(false); - setCurrentColumnn(-1); - setHandlePosition(-1); - lastMousePosRef.current = 0; - }; - - const mouseOverEdge = (i: number) => { - setCurrentColumnn(i); - setHandlePosition(columnEdgePositions[currentColumnn]); - }; - - const onMouseDownResizeHandle = (e: React.MouseEvent) => { - setResizingColumn(true); - lastMousePosRef.current = e.clientX; - columnWidthOverrideRef.current = [...liveColumnWidths]; - let event: EventListener = () => {}; - event = () => { - window.removeEventListener("mouseup", event); - setResizingColumn(false); - setCurrentColumnn(-1); - setHandlePosition(-1); - lastMousePosRef.current = 0; - endDragging(); - }; - window.addEventListener("mouseup", event); - }; - - const scrollBarSize = React.useMemo(() => scrollbarWidth(), []); - - return ( - -
acc + v, 0) + 100, - }} - > - {columnEdgePositions.map((cw, i) => ( -
mouseOverEdge(i)} - > -
-
- ))} - {/* // eslint-disable-next-line jsx-a11y/no-static-element-interactions, - jsx-a11y/mouse-events-have-key-events */} -
{ - setResizingColumn(false); - lastMousePosRef.current = 0; - }} - onMouseLeave={() => { - setResizingColumn(false); - lastMousePosRef.current = 0; - }} - onMouseMove={(e) => { - if (resizingColumn) resizeColumn(e); - }} - /> - {/* // eslint-disable-next-line max-len - // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/mouse-events-have-key-events */} -
-
- - ); -}; - -ColumnWidthManager.propTypes = { - columnWidths: PropTypes.arrayOf(PropTypes.number.isRequired) - .isRequired, - setColumnWidths: PropTypes.func.isRequired, - minWidth: PropTypes.number, - maxWidth: PropTypes.number, - showEdges: PropTypes.bool, - liveDragging: PropTypes.bool, -}; - -ColumnWidthManager.defaultProps = { - minWidth: 50, - maxWidth: 300, - showEdges: false, - liveDragging: false, -}; diff --git a/yarn.lock b/yarn.lock index 59997ad0..2c83e060 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2014,6 +2014,25 @@ estree-walker "^2.0.1" picomatch "^2.2.2" +"@samnbuk/react_db_client.components.column-manager@^0.1.1": + version "0.1.1" + resolved "https://node.bit.dev/@samnbuk/react_db_client.components.column-manager/-/@samnbuk-react_db_client.components.column-manager-0.1.1.tgz#afb935cb0d96097c9f1e506f8e2fa04a81011088" + integrity sha1-r7k1yw2WCXyfHlBvji+gSoEBEIg= + dependencies: + "@samnbuk/react_db_client.constants.client-types" "0.1.0" + "@samnbuk/react_db_client.helpers.html-helpers" "0.0.1" + styled-components "5.3.5" + +"@samnbuk/react_db_client.constants.client-types@0.1.0": + version "0.1.0" + resolved "https://node.bit.dev/@samnbuk/react_db_client.constants.client-types/-/@samnbuk-react_db_client.constants.client-types-0.1.0.tgz#0a17a2a2386b4a8542ebc2f9cc642b58a4e08b66" + integrity sha1-CheiojhrSoVC68L5zGQrWKTgi2Y= + +"@samnbuk/react_db_client.helpers.html-helpers@0.0.1": + version "0.0.1" + resolved "https://node.bit.dev/@samnbuk/react_db_client.helpers.html-helpers/-/@samnbuk-react_db_client.helpers.html-helpers-0.0.1.tgz#35cff165f30c9e77cb6b6ea569edb9c1fe4b18d5" + integrity sha1-Nc/xZfMMnnfLa26lae25wf5LGNU= + "@sinonjs/commons@^1.7.0": version "1.8.3" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d" @@ -13001,7 +13020,7 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@^5.3.5: +styled-components@5.3.5, styled-components@^5.3.5: version "5.3.5" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== From 7ef5852993fb9ad5644fc48ca130c9226c79ecaa Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 3/6] fix tests --- src/Cell.test.tsx | 1 + src/ColumnIndicator.test.tsx | 18 +++++++--- src/CornerIndicator.test.tsx | 13 +++++-- src/HeaderRow.test.tsx | 6 ++-- src/Row.test.tsx | 6 ++-- src/Row.tsx | 2 +- src/RowIndicator.test.tsx | 9 ++--- src/Spreadsheet.test.tsx | 69 +++++++++++++++++++++++++----------- src/Spreadsheet.tsx | 18 +++++----- src/Table.test.tsx | 24 ++++++++----- src/Table.tsx | 8 +++-- 11 files changed, 117 insertions(+), 57 deletions(-) diff --git a/src/Cell.test.tsx b/src/Cell.test.tsx index 66c50280..f00613b1 100644 --- a/src/Cell.test.tsx +++ b/src/Cell.test.tsx @@ -32,6 +32,7 @@ const EXAMPLE_PROPS: Types.CellComponentProps = { select: MOCK_SELECT, activate: MOCK_ACTIVATE, setCellDimensions: MOCK_SET_CELL_DIMENSIONS, + width: 100, }; const EXAMPLE_DATA_VIEWER_PROPS: Types.DataViewerProps = { row: EXAMPLE_ROW, diff --git a/src/ColumnIndicator.test.tsx b/src/ColumnIndicator.test.tsx index b41463b9..765462e6 100644 --- a/src/ColumnIndicator.test.tsx +++ b/src/ColumnIndicator.test.tsx @@ -11,24 +11,34 @@ const EXAMPLE_PROPS: Types.ColumnIndicatorProps = { column: 0, selected: false, onSelect: jest.fn(), + width: 100, }; describe("", () => { test("renders with column letter", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect( + document.querySelectorAll("[role=columnheader].Spreadsheet__header") + .length + ).toBe(1); expect(screen.queryByText("A")).not.toBeNull(); }); test("renders with label", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect( + document.querySelectorAll("[role=columnheader].Spreadsheet__header") + .length + ).toBe(1); expect(screen.queryByText("Example Label")).not.toBeNull(); }); test("calls onSelect", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect( + document.querySelectorAll("[role=columnheader].Spreadsheet__header") + .length + ).toBe(1); const indicator = document.querySelector( - "th.Spreadsheet__header" + "[role=columnheader].Spreadsheet__header" ) as HTMLTableCellElement; indicator.click(); expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1); diff --git a/src/CornerIndicator.test.tsx b/src/CornerIndicator.test.tsx index 092eb5b1..7e7c33e9 100644 --- a/src/CornerIndicator.test.tsx +++ b/src/CornerIndicator.test.tsx @@ -10,18 +10,25 @@ import CornerIndicator from "./CornerIndicator"; const EXAMPLE_PROPS: Types.CornerIndicatorProps = { selected: false, onSelect: jest.fn(), + width: 100, }; describe("", () => { test("renders", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect( + document.querySelectorAll("[role=columnheader].Spreadsheet__header") + .length + ).toBe(1); }); test("calls onSelect", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect( + document.querySelectorAll("[role=columnheader].Spreadsheet__header") + .length + ).toBe(1); const indicator = document.querySelector( - "th.Spreadsheet__header" + "[role=columnheader].Spreadsheet__header" ) as HTMLTableCellElement; indicator.click(); expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1); diff --git a/src/HeaderRow.test.tsx b/src/HeaderRow.test.tsx index fc85e742..116fb9f1 100644 --- a/src/HeaderRow.test.tsx +++ b/src/HeaderRow.test.tsx @@ -9,16 +9,16 @@ import HeaderRow from "./HeaderRow"; describe("", () => { test("renders", () => { render(); - const row = document.querySelector("tr"); + const row = document.querySelector("[role=row]"); expect(row).not.toBeNull(); }); test("renders with children", () => { render( - +
); - const cell = document.querySelector("tr th"); + const cell = document.querySelector("[role=columnheader]"); expect(cell).not.toBeNull(); }); }); diff --git a/src/Row.test.tsx b/src/Row.test.tsx index fdeb71e8..c236439a 100644 --- a/src/Row.test.tsx +++ b/src/Row.test.tsx @@ -9,16 +9,16 @@ import Row from "./Row"; describe("", () => { test("renders", () => { render(); - const row = document.querySelector("tr"); + const row = document.querySelector("[role=row]"); expect(row).not.toBeNull(); }); test("renders with children", () => { render( - +
); - const cell = document.querySelector("tr td"); + const cell = document.querySelector("[role=cell]"); expect(cell).not.toBeNull(); }); }); diff --git a/src/Row.tsx b/src/Row.tsx index c50aac6b..2dbcf960 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import * as Types from "./types"; const Row: Types.RowComponent = (props) => ( -
+
); export default Row; diff --git a/src/RowIndicator.test.tsx b/src/RowIndicator.test.tsx index e9e0d56d..c0955cb7 100644 --- a/src/RowIndicator.test.tsx +++ b/src/RowIndicator.test.tsx @@ -11,24 +11,25 @@ const EXAMPLE_PROPS: Types.RowIndicatorProps = { row: 0, selected: false, onSelect: jest.fn(), + width: 100, }; describe("", () => { test("renders with row number", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1); expect(screen.queryByText("1")).not.toBeNull(); }); test("renders with label", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1); expect(screen.queryByText("Example Label")).not.toBeNull(); }); test("calls on select", () => { render(); - expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1); + expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1); const indicator = document.querySelector( - "th.Spreadsheet__header" + "div.Spreadsheet__header" ) as HTMLTableCellElement; indicator.click(); expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1); diff --git a/src/Spreadsheet.test.tsx b/src/Spreadsheet.test.tsx index 14e7667d..dcdc7731 100644 --- a/src/Spreadsheet.test.tsx +++ b/src/Spreadsheet.test.tsx @@ -41,7 +41,7 @@ describe("", () => { render(); // Get elements const element = getSpreadsheetElement(); - const table = safeQuerySelector(element, "table.Spreadsheet__table"); + const table = safeQuerySelector(element, "[role=table].Spreadsheet__table"); const selected = safeQuerySelector( element, ".Spreadsheet__floating-rect--selected" @@ -51,11 +51,15 @@ describe("", () => { ".Spreadsheet__floating-rect--copied" ); // Check all sub elements are rendered correctly - const trs = table.querySelectorAll("tr"); + const trs = table.querySelectorAll("[role=row]"); expect(trs).toHaveLength(ROWS + 1); - const tds = table.querySelectorAll("tr td.Spreadsheet__cell"); + const tds = table.querySelectorAll( + "[role=row] [role=cell].Spreadsheet__cell" + ); expect(tds).toHaveLength(ROWS * COLUMNS); - const ths = table.querySelectorAll("tr th.Spreadsheet__header"); + const ths = table.querySelectorAll( + "[role=row] [role=columnheader].Spreadsheet__header" + ); expect(ths).toHaveLength(ROWS + COLUMNS + 1); // Check active cell is not rendered expect(element.querySelector(".Spreadsheet__active-cell")).toBeNull(); @@ -76,7 +80,7 @@ describe("", () => { ); // Get elements const element = getSpreadsheetElement(); - const cell = safeQuerySelector(element, "td"); + const cell = safeQuerySelector(element, "[role=cell]"); const selected = safeQuerySelector( element, ".Spreadsheet__floating-rect--selected" @@ -103,7 +107,7 @@ describe("", () => { render(); // Get elements const element = getSpreadsheetElement(); - const cell = safeQuerySelector(element, "td"); + const cell = safeQuerySelector(element, "[role=cell]"); // Select cell fireEvent.mouseDown(cell); // Get active cell @@ -125,7 +129,7 @@ describe("", () => { render(); // Get elements const element = getSpreadsheetElement(); - const cell = safeQuerySelector(element, "td"); + const cell = safeQuerySelector(element, "[role=cell]"); // Select cell fireEvent.mouseDown(cell); // Get active cell @@ -175,12 +179,12 @@ describe("", () => { }); test("setting hideColumnIndicators hides column indicators", () => { render(); - const ths = document.querySelectorAll(".Spreadsheet th"); + const ths = document.querySelectorAll(".Spreadsheet [role=columnheader]"); expect(ths).toHaveLength(ROWS); }); test("setting hideRowIndicatos hides row indicators", () => { render(); - const ths = document.querySelectorAll(".Spreadsheet th"); + const ths = document.querySelectorAll(".Spreadsheet [role=columnheader]"); expect(ths).toHaveLength(COLUMNS); }); test("calls onKeyDown on key down", () => { @@ -195,14 +199,17 @@ describe("", () => { render(); // Get elements const element = getSpreadsheetElement(); - const firstCell = safeQuerySelector( - element, - "tr:nth-of-type(2) td:nth-of-type(1)" - ); - const thirdCell = safeQuerySelector( - element, - "tr:nth-of-type(3) td:nth-of-type(2)" - ); + + const firstCell = safeQuerySelectorAll(element, [ + ["[role=row]", 1], + ["[role=cell]", 0], + ]); + + const thirdCell = safeQuerySelectorAll(element, [ + ["[role=row]", 2], + ["[role=cell]", 1], + ]); + // Activate a cell fireEvent.mouseDown(firstCell); // Clear onSelect previous calls @@ -211,6 +218,7 @@ describe("", () => { fireEvent.mouseDown(thirdCell, { shiftKey: true, }); + // Check onSelect is called with the range of cells on selection expect(onSelect).toBeCalledTimes(1); expect(onSelect).toBeCalledWith([ @@ -227,7 +235,7 @@ describe("", () => { // Get row label elements. // Do not select from first row because it only contains corner and column indicators const rowLabelElements = element.querySelectorAll( - "tr:not(:first-child) th" + "[role=row] [role=columnheader]:not(:first-child)" ); const rowLabels = Array.from( rowLabelElements, @@ -235,7 +243,7 @@ describe("", () => { ); expect(rowLabels).toEqual(EXAMPLE_ROW_LABELS); }); - test("setting column labels changes colum indicators labels", () => { + test("setting column labels changes column indicators labels", () => { const EXAMPLE_COLUMN_LABELS = ["First", "Second", "Third", "Fourth"]; render( @@ -245,7 +253,7 @@ describe("", () => { // Select from first row as it holds all the column indicators // Do not select first child as it is corner indicator const columnLabelElements = element.querySelectorAll( - "tr:first-child th:not(:first-child)" + "[role=row] [role=columnheader]:not(:first-child)" ); const columnLabels = Array.from( columnLabelElements, @@ -267,6 +275,27 @@ function safeQuerySelector( return element; } +/** Like .querySelectorAll() but throws for no match + * + * Selector should be a list of [selector,index] tuples. + */ +function safeQuerySelectorAll( + node: ParentNode, + selectorAndIndexes: [string, number][] +): T { + const out = selectorAndIndexes.reduce((element, selectorAndIndex) => { + const [selector, index] = selectorAndIndex; + const elementInner = element.querySelectorAll(selector); + try { + const el = elementInner[index]; + return elementInner[index]; + } catch (e) { + throw new Error(`Selector ${selector} has no matching elements`); + } + }, node as T); + return out; +} + /** Wrapper for expect(actual).not.toBeNull() with type assertion */ function expectNotToBeNull( actual: T | null | undefined diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx index c4b92144..484dcb0c 100644 --- a/src/Spreadsheet.tsx +++ b/src/Spreadsheet.tsx @@ -436,15 +436,6 @@ const Spreadsheet = ( const tableNode = React.useMemo( () => ( - {!hideRowIndicators && !hideColumnIndicators && ( @@ -501,6 +492,15 @@ const Spreadsheet = ( ))} ))} +
), [ diff --git a/src/Table.test.tsx b/src/Table.test.tsx index 79d0dfef..798935c2 100644 --- a/src/Table.test.tsx +++ b/src/Table.test.tsx @@ -10,16 +10,20 @@ describe("", () => { test("renders empty table", () => { render(
{null}
); expect( - document.querySelectorAll(".Spreadsheet__table colgroup col").length + document.querySelectorAll( + ".Spreadsheet__table .colgroup .Spreadsheet__columnNode" + ).length + ).toBe(1); + expect( + document.querySelectorAll(".Spreadsheet__table .Spreadsheet_body").length ).toBe(1); - expect(document.querySelectorAll(".Spreadsheet__table tbody").length).toBe( - 1 - ); }); test("renders table with content", () => { - render({}
); + render({
}
); expect( - document.querySelectorAll(".Spreadsheet__table tbody #exampleRow").length + document.querySelectorAll( + ".Spreadsheet__table .Spreadsheet_body #exampleRow" + ).length ).toBe(1); }); test("renders empty table with no cols if hideColumnIndicators is set", () => { @@ -29,14 +33,18 @@ describe("", () => {
); expect( - document.querySelectorAll(".Spreadsheet__table colgroup col").length + document.querySelectorAll( + ".Spreadsheet__table .colgroup .Spreadsheet__columnNode" + ).length ).toBe(0); }); test("renders columns according to given prop", () => { const columns = 1; render({null}
); expect( - document.querySelectorAll(".Spreadsheet__table colgroup col").length + document.querySelectorAll( + ".Spreadsheet__table .colgroup .Spreadsheet__columnNode" + ).length ).toBe(columns + 1); }); }); diff --git a/src/Table.tsx b/src/Table.tsx index 44b7849d..1fc0b2f4 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -8,10 +8,14 @@ const Table: Types.TableComponent = ({ hideColumnIndicators, }) => { const columnCount = columns + (hideColumnIndicators ? 0 : 1); - const columnNodes = range(columnCount).map((i) => ); + const columnNodes = range(columnCount).map((i) => ( +
+ )); return (
-
{columnNodes}
+
+ {columnNodes} +
{children}
From 6ae2c76a1a0183f6bbfa3d52416d870dbe48c211 Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 4/6] Update column width manager dependency --- package.json | 2 +- src/Spreadsheet.tsx | 2 +- yarn.lock | 40 +++++++++++++++++++++------------------- 3 files changed, 23 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 402cf227..4127ce94 100755 --- a/package.json +++ b/package.json @@ -33,8 +33,8 @@ "scheduler": ">=0.19.0" }, "dependencies": { + "@react_db_client/components.column-manager": "^0.1.5", "@reduxjs/toolkit": "^1.7.1", - "@samnbuk/react_db_client.components.column-manager": "^0.1.1", "@types/array.prototype.flatmap": "^1.2.2", "@types/styled-components": "^5.1.25", "array.prototype.flatmap": "^1.2.5", diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx index 484dcb0c..da54373d 100644 --- a/src/Spreadsheet.tsx +++ b/src/Spreadsheet.tsx @@ -6,7 +6,7 @@ import * as PointMap from "./point-map"; import * as Matrix from "./matrix"; import * as Point from "./point"; import { Parser as FormulaParser } from "hot-formula-parser"; -import { ColumnWidthManager } from "@samnbuk/react_db_client.components.column-manager"; +import { ColumnWidthManager } from "@react_db_client/components.column-manager"; import DefaultTable from "./Table"; import DefaultRow from "./Row"; diff --git a/yarn.lock b/yarn.lock index 2c83e060..e466d3fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1996,6 +1996,22 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7" integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ== +"@react_db_client/components.column-manager@^0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@react_db_client/components.column-manager/-/components.column-manager-0.1.5.tgz#3d8c3f31910d3d299a1488cafcf0bfa5719b9137" + integrity sha512-p+CsBaQRNWBc0RjKoc02+iqE5TJ4c9++/cTdKrbKP4cFisycPz6KAM+PSk4Kyj3A5i3xqkMGCR4nxKx3Hg2gbA== + dependencies: + "@react_db_client/constants.client-types" "0.1.3" + core-js "^3.0.0" + styled-components "5.3.5" + +"@react_db_client/constants.client-types@0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@react_db_client/constants.client-types/-/constants.client-types-0.1.3.tgz#e9f47240deeb694e8f00c5c7b83908ead0a51c96" + integrity sha512-tKUA+ST1o9vLjN/PWcs6O/by6Giof3cEkqRnJsj8s9OLtoIe9f2d1J8AOb35mQmOBwISeGO/DxmRksFkWW9BLw== + dependencies: + core-js "^3.0.0" + "@reduxjs/toolkit@^1.7.1": version "1.7.1" resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.1.tgz#994962aeb7df3c77be343dd2ad1aa48221dbaa0c" @@ -2014,25 +2030,6 @@ estree-walker "^2.0.1" picomatch "^2.2.2" -"@samnbuk/react_db_client.components.column-manager@^0.1.1": - version "0.1.1" - resolved "https://node.bit.dev/@samnbuk/react_db_client.components.column-manager/-/@samnbuk-react_db_client.components.column-manager-0.1.1.tgz#afb935cb0d96097c9f1e506f8e2fa04a81011088" - integrity sha1-r7k1yw2WCXyfHlBvji+gSoEBEIg= - dependencies: - "@samnbuk/react_db_client.constants.client-types" "0.1.0" - "@samnbuk/react_db_client.helpers.html-helpers" "0.0.1" - styled-components "5.3.5" - -"@samnbuk/react_db_client.constants.client-types@0.1.0": - version "0.1.0" - resolved "https://node.bit.dev/@samnbuk/react_db_client.constants.client-types/-/@samnbuk-react_db_client.constants.client-types-0.1.0.tgz#0a17a2a2386b4a8542ebc2f9cc642b58a4e08b66" - integrity sha1-CheiojhrSoVC68L5zGQrWKTgi2Y= - -"@samnbuk/react_db_client.helpers.html-helpers@0.0.1": - version "0.0.1" - resolved "https://node.bit.dev/@samnbuk/react_db_client.helpers.html-helpers/-/@samnbuk-react_db_client.helpers.html-helpers-0.0.1.tgz#35cff165f30c9e77cb6b6ea569edb9c1fe4b18d5" - integrity sha1-Nc/xZfMMnnfLa26lae25wf5LGNU= - "@sinonjs/commons@^1.7.0": version "1.8.3" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d" @@ -5390,6 +5387,11 @@ core-js-pure@^3.8.1, core-js-pure@^3.8.2: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.0.tgz#7253feccf8bb05b72c153ddccdbe391ddbffbe03" integrity sha512-qsrbIwWSEEYOM7z616jAVgwhuDDtPLwZSpUsU3vyUkHYqKTf/uwOJBZg2V7lMurYWkpVlaVOxBrfX0Q3ppvjfg== +core-js@^3.0.0: + version "3.22.4" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.4.tgz#f4b3f108d45736935aa028444a69397e40d8c531" + integrity sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w== + core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: version "3.20.0" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.0.tgz#1c5ac07986b8d15473ab192e45a2e115a4a95b79" From eefd7264eb6fc247e4dc05ad07dc0f473f00fa90 Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 5/6] Update column width manager and add width padding --- package.json | 2 +- src/Spreadsheet.tsx | 1 + yarn.lock | 18 +++++++++--------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 4127ce94..3f0a922c 100755 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "scheduler": ">=0.19.0" }, "dependencies": { - "@react_db_client/components.column-manager": "^0.1.5", + "@react_db_client/components.column-manager": "^0.1.7", "@reduxjs/toolkit": "^1.7.1", "@types/array.prototype.flatmap": "^1.2.2", "@types/styled-components": "^5.1.25", diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx index da54373d..e749acf6 100644 --- a/src/Spreadsheet.tsx +++ b/src/Spreadsheet.tsx @@ -496,6 +496,7 @@ const Spreadsheet = ( setColumnWidths={setColumnWidths} columnWidths={columnWidths} innerRef={columnManagerRef} + widthPadding={400} // showEdges // liveDragging // minWidth={minWidth} diff --git a/yarn.lock b/yarn.lock index e466d3fb..8e56f053 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1996,19 +1996,19 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7" integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ== -"@react_db_client/components.column-manager@^0.1.5": - version "0.1.5" - resolved "https://registry.yarnpkg.com/@react_db_client/components.column-manager/-/components.column-manager-0.1.5.tgz#3d8c3f31910d3d299a1488cafcf0bfa5719b9137" - integrity sha512-p+CsBaQRNWBc0RjKoc02+iqE5TJ4c9++/cTdKrbKP4cFisycPz6KAM+PSk4Kyj3A5i3xqkMGCR4nxKx3Hg2gbA== +"@react_db_client/components.column-manager@^0.1.7": + version "0.1.7" + resolved "https://registry.yarnpkg.com/@react_db_client/components.column-manager/-/components.column-manager-0.1.7.tgz#bf84d8861d03728ab25dadb15e665b64466d2665" + integrity sha512-sVse+Cq0Wq9qyne+WSQgXTJhaHYzlMKR97vHbJKFNWxOOfLvpf5bu1xnYVjCNCEanJwymmyCFI8L6BAZu/d/oA== dependencies: - "@react_db_client/constants.client-types" "0.1.3" + "@react_db_client/constants.client-types" "0.1.5" core-js "^3.0.0" styled-components "5.3.5" -"@react_db_client/constants.client-types@0.1.3": - version "0.1.3" - resolved "https://registry.yarnpkg.com/@react_db_client/constants.client-types/-/constants.client-types-0.1.3.tgz#e9f47240deeb694e8f00c5c7b83908ead0a51c96" - integrity sha512-tKUA+ST1o9vLjN/PWcs6O/by6Giof3cEkqRnJsj8s9OLtoIe9f2d1J8AOb35mQmOBwISeGO/DxmRksFkWW9BLw== +"@react_db_client/constants.client-types@0.1.5": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@react_db_client/constants.client-types/-/constants.client-types-0.1.5.tgz#b0d1edf22cb3b4a4579083e70f2366b1a7190ad3" + integrity sha512-tX0qu8QIYl2O7AUnwHAGOQLq+ZB7+/N7KOEEI0aGrP+Xyjc3U6jp0aqTz/mmJgYxmiHGmQl7i9gb/serWAvz0w== dependencies: core-js "^3.0.0" From cb300611a22661a4d8198cc25c313647f0d1f0d8 Mon Sep 17 00:00:00 2001 From: sam bland Date: Sun, 15 May 2022 12:44:40 +0100 Subject: [PATCH 6/6] Remove styled components dependency --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 3f0a922c..c92eeb6b 100755 --- a/package.json +++ b/package.json @@ -36,11 +36,9 @@ "@react_db_client/components.column-manager": "^0.1.7", "@reduxjs/toolkit": "^1.7.1", "@types/array.prototype.flatmap": "^1.2.2", - "@types/styled-components": "^5.1.25", "array.prototype.flatmap": "^1.2.5", "classnames": "^2.3.1", "hot-formula-parser": "^4.0.0", - "styled-components": "^5.3.5", "use-context-selector": "^1.3.7" }, "devDependencies": { @@ -147,4 +145,4 @@ "url": "https://github.com/iddan/react-spreadsheet/issues" }, "homepage": "https://github.com/iddan/react-spreadsheet#readme" -} +} \ No newline at end of file