[grid] add styles and restProps support

airbnb · Jul 18, 2017 · f4cdb72 · f4cdb72
1 parent d8cc3e3
commit f4cdb72
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 52 deletions.
diff --git a/packages/vx-grid/src/grids/Columns.js b/packages/vx-grid/src/grids/Columns.js
@@ -14,34 +14,39 @@ export default function Columns({
   strokeDasharray,
   className,
   numTicks = 10,
+  lineStyle,
+  ...restProps
 }) {
   return (
     <Group
       className={cx('vx-columns', className)}
       top={top}
       left={left}
     >
-      {scale.ticks && scale.ticks(numTicks).map((d,i) => {
-        const x = scale(d);
-        const fromPoint = new Point({
-          x,
-          y: 0,
-        });
-        const toPoint = new Point({
-          x,
-          y: height,
-        });
-        return (
-          <Line
-            key={`column-line-${d}-${i}`}
-            from={fromPoint}
-            to={toPoint}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            strokeDasharray={strokeDasharray}
-          />
-        );
-      })}
+      {scale.ticks &&
+        scale.ticks(numTicks).map((d, i) => {
+          const x = scale(d);
+          const fromPoint = new Point({
+            x,
+            y: 0,
+          });
+          const toPoint = new Point({
+            x,
+            y: height,
+          });
+          return (
+            <Line
+              key={`column-line-${d}-${i}`}
+              from={fromPoint}
+              to={toPoint}
+              stroke={stroke}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDasharray}
+              style={lineStyle}
+              {...restProps}
+            />
+          );
+        })}
     </Group>
   );
 }
diff --git a/packages/vx-grid/src/grids/Grid.js b/packages/vx-grid/src/grids/Grid.js
@@ -17,13 +17,11 @@ export default function Grid({
   strokeDasharray,
   numTicksRows,
   numTicksColumns,
+  rowLineStyle,
+  columnLineStyle,
 }) {
   return (
-    <Group
-      className={cx('vx-grid', className)}
-      top={top}
-      left={left}
-    >
+    <Group className={cx('vx-grid', className)} top={top} left={left}>
       <Rows
         className={className}
         scale={yScale}
@@ -32,6 +30,7 @@ export default function Grid({
         strokeWidth={strokeWidth}
         strokeDasharray={strokeDasharray}
         numTicks={numTicksRows}
+        style={rowLineStyle}
       />
       <Columns
         className={className}
@@ -41,6 +40,7 @@ export default function Grid({
         strokeWidth={strokeWidth}
         strokeDasharray={strokeDasharray}
         numTicks={numTicksColumns}
+        style={columnLineStyle}
       />
     </Group>
   );

diff --git a/packages/vx-grid/src/grids/Rows.js b/packages/vx-grid/src/grids/Rows.js
@@ -14,34 +14,35 @@ export default function Rows({
   strokeDasharray,
   className,
   numTicks = 10,
+  lineStyle,
+  ...restProps
 }) {
   return (
-    <Group
-      className={cx('vx-rows', className)}
-      top={top}
-      left={left}
-    >
-      {scale.ticks && scale.ticks(numTicks).map((d,i) => {
-        const y = scale(d);
-        const fromPoint = new Point({
-          x: 0,
-          y
-        });
-        const toPoint = new Point({
-          x: width,
-          y
-        });
-        return (
-          <Line
-            key={`row-line-${d}-${i}`}
-            from={fromPoint}
-            to={toPoint}
-            stroke={stroke}
-            strokeWidth={strokeWidth}
-            strokeDasharray={strokeDasharray}
-          />
-        );
-      })}
+    <Group className={cx('vx-rows', className)} top={top} left={left}>
+      {scale.ticks &&
+        scale.ticks(numTicks).map((d, i) => {
+          const y = scale(d);
+          const fromPoint = new Point({
+            x: 0,
+            y,
+          });
+          const toPoint = new Point({
+            x: width,
+            y,
+          });
+          return (
+            <Line
+              key={`row-line-${d}-${i}`}
+              from={fromPoint}
+              to={toPoint}
+              stroke={stroke}
+              strokeWidth={strokeWidth}
+              strokeDasharray={strokeDasharray}
+              style={lineStyle}
+              {...restProps}
+            />
+          );
+        })}
     </Group>
   );
 }