Hide "style" prop if we are showing the style editor

Also add react-native-web to test harness
2026-09-24 17:02:27 +00:00 · 2019-07-24 14:05:56 -07:00
parent b8b965b2d6
commit e0d29595da
6 changed files with 148 additions and 13 deletions
@@ -144,6 +144,7 @@
    "react-dom": "^0.0.0-424099da6",
    "react-dom-15": "npm:react-dom@^15",
    "react-is": "0.0.0-424099da6",
+    "react-native-web": "^0.11.5",
    "react-test-renderer": "^0.0.0-424099da6",
    "react-virtualized-auto-sizer": "^1.0.2",
    "request-promise": "^4.2.4",
@@ -0,0 +1,34 @@
+// @flow
+
+import React, { Fragment, useState } from 'react';
+import { Button, Text, View } from 'react-native-web';
+
+export default function ReactNativeWeb() {
+  const [backgroundColor, setBackgroundColor] = useState('blue');
+  const toggleColor = () =>
+    setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
+  return (
+    <Fragment>
+      <h1>ReactNativeWeb</h1>
+      <View>
+        <Text>auto (default) - english LTR</Text>
+        <Text>
+          {
+            '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
+          }
+        </Text>
+        <Text style={{ textAlign: 'left' }}>
+          left left left left left left left left left left left left left left
+          left
+        </Text>
+        <Button
+          onPress={toggleColor}
+          style={{ backgroundColor }}
+          title={`Switch background color to "${
+            backgroundColor === 'purple' ? 'green' : 'purple'
+          }"`}
+        />
+      </View>
+    </Fragment>
+  );
+}
@@ -14,6 +14,7 @@ import Hydration from './Hydration';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import PriorityLevels from './PriorityLevels';
+import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
@@ -41,6 +42,7 @@ function mountTestApp() {
  mountHelper(ElementTypes);
  mountHelper(EditableProps);
  mountHelper(PriorityLevels);
+  mountHelper(ReactNativeWeb);
  mountHelper(Toggle);
  mountHelper(SuspenseTree);
  mountHelper(DeeplyNestedComponents);
@@ -4,6 +4,7 @@ import html2canvas from 'html2canvas';
 import Agent from 'src/backend/agent';
 import Bridge from 'src/bridge';
 import { initBackend } from 'src/backend';
+import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';

 const bridge = new Bridge({
  listen(fn) {
@@ -32,4 +33,16 @@ bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {

 const agent = new Agent(bridge);

-initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window.parent);
+const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+initBackend(hook, agent, window.parent);
+
+// Setup React Native style editor if a renderer like react-native-web has injected it.
+if (!!hook.resolveRNStyle) {
+  setupNativeStyleEditor(
+    bridge,
+    agent,
+    hook.resolveRNStyle,
+    hook.nativeStyleEditorValidAttributes
+  );
+}
@@ -13,6 +13,7 @@ import InspectedElementTree from './InspectedElementTree';
 import { InspectedElementContext } from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import NativeStyleEditor from './NativeStyleEditor';
+import { NativeStyleContext } from './NativeStyleEditor/context';
 import Toggle from '../Toggle';
 import Badge from './Badge';
 import {
@@ -263,6 +264,7 @@ function InspectedElementView({
  const { ownerID } = useContext(TreeStateContext);
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);
+  const { getStyleAndLayout } = useContext(NativeStyleContext);

  const inspectContextPath = useCallback(
    (path: Array<string | number>) => {
@@ -334,12 +336,21 @@ function InspectedElementView({
    };
  }

+  let filteredProps = props;
+  if (filteredProps !== null) {
+    const maybeStyleAndLayout = getStyleAndLayout(id);
+    // Hide props.style if we are showing the style editor UI.
+    if (maybeStyleAndLayout !== null && maybeStyleAndLayout.style !== null) {
+      delete filteredProps['style'];
+    }
+  }
+
  return (
    <div className={styles.InspectedElement}>
      <HocBadges element={element} />
      <InspectedElementTree
        label="props"
-        data={props}
+        data={filteredProps}
        inspectPath={inspectPropsPath}
        overrideValueFn={overridePropsFn}
        showWhenEmpty
@@ -1767,7 +1767,7 @@ array-filter@~0.0.0:
  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
  integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=

-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -3585,6 +3585,11 @@ core-js@^2.4.0:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"

+core-js@^2.4.1:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
+  integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
+
 core-js@^2.5.7:
  version "2.6.5"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
@@ -3658,7 +3663,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

-create-react-class@^15.6.0:
+create-react-class@^15.6.0, create-react-class@^15.6.2:
  version "15.6.3"
  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -3775,6 +3780,14 @@ crypto-random-string@^1.0.0:
  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
  integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=

+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
 [email protected]:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
@@ -3907,6 +3920,11 @@ [email protected]:
  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
  integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==

+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2, [email protected], debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9, debug@~2.6.3:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3970,6 +3988,13 @@ dedent@^0.7.0:
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=

+deep-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
+  integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
+  dependencies:
+    is-obj "^1.0.0"
+
 deep-equal@^1.0.0, deep-equal@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -5298,6 +5323,11 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "^2.0.0"

+fbjs-css-vars@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
+  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
+
 [email protected]:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz#9da67cec6d62fddc94b099563f6c48a749900aef"
@@ -5334,6 +5364,20 @@ fbjs@^0.8.9:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.18"

+fbjs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
+  integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
+  dependencies:
+    core-js "^2.4.1"
+    fbjs-css-vars "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6321,6 +6365,11 @@ humanize-url@^1.0.0:
    normalize-url "^1.0.0"
    strip-url-auth "^1.0.0"

+hyphenate-style-name@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 [email protected]:
  version "0.4.19"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -6461,6 +6510,13 @@ ini@^1.3.2, ini@^1.3.4, ini@~1.3.0, ini@~1.3.3:
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==

+inline-style-prefixer@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811"
+  integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
 inquirer@^0.12.0:
  version "0.12.0"
  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -8813,6 +8869,11 @@ nopt@^4.0.1:
    abbrev "1"
    osenv "^0.1.4"

+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -9711,7 +9772,7 @@ prompts@^2.0.1:
    kleur "^3.0.2"
    sisteransi "^1.0.0"

-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9922,14 +9983,6 @@ react-color@^2.11.7:
    reactcss "^1.2.0"
    tinycolor2 "^1.4.1"

-[email protected]:
-  version "4.0.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.0.0-alpha.0.tgz#79d3cd89b456ca264d5f4da392a70c85ad870402"
-  integrity sha512-l9JgiXz7nj/u+oLmiri/4yRnddRY4F6bHtsUKQNrddYHilGAiA+3WXzeEhX2QAlXMEcmpXdcT5celmAFzLnycQ==
-  dependencies:
-    shell-quote "^1.6.1"
-    ws "^7"
-
 "react-dom-15@npm:react-dom@^15":
  version "15.6.2"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -9965,6 +10018,22 @@ react-is@^16.8.4:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==

+react-native-web@^0.11.5:
+  version "0.11.5"
+  resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.5.tgz#adf2eff902fdb32e86be7877294d9a6bb0ad3815"
+  integrity sha512-KVvE6s32uBgp5m1BNSfNOXvGo1wt/pORSKvi8oy8tdhAPYqsr0oMuMP3rZd8vk+MpiYt1Z8raS/n+DK2xj85Jg==
+  dependencies:
+    array-find-index "^1.0.2"
+    create-react-class "^15.6.2"
+    debounce "^1.2.0"
+    deep-assign "^3.0.0"
+    fbjs "^1.0.0"
+    hyphenate-style-name "^1.0.2"
+    inline-style-prefixer "^5.0.3"
+    normalize-css-color "^1.0.2"
+    prop-types "^15.6.0"
+    react-timer-mixin "^0.13.4"
+
 react-test-renderer@^0.0.0-424099da6:
  version "0.0.0-424099da6"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-0.0.0-424099da6.tgz#75272c39e0b45e99dbd674977a4afc32a2d37f81"
@@ -9975,6 +10044,11 @@ react-test-renderer@^0.0.0-424099da6:
    react-is "0.0.0-424099da6"
    scheduler "0.0.0-424099da6"

+react-timer-mixin@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
+  integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
+
 react-virtualized-auto-sizer@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"