Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite674a65

Browse files
committed
got new application working with react-router v4.0.0-2 and gridiron-modules
1 parent8a5d5e0 commite674a65

File tree

26 files changed

+950
-74
lines changed

26 files changed

+950
-74
lines changed

‎README.md‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,18 @@ ___
1313

1414
##Install
1515

16-
`npm install -S gridiron`
16+
`npm install -S gridiron gridiron-modules`
1717

18+
For easiest usage across an application, setup a gridiron.js file in a modules folder with the following content:
19+
20+
21+
```js
22+
importgridironfrom'gridiron'
23+
importgridironModulesfrom'gridiron-modules'
24+
25+
/** Factory that imports all of the gridiron components and feeds them your apps version of its dependencies (React, ReactDOM, addons, etc.)*/
26+
exportdefaultgridiron(gridironModules(), { themeName:'mellow' })
27+
```
1828
___
1929

2030
##Components
@@ -42,21 +52,16 @@ All components should be wrapped in a pager component whether you want the data
4252
**A complex full example:**
4353

4454
```bash
45-
import gridiron from'gridiron'
55+
4656
import React, { Component, PropTypes } from'react'
47-
import ReactDOM from'react-dom'
48-
import shallowCompare from'react-addons-shallow-compare'
49-
import createFragment from'react-addons-create-fragment'
5057
import { connect } from'react-redux'
58+
5159
import Immutable from'immutable'
5260
import Header from'./Header'
5361
import styles from'./styles.css'
5462

55-
const deps = { React, ReactDOM, shallowCompare, createFragment, connect, Immutable }
56-
const themeName ='mellow'
57-
58-
/** Use gridiron factoryfunctiontoexport grid components.*/
59-
const { Pager, Grid, Columns, formula } = gridiron(deps, { themeName })
63+
/** Import your applications namespaced gridiron components.*/
64+
import gridiron from'./modules/gridiron'
6065

6166
const getFormName = columnID =>`filter-form-${columnID}`
6267
const getFilterName = documentID =>`filter_${documentID}`
@@ -65,7 +70,7 @@ const getFilterName = documentID => `filter_${documentID}`
6570
const createFilterStream = columnIDs => {
6671
const formNames = columnIDs.map(getFormName)
6772
return onFilter => {
68-
const unsubscribe = formula.subscribe(formNames, formStates => {
73+
const unsubscribe =gridiron.formula.subscribe(formNames, formStates => {
6974
const filterState = columnIDs.reduce((result, columnID, i)=> {
7075
const formState = formStates[i]
7176
const getFilterValue = documentID => formState ? formState.getIn([ getFilterName(documentID), 'value' ], false) : false
@@ -85,7 +90,7 @@ const FilterForm = pure (
8590
}
8691
, render() {
8792
const { columnData, columnID } = this.props
88-
const form = formula(getFormName(this.props.columnID))
93+
const form =gridiron.formula(getFormName(this.props.columnID))
8994
return (
9095
<div>
9196
{columnData.entrySeq().map(([ documentID, cells ], documentIndex)=> {
@@ -103,7 +108,7 @@ const FilterForm = pure (
103108
function mapStateToProps (state) {
104109
const meta = state.data.getIn([ 'meta' ], Immutable.Map())
105110

106-
const columns = Columns ( meta.get('columns', []).filter(x => x!=='Alias')
111+
const columns =gridiron.Columns ( meta.get('columns', []).filter(x => x!=='Alias')
107112
, {'Airline ID': { style: { flex:'0 0 2em', alignItems:'center' }, className: styles.desktop }
108113
,'Name': { style: { flex:'2 0 7em' } }
109114
,'IATA': { style: { flex:'0 0 4em' } }
@@ -135,7 +140,7 @@ export default connect(mapStateToProps) (
135140
* to the Grid componentin a consistent manner.
136141
*/
137142
return (
138-
<Pager
143+
<gridiron.Pager
139144
documentsPerPage={100}
140145
columns={columns.ids}
141146
filterStream={createFilterStream(columns.ids)}
@@ -159,7 +164,7 @@ export default connect(mapStateToProps) (
159164
sort={Immutable.fromJS({ cols: [ 'Airline ID', 'Name' ] })}
160165
>
161166
{pager => (
162-
<Grid
167+
<gridiron.Grid
163168
data={pager.status.get('data', Immutable.Map())}
164169
useContentHeight={useContentHeight}
165170
/* mapDocument allows creation of a document header and footer row
@@ -245,7 +250,7 @@ export default connect(mapStateToProps) (
245250
{...this.props}
246251
/>
247252
)}
248-
</Pager>
253+
</gridiron.Pager>
249254
)
250255
}
251256
}

‎packages/gridiron-app/package.json‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,23 @@
55
"react-scripts":"0.8.4"
66
},
77
"dependencies": {
8+
"gridiron":"^0.19.0",
9+
"gridiron-modules":"^0.19.0",
10+
"immutable":"^3.8.1",
11+
"papaparse":"^4.1.2",
812
"react":"^15.4.1",
913
"react-dom":"^15.4.1",
10-
"redux":"latest",
14+
"react-pre-styles":"^0.16.4",
15+
"react-pre-themes":"^0.16.4",
1116
"react-redux":"latest",
12-
"react-router":"latest",
17+
"react-router":"^4.0.0-2",
1318
"react-router-redux":"latest",
14-
"gridiron":"^0.19.0",
15-
"gridiron-modules":"^0.19.0"
19+
"redux":"latest",
20+
"redux-actions":"^1.2.0",
21+
"redux-form":"^6.4.3",
22+
"redux-idle-monitor":"^0.5.2",
23+
"redux-middleware":"^0.1.21",
24+
"reselect":"^2.5.4"
1625
},
1726
"scripts": {
1827
"start":"react-scripts start",

‎packages/gridiron-app/src/App.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
11
importReact,{Component}from'react'
2+
import{Provider}from'react-redux'
3+
import{BrowserRouter,Match,Miss,Link}from'react-router'
24
import'./App.css'
35

46
importgridironfrom'gridiron'
57
importgridironModulesfrom'gridiron-modules'
68

7-
const{ Pager, Grid, Accordion, Cards, Graph}=gridiron(gridironModules())
9+
importTopBarfrom'./components/nav/TopBar'
10+
importPagerSandboxfrom'./components/PagerSandbox'
811

9-
exportdefaultclassAppextendsComponent{
10-
render(){
11-
return(
12-
<divclassName="App">
13-
blah
12+
importconfigureStorefrom'./redux/store/configureStore'
13+
conststore=configureStore()
1414

15+
const{ Logo}=gridiron(gridironModules())
16+
17+
constHome=()=>(
18+
<span>HOME</span>
19+
)
20+
21+
22+
constApp=()=>(
23+
<Providerstore={store}>
24+
<BrowserRouter>
25+
<div>
26+
<TopBarlogo={<Logo/>}/>
27+
<Matchpattern="/pager"component={PagerSandbox}/>
28+
<Misscomponent={Home}/>
1529
</div>
16-
)
17-
}
18-
}
30+
</BrowserRouter>
31+
</Provider>
32+
)
33+
34+
exportdefaultApp
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
importReact,{Component}from'react'
2+
importImmutablefrom'immutable'
3+
importgridironfrom'gridiron'
4+
importgridironModulesfrom'gridiron-modules'
5+
const{ Pager, Grid, Accordion, Cards, Graph}=gridiron(gridironModules())
6+
7+
exportdefault()=>(
8+
<Pager
9+
documentsPerPage={5}
10+
map={{documents:state=>(Immutable.Map.isMap(state) ?state :Immutable.Map(state)).map(
11+
(content,header)=>Immutable.Map({ header, content})
12+
)
13+
}
14+
}
15+
>
16+
{(pager)=>{
17+
return(
18+
<pre>{JSON.stringify(pager,null,2)}</pre>
19+
)
20+
}}
21+
</Pager>
22+
)
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.topBar {
2+
display: flex;
3+
flex:10 auto;
4+
background-color:rgb(34,34,34);
5+
background-image:linear-gradient(0deg,rgb(34,34,34)0%,rgb(51,51,51)50%,rgb(88,110,95)50%,rgb(131,187,147)100%);
6+
border-color:rgb(38,51,38);
7+
border-style: groove;
8+
border-width:01px1px1px;
9+
padding:0.2em0.5em;
10+
border-radius:004px4px;
11+
}
12+
13+
.title {
14+
margin-left:0;
15+
font-size:1.3em;
16+
}
17+
18+
.anchor {
19+
margin-left:0;
20+
text-decoration:none;
21+
color:rgb(238,185,5);
22+
text-shadow:1px1px1px black,000.2emrgb(238,185,5);
23+
}
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
importReact,{Component,PropTypes}from'react'
2+
3+
import'./TopBar.css'
4+
5+
6+
exportdefaultclassTopBarextendsComponent{
7+
staticpropTypes={logo:PropTypes.element
8+
,title:PropTypes.string
9+
,subtitle:PropTypes.string
10+
,packageName:PropTypes.string
11+
}
12+
render(){
13+
const{ logo, title, subtitle, packageName}=this.props
14+
15+
return(
16+
<headerclassName="topBar">
17+
{/*
18+
<button style={header.hamburger} className="hamburger">
19+
<FA name="bars" size="lg" style={{ color: 'rgb(50, 100, 150)' }} />
20+
</button>
21+
*/}
22+
<spanclassName="title">
23+
<ahref="/"className="anchor">{logo ?logo :null}{title}{subtitle ?<spanclassName="subtitle">{subtitle}</span> :null}</a>
24+
</span>
25+
{/*
26+
{packageName ? <span style={header.banner}>
27+
<a href={`https://nodei.co/npm/${packageName}/`}>
28+
<img src={`https://nodei.co/npm/${packageName}.png?mini=true`} />
29+
</a>
30+
</span> : null}
31+
<span style={header.settings}>
32+
<a href="/settings" style={header.anchor}>
33+
<FA name="cog" size="2x"/>
34+
</a>
35+
</span>
36+
*/}
37+
</header>
38+
)
39+
}
40+
}

‎packages/gridiron-app/src/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
importReactfrom'react';
2-
importReactDOMfrom'react-dom';
3-
importAppfrom'./App';
4-
import'./index.css';
1+
importReactfrom'react'
2+
importReactDOMfrom'react-dom'
3+
importAppfrom'./App'
4+
import'./index.css'
55

66
ReactDOM.render(
77
<App/>,
88
document.getElementById('root')
9-
);
9+
)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp