Skip to content

Commit 6397f0a

Browse files
daveseahdaveseah
committed
ds: New tab = 2 spaces as spaces. Update .editorconfig and all source files. Reason: JSX nesting
1 parent d3a6a3b commit 6397f0a

16 files changed

Lines changed: 697 additions & 645 deletions

File tree

‎build/.editorconfig‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
# EditorConfig helps developers define and maintain consistent
22
# coding styles between different editors and IDEs
3-
# http://editorconfig.org
43

4+
# Make sure your editor has a supported plugin that will
5+
# automatically set according to this file
6+
# http://editorconfig.org/#download
7+
8+
# stop searching for editorconfig in this file
59
root = true
610

7-
[*]
8-
indent_style = tab
9-
indent_size = 4
11+
# settings for our default files
12+
[*.{js,jsx,txt,json,md}]
13+
indent_style = space
14+
indent_size = 2
1015
end_of_line = lf
1116
charset = utf-8
1217
trim_trailing_whitespace = true
1318
insert_final_newline = true
19+
20+
# trailing whitespace means something in markdown
21+
[*.md]
22+
trim_trailing_whitespace = false

‎build/app/init-appshell.jsx‎

Lines changed: 138 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
22
3-
init-appshell.jsx
4-
application shell loaded by init.jsx
5-
6-
These are the top-level React components ("view") that are mapped to
7-
routes as seen in render() function's <Switch>. There are three styles:
8-
(1) a loaded React 'view' that is built entirely with our modular app API
9-
and displayed in this application shell.
10-
(2) a plain .html file loaded into an IFRAME, useful for adding stand-alone
11-
test code with access to the modular app API system, but not other web
12-
apps (e.g. can use the data storage module)
13-
(3) a NO ROUTE FOUND component function.
3+
init-appshell.jsx
4+
application shell loaded and rendered in init.jsx
5+
6+
These are the top-level React components ("view") that are mapped to
7+
routes as seen in render() function's <Switch>. There are three styles:
8+
(1) a loaded React 'view' that is built entirely with our modular app API
9+
and displayed in this application shell.
10+
(2) a plain .html file loaded into an IFRAME, useful for adding stand-alone
11+
test code with access to the modular app API system, but not other web
12+
apps (e.g. can use the data storage module)
13+
(3) a NO ROUTE FOUND component function.
1414
1515
\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
1616

@@ -19,41 +19,41 @@
1919
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
2020
const React = require('react');
2121
const {
22-
Alert,
23-
Collapse,
24-
Navbar,
25-
NavbarToggler,
26-
NavbarBrand,
27-
Nav,
28-
NavItem,
29-
NavLink,
30-
UncontrolledDropdown,
31-
DropdownToggle,
32-
DropdownMenu,
33-
DropdownItem
34-
} = require('reactstrap');
22+
Alert,
23+
Collapse,
24+
Navbar,
25+
NavbarToggler,
26+
NavbarBrand,
27+
Nav,
28+
NavItem,
29+
NavLink,
30+
UncontrolledDropdown,
31+
DropdownToggle,
32+
DropdownMenu,
33+
DropdownItem
34+
} = require('reactstrap');
3535
const {
36-
Switch,
37-
Route,
38-
Redirect,
39-
Link
40-
} = require('react-router-dom');
36+
Switch,
37+
Route,
38+
Redirect,
39+
Link
40+
} = require('react-router-dom');
4141
// workaround name collision in ReactRouterNavLink with ReactStrap
4242
const RRNavLink = require('react-router-dom').NavLink;
4343

4444

