Merge pull request #65 from joemaddalone/sxy

feat(shorthand): docs and tests for shorthands: exy, sxy, cxy, and rxy
joemaddalone · Dec 31, 2020 · 68deb49 · 68deb49
2 parents d17dd28 + fd42055
commit 68deb49
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -97,6 +97,12 @@ const App = () => {
 
 Writing path commands via the library makes creating paths super simple and intuitive.  However it can seem like overkill for really common patterns you may need.  react-svg-path includes a number of components to allow for a declarative interface for generating the paths you need.
 
+_Note: The following shorthand version of some props are available where applicable:_
+* **sxy**: sx & sy = sxy
+* **exy**: ex & ey = exy
+* **cxy**: cx & cy = cxy
+* **rxy**: rx & cy = rxy
+
 The following components are available
 
 ## Shapes

diff --git a/example/src/TestApp.js b/example/src/TestApp.js
@@ -1,12 +1,16 @@
 import React from 'react';
-import TargetDemo from './components/demos/targets/TargetDemo';
+import { Svg, Line, Circle } from 'react-svg-path';
 
 import './App.css';
 
 const App = () => {
   return (
     <div>
-      <TargetDemo />
+      <Svg width={500} height={500}>
+        <Line exy={10} sxy={490} stroke='#333'>
+          <Circle size={10} stroke='#333' />
+        </Line>
+      </Svg>
     </div>
   );
 };

diff --git a/example/src/components/demo-builders/BasicShapeDemo.js b/example/src/components/demo-builders/BasicShapeDemo.js
@@ -10,7 +10,7 @@ import demoDocs from '../../docs/demos';
 import './BasicShapeDemo.css';
 
 export const BasicShapeDemo = ({ shape }) => {
-  const { Component, props } = docs[shape];
+  const { Component, props, shorthands } = docs[shape];
   const demos = demoDocs.basicShapes[shape];
   const initialState = demos.map((d, i) => {
     return Object.keys(d)
@@ -41,6 +41,29 @@ export const BasicShapeDemo = ({ shape }) => {
 />
       `.trim()}
       </code>
+      {shorthands && (
+        <>
+          <p>This component has shorthand props available:</p>
+          <table className='ui table'>
+            <thead>
+              <tr>
+                <th>prop</th>
+                <th>description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {shorthands.map((sh, shi) => {
+                return (
+                  <tr key={shi}>
+                    <td>{sh.k}</td>
+                    <td>{sh.description}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </>
+      )}
       <p>{t(`${shape}.description`)}</p>
       {demos &&
         demos.map(({ svgDimensions, ...rest }, i) => {

diff --git a/example/src/components/demo-builders/CurveDemo.js b/example/src/components/demo-builders/CurveDemo.js
@@ -8,7 +8,7 @@ import { Tabs } from './Tabs';
 import { translate as t } from '../../i18n/i18n';
 
 export const CurveDemo = ({ curve }) => {
-  const { Component, props } = docs[curve];
+  const { Component, props, shorthands } = docs[curve];
   const demos = JSON.parse(JSON.stringify(demoDocs.curves[curve]));
   const initialState = demos.map((d, i) => {
     return Object.keys(d)
@@ -38,6 +38,29 @@ export const CurveDemo = ({ curve }) => {
 />
       `.trim()}
       </code>
+      {shorthands && (
+        <>
+          <p>This component has shorthand props available:</p>
+          <table className='ui table'>
+            <thead>
+              <tr>
+                <th>prop</th>
+                <th>description</th>
+              </tr>
+            </thead>
+            <tbody>
+              {shorthands.map((sh, shi) => {
+                return (
+                  <tr key={shi}>
+                    <td>{sh.k}</td>
+                    <td>{sh.description}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </>
+      )}
       <p>{t(`${curve}.description`)}</p>
       {demos &&
         demos.map(({ svgDimensions, ...rest }, i) => {

diff --git a/example/src/components/demos/targets/Gridset.js b/example/src/components/demos/targets/Gridset.js
@@ -168,7 +168,7 @@ export class Gridset {
       r: rightCell.r,
       b: bottomCell.b,
       cx: (leftCell.l + w) / 2,
-      cx: (topCell.t + h) / 2,
+      cy: (topCell.t + h) / 2,
       cells
     };
   }

diff --git a/example/src/docs/docs.js b/example/src/docs/docs.js
@@ -38,6 +38,45 @@ const cy = {
   description: 'Center x coordinate of the shape.'
 };
 
+export const shorthands = {
+  sxy: {
+    ...commonNumber,
+    isRequired: false,
+    default: null,
+    k: 'sxy',
+    p: ['sx', 'sy'],
+    description:
+      'If sx and sy are equal values you can use the shortcut "sxy" to set both at once.'
+  },
+  exy: {
+    ...commonNumber,
+    isRequired: false,
+    default: null,
+    k: 'exy',
+    p: ['ex', 'ey'],
+    description:
+      'If ex and ey are equal values you can use the shortcut "exy" to set both at once.'
+  },
+  cxy: {
+    ...commonNumber,
+    isRequired: false,
+    default: null,
+    k: 'cxy',
+    p: ['cx', 'cy'],
+    description:
+      'If cx and cy are equal values you can use the shortcut "cxy" to set both at once.'
+  },
+  rxy: {
+    ...commonNumber,
+    isRequired: false,
+    default: null,
+    k: 'rxy',
+    p: ['rx', 'ry'],
+    description:
+      'If rx and ry are equal values you can use the shortcut "rxy" to set both at once.'
+  }
+};
+
 const centerEnd = {
   default: true,
   type: 'boolean',
@@ -63,7 +102,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   ellipse: {
     category: 'basicShapes',
@@ -85,7 +125,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   polygon: {
     category: 'basicShapes',
@@ -136,7 +177,8 @@ const docs = {
       },
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   polyline: {
     category: 'basicShapes',
@@ -201,7 +243,8 @@ const docs = {
     },
     nestingProps: ({ sx, sy, ex, ey }) => {
       return { ex: sx, ey: sy, sx: ex, sy: ey };
-    }
+    },
+    shorthands: [shorthands.exy, shorthands.sxy]
   },
   radialLines: {
     category: 'basicShapes',
@@ -227,7 +270,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   rect: {
     category: 'basicShapes',
@@ -249,7 +293,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   regPolygon: {
     category: 'basicShapes',
@@ -271,7 +316,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   sector: {
     category: 'basicShapes',
@@ -297,7 +343,8 @@ const docs = {
       },
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   segment: {
     category: 'basicShapes',
@@ -323,7 +370,8 @@ const docs = {
       },
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   square: {
     category: 'basicShapes',
@@ -341,7 +389,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   star: {
     category: 'basicShapes',
@@ -367,7 +416,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   triangle: {
     category: 'basicShapes',
@@ -385,7 +435,8 @@ const docs = {
       cy,
       centerEnd
     },
-    nestingProps: centeredShapeNestingProps
+    nestingProps: centeredShapeNestingProps,
+    shorthands: [shorthands.cxy]
   },
   arc: {
     category: 'curves',
@@ -453,7 +504,8 @@ const docs = {
     },
     nestingProps: ({ sx, sy, ex, ey }) => {
       return { ex: sx, ey: sy, sx: ex, sy: ey };
-    }
+    },
+    shorthands: [shorthands.exy, shorthands.sxy, shorthands.rxy]
   },
   cubic: {
     category: 'curves',
@@ -520,7 +572,7 @@ const docs = {
         isRequired: false,
         description:
           'If set to true all points after sx & sy will become relative to sx & sy.'
-      }
+      },
     },
     nestingProps: ({ sx, sy, ex, ey, S }) => {
       let endX = ex;
@@ -530,7 +582,8 @@ const docs = {
         endY = S[S.length - 1][1];
       }
       return { ex: sx, ey: sy, sx: endX, sy: endY };
-    }
+    },
+    shorthands: [shorthands.exy, shorthands.sxy]
   },
   quad: {
     category: 'curves',
@@ -598,7 +651,8 @@ const docs = {
         endY = T[T.length - 1][1];
       }
       return { ex: sx, ey: sy, sx: endX, sy: endY };
-    }
+    },
+    shorthands: [shorthands.exy, shorthands.sxy, shorthands.cxy]
   }
 };
 

diff --git a/scripts/makeReadMe.mjs b/scripts/makeReadMe.mjs
@@ -124,6 +124,12 @@ const App = () => {
 
 Writing path commands via the library makes creating paths super simple and intuitive.  However it can seem like overkill for really common patterns you may need.  react-svg-path includes a number of components to allow for a declarative interface for generating the paths you need.
 
+_Note: The following shorthand version of some props are available where applicable:_
+* **sxy**: sx & sy = sxy
+* **exy**: ex & ey = exy
+* **cxy**: cx & cy = cxy
+* **rxy**: rx & cy = rxy
+
 The following components are available
 
 `;

diff --git a/src/components/BasicShapes.js b/src/components/BasicShapes.js
@@ -1,8 +1,13 @@
+/* eslint-disable no-prototype-builtins */
 import createSimpleComponent from '../utils/createSimpleComponent';
+import shorthand from '../utils/shorthand';
 import docs from '../docs/docs.mjs';
 
 const shapes = Object.keys(docs).reduce((accum, cur) => {
-  const component = (props) => createSimpleComponent(docs[cur], props);
+  const component = (props) => {
+    const p = props ? shorthand(props) : props;
+    return createSimpleComponent(docs[cur], p);
+  };
   component.displayName = docs[cur].Component;
   accum[docs[cur].Component] = component;
   return accum;