@samitouri / QOS-React-2 / commits / 4c610950a4

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

Also add react-native-web to test harness

Brian Vaughn committed Jul 24, 2019 at 14:05 UTC 4c610950a4d9262c5bf5c719c8e4a8eeaf0a351d
6 files changed +148 -13
package.json
+1
@@ -144,6 +144,7 @@
144 "react-dom": "^0.0.0-424099da6",
145 "react-dom-15": "npm:react-dom@^15",
146 "react-is": "0.0.0-424099da6",
147 + "react-native-web": "^0.11.5",
148 "react-test-renderer": "^0.0.0-424099da6",
149 "react-virtualized-auto-sizer": "^1.0.2",
150 "request-promise": "^4.2.4",
shells/dev/app/ReactNativeWeb/index.js new
+34
@@ -0,0 +1,34 @@
1 +// @flow
2 +
3 +import React, { Fragment, useState } from 'react';
4 +import { Button, Text, View } from 'react-native-web';
5 +
6 +export default function ReactNativeWeb() {
7 + const [backgroundColor, setBackgroundColor] = useState('blue');
8 + const toggleColor = () =>
9 + setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
10 + return (
11 + <Fragment>
12 + <h1>ReactNativeWeb</h1>
13 + <View>
14 + <Text>auto (default) - english LTR</Text>
15 + <Text>
16 + {
17 + '\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 \u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'
18 + }
19 + </Text>
20 + <Text style={{ textAlign: 'left' }}>
21 + left left left left left left left left left left left left left left
22 + left
23 + </Text>
24 + <Button
25 + onPress={toggleColor}
26 + style={{ backgroundColor }}
27 + title={`Switch background color to "${
28 + backgroundColor === 'purple' ? 'green' : 'purple'
29 + }"`}
30 + />
31 + </View>
32 + </Fragment>
33 + );
34 +}
shells/dev/app/index.js
+2
@@ -14,6 +14,7 @@ import Hydration from './Hydration';
14 import InspectableElements from './InspectableElements';
15 import InteractionTracing from './InteractionTracing';
16 import PriorityLevels from './PriorityLevels';
17 +import ReactNativeWeb from './ReactNativeWeb';
18 import ToDoList from './ToDoList';
19 import Toggle from './Toggle';
20 import SuspenseTree from './SuspenseTree';
@@ -41,6 +42,7 @@ function mountTestApp() {
42 mountHelper(ElementTypes);
43 mountHelper(EditableProps);
44 mountHelper(PriorityLevels);
45 + mountHelper(ReactNativeWeb);
46 mountHelper(Toggle);
47 mountHelper(SuspenseTree);
48 mountHelper(DeeplyNestedComponents);
shells/dev/src/backend.js
+14 -1
@@ -4,6 +4,7 @@ import html2canvas from 'html2canvas';
4 import Agent from 'src/backend/agent';
5 import Bridge from 'src/bridge';
6 import { initBackend } from 'src/backend';
7 +import setupNativeStyleEditor from 'src/backend/NativeStyleEditor/setupNativeStyleEditor';
8
9 const bridge = new Bridge({
10 listen(fn) {
@@ -32,4 +33,16 @@ bridge.addListener('captureScreenshot', ({ commitIndex, rootID }) => {
33
34 const agent = new Agent(bridge);
35
35 -initBackend(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, window.parent);
36 +const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
37 +
38 +initBackend(hook, agent, window.parent);
39 +
40 +// Setup React Native style editor if a renderer like react-native-web has injected it.
41 +if (!!hook.resolveRNStyle) {
42 + setupNativeStyleEditor(
43 + bridge,
44 + agent,
45 + hook.resolveRNStyle,
46 + hook.nativeStyleEditorValidAttributes
47 + );
48 +}
src/devtools/views/Components/SelectedElement.js
+12 -1
@@ -13,6 +13,7 @@ import InspectedElementTree from './InspectedElementTree';
13 import { InspectedElementContext } from './InspectedElementContext';
14 import ViewElementSourceContext from './ViewElementSourceContext';
15 import NativeStyleEditor from './NativeStyleEditor';
16 +import { NativeStyleContext } from './NativeStyleEditor/context';
17 import Toggle from '../Toggle';
18 import Badge from './Badge';
19 import {
@@ -263,6 +264,7 @@ function InspectedElementView({
264 const { ownerID } = useContext(TreeStateContext);
265 const bridge = useContext(BridgeContext);
266 const store = useContext(StoreContext);
267 + const { getStyleAndLayout } = useContext(NativeStyleContext);
268
269 const inspectContextPath = useCallback(
270 (path: Array<string | number>) => {
@@ -334,12 +336,21 @@ function InspectedElementView({
336 };
337 }
338
339 + let filteredProps = props;
340 + if (filteredProps !== null) {
341 + const maybeStyleAndLayout = getStyleAndLayout(id);
342 + // Hide props.style if we are showing the style editor UI.
343 + if (maybeStyleAndLayout !== null && maybeStyleAndLayout.style !== null) {
344 + delete filteredProps['style'];
345 + }
346 + }
347 +
348 return (
349 <div className={styles.InspectedElement}>
350 <HocBadges element={element} />
351 <InspectedElementTree
352 label="props"
342 - data={props}
353 + data={filteredProps}
354 inspectPath={inspectPropsPath}
355 overrideValueFn={overridePropsFn}
356 showWhenEmpty
yarn.lock
+85 -11
@@ -1767,7 +1767,7 @@ array-filter@~0.0.0:
1767 resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
1768 integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
1769
1770 -array-find-index@^1.0.1:
1770 +array-find-index@^1.0.1, array-find-index@^1.0.2:
1771 version "1.0.2"
1772 resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
1773 integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
@@ -3585,6 +3585,11 @@ core-js@^2.4.0:
3585 version "2.4.1"
3586 resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
3587
3588 +core-js@^2.4.1:
3589 + version "2.6.9"
3590 + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
3591 + integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
3592 +
3593 core-js@^2.5.7:
3594 version "2.6.5"
3595 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:
3663 safe-buffer "^5.0.1"
3664 sha.js "^2.4.8"
3665
3661 -create-react-class@^15.6.0:
3666 +create-react-class@^15.6.0, create-react-class@^15.6.2:
3667 version "15.6.3"
3668 resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
3669 integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -3775,6 +3780,14 @@ crypto-random-string@^1.0.0:
3780 resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
3781 integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
3782
3783 +css-in-js-utils@^2.0.0:
3784 + version "2.0.1"
3785 + resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
3786 + integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
3787 + dependencies:
3788 + hyphenate-style-name "^1.0.2"
3789 + isobject "^3.0.1"
3790 +
3791 css-line-break@1.0.1:
3792 version "1.0.1"
3793 resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
@@ -3907,6 +3920,11 @@ debounce@1.1.0:
3920 resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.1.0.tgz#6a1a4ee2a9dc4b7c24bb012558dbcdb05b37f408"
3921 integrity sha512-ZQVKfRVlwRfD150ndzEK8M90ABT+Y/JQKs4Y7U4MXdpuoUkkrr4DwKbVux3YjylA5bUMUj0Nc3pMxPJX6N2QQQ==
3922
3923 +debounce@^1.2.0:
3924 + version "1.2.0"
3925 + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
3926 + integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
3927 +
3928 debug@2, debug@2.6.9, 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:
3929 version "2.6.9"
3930 resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3970,6 +3988,13 @@ dedent@^0.7.0:
3988 resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
3989 integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
3990
3991 +deep-assign@^3.0.0:
3992 + version "3.0.0"
3993 + resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
3994 + integrity sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==
3995 + dependencies:
3996 + is-obj "^1.0.0"
3997 +
3998 deep-equal@^1.0.0, deep-equal@^1.0.1:
3999 version "1.0.1"
4000 resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -5298,6 +5323,11 @@ fb-watchman@^2.0.0:
5323 dependencies:
5324 bser "^2.0.0"
5325
5326 +fbjs-css-vars@^1.0.0:
5327 + version "1.0.2"
5328 + resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
5329 + integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
5330 +
5331 fbjs-scripts@0.7.0:
5332 version "0.7.0"
5333 resolved "https://registry.yarnpkg.com/fbjs-scripts/-/fbjs-scripts-0.7.0.tgz#9da67cec6d62fddc94b099563f6c48a749900aef"
@@ -5334,6 +5364,20 @@ fbjs@^0.8.9:
5364 setimmediate "^1.0.5"
5365 ua-parser-js "^0.7.18"
5366
5367 +fbjs@^1.0.0:
5368 + version "1.0.0"
5369 + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
5370 + integrity sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==
5371 + dependencies:
5372 + core-js "^2.4.1"
5373 + fbjs-css-vars "^1.0.0"
5374 + isomorphic-fetch "^2.1.1"
5375 + loose-envify "^1.0.0"
5376 + object-assign "^4.1.0"
5377 + promise "^7.1.1"
5378 + setimmediate "^1.0.5"
5379 + ua-parser-js "^0.7.18"
5380 +
5381 fd-slicer@~1.0.1:
5382 version "1.0.1"
5383 resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6321,6 +6365,11 @@ humanize-url@^1.0.0:
6365 normalize-url "^1.0.0"
6366 strip-url-auth "^1.0.0"
6367
6368 +hyphenate-style-name@^1.0.2:
6369 + version "1.0.3"
6370 + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
6371 + integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
6372 +
6373 iconv-lite@0.4.19:
6374 version "0.4.19"
6375 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:
6510 resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
6511 integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
6512
6513 +inline-style-prefixer@^5.0.3:
6514 + version "5.1.0"
6515 + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811"
6516 + integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg==
6517 + dependencies:
6518 + css-in-js-utils "^2.0.0"
6519 +
6520 inquirer@^0.12.0:
6521 version "0.12.0"
6522 resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-0.12.0.tgz#1ef2bfd63504df0bc75785fff8c2c41df12f077e"
@@ -8813,6 +8869,11 @@ nopt@^4.0.1:
8869 abbrev "1"
8870 osenv "^0.1.4"
8871
8872 +normalize-css-color@^1.0.2:
8873 + version "1.0.2"
8874 + resolved "https://registry.yarnpkg.com/normalize-css-color/-/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
8875 + integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
8876 +
8877 normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5:
8878 version "2.5.0"
8879 resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -9711,7 +9772,7 @@ prompts@^2.0.1:
9772 kleur "^3.0.2"
9773 sisteransi "^1.0.0"
9774
9714 -prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
9775 +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
9776 version "15.7.2"
9777 resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
9778 integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9922,14 +9983,6 @@ react-color@^2.11.7:
9983 reactcss "^1.2.0"
9984 tinycolor2 "^1.4.1"
9985
9925 -react-devtools-core@4.0.0-alpha.0:
9926 - version "4.0.0-alpha.0"
9927 - resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.0.0-alpha.0.tgz#79d3cd89b456ca264d5f4da392a70c85ad870402"
9928 - integrity sha512-l9JgiXz7nj/u+oLmiri/4yRnddRY4F6bHtsUKQNrddYHilGAiA+3WXzeEhX2QAlXMEcmpXdcT5celmAFzLnycQ==
9929 - dependencies:
9930 - shell-quote "^1.6.1"
9931 - ws "^7"
9932 -
9986 "react-dom-15@npm:react-dom@^15":
9987 version "15.6.2"
9988 resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -9965,6 +10018,22 @@ react-is@^16.8.4:
10018 resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
10019 integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
10020
10021 +react-native-web@^0.11.5:
10022 + version "0.11.5"
10023 + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.11.5.tgz#adf2eff902fdb32e86be7877294d9a6bb0ad3815"
10024 + integrity sha512-KVvE6s32uBgp5m1BNSfNOXvGo1wt/pORSKvi8oy8tdhAPYqsr0oMuMP3rZd8vk+MpiYt1Z8raS/n+DK2xj85Jg==
10025 + dependencies:
10026 + array-find-index "^1.0.2"
10027 + create-react-class "^15.6.2"
10028 + debounce "^1.2.0"
10029 + deep-assign "^3.0.0"
10030 + fbjs "^1.0.0"
10031 + hyphenate-style-name "^1.0.2"
10032 + inline-style-prefixer "^5.0.3"
10033 + normalize-css-color "^1.0.2"
10034 + prop-types "^15.6.0"
10035 + react-timer-mixin "^0.13.4"
10036 +
10037 react-test-renderer@^0.0.0-424099da6:
10038 version "0.0.0-424099da6"
10039 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:
10044 react-is "0.0.0-424099da6"
10045 scheduler "0.0.0-424099da6"
10046
10047 +react-timer-mixin@^0.13.4:
10048 + version "0.13.4"
10049 + resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
10050 + integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
10051 +
10052 react-virtualized-auto-sizer@^1.0.2:
10053 version "1.0.2"
10054 resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"