Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added stub search row (not connected to anythign yet)

Browse Source
This commit is contained in:
Brian Vaughn
2019-01-31 09:42:07 -08:00
parent 6363fc0767
commit 62f8c985df
5 changed files with 124 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/devtools/store.js
+5 -1
View File
@@ -57,7 +57,11 @@ export default class Store extends EventEmitter {
getElementAtIndex(index: number): Element {
if (index < 0 || index >= this.numElements) {
throw Error(`Invalid index ${index} specified; store contains ${this.numElements} items.`);
throw Error(
`Invalid index ${index} specified; store contains ${
this.numElements
} items.`
);
}
// Find wich root this element is in...
src/devtools/views/Elements.css
+48 -42
View File
@@ -1,50 +1,56 @@
:root {
/* TODO */
--color-base00: #ffffff;
--color-base01: #f3f3f3;
--color-base02: #eeeeee;
--color-base03: #dadada;
--color-base04: #333333;
--color-base05: #5a5a5a;
--color-special00: #8155cb;
--color-special01: #222222;
--color-special02: #1a1aa6;
--color-special03: #c80000;
--color-special04: #236e25;
--color-special05: #aa0d91;
--color-special06: #ef6632;
--color-special07: #777d88;
--color-state00: #0088fa;
--color-state01: #dadada;
--color-state02: #ffffff;
--color-state03: #ebf1fb;
--color-state04: #ffff00;
--color-state05: #222222;
--color-state06: #222222;
--color-component: var(--color-special00);
--color-tree-tag: var(--color-base04);
--color-tree-attr-name: var(--color-special06);
--color-tree-attr-value: var(--color-special02);
--line-height-tree-compact: 1.5;
--line-height-tree-normal: 1.5;
/* GitHub.com system fonts */
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
Courier, monospace;
--font-size-tree-compact: 12px;
--font-size-tree-normal: 14px;
}
.Elements {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
.SearchRow {
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: 16px;
border-bottom: 1px solid var(--color-base02);
padding: 0.5rem;
}
.SearchInput {
font-size: 1rem;
flex: 1;
outline: none;
border: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left center;
background-size: 16px 16px;
padding-left: 1.5rem;
}
.IconButton {
border: none;
background: none;
display: inline-flex;
align-items: center;
padding: 0.25rem;
cursor: pointer;
color: var(--color-state00);
flex: 0 0 auto;
}
.IconButton:hover {
color: var(--color-special02);
}
.IconButtonSVG {
width: 1rem;
height: 1rem;
margin-right: 0.25rem;
fill: currentColor;
}
.Tree {
width: 100%;
overflow: auto;
flex: 1 0 auto;
}
src/devtools/views/Elements.js
+28 -6
View File
@@ -6,6 +6,8 @@ import Tree from './Tree';
import { StoreContext, TreeContext } from './contexts';
import styles from './Elements.css';
import './root.css';
import type { Bridge } from '../../types';
export type Props = {|
@@ -14,11 +16,7 @@ export type Props = {|
themeName: string,
|};
export default function Elements({
bridge,
browserName,
themeName,
}: Props) {
export default function Elements({ bridge, browserName, themeName }: Props) {
const store = useMemo<Store>(() => new Store(bridge), []);
const [treeContext, setTreeContext] = useState({
@@ -43,7 +41,31 @@ export default function Elements({
<StoreContext.Provider value={store}>
<TreeContext.Provider value={treeContext}>
<div className={styles.Elements}>
<Tree />
<div className={styles.SearchRow}>
<input
className={styles.SearchInput}
placeholder="Search (text or /regex/)"
/>
<button className={styles.IconButton}>
<svg
xmlns="http://www.w3.org/2000/svg"
className={styles.IconButtonSVG}
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M20.94 11c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"
/>
</svg>
Select
</button>
</div>
<div className={styles.Tree}>
<Tree />
</div>
</div>
</TreeContext.Provider>
</StoreContext.Provider>
src/devtools/views/Tree.js
+1 -1
View File
@@ -1,6 +1,6 @@
// @flow
import React, { useContext, useMemo } from 'react';
import React, { useContext } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList } from 'react-window';
import Element from './Element';
src/devtools/views/root.css
+42
View File
@@ -0,0 +1,42 @@
:root {
/* TODO */
--color-base00: #ffffff;
--color-base01: #f3f3f3;
--color-base02: #eeeeee;
--color-base03: #dadada;
--color-base04: #333333;
--color-base05: #5a5a5a;
--color-special00: #8155cb;
--color-special01: #222222;
--color-special02: #1a1aa6;
--color-special03: #c80000;
--color-special04: #236e25;
--color-special05: #aa0d91;
--color-special06: #ef6632;
--color-special07: #777d88;
--color-state00: #0088fa;
--color-state01: #dadada;
--color-state02: #ffffff;
--color-state03: #ebf1fb;
--color-state04: #ffff00;
--color-state05: #222222;
--color-state06: #222222;
--color-component: var(--color-special00);
--color-tree-tag: var(--color-base04);
--color-tree-attr-name: var(--color-special06);
--color-tree-attr-value: var(--color-special02);
--line-height-tree-compact: 1.5;
--line-height-tree-normal: 1.5;
/* GitHub.com system fonts */
--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
Courier, monospace;
--font-size-tree-compact: 12px;
--font-size-tree-normal: 14px;
}
* {
box-sizing: border-box;
}