[gradient] add rotate, transform, children, opacity support

airbnb · Jun 30, 2017 · dc542da · dc542da
1 parent f15508a
commit dc542da
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 18 deletions.
diff --git a/packages/vx-demo/components/tiles/bars.js b/packages/vx-demo/components/tiles/bars.js
@@ -17,11 +17,7 @@ function round(value, precision) {
 const x = d => d.letter;
 const y = d => +d.frequency * 100;
 
-export default ({
-  width,
-  height,
-  events = false,
-}) => {
+export default ({ width, height, events = false }) => {
   if (width < 10) return null;
 
   // bounds
@@ -62,9 +58,9 @@ export default ({
                 y={yMax - barHeight}
                 fill="rgba(23, 233, 217, .5)"
                 data={{ x: x(d), y: y(d) }}
-                onClick={(data) => (event) => {
+                onClick={data => event => {
                   if (!events) return;
-                  alert(`clicked: ${JSON.stringify(data)}`)
+                  alert(`clicked: ${JSON.stringify(data)}`);
                 }}
               />
             </Group>
@@ -73,4 +69,4 @@ export default ({
       </Group>
     </svg>
   );
-}
+};
diff --git a/packages/vx-gradient/package.json b/packages/vx-gradient/package.json
@@ -29,7 +29,8 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.7"
   },
   "devDependencies": {
     "babel-jest": "^20.0.3",
@@ -47,4 +48,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/vx-gradient/src/gradients/LinearGradient.js b/packages/vx-gradient/src/gradients/LinearGradient.js
@@ -1,18 +1,69 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-export default ({
+LinearGradient.propTypes = {
+  id: PropTypes.string.isRequired,
+  from: PropTypes.string,
+  to: PropTypes.string,
+  x1: PropTypes.string,
+  y1: PropTypes.string,
+  y2: PropTypes.string,
+  fromOffset: PropTypes.string,
+  fromOpacity: PropTypes.number,
+  toOffset: PropTypes.string,
+  toOpacity: PropTypes.number,
+  rotate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  transform: PropTypes.string,
+};
+
+export default function LinearGradient({
+  children,
   id,
   from,
   to,
-  fromOffset = "0%",
-  toOffset = "100%",
+  x1,
+  y1,
+  x2,
+  y2,
+  fromOffset = '0%',
+  fromOpacity = 1,
+  toOffset = '100%',
+  toOpacity = 1,
+  rotate,
+  transform,
+  vertical = true,
   ...restProps
-}) => {
+}) {
+  if (vertical && !x1 && !x2 && !y1 && !y2) {
+    x1 = '0';
+    x2 = '0';
+    y1 = '0';
+    y2 = '1';
+  }
   return (
     <defs>
-      <linearGradient id={id} x1="0%" y1="0%" x2="0%" y2="100%" {...restProps}>
-        <stop offset={fromOffset} stopColor={from} />
-        <stop offset={toOffset} stopColor={to} />
+      <linearGradient
+        id={id}
+        x1={x1}
+        y1={y1}
+        x2={x2}
+        y2={y2}
+        gradientTransform={rotate ? `rotate(${rotate})` : transform}
+        {...restProps}
+      >
+        {!!children && children}
+        {!children &&
+          <stop
+            offset={fromOffset}
+            stopColor={from}
+            stopOpacity={fromOpacity}
+          />}
+        {!children &&
+          <stop
+            offset={toOffset}
+            stopColor={to}
+            stopOpacity={toOpacity}
+          />}
       </linearGradient>
     </defs>
   );

diff --git a/packages/vx-legend/src/legends/Legend.js b/packages/vx-legend/src/legends/Legend.js
@@ -25,7 +25,7 @@ Legend.propTypes = {
   direction: PropTypes.string,
   itemDirection: PropTypes.string,
   fill: PropTypes.func,
-  shape: PropTypes.func,
+  shape: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   labelFormat: PropTypes.func,
   labelTransform: PropTypes.func,
 };