Skip to content

Commit 6c4c770

Browse files
jxnblkjxnblk
committed
Add slider
1 parent ca71485 commit 6c4c770

File tree

5 files changed

+131
-59
lines changed

5 files changed

+131
-59
lines changed

‎docs/App.js

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { createProvider } from 'refunk'
33
import XRay from 'react-x-ray'
44
import Grid from 'react-css-grid'
55
import { Box } from 'grid-styled'
6+
import Bar from './Bar'
7+
import Slider from './Slider'
68
import Col from './Col'
79
import Heading from './Heading'
810
import Pre from './Pre'
@@ -18,72 +20,78 @@ import Live from './Live'
1820

1921
const App = props => (
2022
<XRay disabled={!props.xray}>
21-
<button
22-
onClick={e => {
23-
props.update(toggleXRay)
24-
}}
25-
children='xray'
26-
/>
27-
<div>
28-
<label htmlFor='width'>width {props.width}</label>
29-
<input
30-
type='range'
31-
id='width'
32-
name='width'
33-
max={widths.length - 1}
34-
value={widths.indexOf(props.width)}
35-
onChange={e => props.update(handleWidthChange(e.target.value))}
36-
/>
37-
</div>
38-
<div>
39-
<label htmlFor='width'>gap {props.gap}</label>
40-
<input
41-
type='range'
42-
id='gap'
43-
name='gap'
44-
max={gaps.length - 1}
45-
value={gaps.indexOf(props.gap)}
46-
onChange={e => props.update(handleGapChange(e.target.value))}
47-
/>
48-
</div>
49-
<Box p={3}>
23+
<Bar p={2}>
24+
<Grid width={128}>
25+
<button
26+
onClick={e => {
27+
props.update(toggleXRay)
28+
}}
29+
children='xray'
30+
/>
31+
<Grid.Item span={2}>
32+
<label htmlFor='width'>width {props.width}</label>
33+
<Slider
34+
id='width'
35+
name='width'
36+
max={widths.length - 1}
37+
value={widths.indexOf(props.width)}
38+
onChange={e => props.update(handleWidthChange(e.target.value))}
39+
/>
40+
</Grid.Item>
41+
<Grid.Item span={2}>
42+
<label htmlFor='width'>gap {props.gap}</label>
43+
<Slider
44+
type='range'
45+
id='gap'
46+
name='gap'
47+
max={gaps.length - 1}
48+
value={gaps.indexOf(props.gap)}
49+
onChange={e => props.update(handleGapChange(e.target.value))}
50+
/>
51+
</Grid.Item>
52+
</Grid>
53+
</Bar>
54+
<Box p={[ 2, 3 ]}>
5055
<Grid
5156
width={props.width}
5257
gap={props.gap}
5358
align='baseline'>
54-
<Heading.h1>React CSS Grid</Heading.h1>
5559
<Grid.Item>
56-
<Text>
60+
<Heading.h1>React CSS Grid</Heading.h1>
61+
<Text mb={2}>
5762
React layout component based on CSS Grid Layout and built with
5863
{' '}
5964
<Link href='https://styled-components.com'>
6065
styled-components
6166
</Link>
6267
</Text>
68+
<Flex>
69+
<BlockLink
70+
mr={1}
71+
href='https://travis-ci.org/jxnblk/react-css-grid'>
72+
<Image
73+
src='https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square'
74+
height='20'
75+
/>
76+
</BlockLink>
77+
<Tweet />
78+
<BlockLink
79+
ml={1}
80+
href='https://github.com/jxnblk/react-css-grid'>
81+
<Image
82+
src='https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social&label=Star'
83+
/>
84+
</BlockLink>
85+
</Flex>
6386
</Grid.Item>
64-
<Pre>npm i react-css-grid</Pre>
65-
<Flex>
66-
<BlockLink
67-
mr={1}
68-
href='https://travis-ci.org/jxnblk/react-css-grid'>
69-
<Image
70-
src='https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square'
71-
height='20'
72-
/>
73-
</BlockLink>
74-
<Tweet />
75-
<BlockLink
76-
ml={1}
77-
href='https://github.com/jxnblk/react-css-grid'>
78-
<Image
79-
src='https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social&label=Star'
80-
/>
81-
</BlockLink>
82-
</Flex>
8387
<div>
88+
<Heading>Install</Heading>
89+
<Pre>npm i react-css-grid</Pre>
90+
</div>
91+
<Grid.Item>
8492
<Heading mb={2}>Usage</Heading>
8593
<Pre children={usage} />
86-
</div>
94+
</Grid.Item>
8795
<div>
8896
<Heading mb={2}>Features</Heading>
8997
<List>
@@ -125,12 +133,20 @@ const App = props => (
125133
<Heading mb={2}>Gap</Heading>
126134
<Live code={gapExample} />
127135
</div>
136+
<div>
137+
<Heading mb={2}>Align</Heading>
138+
<Live code={alignExample} />
139+
</div>
128140
<footer>
129-
<Flex>
130-
<Link href='https://github.com/jxnblk/react-css-grid'>GitHub</Link>
131-
<Box mr={1} />
132-
<Link href='http://jxnblk.com'>Made by Jxnblk</Link>
133-
</Flex>
141+
<Heading mb={2}>Footer</Heading>
142+
<List>
143+
<li>
144+
<Link href='https://github.com/jxnblk/react-css-grid'>GitHub</Link>
145+
</li>
146+
<li>
147+
<Link href='http://jxnblk.com'>Made by Jxnblk</Link>
148+
</li>
149+
</List>
134150
</footer>
135151
</Grid>
136152
</Box>
@@ -167,6 +183,13 @@ const gapExample = `<Grid
167183
<h2>Hi</h2>
168184
</Grid>`
169185

186+
const alignExample = `<Grid
187+
width={96}
188+
align='baseline'>
189+
<h2>Hello</h2>
190+
<h4>Hi</h4>
191+
</Grid>`
192+
170193
const state = {
171194
width: 320,
172195
gap: 32,

‎docs/Bar.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components'
2+
import { Box } from 'grid-styled'
3+
4+
const Bar = styled(Box)`
5+
color: white;
6+
background-color: black;
7+
`
8+
9+
export default Bar

‎docs/Pre.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { space } from 'styled-system'
44
const Pre = styled.pre`
55
font-family: Menlo, monospace;
66
font-size: 14px;
7+
max-width: 100%;
8+
overflow: auto;
79
${space}
810
`
911

‎docs/Slider.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled from 'styled-components'
2+
3+
const Slider = styled.input`
4+
display: block;
5+
width: 100%;
6+
margin: 0;
7+
height: 2px;
8+
cursor: pointer;
9+
color: inherit;
10+
background-color: rgba(255, 255, 255, .25);
11+
border-radius: 0;
12+
appearance: none;
13+
14+
&::-webkit-slider-thumb {
15+
width: 12px;
16+
height: 12px;
17+
background-color: currentcolor;
18+
border: 0;
19+
border-radius: 9999px;
20+
appearance: none;
21+
}
22+
23+
&:focus {
24+
outline: none;
25+
background-color: rgba(255, 255, 255, .5);
26+
}
27+
`
28+
29+
Slider.defaultProps = {
30+
type: 'range'
31+
}
32+
33+
export default Slider

‎src/index.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
44
const px = n => typeof n === 'number' ? n + 'px' : n
55

66
const width = props => ({
7-
gridTemplateColumns: `repeat(auto-fit, minmax(${px(props.width)}, 1fr))`
7+
// ['@media screen and (min-width:320px)']: {
8+
gridTemplateColumns: `repeat(auto-fit, minmax(${px(props.width)}, 1fr))`
9+
// }
810
})
911

1012
const gap = props => ({
@@ -20,7 +22,8 @@ const span = props => props.span ? ({
2022
}) : null
2123

2224
const Grid = styled.div([], {
23-
display: 'grid'
25+
display: 'grid',
26+
maxWidth: '100%'
2427
},
2528
width,
2629
gap,
@@ -43,6 +46,8 @@ Grid.defaultProps = {
4346
gap: 32
4447
}
4548

46-
Grid.Item = styled.div([], span)
49+
Grid.Item = styled.div([], {
50+
maxWidth: '100%'
51+
}, span)
4752

4853
export default Grid

0 commit comments

Comments
 (0)