Polish some mouse interactions
Dan committed
Apr 13, 2019 at 01:07 UTC
454bcf1e01bc2e180a7289b56d0a5e6b0693d679
3 files changed
+10
-4
src/devtools/views/Components/Element.js
+6
@@ -190,6 +190,11 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
190
[id, isCollapsed, store]
191
);
192
193
+ const stopPropagation = useCallback(event => {
194
+ // Prevent the row from selecting
195
+ event.stopPropagation();
196
+ }, []);
197
+
198
if (children.length === 0) {
199
return <div className={styles.ExpandCollapseToggle} />;
200
}
@@ -197,6 +202,7 @@ function ExpandCollapseToggle({ element, store }: ExpandCollapseToggleProps) {
202
return (
203
<div
204
className={styles.ExpandCollapseToggle}
205
+ onMouseDown={stopPropagation}
206
onClick={toggleCollapsed}
207
onDoubleClick={swallowDoubleClick}
208
>
src/devtools/views/Components/HooksTree.js
+2
-2
@@ -130,7 +130,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
130
<div className={styles.Hook}>
131
<div className={styles.NameValueRow}>
132
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
133
- <span onDoubleClick={toggleIsOpen} className={styles.Name}>
133
+ <span onClick={toggleIsOpen} className={styles.Name}>
134
{name}
135
</span>
136
</div>
@@ -149,7 +149,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
149
<div className={styles.Hook}>
150
<div className={styles.NameValueRow}>
151
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
152
- <span onDoubleClick={toggleIsOpen} className={styles.Name}>
152
+ <span onClick={toggleIsOpen} className={styles.Name}>
153
{name}
154
</span>{' '}
155
{/* $FlowFixMe */}
src/devtools/views/Components/KeyValue.js
+2
-2
@@ -115,7 +115,7 @@ export default function KeyValue({
115
)}
116
<span
117
className={styles.Name}
118
- onDoubleClick={hasChildren ? toggleIsOpen : undefined}
118
+ onClick={hasChildren ? toggleIsOpen : undefined}
119
>
120
{name}
121
</span>
@@ -150,7 +150,7 @@ export default function KeyValue({
150
)}
151
<span
152
className={styles.Name}
153
- onDoubleClick={hasChildren ? toggleIsOpen : undefined}
153
+ onClick={hasChildren ? toggleIsOpen : undefined}
154
>
155
{name}
156
</span>