Skip to content

Commit

Permalink
Upgrade to 0.0.10
Browse files Browse the repository at this point in the history
  • Loading branch information
@berzniz
berzniz committed May 16, 2018
1 parent 4c1ee70 commit fad91b7
Show file tree
Hide file tree
Showing 20 changed files with 5,931 additions and 731 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
@@ -1,3 +1,7 @@
## 0.0.10 (May 16, 2018)

* Added support for custom easing ([@pizza3](https://github.com/pizza3) in [#46](https://github.com/berzniz/react-overdrive/pull/46))

## 0.0.9 (October 3, 2017)

* React 16 support ([@knpwrs](https://github.com/knpwrs) in [#37](https://github.com/berzniz/react-overdrive/pull/37))
Expand Down
24 changes: 13 additions & 11 deletions __tests__/overdrive.test.js
View file
@@ -1,13 +1,15 @@
import React from 'react';
import Overdrive from '../src/overdrive';
import renderer from 'react-test-renderer';
/* global describe, it, expect */

import React from 'react'
import Overdrive from '../src/overdrive'
import renderer from 'react-test-renderer'

describe('Overdrive', () => {
it('should use props element to render', () => {
const component = renderer.create(
<Overdrive id="test" element="h1"><span>test</span></Overdrive>
);
let tree = component.toJSON();
expect(tree.type).toEqual('h1');
});
});
it('should use props element to render', () => {
const component = renderer.create(
<Overdrive id='test' element='h1'><span>test</span></Overdrive>
)
let tree = component.toJSON()
expect(tree.type).toEqual('h1')
})
})
49 changes: 25 additions & 24 deletions __tests__/prefix.test.js
View file
@@ -1,27 +1,28 @@
import prefix from '../src/prefix';
/* global describe, it, expect */

describe('prefix', () => {
it('should return an object on empty input', () => {
expect(prefix()).toEqual({});
expect(prefix(null)).toEqual({});
expect(prefix({})).toEqual({});
});
import prefix from '../src/prefix'

it('should add webkit prefix to correct properties', () => {
expect(prefix({
width: '50px',
transform: 1,
transformOrigin: 2,
transition: 3
})).toEqual({
width: '50px',
WebkitTransform: 1,
WebkitTransformOrigin: 2,
WebkitTransition: 3,
transform: 1,
transformOrigin: 2,
transition: 3
});
});
describe('prefix', () => {
it('should return an object on empty input', () => {
expect(prefix()).toEqual({})
expect(prefix(null)).toEqual({})
expect(prefix({})).toEqual({})
})

});
it('should add webkit prefix to correct properties', () => {
expect(prefix({
width: '50px',
transform: 1,
transformOrigin: 2,
transition: 3
})).toEqual({
width: '50px',
WebkitTransform: 1,
WebkitTransformOrigin: 2,
WebkitTransition: 3,
transform: 1,
transformOrigin: 2,
transition: 3
})
})
})
4 changes: 2 additions & 2 deletions demos/nextgram/pages/index.js
View file
Expand Up @@ -62,12 +62,12 @@ export default class extends React.Component {
className='photoLink'
href={`/photo?id=${id}`}
onClick={(e) => this.showPhoto(e, id)}
>
>
{id}
</a>
</div>
</Overdrive>
))
))
}
<style jsx>{`
.list {
Expand Down
54 changes: 27 additions & 27 deletions demos/nextjs/pages/_document.js
View file
Expand Up @@ -2,33 +2,33 @@ import Document, {Head, Main, NextScript} from 'next/document'
import {renderStatic} from 'glamor/server'

export default class MyDocument extends Document {
static async getInitialProps({renderPage}) {
const page = renderPage();
const styles = renderStatic(() => page.html);
return {...page, ...styles}
}
static async getInitialProps ({renderPage}) {
const page = renderPage()
const styles = renderStatic(() => page.html)
return {...page, ...styles}
}

constructor(props) {
super(props);
const {__NEXT_DATA__, ids} = props;
if (ids) {
__NEXT_DATA__.ids = this.props.ids
}
constructor (props) {
super(props)
const {__NEXT_DATA__, ids} = props
if (ids) {
__NEXT_DATA__.ids = this.props.ids
}
}

render() {
return (
<html>
<Head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style dangerouslySetInnerHTML={{__html: this.props.css}}/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
render () {
return (
<html>
<Head>
<title>Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<style dangerouslySetInnerHTML={{__html: this.props.css}} />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
48 changes: 24 additions & 24 deletions demos/nextjs/pages/character.js
View file
Expand Up @@ -3,32 +3,32 @@ import Link from 'next/link'
import {css} from 'glamor'

const container = css({
textAlign: 'center'
});
textAlign: 'center'
})

const image = css({
boxSizing: 'border-box',
background: '#fff',
width: '180px',
height: '180px',
borderRadius: '10px',
border: '1px solid #ccc',
padding: '5px',
margin: '10px'
});
boxSizing: 'border-box',
background: '#fff',
width: '180px',
height: '180px',
borderRadius: '10px',
border: '1px solid #ccc',
padding: '5px',
margin: '10px'
})

const page = ({url}) => {
return (
<div>
<div {...container}>
<Overdrive id={url.query.id}>
<img {...image} src={`https://cdn.filestackcontent.com/${url.query.image}`}/>
</Overdrive>
<h1>{url.query.name}!</h1>
<Link href="/"><a id="link">Back</a></Link>
</div>
</div>
);
};
return (
<div>
<div {...container}>
<Overdrive id={url.query.id}>
<img {...image} src={`https://cdn.filestackcontent.com/${url.query.image}`} />
</Overdrive>
<h1>{url.query.name}!</h1>
<Link href='/'><a id='link'>Back</a></Link>
</div>
</div>
)
}

