react-tile - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.js

@@ -39,5 +39,5 @@ "use strict";
     lineHeight: React.PropTypes.string,
-    background: React.PropTypes.string,
+    background: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.element]),
     backgroundSize: React.PropTypes.string,
-    fontSize: React.PropTypes.number,
+    fontSize: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
     fontFamily: React.PropTypes.string
@@ -58,2 +58,3 @@ },
     var style = {
+      position: "relative",
       color: this.props.color,
@@ -66,3 +67,2 @@ width: this.props.size,
       overflow: "hidden",
-      background: this.props.background,
       backgroundSize: this.props.backgroundSize,
@@ -72,2 +72,25 @@ lineHeight: this.props.lineHeight
 
+    var children = [];
+
+    if (typeof this.props.background === "string") {
+      style.background = this.props.background;
+    } else if (this.props.background) {
+      var bgStyle = {
+        zIndex: "-1",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        height: "100%",
+        overflow: "hidden"
+      };
+      children.push(React.createElement(
+        "div",
+        { key: "background", style: bgStyle },
+        this.props.background
+      ));
+    }
+
     var contentStyle = {
@@ -79,10 +102,12 @@ padding: "10px",
 
+    children.push(React.createElement(
+      "div",
+      { key: "content", style: contentStyle },
+      this.props.children
+    ));
+
     return React.createElement(
       "div",
       { style: style },
-      React.createElement(
-        "div",
-        { style: contentStyle },
-        this.props.children
-      )
+      children
     );
@@ -89,0 +114,0 @@ }

example/app.jsx

@@ -12,2 +12,4 @@ 'use strict'
 
+let bgImg = <img src={url} />
+
 React.render(
@@ -24,5 +26,5 @@ <div style={style}>
     <Tile background="purple" bar={false}>Tile #3</Tile>
-    <Tile bar={<b>fooo</b>}>Tile #4</Tile>
+    <Tile background={bgImg} lineHeight='1.1' bar={<b>fooo</b>}>Tile #4</Tile>
   </div>,
   document.body
 )

index.jsx

@@ -32,5 +32,11 @@ 'use strict'
     lineHeight: React.PropTypes.string,
-    background: React.PropTypes.string,
+    background: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.element
+    ]),
     backgroundSize: React.PropTypes.string,
-    fontSize: React.PropTypes.number,
+    fontSize: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.string
+    ]),
     fontFamily: React.PropTypes.string
@@ -51,2 +57,3 @@ },
     let style = {
+      position: 'relative',
       color: this.props.color,
@@ -59,3 +66,2 @@ width: this.props.size,
       overflow: 'hidden',
-      background: this.props.background,
       backgroundSize: this.props.backgroundSize,
@@ -65,2 +71,27 @@ lineHeight: this.props.lineHeight
 
+    let children = []
+
+    if (typeof this.props.background === 'string') {
+      style.background = this.props.background
+    }
+    else if (this.props.background) {
+
+      let bgStyle = {
+        zIndex: '-1',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden'
+      }
+      children.push(
+        <div key='background' style={bgStyle}>
+          {this.props.background}
+        </div>
+      )
+    }
+
     let contentStyle = {
@@ -72,7 +103,9 @@ padding: '10px',
 
+    children.push(
+      <div key="content" style={contentStyle}>{this.props.children}</div>
+    )
+
     return (
       <div style={style}>
-        <div style={contentStyle}>
-          {this.props.children}
-        </div>
+        {children}
       </div>
@@ -79,0 +112,0 @@ )

package.json

 {
   "name": "react-tile",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A tile ui component to display text and other media.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -76,3 +76,4 @@ # react-tile
 * `size`: Specifies the size of one side; default is `"100%"`
-* `color`, `lineHeight`, `background`, `backgroundSize`, `fontSize`, `fontFamily`
+* [`background`](#background): value for css `background` property or React component to be used as background; see above for details
+* `color`, `lineHeight`, `backgroundSize`, `fontSize`, `fontFamily`
 
@@ -79,0 +80,0 @@ ### TextCell

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14851

11.69%

Lines of code

308

20.31%

Number of lines in readme file

87

1.16%

Number of medium supply chain risk alerts

0

-100%

No dependency changes