Merge branch 'main' into freeze-right-columns

Author: citizensas

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "6.0.4-alpha23",
+    "version": "6.0.4-alpha24",
     "scripts": {
         "start": "npm run storybook",
         "version": "./update-version.sh",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-cells",
-    "version": "6.0.4-alpha23",
+    "version": "6.0.4-alpha24",
     "description": "Extra cells for glide-data-grid",
     "sideEffects": [
         "**/*.css"
@@ -50,7 +50,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "6.0.4-alpha23",
+        "@glideapps/glide-data-grid": "6.0.4-alpha24",
         "@linaria/react": "^6.3.0",
         "@toast-ui/editor": "3.2.2",
         "@toast-ui/react-editor": "3.2.3",

packages/cells/package.json

@@ -312,6 +312,7 @@ export const CustomCells: React.VFC = () => {
                                 step: 1,
                                 label: `${Math.round(v * 100)}%`,
                                 measureLabel: "100%",
+                                color: row % 2 === 0 ? "#77c4c4" : undefined,
                             },
                         };
                         return d;

packages/cells/src/cell.stories.tsx

@@ -31,6 +31,8 @@ interface RangeCellProps {
     readonly step: number;
     readonly label?: string;
     readonly measureLabel?: string;
+    /* The color of the range, fallback to theme.accentColor. */
+    readonly color?: string;
 }
 
 export type RangeCell = CustomCell<RangeCellProps>;
@@ -50,7 +52,7 @@ const renderer: CustomRenderer<RangeCell> = {
     isMatch: (c): c is RangeCell => (c.data as any).kind === "range-cell",
     draw: (args, cell) => {
         const { ctx, theme, rect } = args;
-        const { min, max, value, label, measureLabel } = cell.data;
+        const { min, max, value, label, measureLabel, color } = cell.data;
 
         const x = rect.x + theme.cellHorizontalPadding;
         const yMid = rect.y + rect.height / 2;
@@ -75,8 +77,9 @@ const renderer: CustomRenderer<RangeCell> = {
         if (rangeWidth >= rangeHeight) {
             const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid);
 
-            gradient.addColorStop(0, theme.accentColor);
-            gradient.addColorStop(fillRatio, theme.accentColor);
+            const fillColor = color ?? theme.accentColor;
+            gradient.addColorStop(0, fillColor);
+            gradient.addColorStop(fillRatio, fillColor);
             gradient.addColorStop(fillRatio, theme.bgBubble);
             gradient.addColorStop(1, theme.bgBubble);
 

packages/cells/src/cells/range-cell.tsx

@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid",
-    "version": "6.0.4-alpha23",
+    "version": "6.0.4-alpha24",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
     "sideEffects": [
         "**/*.css"

packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-source",
-    "version": "6.0.4-alpha23",
+    "version": "6.0.4-alpha24",
     "description": "Useful data source hooks for Glide Data Grid",
     "sideEffects": false,
     "type": "module",
@@ -42,7 +42,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "6.0.4-alpha23"
+        "@glideapps/glide-data-grid": "6.0.4-alpha24"
     },
     "peerDependencies": {
         "lodash": "^4.17.19",