Skip to content

Commit beba482

Browse files
christopherthielenchristopherthielen
committed
Just Use Prettier™
1 parent 6a5eacc commit beba482

35 files changed

+876
-842
lines changed

‎src/selector/stateSelector.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { h, render, Component } from "preact";
1+
import { h, render, Component } from 'preact';
22

33
export interface IProps {
44
router;
@@ -16,17 +16,15 @@ export class StateSelector extends Component<IProps, IState> {
1616
state = {
1717
current: null,
1818
states: [],
19-
deregisterFn: null
19+
deregisterFn: null,
2020
};
2121

2222
componentDidMount() {
2323
let router = this.props.router;
24-
25-
const updateStates = () =>
26-
this.setState({ states: router.stateRegistry.get().map(state => state.name) });
27-
const updateCurrent = (trans) =>
28-
this.setState({current: trans.to().name});
29-
24+
25+
const updateStates = () => this.setState({ states: router.stateRegistry.get().map(state => state.name) });
26+
const updateCurrent = trans => this.setState({ current: trans.to().name });
27+
3028
if (router.stateRegistry.onStatesChanged) {
3129
this.deregisterStateListenerFn = router.stateRegistry.onStatesChanged(updateStates);
3230
}
@@ -46,20 +44,22 @@ export class StateSelector extends Component<IProps, IState> {
4644
}
4745
}
4846

49-
selectState = (event) => {
47+
selectState = event => {
5048
let $state = this.props.router.stateService;
5149
var to = event.target.value;
5250
if (to) $state.go(to);
5351
};
5452

5553
render() {
5654
return (
57-
<select value={this.state.current || ""} onChange={this.selectState} style={{ maxWidth: 120 }}>
58-
<option value="">Choose a state</option>
59-
{ this.state.states.map(state =>
60-
<option key={state} value={state}>{state}</option>
61-
) }
62-
</select>
63-
)
55+
<select value={this.state.current || ''} onChange={this.selectState} style={{ maxWidth: 120 }}>
56+
<option value="">Choose a state</option>
57+
{this.state.states.map(state => (
58+
<option key={state} value={state}>
59+
{state}
60+
</option>
61+
))}
62+
</select>
63+
);
6464
}
6565
}

‎src/statevis/Controls.tsx

Lines changed: 54 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,67 +6,74 @@ import { Renderer } from './interface';
66
import { UIRouter } from '@uirouter/core';
77

88
import { ChevronDown } from './icons/ChevronDown';
9-
import { Close} from './icons/Close';
9+
import { Close } from './icons/Close';
1010
import { Gear } from './icons/Gear';
1111
import { Help } from './icons/Help';
1212

1313
export interface IControlsProps {
14-
router: UIRouter;
15-
onRendererChange: (renderer: Renderer) => void;
16-
onMinimize: () => void;
17-
onClose: () => void;
14+
router: UIRouter;
15+
onRendererChange: (renderer: Renderer) => void;
16+
onMinimize: () => void;
17+
onClose: () => void;
1818
}
1919

20-
export interface IControlsState {
21-
showRendererPrefs: boolean;
20+
export interface IControlsState {
21+
showRendererPrefs: boolean;
2222
}
2323

2424
declare function require(string): string;
2525
const imgChevron = require('../../images/16/chevron-down.png');
2626

2727
export class Controls extends Component<IControlsProps, IControlsState> {
28-
state = {
29-
showRendererPrefs: false,
30-
}
28+
state = {
29+
showRendererPrefs: false,
30+
};
3131

32-
render() {
33-
return (
34-
<div style={{ width: '100%' }}>
35-
<div className="uirStateVisControls">
36-
<StateSelector router={this.props.router} />
37-
<div style={{ marginLeft: 'auto', cursor: 'pointer' }} className="uirStateVisIcons">
38-
<span className="uirStateVisHover">
39-
<Help size="16px"/>
40-
<div className="hoverBlock">
41-
<ul>
42-
<li>Click a node to activate that state.</li>
43-
<li>Select a state from the dropdown to activate that state.</li>
44-
<li>Double click a node to auto-collapse that section of the tree when inactive.
45-
Collapsed nodes are displayed with a dotted outline and the count of collapsed children.</li>
46-
<li>Lazy loaded states (including future states) are displayed with a dashed outline.</li>
47-
</ul>
48-
</div>
49-
</span>
32+
render() {
33+
return (
34+
<div style={{ width: '100%' }}>
35+
<div className="uirStateVisControls">
36+
<StateSelector router={this.props.router} />
37+
<div style={{ marginLeft: 'auto', cursor: 'pointer' }} className="uirStateVisIcons">
38+
<span className="uirStateVisHover">
39+
<Help size="16px" />
40+
<div className="hoverBlock">
41+
<ul>
42+
<li>Click a node to activate that state.</li>
43+
<li>Select a state from the dropdown to activate that state.</li>
44+
<li>
45+
Double click a node to auto-collapse that section of the tree when inactive. Collapsed nodes are
46+
displayed with a dotted outline and the count of collapsed children.
47+
</li>
48+
<li>Lazy loaded states (including future states) are displayed with a dashed outline.</li>
49+
</ul>
50+
</div>
51+
</span>
5052

51-
<span className="uirStateVisHover">
52-
<Gear size="16px"/>
53-
<div className="hoverBlock"><LayoutPrefs onRendererChange={this.props.onRendererChange}/></div>
54-
</span>
53+
<span className="uirStateVisHover">
54+
<Gear size="16px" />
55+
<div className="hoverBlock">
56+
<LayoutPrefs onRendererChange={this.props.onRendererChange} />
57+
</div>
58+
</span>
5559

56-
<span className="uirStateVisHover" onClick={this.props.onMinimize}>
57-
<ChevronDown size="16px"/>
58-
<div><span style={{float: 'right'}}>Minimize</span></div>
59-
<div>Minimize</div>
60-
</span>
61-
62-
<span className="uirStateVisHover" onClick={this.props.onClose}>
63-
<Close size="16px"/>
64-
<div><span style={{float: 'right'}}>Close</span></div>
65-
</span>
66-
</div>
60+
<span className="uirStateVisHover" onClick={this.props.onMinimize}>
61+
<ChevronDown size="16px" />
62+
<div>
63+
<span style={{ float: 'right' }}>Minimize</span>
64+
</div>
65+
<div>Minimize</div>
66+
</span>
6767

68-
</div>
69-
</div>
70-
)
71-
}
68+
<span className="uirStateVisHover" onClick={this.props.onClose}>
69+
<Close size="16px" />
70+
<div>
71+
<span style={{ float: 'right' }}>Close</span>
72+
</div>
73+
</span>
74+
</div>
75+
</div>
76+
</div>
77+
);
78+
}
7279
}

‎src/statevis/LayoutPrefs.tsx

Lines changed: 57 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Renderer } from './interface';
55
import { UIRouter } from '@uirouter/core';
66

77
export interface ILayoutPrefsProps {
8-
onRendererChange: (renderer: Renderer) => void;
8+
onRendererChange: (renderer: Renderer) => void;
99
}
1010

1111
export interface ILayoutPrefsState {
@@ -14,57 +14,63 @@ export interface ILayoutPrefsState {
1414
}
1515

1616
export class LayoutPrefs extends Component<ILayoutPrefsProps, ILayoutPrefsState> {
17-
state = {
18-
renderer: DEFAULT_RENDERER,
19-
presetName: 'Tree',
20-
}
21-
22-
componentDidMount() {
23-
this.props.onRendererChange(this.state.renderer);
24-
}
17+
state = {
18+
renderer: DEFAULT_RENDERER,
19+
presetName: 'Tree',
20+
};
2521

26-
handleZoom(event: Event) {
27-
let el = event.target;
28-
let value = parseFloat(el['value']);
29-
let renderer = { ...this.state.renderer, zoom: value };
30-
this.setState({ renderer });
31-
this.props.onRendererChange(renderer);
32-
}
22+
componentDidMount() {
23+
this.props.onRendererChange(this.state.renderer);
24+
}
3325

34-
handleLayout(event: Event) {
35-
let presetName = event.target['value'];
36-
let settings = RENDERER_PRESETS[presetName];
37-
let renderer = { ...this.state.renderer, ...settings };
38-
this.setState({ renderer, presetName });
39-
this.props.onRendererChange(renderer);
40-
}
26+
handleZoom(event: Event) {
27+
let el = event.target;
28+
let value = parseFloat(el['value']);
29+
let renderer = { ...this.state.renderer, zoom: value };
30+
this.setState({ renderer });
31+
this.props.onRendererChange(renderer);
32+
}
4133

42-
render() {
43-
return (
44-
<div className="uirStateVisLayoutPrefs" style={{display: 'flex', flexFlow: 'column nowrap'}} onMouseDown={evt => evt.stopPropagation()}>
45-
<div style={{flex: '1 1 auto', display: 'flex', flexFlow: 'row nowrap', alignItems: 'center'}}>
46-
<div>Layout:</div>
47-
<select style={{marginLeft: 'auto', maxWidth: '100px'}}
48-
onChange={this.handleLayout.bind(this)}
49-
value={this.state.presetName}>
50-
{Object.keys(RENDERER_PRESETS).map(preset =>
51-
<option value={preset}>{preset}</option>
52-
)}
53-
</select>
54-
</div>
34+
handleLayout(event: Event) {
35+
let presetName = event.target['value'];
36+
let settings = RENDERER_PRESETS[presetName];
37+
let renderer = { ...this.state.renderer, ...settings };
38+
this.setState({ renderer, presetName });
39+
this.props.onRendererChange(renderer);
40+
}
5541

56-
<div style={{flex: '1 1 auto', display: 'flex', flexFlow: 'row nowrap', alignItems: 'center'}}>
57-
<span>Node size:</span>
58-
<input style={{marginLeft: 'auto'}}
59-
value={"" + this.state.renderer.zoom}
60-
type="range"
61-
min="0.3"
62-
max="3.0"
63-
step="0.1"
64-
onInput={this.handleZoom.bind(this)} />
65-
<span>{this.state.renderer.zoom}x</span>
66-
</div>
67-
</div>
68-
)
69-
}
70-
}
42+
render() {
43+
return (
44+
<div
45+
className="uirStateVisLayoutPrefs"
46+
style={{ display: 'flex', flexFlow: 'column nowrap' }}
47+
onMouseDown={evt => evt.stopPropagation()}
48+
>
49+
<div style={{ flex: '1 1 auto', display: 'flex', flexFlow: 'row nowrap', alignItems: 'center' }}>
50+
<div>Layout:</div>
51+
<select
52+
style={{ marginLeft: 'auto', maxWidth: '100px' }}
53+
onChange={this.handleLayout.bind(this)}
54+
value={this.state.presetName}
55+
>
56+
{Object.keys(RENDERER_PRESETS).map(preset => <option value={preset}>{preset}</option>)}
57+
</select>
58+
</div>
59+
60+
<div style={{ flex: '1 1 auto', display: 'flex', flexFlow: 'row nowrap', alignItems: 'center' }}>
61+
<span>Node size:</span>
62+
<input
63+
style={{ marginLeft: 'auto' }}
64+
value={'' + this.state.renderer.zoom}
65+
type="range"
66+
min="0.3"
67+
max="3.0"
68+
step="0.1"
69+
onInput={this.handleZoom.bind(this)}
70+
/>
71+
<span>{this.state.renderer.zoom}x</span>
72+
</div>
73+
</div>
74+
);
75+
}
76+
}

0 commit comments

Comments
 (0)