Merge pull request #4 from SenseNet/feat/overlay-icons

Release 1.1.0
SenseNet · Sep 25, 2018 · 3800ecc · 3800ecc
2 parents 4f1ba3a + 38b5a93
commit 3800ecc
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sensenet/icons-react",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "A React component rendering icons for sensenet.",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -50,13 +50,13 @@ export class Icon extends React.Component<IconProps, {}> {
 
         switch (type) {
             case iconType.materialui:
-                return <MaterialIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick} className={className}></MaterialIcon>
+                return <MaterialIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick} className={className}>{this.props.children ? this.props.children : null}</MaterialIcon>
             case iconType.flaticon:
-                return <FlatIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick}></FlatIcon>
+                return <FlatIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick}>{this.props.children ? this.props.children : null}</FlatIcon>
             case iconType.fontawesome:
-                return <FontAwesomeIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick}></FontAwesomeIcon>
+                return <FontAwesomeIcon color={color} fontSize={fontSize} classes={classes} iconName={iconName} style={style} onClick={onClick}>{this.props.children ? this.props.children : null}</FontAwesomeIcon>
             case iconType.image:
-                return <ImageIcon iconName={iconName} size={size} style={style} onClick={onClick}></ImageIcon>
+                return <ImageIcon iconName={iconName} size={size} style={style} onClick={onClick}>{this.props.children ? this.props.children : null}</ImageIcon>
             default:
                 return <MaterialIcon
                     iconName={iconName}

diff --git a/src/components/flaticon/Icon.tsx b/src/components/flaticon/Icon.tsx
@@ -27,6 +27,8 @@ export class FlatIcon extends React.Component<FlatIconProps, {}> {
             className={`flaticon-${iconName}`}
             style={style ? style : null}
             onClick={onClick ? onClick : null}
-        />
+        >
+            {this.props.children ? this.props.children : null}
+        </Icon>
     }
 }
diff --git a/src/components/fontawesome/Icon.tsx b/src/components/fontawesome/Icon.tsx
@@ -27,6 +27,8 @@ export class FontAwesomeIcon extends React.Component<FontAwesomeIconProps, {}> {
             className={`fa fa-${iconName}`}
             style={style ? style : null}
             onClick={onClick ? onClick : null}
-        />
+        >
+            {this.props.children ? this.props.children : null}
+        </Icon>
     }
 }
diff --git a/src/components/image/Icon.tsx b/src/components/image/Icon.tsx
@@ -24,9 +24,13 @@ export class ImageIcon extends React.Component<ImageIconProps, {}> {
             backgroundImage: `url(${image})`,
             width: `${imgSize}px`,
             height: `${imgSize}px`,
+            position: 'relative',
         }
         const styles = style ? style : null
-        return <span style={{ ...styler, ...styles }}
-            onClick={onClick ? onClick : null} />
+        return <span
+            style={{ ...styler as any, ...styles }}
+            onClick={onClick ? onClick : null} >
+            {this.props.children ? this.props.children : null}
+        </span>
     }
 }
diff --git a/src/components/materialui/Icon.tsx b/src/components/materialui/Icon.tsx
@@ -26,6 +26,9 @@ export class MaterialIcon extends React.Component<MaterialIconProps, {}> {
             style={style ? style : null}
             onClick={onClick ? onClick : null}
             className={className ? className : null}
-        >{iconName}</Icon>
+        >
+            {iconName}
+            {this.props.children ? this.props.children : null}
+        </Icon>
     }
 }
diff --git a/test/components/Icon.tsx b/test/components/Icon.tsx
@@ -57,4 +57,48 @@ export const pageTests: Mocha.Suite = describe('Icon component', () => {
                 iconName="workspace">
             </Icon>)
     })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <Icon
+                color="primary"
+                fontSize="default"
+                classes={{}}
+                type={iconType.materialui}
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </Icon>)
+    })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <Icon
+                color="primary"
+                fontSize="default"
+                classes={{}}
+                type={iconType.flaticon}
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </Icon>)
+    })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <Icon
+                color="primary"
+                fontSize="default"
+                classes={{}}
+                type={iconType.fontawesome}
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </Icon>)
+    })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <Icon
+                color="primary"
+                fontSize="default"
+                classes={{}}
+                type={iconType.image}
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </Icon>)
+    })
 })
diff --git a/test/components/flaticon/Icon.tsx b/test/components/flaticon/Icon.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
 import { FlatIcon } from '../../../src/components/flaticon/Icon'
+import { Icon, iconType } from '../../../src/components/Icon'
 /**
  * Flat Icon Component tests
  */
@@ -53,4 +54,12 @@ export const flatIconTests: Mocha.Suite = describe('Icon component', () => {
                 iconName="workspace" >
             </FlatIcon >)
     })
+    it('Should render without crashing with children component', () => {
+        c = renderer.create(
+            <FlatIcon
+                onClick={(e) => console.log(e.target)}
+                iconName="workspace" >
+                <Icon type={iconType.materialui} iconName="forward" />
+            </FlatIcon >)
+    })
 })
diff --git a/test/components/fontawesome/Icon.tsx b/test/components/fontawesome/Icon.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
 import { FontAwesomeIcon } from '../../../src/components/fontawesome/Icon'
+import { Icon, iconType } from '../../../src/components/Icon'
 /**
  * FontAwesome Icon Component tests
  */
@@ -53,4 +54,12 @@ export const fontawesomeIconTests: Mocha.Suite = describe('Icon component', () =
                 iconName="workspace" >
             </FontAwesomeIcon >)
     })
+    it('Should render without crashing with children component', () => {
+        c = renderer.create(
+            <FontAwesomeIcon
+                onClick={(e) => console.log(e.target)}
+                iconName="workspace" >
+                <Icon type={iconType.materialui} iconName="forward" />
+            </FontAwesomeIcon >)
+    })
 })
diff --git a/test/components/image/Icon.tsx b/test/components/image/Icon.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
+import { Icon, iconType } from '../../../src/components/Icon'
 import { ImageIcon } from '../../../src/components/image/Icon'
 /**
  * Image Icon Component tests
@@ -33,4 +34,11 @@ export const imageIconTests: Mocha.Suite = describe('Icon component', () => {
                 iconName="workspace">
             </ImageIcon>)
     })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <ImageIcon
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </ImageIcon>)
+    })
 })
diff --git a/test/components/materialui/Icon.tsx b/test/components/materialui/Icon.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as renderer from 'react-test-renderer'
+import { Icon, iconType } from '../../../src/components/Icon'
 import { MaterialIcon } from '../../../src/components/materialui/Icon'
 /**
  * MaterialUI Icon Component tests
@@ -61,4 +62,14 @@ export const materialuiIconTests: Mocha.Suite = describe('Icon component', () =>
                 iconName="workspace" >
             </MaterialIcon >)
     })
+    it('Should render without crashing with overlay', () => {
+        c = renderer.create(
+            <MaterialIcon
+                color="primary"
+                fontSize="default"
+                classes={{}}
+                iconName="workspace">
+                <Icon type={iconType.materialui} iconName="forward" />
+            </MaterialIcon>)
+    })
 })