Hide "style" prop if we are showing the style editor
Also add react-native-web to test harness
This commit is contained in:
Brian Vaughn
parent
9a05e0b600
commit
4c610950a4
|
|
@ -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
|
||||
|
|
|
|||
96
yarn.lock
96
yarn.lock
|
|
@ -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"
|
||||
|
||||
css-line-break@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-1.0.1.tgz#19f2063a33e95fb2831b86446c0b80c188af450a"
|
||||
|
|
@ -3907,6 +3920,11 @@ debounce@1.1.0:
|
|||
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, 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:
|
||||
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==
|
||||
|
||||
fbjs-scripts@0.7.0:
|
||||
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==
|
||||
|
||||
iconv-lite@0.4.19:
|
||||
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"
|
||||
|
||||
react-devtools-core@4.0.0-alpha.0:
|
||||
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue