https://github.com/facebook/react/issues/2020

tomkp · Mar 9, 2015 · 459385b · 459385b
1 parent c3651c1
commit 459385b
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 179 deletions.
diff --git a/build/Example.js b/build/Example.js
@@ -72,6 +72,11 @@ var Example = React.createClass({
                         )
                     )
                 )
+            ),
+            React.createElement(
+                Fixed,
+                { className: "header" },
+                "Fixed Footer"
             )
         );
     }

diff --git a/build/Layout.js b/build/Layout.js
@@ -4,6 +4,8 @@ var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["defau
 
 var React = _interopRequire(require("react/addons"));
 
+var prefix = _interopRequire(require("./Prefix"));
+
 var Layout = React.createClass({
     displayName: "Layout",
 
@@ -29,6 +31,8 @@ var Layout = React.createClass({
         if (this.props.type === "rows") {
             styles = {
                 display: "flex",
+                // todo: https://github.com/facebook/react/issues/2020
+                // display: '-webkit-flex',
 
                 WebkitBoxFlex: 1,
                 WebkitFlex: 1,
@@ -67,6 +71,8 @@ var Layout = React.createClass({
             };
         }
 
+        styles = prefix(styles, window.navigator.userAgent);
+
         var type = this.props.type;
         var index = 0;
         var elements = this.props.children.map(function (child) {

diff --git a/build/Prefix.js b/build/Prefix.js
@@ -0,0 +1,29 @@
+"use strict";
+
+// https://github.com/facebook/react/issues/2020
+// https://github.com/appsforartists/autoprefix-style-prop
+
+var flexboxKeys = ["alignContent", "alignItems", "alignSelf", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "order", "transform"];
+
+function Prefix(styles, userAgent) {
+
+    var result = {};
+
+    Object.keys(styles).forEach(function (key) {
+        console.info("key", key);
+        // Browser sniffing sucks, but Safari overloads display, and there's
+        // no way to set a style key to two values in React
+        if (key === "display" && styles.display.indexOf("flex") !== -1 && userAgent && userAgent.indexOf("WebKit") !== -1 && userAgent.indexOf("Chrom") === -1) {
+            result.display = "-webkit-" + styles.display;
+        } else if (flexboxKeys.indexOf(key) !== -1) {
+            var titleCasedKey = key.substring(0, 1).toUpperCase() + key.substring(1);
+            result["Webkit" + titleCasedKey] = styles[key];
+        } else {
+            result[key] = styles[key];
+        }
+    });
+
+    return result;
+}
+
+module.exports = Prefix;