fix: morph SvgGroup styles as attributes and not as styles

Fixes viewstools/docs/issues/13
viewstools · Jan 21, 2018 · 39fd3eb · 39fd3eb
1 parent be46f4a
commit 39fd3eb
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/__tests__/__snapshots__/react.js.snap b/__tests__/__snapshots__/react.js.snap
@@ -3469,15 +3469,24 @@ const UseSvg = props => {
       viewBox=\\"0 0 20 20\\"
       className={\`views-block \${Svg_hq411mi}\`}
     >
-      <path data-test-id=\\"UseSvg.SvgPath\\" d=\\"0 20\\" className=\\"views-block\\" />
+      <path
+        data-test-id=\\"UseSvg.SvgPath\\"
+        d=\\"0 20\\"
+        fill=\\"red\\"
+        className=\\"views-block\\"
+      />
       <circle
         data-test-id=\\"UseSvg.SvgCircle\\"
         cx={10}
         cy={5}
         r={5}
         className=\\"views-block\\"
       />
-      <g data-test-id=\\"UseSvg.SvgGroup\\" className=\\"views-block\\">
+      <g
+        data-test-id=\\"UseSvg.SvgGroup\\"
+        transform=\\"translate(6.000000, 5.000000)\\"
+        className=\\"views-block\\"
+      >
         <path data-test-id=\\"UseSvg.SvgPath:1\\" d={1} className=\\"views-block\\" />
         <path data-test-id=\\"UseSvg.SvgPath:2\\" d={2} className=\\"views-block\\" />
       </g>
@@ -3514,15 +3523,24 @@ const UseSvg = props => {
       viewBox=\\"0 0 20 20\\"
       className={\`views-block \${Svg_hq411mi}\`}
     >
-      <path data-test-id=\\"UseSvg.SvgPath\\" d=\\"0 20\\" className=\\"views-block\\" />
+      <path
+        data-test-id=\\"UseSvg.SvgPath\\"
+        d=\\"0 20\\"
+        fill=\\"red\\"
+        className=\\"views-block\\"
+      />
       <circle
         data-test-id=\\"UseSvg.SvgCircle\\"
         cx={10}
         cy={5}
         r={5}
         className=\\"views-block\\"
       />
-      <g data-test-id=\\"UseSvg.SvgGroup\\" className=\\"views-block\\">
+      <g
+        data-test-id=\\"UseSvg.SvgGroup\\"
+        transform=\\"translate(6.000000, 5.000000)\\"
+        className=\\"views-block\\"
+      >
         <path data-test-id=\\"UseSvg.SvgPath:1\\" d={1} className=\\"views-block\\" />
         <path data-test-id=\\"UseSvg.SvgPath:2\\" d={2} className=\\"views-block\\" />
       </g>
@@ -5632,19 +5650,21 @@ import Svg, {
   Path as SvgPath,
   Text as SvgText,
 } from 'react-native-svg';
-import { StyleSheet } from 'react-native';
-const styles = StyleSheet.create({ h8aawx1: { height: 20, width: 20 } });
 
 const UseSvg = props => {
   return (
     <Svg
       testID={props['testID'] || 'Svg'}
       viewBox=\\"0 0 20 20\\"
-      style={styles.h8aawx1}
+      height={20}
+      width={20}
     >
-      <SvgPath testID=\\"UseSvg.SvgPath\\" d=\\"0 20\\" />
+      <SvgPath testID=\\"UseSvg.SvgPath\\" d=\\"0 20\\" fill=\\"red\\" />
       <SvgCircle testID=\\"UseSvg.SvgCircle\\" cx={10} cy={5} r={5} />
-      <SvgGroup testID=\\"UseSvg.SvgGroup\\">
+      <SvgGroup
+        testID=\\"UseSvg.SvgGroup\\"
+        transform=\\"translate(6.000000, 5.000000)\\"
+      >
         <SvgPath testID=\\"UseSvg.SvgPath:1\\" d={1} />
         <SvgPath testID=\\"UseSvg.SvgPath:2\\" d={2} />
       </SvgGroup>

diff --git a/__tests__/views/UseSvg.view b/__tests__/views/UseSvg.view
@@ -4,11 +4,13 @@ height 20
 width 20
 SvgPath
 d 0 20
+fill red
 SvgCircle
 cx 10
 cy 5
 r 5
 SvgGroup
+transform translate(6.000000, 5.000000)
 SvgPath
 d 1
 SvgPath

diff --git a/morph/react/property-style.js b/morph/react/property-style.js
@@ -4,11 +4,18 @@ import {
   getStyleType,
   isCode,
   isStyle,
+  isSvg,
 } from '../utils.js'
 import safe from './safe.js'
 
 export function enter(node, parent, state) {
-  if (!(isStyle(node) && parent.isBasic && !parent.isSvg)) return
+  if (
+    !isStyle(node) ||
+    !parent.isBasic ||
+    (isSvg(parent) && state.isReactNative) ||
+    parent.name === 'SvgGroup'
+  )
+    return
 
   let styleForProperty, isScopedVal, _isProp
 

diff --git a/morph/utils.js b/morph/utils.js
@@ -124,3 +124,5 @@ export const isList = node =>
   node && node.type === 'Block' && node.name === 'List'
 
 export const isEmpty = list => list.length === 0
+
+export const isSvg = node => /^Svg/.test(node.name) && node.isBasic
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "views-morph",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "description": "Views language morpher",
   "main": "lib.js",
   "bin": {