Skip to content

Commit 931d3f9

Browse files
author
rofrischmann
committed
#9 added initial comparison table
1 parent c0a62c4 commit 931d3f9

16 files changed

+1244
-0
lines changed

‎app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { Component } from 'react'
2+
import Header from './components/Header'
3+
import Wrapper from './components/Wrapper'
4+
5+
import TableView from './containers/TableView'
6+
7+
export default () => (
8+
<Wrapper>
9+
<Header>CSS in JS - Comparison</Header>
10+
<TableView />
11+
</Wrapper>
12+
)

‎client.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { Provider } from 'react-fela'
4+
5+
import createRenderer from './renderer'
6+
import App from './app'
7+
8+
const renderer = createRenderer()
9+
const mountNode = document.getElementById('stylesheet')
10+
11+
render(
12+
<Provider renderer={renderer} mountNode={mountNode}>
13+
<App />
14+
</Provider>,
15+
document.getElementById('app')
16+
)

‎components/Cell.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const red = 'rgba(200, 0,0, 0.3)'
5+
const green = 'rgba(0, 200, 0, 0.3)'
6+
7+
const cell = props => ({
8+
textAlign: props.alignRight ? 'right' : props.alignLeft ? 'left' : 'center',
9+
alignItems: props.alignRight ? 'flex-end' : props.alignLeft ? 'flex-start' : 'center',
10+
justifyContent: 'center',
11+
fontWeight: props.bold ? 'bold' : 'normal',
12+
padding: 6,
13+
flex: props.flex || 1,
14+
fontSize: props.header ? 13 : 15,
15+
borderRight: '1px solid lightgray',
16+
backgroundColor: props.isBool ? (props.value ? green : red) : 'transparent',
17+
overflow: 'hidden',
18+
userSelect: 'none',
19+
color: props.toggle ? 'gray' : 'black',
20+
cursor: props.header || props.toggle ? 'pointer' : 'inherit',
21+
':first-child': {
22+
borderRightWidth: 0
23+
},
24+
':nth-child(2)': {
25+
borderRightWidth: 2
26+
},
27+
':last-child': {
28+
borderRightWidth: 0
29+
}
30+
})
31+
32+
export default createComponent(cell, 'div', [ 'onClick' ])

‎components/Filter.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const green = 'rgba(0, 200, 0, 0.3)'
5+
6+
const filter = props => ({
7+
padding: 5,
8+
border: '1px solid gray',
9+
margin: '0 2px',
10+
backgroundColor: props.active ? green : 'transparent',
11+
borderRadius: 8,
12+
userSelect: 'none',
13+
cursor: 'pointer',
14+
fontSize: 13
15+
})
16+
17+
export default createComponent(filter, 'div', [ 'onClick' ])

‎components/FilterBox.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const filterbox = props => ({
5+
padding: 8,
6+
outline: 'none',
7+
fontSize: 16,
8+
flexDirection: 'row',
9+
alignItems: 'center',
10+
overflow: 'auto',
11+
justifyContent: 'center',
12+
'@media (max-width: 1164px)': {
13+
justifyContent: 'flex-start'
14+
}
15+
})
16+
17+
export default createComponent(filterbox, 'div')

‎components/Header.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const header = props => ({
5+
color: 'rgb(50, 50, 50)',
6+
width: '100%',
7+
textAlign: 'center',
8+
fontSize: 40,
9+
padding: '20px 0 10px 0'
10+
})
11+
12+
export default createComponent(header)

‎components/Input.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const input = props => ({
5+
padding: 8,
6+
paddingLeft: 15,
7+
outline: 'none',
8+
fontSize: 18,
9+
textAlign: 'center',
10+
color: 'blue',
11+
':focus': {
12+
backgroundColor: 'rgba(0,0, 255, 0.05)'
13+
}
14+
})
15+
16+
export default createComponent(input, 'input', [ 'onInput', 'placeholder' ])

‎components/Row.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const row = props => ({
5+
flexDirection: 'row',
6+
borderBottom: (props.header ? 2 : 1) + 'px solid lightgray',
7+
':hover': {
8+
backgroundColor: props.header ? 'transparent' : 'rgba(150, 150, 150, 0.2)'
9+
}
10+
})
11+
12+
export default createComponent(row)

‎components/Table.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const table = props => ({ flex: 1, width: '100%' })
5+
6+
export default createComponent(table)

‎components/Wrapper.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react'
2+
import { createComponent } from 'react-fela'
3+
4+
const wrapper = props => ({ width: '100%', height: '100%' })
5+
6+
export default createComponent(wrapper)

