Use @reach MenuButton for owner stack menu

This commit is contained in:
Brian Vaughn
2019-04-08 18:34:48 -07:00
parent 5db5e40bf1
commit ba99444515
5 changed files with 204 additions and 63 deletions
+1
View File
@@ -45,6 +45,7 @@
"@babel/preset-env": "^7.1.6",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@reach/menu-button": "^0.1.9",
"adm-zip": "^0.4.7",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^9.0.0",
+34 -9
View File
@@ -18,6 +18,7 @@
cursor: pointer;
text-align: left;
}
.Component[data-selected],
.Component:hover {
background-color: var(--color-hover-background);
}
@@ -39,10 +40,6 @@
flex: 1 0 auto;
}
.Toggle {
margin-right: 0.5rem;
}
.VRule {
flex: 0 0 auto;
height: 20px;
@@ -51,18 +48,46 @@
margin: 0 0.5rem;
}
.Modal {
position: absolute;
top: calc(100% + 0.25rem);
left: 2.5rem;
z-index: 1;
.MenuButton {
border-radius: 0.25rem;
display: inline-flex;
align-items: center;
padding: 0.25rem;
cursor: pointer;
flex: 0 0 auto;
border: none;
background: var(--color-button-background);
color: var(--color-button);
margin-right: 0.5rem;
}
.MenuButton:hover {
background: var(--color-button-background-hover);
color: var(--color-button-hover);
}
.MenuButton[aria-expanded='true'],
.MenuButton[aria-expanded='true']:active {
background: var(--color-button-background-focus);
color: var(--color-button-focus);
outline: none;
}
.MenuButton:focus-within {
box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
outline: none;
}
.Modal[data-reach-menu-list] {
display: inline-flex;
flex-direction: column;
background-color: var(--color-background);
color: var(--color-text-color);
padding: 0.5rem;
padding-right: 0;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
max-height: 10rem;
overflow: auto;
/* Reach UI tries to set its own :( */
font-family: var(--font-family-monospace);
font-size: var(--font-size-monospace-normal);
}
+21 -48
View File
@@ -1,18 +1,17 @@
// @flow
import React, {
Fragment,
useCallback,
useContext,
useLayoutEffect,
useRef,
useState,
} from 'react';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import Toggle from '../Toggle';
import { TreeContext } from './TreeContext';
import { StoreContext } from '../context';
import { useIsOverflowing, useModalDismissSignal } from '../hooks';
import { useIsOverflowing } from '../hooks';
import type { Element } from './types';
@@ -92,53 +91,27 @@ function ElementsDropdown({
const store = useContext(StoreContext);
const { selectOwner } = useContext(TreeContext);
const [isDropdownVisible, setIsDropdownVisible] = useState(false);
const handleDropdownButtonClick = useCallback(() => {
setIsDropdownVisible(!isDropdownVisible);
}, [isDropdownVisible, setIsDropdownVisible]);
const handleElementClick = useCallback(
(id: number) => {
selectOwner(id);
setIsDropdownVisible(false);
},
[selectOwner, setIsDropdownVisible]
);
const modalRef = useRef<HTMLDivElement | null>(null);
const dismissModal = useCallback(() => setIsDropdownVisible(false));
useModalDismissSignal(modalRef, dismissModal);
return (
<Fragment>
<Toggle
className={styles.Toggle}
isChecked={isDropdownVisible}
onChange={handleDropdownButtonClick}
title="Open elements dropdown"
>
<Menu>
<MenuButton className={styles.MenuButton} title="Open elements dropdown">
<ButtonIcon type="more" />
</Toggle>
{isDropdownVisible && (
<div className={styles.Modal} ref={modalRef}>
{ownerStack.map((id, index) => (
<button
key={id}
className={
ownerStackIndex === index
? styles.SelectedComponent
: styles.Component
}
onClick={() => handleElementClick(id)}
>
{((store.getElementByID(id): any): Element).displayName}
</button>
))}
</div>
)}
</Fragment>
</MenuButton>
<MenuList className={styles.Modal}>
{ownerStack.map((id, index) => (
<MenuItem
key={id}
className={
ownerStackIndex === index
? styles.SelectedComponent
: styles.Component
}
onSelect={() => selectOwner(id)}
>
{((store.getElementByID(id): any): Element).displayName}
</MenuItem>
))}
</MenuList>
</Menu>
);
}
+1
View File
@@ -14,6 +14,7 @@ import ReactLogo from './ReactLogo';
import styles from './DevTools.css';
import '@reach/menu-button/styles.css';
import './root.css';
import type { Bridge } from '../../types';
+147 -6
View File
@@ -745,6 +745,67 @@
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
"@reach/component-component@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
"@reach/menu-button@^0.1.9":
version "0.1.9"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.9.tgz#d5957f69efa51d29beb4239403eabf49f9a4bb3e"
integrity sha512-894lhzcCpaGJKvmCuUX8AJ7xg0Ov/xRKKR5RRVJUroHYuWNuvgZSluO657Y2fNaMKgG0LPqLrtOGUq2CN0golg==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/portal" "^0.1.3"
"@reach/rect" "^0.2.0"
"@reach/router" "^1.1.0"
"@reach/utils" "^0.2.0"
"@reach/window-size" "^0.1.3"
warning "^4.0.2"
"@reach/observe-rect@^1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
"@reach/portal@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.1.3.tgz#31d820f31bbab73570d5b5a449e2b0fa6457802f"
integrity sha512-yDcu5XZWfWKmKvbOs/uS7vITPVFXmn+XY5V6YcGhlz20KgwG+aJX2c7yvYzO++Zr0qvmtQCmxA4EGEciqIys6g==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/rect@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.0.tgz#3e8dd4e2188294228ea223223a956885a8a33472"
integrity sha512-/C0r28VC/0dJ7ehKqkiebU7WvyiqXw5ViWC4KUWQRVTwauLENmslJ3jgEDUQZn6M3Ko63owaMZ2/rAivFfpIGQ==
dependencies:
"@reach/component-component" "^0.1.3"
"@reach/observe-rect" "^1.0.3"
"@reach/router@^1.1.0":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
dependencies:
create-react-context "^0.2.1"
invariant "^2.2.3"
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.4"
warning "^3.0.0"
"@reach/utils@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
"@reach/window-size@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
integrity sha512-XU/PdGZ9GoRHUkIqIEcARIKWvfEDYCR/b2/Yubo+acKXJQ2I/YkQJdpILdIhNqF93nGa4zIAHrRHXkXdW11Xyg==
dependencies:
"@reach/component-component" "^0.1.3"
"@samverschueren/stream-to-observable@^0.3.0":
version "0.3.0"
resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -3177,6 +3238,14 @@ 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-context@^0.2.1:
version "0.2.3"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"
cross-spawn-async@^2.2.2:
version "2.2.5"
resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
@@ -3739,6 +3808,13 @@ emojis-list@^2.0.0:
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
dependencies:
iconv-lite "~0.4.13"
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -4487,6 +4563,19 @@ fbjs@0.5.1:
ua-parser-js "^0.7.9"
whatwg-fetch "^0.9.0"
fbjs@^0.8.0:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
dependencies:
core-js "^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"
@@ -5169,6 +5258,11 @@ growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
gulp-util@^3.0.4:
version "3.0.8"
resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -5469,7 +5563,7 @@ iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
iconv-lite@^0.4.17, iconv-lite@^0.4.4:
iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -5642,7 +5736,7 @@ invariant@^2.2.0:
dependencies:
loose-envify "^1.0.0"
invariant@^2.2.2:
invariant@^2.2.2, invariant@^2.2.3:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -5967,7 +6061,7 @@ is-retry-allowed@^1.0.0:
resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
is-stream@^1.0.0, is-stream@^1.1.0:
is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -6041,6 +6135,14 @@ isobject@^3.0.0, isobject@^3.0.1:
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7597,6 +7699,14 @@ nice-try@^1.0.4:
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-firefox-connect@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/node-firefox-connect/-/node-firefox-connect-1.2.0.tgz#42403848313240c98514ef14b3302816fe3b84e1"
@@ -8467,7 +8577,14 @@ promise@^7.0.3:
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2:
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
dependencies:
asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8674,6 +8791,11 @@ 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-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-portal@^3.1.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-3.2.0.tgz#4224e19b2b05d5cbe730a7ba0e34ec7585de0043"
@@ -9375,7 +9497,7 @@ set-value@^2.0.0:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.4:
setimmediate@^1.0.4, setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -10369,7 +10491,7 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
ua-parser-js@^0.7.9:
ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
version "0.7.19"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
@@ -10646,6 +10768,20 @@ walker@~1.0.5:
dependencies:
makeerror "1.0.x"
warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
dependencies:
loose-envify "^1.0.0"
warning@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watch@~0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
@@ -10781,6 +10917,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
dependencies:
iconv-lite "0.4.19"
whatwg-fetch@>=0.10.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
whatwg-fetch@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz#0e3684c6cb9995b43efc9df03e4c365d95fd9cc0"