react-konva-grid - npm Package Compare versions

Comparing version 2.7.1 to 2.7.2

dist/Grid.d.ts

@@ -128,2 +128,6 @@ import React, { Key } from "react";
     /**
+     * Allows users to Wrap stage children in Top level Context
+     */
+    wrapper?: (children: React.ReactNode) => React.ReactNode;
+    /**
      * Props that can be injected to Konva stage
@@ -130,0 +134,0 @@ */

dist/Grid.js

@@ -61,3 +61,3 @@ "use strict";
 const Grid = react_1.memo(react_1.forwardRef((props, forwardedRef) => {
-    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = true, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps"]);
+    const { width: containerWidth = 800, height: containerHeight = 600, estimatedColumnWidth, estimatedRowHeight, rowHeight = defaultRowHeight, columnWidth = defaultColumnWidth, rowCount = 0, columnCount = 0, scrollbarSize = 13, onScroll, showScrollbar = true, selectionBackgroundColor = "rgb(14, 101, 235, 0.1)", selectionBorderColor = "#1a73e8", selectionStrokeWidth = 1, activeCellStrokeWidth = 2, activeCell, selections = [], frozenRows = 0, frozenColumns = 0, itemRenderer = Cell_1.CellRenderer, mergedCells = [], snap = false, scrollThrottleTimeout = 100, onViewChange, selectionRenderer = defaultSelectionRenderer, onBeforeRenderRow, showFrozenShadow = true, shadowSettings = defaultShadowSettings, borderStyles = [], children, stageProps, wrapper = (children) => children } = props, rest = __rest(props, ["width", "height", "estimatedColumnWidth", "estimatedRowHeight", "rowHeight", "columnWidth", "rowCount", "columnCount", "scrollbarSize", "onScroll", "showScrollbar", "selectionBackgroundColor", "selectionBorderColor", "selectionStrokeWidth", "activeCellStrokeWidth", "activeCell", "selections", "frozenRows", "frozenColumns", "itemRenderer", "mergedCells", "snap", "scrollThrottleTimeout", "onViewChange", "selectionRenderer", "onBeforeRenderRow", "showFrozenShadow", "shadowSettings", "borderStyles", "children", "stageProps", "wrapper"]);
     tiny_invariant_1.default(!(children && typeof children !== "function"), "Children should be a function");
@@ -955,39 +955,41 @@ /* Expose some methods in ref */
     const listenToEvents = !isScrolling;
+    const stageChildren = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ReactKonvaCore_1.Layer, null,
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, perfectDrawEnabled: false },
+                cells,
+                mergedCellAreas)),
+        react_1.default.createElement(ReactKonvaCore_1.Layer, null,
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, listening: false },
+                borderStylesCells,
+                selectionAreas,
+                activeCellSelection),
+            frozenColumnShadow,
+            frozenRowShadow,
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: scrollLeft },
+                frozenRowCells,
+                frozenRowMergedCellAreas),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: scrollLeft, listening: false },
+                selectionAreasFrozenRows,
+                activeCellSelectionFrozenRow),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: 0 },
+                frozenColumnCells,
+                frozenColumnMergedCellAreas),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: 0, listening: false },
+                selectionAreasFrozenColumns,
+                activeCellSelectionFrozenColumn),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0 },
+                frozenIntersectionCells,
+                frozenIntersectionMergedCells),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0, listening: false },
+                selectionAreasIntersection,
+                activeCellSelectionFrozenIntersection)),
+        children && typeof children === "function"
+            ? children({
+                scrollLeft,
+                scrollTop,
+            })
+            : null));
     return (react_1.default.createElement("div", { style: { position: "relative", width: containerWidth } },
         react_1.default.createElement("div", Object.assign({ onWheel: handleWheel, tabIndex: 1, ref: containerRef }, rest),
-            react_1.default.createElement(ReactKonvaCore_1.Stage, Object.assign({ width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents }, stageProps),
-                react_1.default.createElement(ReactKonvaCore_1.Layer, null,
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, perfectDrawEnabled: false },
-                        cells,
-                        mergedCellAreas)),
-                react_1.default.createElement(ReactKonvaCore_1.Layer, null,
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, listening: false },
-                        borderStylesCells,
-                        selectionAreas,
-                        activeCellSelection),
-                    frozenColumnShadow,
-                    frozenRowShadow,
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: scrollLeft },
-                        frozenRowCells,
-                        frozenRowMergedCellAreas),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: scrollLeft, listening: false },
-                        selectionAreasFrozenRows,
-                        activeCellSelectionFrozenRow),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: 0 },
-                        frozenColumnCells,
-                        frozenColumnMergedCellAreas),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: 0, listening: false },
-                        selectionAreasFrozenColumns,
-                        activeCellSelectionFrozenColumn),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0 },
-                        frozenIntersectionCells,
-                        frozenIntersectionMergedCells),
-                    react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: 0, offsetX: 0, listening: false },
-                        selectionAreasIntersection,
-                        activeCellSelectionFrozenIntersection)),
-                children &&
-                    children({
-                        scrollLeft,
-                        scrollTop,
-                    }))),
+            react_1.default.createElement(ReactKonvaCore_1.Stage, Object.assign({ width: containerWidth, height: containerHeight, ref: stageRef, listening: listenToEvents }, stageProps), wrapper(stageChildren))),
         showScrollbar ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -994,0 +996,0 @@ react_1.default.createElement("div", { style: {

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

Readme.md

@@ -27,2 +27,3 @@ ## Declarative Canvas Grid with React Konva
 - :hammer_and_wrench: Fully typed API written in TypeScript
+- :rainbow: Full Theming and Context Support
 - :muscle: Highly customizable using [react-konva](https://github.com/konvajs/react-konva/)
@@ -132,2 +133,3 @@
 | children | false | Function | Inject React Konva shapes using children | null
+| wrapper | false | Function | Inject custom context using a wrapper | (children) => children |
 
@@ -185,3 +187,38 @@ ## Methods
 
+## Passing Contexts
 
+React Konva uses `react-reconciler` to create a custom React renderer. Which means Top Level Context is not available inside the canvas. We provide a simple `wrapper` prop to pass Context to the Grid
+
+```js
+const ThemeContext = React.createContext({})
+const theme = { color: 'yellow' }
+<Grid
+  wrapper={(children) => {
+    return (
+      <ThemeContext.Provider value={theme}>
+        {children}
+      </ThemContext.Provider>
+    )
+  }}
+/>
+```
+
+This will let you use ThemeContext is any of the React Konva components. To access theme inside `Cell`, you could do
+
+```js
+const Cell = ({ x, y, width, height }) => {
+  const theme = useContext(ThemeContext)
+
+  return (
+    <Rect
+      fill={theme.color}
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+    >
+  )
+}
+```
+
 ## Storybook
@@ -188,0 +225,0 @@

No alert changes

Improved metrics

Total package byte prevSize

14794260

increased by0.01%

Lines of code

21456

increased by0.14%

Number of lines in readme file

241

increased by18.14%

No dependency changes