Yellow Box for react-dom

src/renderers/dom/ReactDOM.js

@@ -67,6 +67,14 @@ if (
 
 if (__DEV__) {
   var ExecutionEnvironment = require('ExecutionEnvironment');
+  if (
+    ExecutionEnvironment.canUseDOM &&
+    typeof window.__showWarning === 'undefined'
+  ) {
+    // install the `__showWarning` global hook for yellow box
+    window.__showWarning = require('reactShowWarningDOM');
+  }
+
   if (ExecutionEnvironment.canUseDOM && window.top === window.self) {
 
     // First check if devtools is not installed

src/renderers/dom/client/showWarningDOM/components/ReactDOMYellowBoxDialogBody.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMYellowBoxDialogBody
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+
+const ReactDOMYellowBoxMessage = require('ReactDOMYellowBoxMessage');
+
+import type {Format, Instance, Milliseconds, InstanceInfo} from 'reactShowWarningDOM';
+
+const styles = {
+  root: {
+    height: '90%',
+    overflowY: 'auto',
+  },
+};
+
+const ReactDOMYellowBoxDialogBody = ({data, onSnoozeByType, onSnoozeByInstance}: {
+  data: Array<InstanceInfo>,
+  onSnoozeByType: (format: Format) => (snoozeDuration: Milliseconds) => void,
+  onSnoozeByInstance: (instance: Instance) => (snoozeDuration: Milliseconds) => void,
+}) => (
+  <div style={styles.root}>
+    {data.map(({instance, format}) =>
+      <ReactDOMYellowBoxMessage
+        key={instance}
+        onSnoozeByType={onSnoozeByType(format)}
+        onSnoozeByInstance={onSnoozeByInstance(instance)}
+        instance={instance}
+      />
+    )}
+  </div>
+);
+
+module.exports = ReactDOMYellowBoxDialogBody;

src/renderers/dom/client/showWarningDOM/components/ReactDOMYellowBoxDialogHeader.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMYellowBoxDialogHeader
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+
+const styles = {
+  root: {
+    paddingBottom: '15px',
+    borderBottom: '1px solid rgba(0, 0, 0, 0.10)',
+  },
+  closeButton: {
+    color: 'inherit',
+    textDecoration: 'none',
+  },
+  closeButtonContainer: {
+    float: 'right',
+  },
+};
+
+const ReactDOMYellowBoxDialogHeader = ({onIgnoreAll}: {
+  onIgnoreAll: () => void,
+}) => {
+  const onClick = (evt) => {
+    evt.preventDefault();
+    onIgnoreAll();
+  };
+
+  return (
+    <div style={styles.root}>
+      <div style={styles.closeButtonContainer}>
+        <a
+          style={styles.closeButton}
+          href="#"
+          onClick={onClick}
+        >
+          &#10005;
+        </a>
+      </div>
+      React Warnings
+    </div>
+  );
+};
+
+module.exports = ReactDOMYellowBoxDialogHeader;

src/renderers/dom/client/showWarningDOM/components/ReactDOMYellowBoxMessage.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMYellowBoxMessage
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+
+import type {Instance, Milliseconds} from 'reactShowWarningDOM';
+
+const MS_FOR_10_MINS: Milliseconds = 10 * 60 * 1000;
+const MS_FOR_24_HOURS: Milliseconds = 24 * 3600 * 1000;
+
+const styles = {
+  root: {
+    fontSize: '13px',
+    borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+    padding: '20px 0px',
+  },
+  snoozeButtonContainer: {
+    float: 'right',
+  },
+  snoozeSelect: {
+    width: '70px',
+  },
+  messageContainer: {
+    fontFamily: 'Menlo, Consolas, monospace',
+    whiteSpace: 'pre-wrap',
+  },
+};
+
+const ReactDOMYellowBoxMessage = ({onSnoozeByType, onSnoozeByInstance, instance}: {
+  onSnoozeByType: (snoozeDuration: Milliseconds) => void,
+  onSnoozeByInstance: (snoozeDuration: Milliseconds) => void,
+  instance: Instance,
+}) => {
+  const onSelectChange = (evt: SyntheticEvent): void => {
+    evt.preventDefault();
+
+    if (!(evt.target instanceof HTMLSelectElement)) { // make flow happy
+      return;
+    }
+
+    switch (evt.target.value) {
+      case 'type-10-mins':
+        onSnoozeByType(MS_FOR_10_MINS);
+        break;
+      case 'type-24-hrs':
+        onSnoozeByType(MS_FOR_24_HOURS);
+        break;
+      case 'instance-10-mins':
+        onSnoozeByInstance(MS_FOR_10_MINS);
+        break;
+      case 'instance-24-hrs':
+        onSnoozeByInstance(MS_FOR_24_HOURS);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div style={styles.root}>
+      <div style={styles.snoozeButtonContainer}>
+        <select defaultValue="noop"
+          style={styles.snoozeSelect}
+          onChange={onSelectChange}
+        >
+          <option value="noop" disabled={true}>Snooze</option>
+          <optgroup label="Snooze this warning instance for...">
+            <option value="instance-10-mins">10 mins</option>
+            <option value="instance-24-hrs">24 hours</option>
+          </optgroup>
+          <optgroup label="Snooze this type of warning for...">
+            <option value="type-10-mins">10 minutes</option>
+            <option value="type-24-hrs">24 hours</option>
+          </optgroup>
+        </select>
+      </div>
+      <div style={styles.messageContainer}>
+        {instance}
+      </div>
+    </div>
+  );
+};
+
+module.exports = ReactDOMYellowBoxMessage;

src/renderers/dom/client/showWarningDOM/components/ReactDOMYellowBoxRoot.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactDOMYellowBoxRoot
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+
+const ReactDOMYellowBoxDialogHeader = require('ReactDOMYellowBoxDialogHeader');
+const ReactDOMYellowBoxDialogBody = require('ReactDOMYellowBoxDialogBody');
+
+import type {Format, Instance, Milliseconds, InstanceInfo} from 'reactShowWarningDOM';
+
+const styles = {
+  root: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: 'none',
+    zIndex: 2147483647,
+  },
+  dialogRoot: {
+    position: 'absolute',
+    height: '45%',
+    width: '75%',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    MozTransform: 'translate(-50%, -50%)',
+    msTransform: 'translate(-50%, -50%)',
+    WebkitTransform: 'translate(-50%, -50%)',
+    padding: '15px 30px',
+    pointerEvents: 'auto',
+    overflowY: 'hidden',
+    backgroundColor: 'rgb(254, 243, 161)',
+    border: '1px solid rgba(0, 0, 0, 0.10)',
+    borderRadius: '2px',
+    boxShadow: '0px 0px 5px rgba(0, 0, 0, 0.10)',
+    fontFamily: 'Helvetica, Arial, sans-serif',
+    fontSize: '15px',
+  },
+};
+
+const ReactDOMYellowBoxRoot = ({data, onIgnoreAll, onSnoozeByType, onSnoozeByInstance}: {
+  data: Array<InstanceInfo>,
+  onIgnoreAll: () => void,
+  onSnoozeByType: (format: Format) => (snoozeDuration: Milliseconds) => void,
+  onSnoozeByInstance: (instance: Instance) => (snoozeDuration: Milliseconds) => void,
+}) => (
+  <div style={styles.root}>
+    <div style={styles.dialogRoot}>
+      <ReactDOMYellowBoxDialogHeader onIgnoreAll={onIgnoreAll} />
+      <ReactDOMYellowBoxDialogBody
+        data={data}
+        onSnoozeByType={onSnoozeByType}
+        onSnoozeByInstance={onSnoozeByInstance}
+      />
+    </div>
+  </div>
+);
+
+module.exports = ReactDOMYellowBoxRoot;