Added 'back to owner' button when owners stack is collapsed
Brian Vaughn committed
Apr 25, 2019 at 15:05 UTC
b6d617ac7f06d712f0edd72fdfbccad3eaf06e68
3 files changed
+50
-23
src/devtools/views/ButtonIcon.js
-10
@@ -4,7 +4,6 @@ import React from 'react';
4
import styles from './ButtonIcon.css';
5
6
export type IconType =
7
- | 'back'
7
| 'cancel'
8
| 'close'
9
| 'collapsed'
@@ -33,9 +32,6 @@ type Props = {|
32
export default function ButtonIcon({ type }: Props) {
33
let pathData = null;
34
switch (type) {
36
- case 'back':
37
- pathData = PATH_BACK;
38
- break;
35
case 'cancel':
36
pathData = PATH_CANCEL;
37
break;
@@ -115,12 +111,6 @@ export default function ButtonIcon({ type }: Props) {
111
);
112
}
113
118
-const PATH_BACK = `
119
- M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9
120
- 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41
121
- 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
122
-`;
123
-
114
const PATH_CANCEL = `
115
M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
116
16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
src/devtools/views/Components/OwnersStack.css
-1
@@ -47,7 +47,6 @@
47
border: none;
48
background: var(--color-button-background);
49
color: var(--color-button);
50
- margin-right: 0.5rem;
50
}
51
.MenuButtonContent {
52
display: inline-flex;
src/devtools/views/Components/OwnersStack.js
+50
-12
@@ -1,5 +1,6 @@
1
// @flow
2
import React, {
3
+ Fragment,
4
useCallback,
5
useContext,
6
useLayoutEffect,
@@ -53,21 +54,25 @@ export default function OwnerStack() {
54
<div className={styles.OwnerStack}>
55
<div className={styles.Bar} ref={elementsBarRef}>
56
{isOverflowing && (
56
- <ElementsDropdown
57
- ownerStack={ownerStack}
58
- ownerStackIndex={ownerStackIndex}
59
- />
57
+ <Fragment>
58
+ <ElementsDropdown
59
+ ownerStack={ownerStack}
60
+ ownerStackIndex={ownerStackIndex}
61
+ />
62
+ <BackToOwnerButton
63
+ ownerStack={ownerStack}
64
+ ownerStackIndex={ownerStackIndex}
65
+ />
66
+ <ElementView
67
+ id={ownerStack[((ownerStackIndex: any): number)]}
68
+ index={ownerStackIndex}
69
+ />
70
+ </Fragment>
71
)}
61
- {isOverflowing ? (
62
- <ElementView
63
- id={ownerStack[((ownerStackIndex: any): number)]}
64
- index={ownerStackIndex}
65
- />
66
- ) : (
72
+ {!isOverflowing &&
73
ownerStack.map((id, index) => (
74
<ElementView key={id} id={id} index={index} />
69
- ))
70
- )}
75
+ ))}
76
</div>
77
<div className={styles.VRule} />
78
<Button
@@ -149,3 +154,36 @@ function ElementView({ id, index }: ElementViewProps) {
154
</Toggle>
155
);
156
}
157
+
158
+type BackToOwnerButtonProps = {|
159
+ ownerStack: Array<number>,
160
+ ownerStackIndex: number | null,
161
+|};
162
+function BackToOwnerButton({
163
+ ownerStack,
164
+ ownerStackIndex,
165
+}: BackToOwnerButtonProps) {
166
+ const store = useContext(StoreContext);
167
+ const dispatch = useContext(TreeDispatcherContext);
168
+
169
+ if (ownerStackIndex === null || ownerStackIndex === 0) {
170
+ return null;
171
+ }
172
+
173
+ const ownerID = ownerStack[ownerStackIndex - 1];
174
+ const owner = store.getElementByID(ownerID);
175
+
176
+ return (
177
+ <Button
178
+ onClick={() =>
179
+ dispatch({
180
+ type: 'SELECT_OWNER',
181
+ payload: ownerID,
182
+ })
183
+ }
184
+ title={`Back to ${(owner !== null && owner.displayName) || 'owner'}`}
185
+ >
186
+ <ButtonIcon type="previous" />
187
+ </Button>
188
+ );
189
+}