4545
/** (1) ROUTED COMPONENTS ****************************************************\
46-
Used by render()'s <Switch> to load a React component (what we call a
47-
'view' in the NetCreate app). The component should return its elements
48-
wrapped in a div with the suggested flexbox pr
49-
50-
index.html | body min-height: 100%
51-
index.html | div#app
52-
init-appshell | div display:flex, flex-flow:column nowrap,
53-
width:100%, height:100vh
54-
init-appshell | Navbar position:fixed
55-
--- COMPONENT BELOW ---
56-
<RequiredComponent> | div this is a child of a flexbox
46+
Used by render()'s <Switch> to load a React component (what we call a
47+
'view' in the NetCreate app). The component should return its elements
48+
wrapped in a div with the suggested flexbox pr
49+
50+
index.html | body min-height: 100%
51+
index.html | div#app
52+
init-appshell | div display:flex, flex-flow:column nowrap,
53+
width:100%, height:100vh
54+
init-appshell | Navbar position:fixed
55+
--- COMPONENT BELOW ---
56+
<RequiredComponent> | div this is a child of a flexbox
5757
\* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
5858
const AppDefault = require('view/AppDefault');
5959
const Prototype = require('view/prototype/Prototype');
@@ -62,129 +62,129 @@ const D3Test = require('view/d3test/D3Test');
6262

6363

6464
/** (2) ROUTED FUNCTIONS *****************************************************\
65-
Used by render()'s <Switch> to load a plain html page that is
66-
located at app/htmldemos/<route>/<route.html>
67-
68-
index.html | body min-height: 100%
69-
index.html | div#app
70-
init-appshell | div display:flex, flex-flow:column nowrap,
71-
width:100%, height:100vh
72-
init-appshell | Navbar position:fixed
73-
--- COMPONENT BELOW ---
74-
init-appshell.HTML() | div display:flex, flex-flow:column nowrap,
75-
width:100%
76-
init-appshell.HTML() | iframe flex:1 0 auto, border:0
65+
Used by render()'s <Switch> to load a plain html page that is
66+
located at app/htmldemos/<route>/<route.html>
67+
68+
index.html | body min-height: 100%
69+
index.html | div#app
70+
init-appshell | div display:flex, flex-flow:column nowrap,
71+
width:100%, height:100vh
72+
init-appshell | Navbar position:fixed
73+
--- COMPONENT BELOW ---
74+
init-appshell.HTML() | div display:flex, flex-flow:column nowrap,
75+
width:100%
76+
init-appshell.HTML() | iframe flex:1 0 auto, border:0
7777
\* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
7878
function HTML ( props ) {
79-
let loc = props.location.pathname.substring(1);
80-
loc = '/htmldemos/'+loc+'/'+loc+'.html';
81-
return (
82-
<div style={{display:'flex', flexFlow:'column nowrap',
83-
width:'100%', height:'100%'}}>
84-
<iframe style={{flex:'1 0 auto',border:'0'}} src={loc} />
85-
</div>
86-
);
79+
let loc = props.location.pathname.substring(1);
80+
loc = '/htmldemos/'+loc+'/'+loc+'.html';
81+
return (
82+
<div style={{display:'flex', flexFlow:'column nowrap',
83+
width:'100%', height:'100%'}}>
84+
<iframe style={{flex:'1 0 auto',border:'0'}} src={loc} />
85+
</div>
86+
);
8787
}
8888

8989

9090
/** (3) NO ROUTE *************************************************************\
91-
Used by render()'s <Switch> when there are no matching routes
92-
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
91+
Used by render()'s <Switch> when there are no matching routes
92+
\* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
9393
function NoMatch ( props ) {
94-
let hash = props.location.pathname.substring(1);
95-
return (
96-
<Alert color="warning">No Match for route <tt>#{hash}</tt></Alert>
97-
);
94+
let hash = props.location.pathname.substring(1);
95+
return (
96+
<Alert color="warning">No Match for route <tt>#{hash}</tt></Alert>
97+
);
9898
}
9999

100100

101101

102102
/** APPLICATION NAVBAR + SWITCHED ROUTER VIEW ********************************\
103103
104-
The application shell consists of a navbar implemented with Reactstrap
105-
components and a React view associated with the current route via
106-
ReactRouter <Switch> and <Route>.
104+
The application shell consists of a navbar implemented with Reactstrap
105+
components and a React view associated with the current route via
106+
ReactRouter <Switch> and <Route>.
107107
108108
\* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
109109
/// export a class object for consumption by brunch/require
110110
class AppShell extends React.Component {
111111
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
112-
/*/ Initialize application shell state
112+
/*/ constructor
113113
/*/ constructor(props) {
114-
super(props);
115-
this.toggle = this.toggle.bind(this);
116-
this.state = {
117-
isOpen: false
118-
};
119-
}
114+
super(props);
115+
this.toggle = this.toggle.bind(this);
116+
this.state = {
117+
isOpen: false
118+
};
119+
}
120120
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
121121
/*/ Handle changes in state of his toggle switch
122122
/*/ toggle() {
123-
this.setState({
124-
isOpen: !this.state.isOpen
125-
});
126-
}
123+
this.setState({
124+
isOpen: !this.state.isOpen
125+
});
126+
}
127127
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
128128
/*/ Draw top navbar w/ menus. Add route information
129-
To add a new HTML, add the link to both the <Nav> and <Switch> staments.
130-
To add a new VIEW, load the component
129+
To add a new HTML, add the link to both the <Nav> and <Switch> staments.
130+
To add a new VIEW, load the component
131131
/*/ render() {
132-
/// demonstrate that STORE persists between clicks
133-
const STORE = require('system/datastore');
134-
STORE.Increment();
135-
136-
/// return component with matching routed view
137-
return (
138-
<div style={{display:'flex', flexFlow:'column nowrap', width:'100%', height:'100vh'}}>
139-
<Navbar fixed="top" light expand="md" style={{ backgroundColor:'#f0f0f0'}}>
140-
<NavbarBrand href="#">NetCreate</NavbarBrand>
141-
<NavbarToggler onClick={this.toggle} />
142-
<Collapse isOpen={this.state.isOpen} navbar>
143-
{/*/ (1) add navigation links here /*/}
144-
<Nav className="ml-auto" navbar>
145-
<NavItem>
146-
<NavLink to="/" activeClassName="active" tag={RRNavLink} replace>Welcome</NavLink>
147-
</NavItem>
148-
<NavItem>
149-
<NavLink to="/d3forcedemo" tag={RRNavLink} replace>D3 Force Demo</NavLink>
150-
</NavItem>
151-
<NavItem>
152-
<NavLink to="/prototype" tag={RRNavLink} replace>Prototype</NavLink>
153-
</NavItem>
154-
<UncontrolledDropdown nav>
155-
<DropdownToggle nav caret>
156-
Templates
157-
</DropdownToggle>
158-
<DropdownMenu>
159-
<DropdownItem>
160-
<NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML</NavLink>
161-
</DropdownItem>
162-
<DropdownItem>
163-
<NavLink to="/d3test" tag={RRNavLink} replace>D3Test</NavLink>
164-
</DropdownItem>
165-
<DropdownItem divider />
166-
<DropdownItem>
167-
<NavLink to="/test3" tag={RRNavLink} replace>Test Descriptions</NavLink>
168-
</DropdownItem>
169-
</DropdownMenu>
170-
</UncontrolledDropdown>
171-
</Nav>
172-
</Collapse>
173-
</Navbar>
174-
<div style={{height:'3.5em'}}>{/*/ add space underneath the fixed navbar /*/}</div>
175-
<Switch>
176-
{/*/ (2) add route paths here /*/}
177-
<Route path='/' exact component={AppDefault}/>
178-
<Route path='/prototype' exact component={Prototype}/>
179-
<Route path='/d3forcedemo' exact component={ (props) => {return HTML(props)} }/>
180-
<Route path='/simple' exact component={ (props) => {return HTML(props)} }/>
181-
<Route path='/detest' exact component={D3Test}/>
182-
<Route component={NoMatch}/>
183-
</Switch>
184-
</div>
185-
);
186-
}
187-
}
132+
/// demonstrate that STORE persists between clicks
133+
const STORE = require('system/datastore');
134+
STORE.Increment();
135+
136+
/// return component with matching routed view
137+
return (
138+
<div style={{display:'flex', flexFlow:'column nowrap', width:'100%', height:'100vh'}}>
139+
<Navbar fixed="top" light expand="md" style={{ backgroundColor:'#f0f0f0'}}>
140+
<NavbarBrand href="#">NetCreate</NavbarBrand>
141+
<NavbarToggler onClick={this.toggle} />
142+
<Collapse isOpen={this.state.isOpen} navbar>
143+
{/*/ (1) add navigation links here /*/}
144+
<Nav className="ml-auto" navbar>
145+
<NavItem>
146+
<NavLink to="/" activeClassName="active" tag={RRNavLink} replace>Welcome</NavLink>
147+
</NavItem>
148+
<NavItem>
149+
<NavLink to="/d3forcedemo" tag={RRNavLink} replace>D3 Force Demo</NavLink>
150+
</NavItem>
151+
<NavItem>
152+
<NavLink to="/prototype" tag={RRNavLink} replace>Prototype</NavLink>
153+
</NavItem>
154+
<UncontrolledDropdown nav>
155+
<DropdownToggle nav caret>
156+
Templates
157+
</DropdownToggle>
158+
<DropdownMenu>
159+
<DropdownItem>
160+
<NavLink to="/simple" tag={RRNavLink} replace>SimpleHTML</NavLink>
161+
</DropdownItem>
162+
<DropdownItem>
163+
<NavLink to="/d3test" tag={RRNavLink} replace>D3Test</NavLink>
164+
</DropdownItem>
165+
<DropdownItem divider />
166+
<DropdownItem>
167+
<NavLink to="/test3" tag={RRNavLink} replace>Test Descriptions</NavLink>
168+
</DropdownItem>
169+
</DropdownMenu>
170+
</UncontrolledDropdown>
171+
</Nav>
172+
</Collapse>
173+
</Navbar>
174+
<div style={{height:'3.5em'}}>{/*/ add space underneath the fixed navbar /*/}</div>
175+
<Switch>
176+
{/*/ (2) add route paths here /*/}
177+
<Route path='/' exact component={AppDefault}/>
178+
<Route path='/prototype' exact component={Prototype}/>
179+
<Route path='/d3forcedemo' exact component={ (props) => {return HTML(props)} }/>
180+
<Route path='/simple' exact component={ (props) => {return HTML(props)} }/>
181+
<Route path='/detest' exact component={D3Test}/>
182+
<Route component={NoMatch}/>
183+
</Switch>
184+
</div>
185+
);
186+
}
187+
}
188188

189189

190190

‎build/app/init.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
22
3-
init.jsx
4-
system startup, loaded by app/assets/index.html at end of body.
3+
init.jsx
4+
system startup, loaded by app/assets/index.html at end of body.
55
66
\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
77

@@ -35,11 +35,11 @@ DATASTORE.Initialize();
3535
const APP_CONTAINER = '#app-container';
3636

3737
document.addEventListener('DOMContentLoaded', () => {
38-
console.log('init.jsx initializing AppShell into', APP_CONTAINER);
39-
ReactDOM.render((
40-
<HashRouter hashType="noslash">
41-
<AppShell />
42-
</HashRouter>
43-
), document.querySelector( APP_CONTAINER ));
38+
console.log('init.jsx initializing AppShell into', APP_CONTAINER);
39+
ReactDOM.render((
40+
<HashRouter hashType="noslash">
41+
<AppShell />
42+
</HashRouter>
43+
), document.querySelector( APP_CONTAINER ));
4444
});
4545
/// execution continues in init-appshell.jsx

0 commit comments

Comments
 (0)