‎containers/TableView.js

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import React, { Component } from 'react'
2+
import Row from '../components/Row'
3+
import Cell from '../components/Cell'
4+
import Table from '../components/Table'
5+
import Input from '../components/Input'
6+
import FilterBox from '../components/FilterBox'
7+
import Filter from '../components/Filter'
8+
9+
import data from '../data'
10+
11+
const repository = 'https://github.com/MicheleBertoli/css-in-js/tree/master/'
12+
const columnNames = {
13+
version: '',
14+
vendorPrefixing: 'Vendor Prefixing',
15+
pseudoClasses: 'Pseudo Classes',
16+
mediaQueries: 'Media Queries',
17+
objectLiterals: 'Object Literals',
18+
keyframes: 'Keyframes',
19+
fontFaces: 'Font Faces',
20+
plugins: 'Plugin API',
21+
fallback: 'Fallbacks',
22+
extractCSS: 'Extract CSS',
23+
serverRendering: 'Server Rendering',
24+
frameworkAgnostic: 'Framework-agnostic',
25+
nativeSupport: 'React Native',
26+
mechanism: 'Mechanism'
27+
}
28+
const defaultColumns = [
29+
'version',
30+
'vendorPrefixing',
31+
'pseudoClasses',
32+
'mediaQueries',
33+
'keyframes',
34+
'serverRendering',
35+
'mechanism'
36+
]
37+
38+
export default class TableView extends Component {
39+
constructor(props, context) {
40+
super(props, context)
41+
this.state = {
42+
sortBy: undefined,
43+
sortAscending: true,
44+
allCollumns: true,
45+
filters: {
46+
vendorPrefixing: false,
47+
pseudoClasses: false,
48+
mediaQueries: false,
49+
objectLiterals: false,
50+
extractCSS: false,
51+
keyframes: false,
52+
fontFaces: false,
53+
plugins: false,
54+
fallback: false,
55+
frameworkAgnostic: false,
56+
nativeSupport: false
57+
}
58+
}
59+
this.sortBy = this.sortBy.bind(this)
60+
this.renderRow = this.renderRow.bind(this)
61+
this.filter = this.filter.bind(this)
62+
this.toggleAllCollumns = this.toggleAllCollumns.bind(this)
63+
}
64+
65+
renderRow(library, columns) {
66+
const cells = columns.map(column => {
67+
const value = data[library][column]
68+
const sign = value ? '√' : 'x'
69+
70+
const isBool = typeof value === 'boolean' || typeof value === 'undefined'
71+
return (
72+
<Cell isBool={isBool} value={value} flex={column === 'version' ? 0.5 : 1}>
73+
{isBool ? sign : value}
74+
</Cell>
75+
)
76+
})
77+
78+
const links = [ ].concat(data[library].url).map((url, index) => (
79+
<div>
80+
<a href={url} style={{ fontWeight: 'bold' }}>
81+
{library.split('+')[index]}
82+
{library.split('+').length - 1 > index ? ' + ' : ''}
83+
</a>
84+
</div>
85+
))
86+
87+
return (
88+
<Row>
89+
<Cell alignRight flex={2}>
90+
{links}
91+
<a href={repository + library.replace('+', '-')}><i>(Example)</i></a>
92+
</Cell>
93+
{cells}
94+
</Row>
95+
)
96+
}
97+
98+
sortBy(column) {
99+
this.setState({
100+
sortBy: this.state.sortBy === column && !this.state.sortAscending ? undefined : column,
101+
sortAscending: this.state.sortBy === column ? !this.state.sortAscending : true
102+
})
103+
}
104+
105+
filter(e) {
106+
this.setState({
107+
filter: e.target.value.trim().length > 0 ? e.target.value.toLowerCase().trim() : false
108+
})
109+
}
110+
111+
toggleAllCollumns() {
112+
this.setState({ allCollumns: !this.state.allCollumns })
113+
}
114+
115+
toggleFilters(column) {
116+
this.setState({
117+
filters: {
118+
...this.state.filters,
119+
[column]: !this.state.filters[column]
120+
}
121+
})
122+
}
123+
render() {
124+
const columns = Object.keys(columnNames).filter((column, index) => this.state.allCollumns ? true : defaultColumns.indexOf(column) > -1)
125+
126+
const headerRow = columns.map(column => (
127+
<Cell header bold={this.state.sortBy === column} flex={column === 'version' ? 0.5 : 1} onClick={column === 'version' ? undefined : () => this.sortBy(column)}>
128+
{columnNames[column]}
129+
</Cell>
130+
))
131+
132+
const sortData = Object.keys(data).sort(left => {
133+
if (this.state.sortBy) {
134+
if (data[left][this.state.sortBy] === this.state.sortAscending) {
135+
return -1
136+
} else {
137+
return 1
138+
}
139+
}
140+
return 0
141+
}).filter(library => {
142+
const fulfilled = Object.keys(this.state.filters).reduce((fulfilled, column) => {
143+
if (this.state.filters[column] && !data[library][column]) {
144+
fulfilled = false
145+
}
146+
return fulfilled
147+
}, true)
148+
149+
if (this.state.filter) {
150+
return library.indexOf(this.state.filter) > -1 && fulfilled
151+
}
152+
153+
return fulfilled
154+
})
155+
156+
const libraries = sortData.map(library => this.renderRow(library, columns))
157+
const filters = Object.keys(this.state.filters).map(column => (
158+
<Filter active={this.state.filters[column]} onClick={() => this.toggleFilters(column)}>
159+
{columnNames[column]}
160+
</Filter>
161+
))
162+
163+
return (
164+
<Table>
165+
<FilterBox>
166+
{filters}
167+
</FilterBox>
168+
<Input onInput={this.filter} placeholder="Search ..." />
169+
<Row header>
170+
<Cell flex={2} alignLeft onClick={this.toggleAllCollumns} toggle>
171+
{this.state.allCollumns ? 'Hide detail collumns' : 'Show all collumns'}
172+
</Cell>
173+
{headerRow}
174+
</Row>
175+
<div style={{ flex: 1, alignSelf: 'stretch', width: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
176+
{libraries}
177+
</div>
178+
</Table>
179+
)
180+
}
181+
}

0 commit comments

Comments
 (0)