export default page;
export default page
145 changes: 72 additions & 73 deletions demos/nextjs/pages/index.js
View file
Expand Up @@ -4,91 +4,90 @@ import Link from 'next/link'
import {css} from 'glamor'

const image = css({
boxSizing: 'border-box',
background: '#fff',
width: '80px',
height: '80px',
borderRadius: '50%',
border: '1px solid #ccc',
padding: '5px',
margin: '10px'
});
boxSizing: 'border-box',
background: '#fff',
width: '80px',
height: '80px',
borderRadius: '50%',
border: '1px solid #ccc',
padding: '5px',
margin: '10px'
})

const container = css({
marginTop: '200px',
textAlign: 'center',
' a': {
display: 'inline-block'
}
});
marginTop: '200px',
textAlign: 'center',
' a': {
display: 'inline-block'
}
})

const characters = [
{
id: 'bender',
name: 'Bender',
image: '40Wzdn4OQbi2ncxkG96z'
},
{
id: 'fry',
name: 'Fry',
image: 'zbglqWZQAyYO5vsHqIbw'
},
{
id: 'leela',
name: 'Leela',
image: 'klwhl9wXRIqRTGWFNoBT'
},
{
id: 'zoidberg',
name: 'Zoidberg',
image: '6xL1j1OQDC4VLBBLieN7'
}
];
{
id: 'bender',
name: 'Bender',
image: '40Wzdn4OQbi2ncxkG96z'
},
{
id: 'fry',
name: 'Fry',
image: 'zbglqWZQAyYO5vsHqIbw'
},
{
id: 'leela',
name: 'Leela',
image: 'klwhl9wXRIqRTGWFNoBT'
},
{
id: 'zoidberg',
name: 'Zoidberg',
image: '6xL1j1OQDC4VLBBLieN7'
}
]

class page extends React.Component {
constructor(props) {
super(props);
this.state = {characters};
}
constructor (props) {
super(props)
this.state = {characters}
}

shuffleCharacters() {
const characters = [...this.state.characters];
for (let i = characters.length; i; i--) {
let j = Math.floor(Math.random() * i);
[characters[i - 1], characters[j]] = [characters[j], characters[i - 1]];
}
this.setState({characters});
shuffleCharacters () {
const characters = [...this.state.characters]
for (let i = characters.length; i; i--) {
let j = Math.floor(Math.random() * i);
[characters[i - 1], characters[j]] = [characters[j], characters[i - 1]]
}
this.setState({characters})
}

render() {
const {characters} = this.state;
return (
<div {...container}>
<h1>Best character?</h1>
render () {
const {characters} = this.state
return (
<div {...container}>
<h1>Best character?</h1>

{characters.map(character => (
<Link key={character.id}
href={`/character?id=${character.id}&name=${character.name}&image=${character.image}`}>
<a>
<Overdrive id={character.id}>
<img {...image} src={`https://cdn.filestackcontent.com/${character.image}`}/>
</Overdrive>
</a>
</Link>
))}
{characters.map(character => (
<Link key={character.id}
href={`/character?id=${character.id}&name=${character.name}&image=${character.image}`}>
<a>
<Overdrive id={character.id}>
<img {...image} src={`https://cdn.filestackcontent.com/${character.image}`} />
</Overdrive>
</a>
</Link>
))}

<p>
<button onClick={this.shuffleCharacters.bind(this)}>Shuffle</button>
</p>
<p>
<button onClick={this.shuffleCharacters.bind(this)}>Shuffle</button>
</p>

<p>
This is a small demo of <a href="https://github.com/berzniz/react-overdrive">react-overdrive</a>, creating a magic-move experience
<p>
This is a small demo of <a href='https://github.com/berzniz/react-overdrive'>react-overdrive</a>, creating a magic-move experience
while routing.
</p>
</div>
);
}
</p>
</div>
)
}
}


export default page;
export default page
83 changes: 41 additions & 42 deletions demos/react-router-v4/src/App.js
View file

Large diffs are not rendered by default.

0 comments on commit fad91b7

Please sign in to comment.