feat(RTL): Flip the content

BREAKING CHANGE: Flip all content instead of only flip the animation direction Closes #122
danilowoz · Jan 3, 2019 · 8be6fe4 · 8be6fe4
1 parent 355414a
commit 8be6fe4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/docs/usage.mdx b/docs/usage.mdx
@@ -3,16 +3,16 @@ name: Usage
 route: /usage
 ---
 
-import { Playground, PropsTable } from "docz";
+import { Playground, PropsTable } from 'docz'
 
 import ContentLoader, {
   Facebook,
   Instagram,
   Code,
   List,
-  BulletList
-} from "../src";
-import FacebookStyle from "../src/stylized/FacebookStyle";
+  BulletList,
+} from '../src'
+import FacebookStyle from '../src/stylized/FacebookStyle'
 
 # React Content Loader
 
@@ -56,8 +56,8 @@ import FacebookStyle from "../src/stylized/FacebookStyle";
   <ContentLoader
     height={140}
     speed={1}
-    primaryColor={"#333"}
-    secondaryColor={"#999"}
+    primaryColor={'#333'}
+    secondaryColor={'#999'}
   >
     <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
     <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
@@ -79,7 +79,7 @@ Set animate props to false to stop Animation
   <Facebook animate={false} />
 </Playground>
 
-## Right To Left Animation
+## RTL: Right To Left Animation
 
 Set rtl props to animate from right to left
 

diff --git a/src/Svg.tsx b/src/Svg.tsx
@@ -23,16 +23,12 @@ export default ({
 }: IContentLoaderProps) => {
   const idClip = uniquekey ? `${uniquekey}-idClip` : uid()
   const idGradient = uniquekey ? `${uniquekey}-idGradient` : uid()
-
-  const defautlAnimation = ['-3; 1', '-2; 2', '-1; 3']
-  const rtlAnimation = ['1; -3', '2; -2', '3; -1']
-
-  const animationValues = rtl ? rtlAnimation : defautlAnimation
+  const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {}
 
   return (
     <svg
       role="img"
-      style={style}
+      style={{ ...style, ...rtlStyle }}
       className={className}
       aria-labelledby={ariaLabel}
       viewBox={`0 0 ${width} ${height}`}
@@ -61,7 +57,7 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values={animationValues[0]}
+                values="-3; 1"
                 dur={`${speed}s`}
                 repeatCount="indefinite"
               />
@@ -76,7 +72,7 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values={animationValues[1]}
+                values="-2; 2"
                 dur={`${speed}s`}
                 repeatCount="indefinite"
               />
@@ -91,7 +87,7 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values={animationValues[2]}
+                values="-1; 3"
                 dur={`${speed}s`}
                 repeatCount="indefinite"
               />