Merge pull request #6 from EOS-uiux-Solutions/dev

[React Package] - Addition of Flip prop

Author: kaybhutani

gulpfile.ts

@@ -43,6 +43,11 @@ export default series(
     copy({
       from: ['utils/helper.ts'],
       toDir: 'src/'
+    }),
+
+    copy({
+      from: ['utils/flipFunction.ts'],
+      toDir: 'src/'
     })
   )
 )

scripts/iconScript.ts

@@ -26,7 +26,7 @@ async function generateIconComponents ({ type, from }: IconGenerateScript) {
       }
 
       // eslint-disable-next-line no-template-curly-in-string
-      const propString = 'svg transform={`rotate(${rotate})`} fill={color} width={size} height={size}'
+      const propString = 'svg transform={`rotate(${rotate}) translate(${translateX}, ${translateY}) scale(${scaleX}, ${scaleY})`} fill={color} width={size} height={size}'
       data = data.replace('svg', propString)
 
       const render = componentTemplate({ fileName, data })

template/iconComponent.ts

@@ -6,12 +6,14 @@ function componentTemplate ({ fileName, data }:TemplateProps) {
 
 import * as React from 'react';
 import { IconProps, valuesMap } from '../helper';
+import { flipFunction } from '../flipFunction';
 
-function Eos${fileName}({size = "m", color = "black", rotate = 0}: IconProps) {
+function Eos${fileName}({size = "m", color = "black", rotate = 0, horizontalFlip = false, verticalFlip = false}: IconProps) {
     const sizeString: string = size.toString()
     if(Object.keys(valuesMap).includes(sizeString)) {
         size = valuesMap[size]
     }
+    const { scaleX, scaleY, translateX, translateY } = flipFunction({horizontalFlip,verticalFlip})
 return (
     ${data}
     );

utils/flipFunction.ts

@@ -0,0 +1,20 @@
+import { FlipProps } from './helper'
+
+export function flipFunction ({ horizontalFlip, verticalFlip }: FlipProps) {
+  let translateX = 0
+  let translateY = 0
+  let scaleX = 1
+  let scaleY = 1
+
+  if (horizontalFlip) {
+    scaleX = -1
+    translateX = 24
+  }
+
+  if (verticalFlip) {
+    scaleY = -1
+    translateY = 24
+  }
+
+  return { scaleX, scaleY, translateX, translateY }
+}

utils/helper.ts

@@ -1,7 +1,9 @@
 export interface IconProps {
     size?: string | number,
     color?: string,
-    rotate?: string | number
+    rotate?: string | number,
+    horizontalFlip?: boolean,
+    verticalFlip?: boolean
 }
 
 export interface ValueMap {
@@ -21,3 +23,8 @@ export const valuesMap: ValueMap = {
   xxl: 48,
   xxxl: 64
 }
+
+export interface FlipProps {
+  horizontalFlip: boolean;
+  verticalFlip: boolean;
+}