Lots of UI updates

2026-02-08 00:36:26 +01:00 · 2018-08-16 00:13:06 +02:00
parent 38b440e2f6
commit d92bd0c586
24 changed files with 637 additions and 225 deletions
--- a/demo/App.js
+++ b/demo/App.js
@@ -19,63 +19,88 @@ network.attach();
 log.attach();

 console.log('fooo');
+let xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://google.com');
+xhr.send();
+xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://google.com/sdfsfsdfsfdf');
+xhr.send();
+
+const t = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    throw new Error('everything is broken');
+  }, 1000);
+});

 export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView style={styles.wrapper} behavior="padding">
-          <Button
-            style={styles.button}
-            title="Console log"
-            onPress={() => {
-              console.log('hello');
-            }}
-          />
-          <View style={{ height: 10 }} />
-          <Button
-            title="GET XHR"
-            style={styles.button}
-            onPress={() => {
-              const xhr = new XMLHttpRequest();
-              xhr.open('GET', 'https://google.com');
-              xhr.send();
-            }}
-          />
-          <View style={{ height: 10 }} />
-          <Button
-            title="POST XHR"
-            style={styles.button}
-            onPress={() => {
-              const xhr = new XMLHttpRequest();
-              xhr.open('POST', 'https://google.com');
-              xhr.setRequestHeader('content-type', 'application/json');
-              xhr.send(JSON.stringify({
-                hello: 'world',
-              }));
-            }}
-          />
-          <View style={{ height: 10 }} />
-          <Button
-            title="Break"
-            style={styles.button}
-            onPress={() => {
-              const err = new Error('some error');
-              throw err;
-            }}
-          />
-          <View style={{ height: 30 }} />
-          <Button
-            title="Show"
-            style={styles.button}
-            onPress={() => {
-              show();
-            }}
-          />
-          <View style={{ flex: 1 }} />
+          <View>
+            <Button
+              style={styles.button}
+              title="console.log('hello')"
+              onPress={() => {
+                console.log('hello');
+              }}
+            />
+            <View style={{ height: 10 }} />
+            <Button
+              title="GET XHR (html)"
+              style={styles.button}
+              onPress={() => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', 'https://google.com');
+                xhr.send();
+              }}
+            />
+            <View style={{ height: 10 }} />
+            <View style={{ height: 10 }} />
+            <Button
+              title="GET XHR (json)"
+              style={styles.button}
+              onPress={() => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', 'https://api.github.com');
+                xhr.send();
+              }}
+            />
+            <View style={{ height: 10 }} />
+            <Button
+              title="POST XHR"
+              style={styles.button}
+              onPress={() => {
+                const xhr = new XMLHttpRequest();
+                xhr.open('POST', 'https://google.com');
+                xhr.setRequestHeader('content-type', 'application/json');
+                xhr.send(JSON.stringify({
+                  hello: 'world',
+                }));
+              }}
+            />
+            <View style={{ height: 10 }} />
+            <Button
+              title="Unhandled error"
+              style={styles.button}
+              onPress={() => {
+                const err = new Error('some error');
+                throw err;
+              }}
+            />
+            <View style={{ height: 30 }} />
+            <Button
+              title="Show modal"
+              style={styles.button}
+              onPress={() => {
+                show();
+              }}
+            />
+            <View style={{ height: 10 }} />
+          </View>
          <DevTool
            style={{
-              height: 300,
+              flex: 1,
            }}
          />
          <DevToolModal />
--- a/demo/package.json
+++ b/demo/package.json
@@ -24,6 +24,7 @@
    "prop-types": "^15.6.2",
    "react": "16.3.1",
    "react-native": "~0.55.2",
-    "react-native-json-tree": "^1.2.0"
+    "react-native-json-tree": "^1.2.0",
+    "styled-components": "^3.4.2"
  }
 }
--- a/demo/rn-cli.config.js
+++ b/demo/rn-cli.config.js
@@ -10,6 +10,7 @@ module.exports = {
      'react-native',
      'react',
      'prop-types',
+      'styled-components',
      'react-native-json-tree',
    ];
  },
--- a/demo/yarn.lock
+++ b/demo/yarn.lock
@@ -1667,7 +1667,7 @@ base64-js@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"

-base64-js@^1.1.2, base64-js@^1.2.0:
+base64-js@^1.0.2, base64-js@^1.1.2, base64-js@^1.2.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"

@@ -1814,6 +1814,13 @@ buffer-from@^1.0.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"

+buffer@^5.0.3:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.0.tgz#53cf98241100099e9eeae20ee6d51d21b16e541e"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builtin-modules@^1.0.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2210,6 +2217,18 @@ crypto-token@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/crypto-token/-/crypto-token-1.0.1.tgz#27c6482faf3b63c2f5da11577f8304346fe797a5"

+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+
+css-to-react-native@^2.0.3:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
+  dependencies:
+    css-color-keywords "^1.0.0"
+    fbjs "^0.8.5"
+    postcss-value-parser "^3.3.0"
+
 cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
  version "0.3.4"
  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
@@ -2771,7 +2790,7 @@ fbjs-scripts@^0.8.1:
    semver "^5.1.0"
    through2 "^2.0.0"

-fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
  version "0.8.17"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  dependencies:
@@ -3325,6 +3344,10 @@ idx@^2.1.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/idx/-/idx-2.4.0.tgz#e89e6650c889a44bf889f79d47f40fe09b4eeaa3"

+ieee754@^1.1.4:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
+
 ignore-walk@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
@@ -5327,6 +5350,10 @@ posix-character-classes@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

+postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
 pouchdb-collections@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359"
@@ -5400,7 +5427,7 @@ prop-types@15.5.8:
  dependencies:
    fbjs "^0.8.9"

-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
@@ -6552,6 +6579,28 @@ strip-json-comments@~2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"

+styled-components@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.2.tgz#8f518419932327e47fe9144824e3184b3e2da95d"
+  dependencies:
+    buffer "^5.0.3"
+    css-to-react-native "^2.0.3"
+    fbjs "^0.8.16"
+    hoist-non-react-statics "^2.5.0"
+    prop-types "^15.5.4"
+    react-is "^16.3.1"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^3.2.3"
+
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+
+stylis@^3.5.0:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
+
 superagent-proxy@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/superagent-proxy/-/superagent-proxy-1.0.3.tgz#acfa776672f11c24a90ad575e855def8be44f741"
@@ -6582,7 +6631,7 @@ supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

-supports-color@^3.1.2:
+supports-color@^3.1.2, supports-color@^3.2.3:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
  dependencies: