Skip to content

Commit c5b5940

Browse files
moarwickmoarwick
committed
prep 0.8.0
1 parent 836ef12 commit c5b5940

15 files changed

+139
-118
lines changed

‎.eslintrc

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"extends": [ "standard", "plugin:react/recommended" ],
33
"parser": "babel-eslint",
4-
"plugins": [
5-
"react"
6-
],
7-
"ecmaFeatures": {
8-
"jsx": true,
9-
"experimentalObjectRestSpread": true
4+
"parserOptions": {
5+
"ecmaFeatures": {
6+
"modules": true,
7+
"jsx": true,
8+
"experimentalObjectRestSpread": true
9+
}
1010
}
1111
}

‎.npmignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@ src/
22
public/
33
test/
44
webpack.config.js
5-
webpack.dist.js
65
showcase.gif

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ What if you don't want the animation applied to *ALL* paths inside your SVG? Add
9696

9797

9898
### Changelog
99+
**Ver 0.8.0**
100+
* Update dependencies
101+
* Migrate to Webpack 3
102+
* Use prop-types package
103+
99104
**Ver 0.7.3**
100105
* No-op server-side
101106
* Do not budle/minify distribution package

‎lib/index.js

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ var _react = require('react');
1212

1313
var _react2 = _interopRequireDefault(_react);
1414

15+
var _propTypes = require('prop-types');
16+
17+
var _propTypes2 = _interopRequireDefault(_propTypes);
18+
1519
var _utils = require('./utils.js');
1620

1721
var _tween = require('tween.js');
@@ -400,21 +404,21 @@ var MtSvgLines = function (_React$Component) {
400404
}(_react2.default.Component);
401405

402406
MtSvgLines.propTypes = {
403-
className: _react.PropTypes.string, // custom CSS class (applied to svg elem)
404-
animate: _react.PropTypes.oneOfType([// external animation trigger
405-
_react.PropTypes.string, // - pass a unique string or true to (re)start animation
406-
_react.PropTypes.number, // - pass a number to specify delay before the animation begins (ms)
407-
_react.PropTypes.bool // - pass false (or omit) to draw static SVG (no animation)
407+
className: _propTypes2.default.string, // custom CSS class (applied to svg elem)
408+
animate: _propTypes2.default.oneOfType([// external animation trigger
409+
_propTypes2.default.string, // - pass a unique string or true to (re)start animation
410+
_propTypes2.default.number, // - pass a number to specify delay before the animation begins (ms)
411+
_propTypes2.default.bool // - pass false (or omit) to draw static SVG (no animation)
408412
]),
409-
duration: _react.PropTypes.number, // total anim duration (ms)
410-
stagger: _react.PropTypes.number, // delay between start times of each path (percentage)
413+
duration: _propTypes2.default.number, // total anim duration (ms)
414+
stagger: _propTypes2.default.number, // delay between start times of each path (percentage)
411415
timing: _react2.default.PropTypes.oneOf([// easing type
412416
'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end']),
413-
playback: _react.PropTypes.string, // iteration-count || direction || fill-mode (perhaps even play-state)
414-
fade: _react.PropTypes.bool, // apply a fade-in to each path
415-
callback: _react.PropTypes.func, // callback fn to run when when anim completes
416-
jsOnly: _react.PropTypes.bool, // apply JS animation, regardless of browser
417-
children: _react.PropTypes.node
417+
playback: _propTypes2.default.string, // iteration-count || direction || fill-mode (perhaps even play-state)
418+
fade: _propTypes2.default.bool, // apply a fade-in to each path
419+
callback: _propTypes2.default.func, // callback fn to run when when anim completes
420+
jsOnly: _propTypes2.default.bool, // apply JS animation, regardless of browser
421+
children: _propTypes2.default.node
418422
};
419423
MtSvgLines.defaultProps = {
420424
className: 'mt-svg',

‎package.json

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,36 +38,37 @@
3838
"tween.js": "^16.3.4"
3939
},
4040
"devDependencies": {
41-
"autoprefixer": "^6.3.7",
41+
"autoprefixer": "^7.1.2",
4242
"babel-cli": "^6.24.0",
4343
"babel-core": "^6.10.4",
4444
"babel-eslint": "^7.2.1",
45-
"babel-loader": "^6.2.4",
45+
"babel-loader": "^7.1.1",
4646
"babel-preset-es2015": "^6.9.0",
4747
"babel-preset-react": "^6.11.1",
4848
"babel-preset-stage-0": "^6.5.0",
49-
"css-loader": "^0.27.3",
50-
"eslint": "^3.18.0",
51-
"eslint-config-standard": "^7.1.0",
49+
"css-loader": "^0.28.4",
50+
"eslint": "^4.3.0",
51+
"eslint-config-standard": "^10.2.1",
5252
"eslint-plugin-import": "^2.2.0",
53-
"eslint-plugin-node": "^4.2.1",
53+
"eslint-plugin-node": "^5.1.1",
5454
"eslint-plugin-promise": "^3.5.0",
55-
"eslint-plugin-react": "^6.9.0",
56-
"eslint-plugin-standard": "^2.1.1",
57-
"extract-text-webpack-plugin": "^1.0.1",
58-
"file-loader": "^0.10.1",
55+
"eslint-plugin-react": "^7.1.0",
56+
"eslint-plugin-standard": "^3.0.1",
57+
"extract-text-webpack-plugin": "^3.0.0",
58+
"file-loader": "^0.11.2",
5959
"html-webpack-plugin": "^2.22.0",
6060
"node-sass": "^4.5.1",
61-
"postcss-loader": "^1.3.3",
61+
"postcss-loader": "^2.0.6",
62+
"prop-types": "^15.5.10",
6263
"react": "^15.2.0",
6364
"react-dom": "^15.2.0",
6465
"react-hot-loader": "^1.3.0",
6566
"rimraf": "^2.5.3",
6667
"sass-loader": "^6.0.3",
67-
"style-loader": "^0.16.0",
68+
"style-loader": "^0.18.2",
6869
"url-loader": "^0.5.7",
69-
"webpack": "^1.14.0",
70-
"webpack-dev-server": "^1.16.3",
71-
"webpack-merge": "^1.1.2"
70+
"webpack": "^3.4.1",
71+
"webpack-dev-server": "^2.6.1",
72+
"webpack-merge": "^4.1.0"
7273
}
7374
}

‎postcss.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
'autoprefixer': { browsers: ['last 2 versions'] }
4+
}
5+
}

‎public/2f6dc120081c95e3636f.min.js

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎public/css/2f6dc120081c95e3636f.min.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/css/d6cf0349c15323791a0a.min.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import url(http://fonts.googleapis.com/css?family=Lato:200,300,700);body {
2+
font: 200 normal 16px 'Lato', sans-serif;
3+
background-color: #FFF; }
4+
5+
@media (max-width: 380px) {
6+
.column, .column-short {
7+
width: 100% !important; } }

‎public/d6cf0349c15323791a0a.min.js

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<title>Mt React Component</title>
88
<meta name="description" content="Mt React Component" />
99
<meta name="author" content="moarwick" />
10-
<link href="css/2f6dc120081c95e3636f.min.css" rel="stylesheet"></head>
10+
<link href="css/d6cf0349c15323791a0a.min.css" rel="stylesheet"></head>
1111
<body>
1212
<div id="component"></div>
13-
<script type="text/javascript" src="2f6dc120081c95e3636f.min.js"></script></body>
13+
<script type="text/javascript" src="d6cf0349c15323791a0a.min.js"></script></body>
1414
</html>

‎src/demos/components/DemoPage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const styles = {
212212
},
213213
row: {
214214
borderTop: '1px solid #888',
215-
width: '100%', // for IE
215+
width: '100%', // for IE
216216
paddingTop: 20
217217
},
218218
ieMessage: {

‎src/demos/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
require('./stylesheet.scss')
2-
31
import React from 'react'
42
import ReactDOM from 'react-dom'
53
import DemoPage from './components/DemoPage'
64

5+
require('./stylesheet.scss')
6+
77
ReactDOM.render((
88
<DemoPage />
99
), document.getElementById('component'))

‎src/index.js

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { PropTypes } from 'react'
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
23

34
import { shortUID, clamp, trimFloat, isMsBrowser } from './utils.js'
45
import TWEEN from 'tween.js'
@@ -9,21 +10,21 @@ const EASING = {
910
'ease-out': TWEEN.Easing.Cubic.Out,
1011
'ease-in-out': TWEEN.Easing.Cubic.InOut,
1112
'linear': TWEEN.Easing.Linear.None,
12-
'step-start': TWEEN.Easing.Bounce.In, // not quite the same thing ;)
13-
'step-end': TWEEN.Easing.Bounce.Out // not quite the same thing ;)
13+
'step-start': TWEEN.Easing.Bounce.In, // not quite the same thing ;)
14+
'step-end': TWEEN.Easing.Bounce.Out // not quite the same thing ;)
1415
}
1516

1617
export default class MtSvgLines extends React.Component {
1718
static propTypes = {
18-
className: PropTypes.string, // custom CSS class (applied to svg elem)
19-
animate: PropTypes.oneOfType([ // external animation trigger
20-
PropTypes.string, // - pass a unique string or true to (re)start animation
21-
PropTypes.number, // - pass a number to specify delay before the animation begins (ms)
22-
PropTypes.bool // - pass false (or omit) to draw static SVG (no animation)
19+
className: PropTypes.string, // custom CSS class (applied to svg elem)
20+
animate: PropTypes.oneOfType([ // external animation trigger
21+
PropTypes.string, // - pass a unique string or true to (re)start animation
22+
PropTypes.number, // - pass a number to specify delay before the animation begins (ms)
23+
PropTypes.bool // - pass false (or omit) to draw static SVG (no animation)
2324
]),
24-
duration: PropTypes.number, // total anim duration (ms)
25-
stagger: PropTypes.number, // delay between start times of each path (percentage)
26-
timing: React.PropTypes.oneOf([ // easing type
25+
duration: PropTypes.number, // total anim duration (ms)
26+
stagger: PropTypes.number, // delay between start times of each path (percentage)
27+
timing: React.PropTypes.oneOf([ // easing type
2728
'ease',
2829
'ease-in',
2930
'ease-out',
@@ -32,10 +33,10 @@ export default class MtSvgLines extends React.Component {
3233
'step-start',
3334
'step-end'
3435
]),
35-
playback: PropTypes.string, // iteration-count || direction || fill-mode (perhaps even play-state)
36-
fade: PropTypes.bool, // apply a fade-in to each path
37-
callback: PropTypes.func, // callback fn to run when when anim completes
38-
jsOnly: PropTypes.bool, // apply JS animation, regardless of browser
36+
playback: PropTypes.string, // iteration-count || direction || fill-mode (perhaps even play-state)
37+
fade: PropTypes.bool, // apply a fade-in to each path
38+
callback: PropTypes.func, // callback fn to run when when anim completes
39+
jsOnly: PropTypes.bool, // apply JS animation, regardless of browser
3940
children: PropTypes.node
4041
};
4142

@@ -56,16 +57,16 @@ export default class MtSvgLines extends React.Component {
5657
super(props)
5758

5859
this.state = {
59-
classKey: `mt-${shortUID()}`, // unique class name for the wrapper, an internal "trigger" (re-gen each time anim is to run)
60-
css: '', // generated CSS
61-
tweenElapsed: 0, // tween duration so far (ms)
62-
tweenProgress: 0 // tween completion (pct)
60+
classKey: `mt-${shortUID()}`, // unique class name for the wrapper, an internal "trigger" (re-gen each time anim is to run)
61+
css: '', // generated CSS
62+
tweenElapsed: 0, // tween duration so far (ms)
63+
tweenProgress: 0 // tween completion (pct)
6364
}
6465

6566
this._lastAnimate = ''
6667
this._lastClassKey = ''
6768

68-
this._animStart = 0 // anim start timestamp
69+
this._animStart = 0 // anim start timestamp
6970

7071
this._pathElems = []
7172
this._pathDataFrom = {}
@@ -134,7 +135,7 @@ export default class MtSvgLines extends React.Component {
134135
this._lastClassKey = classKey
135136

136137
// parse out vars common for both modes
137-
const startDelay = typeof animate === 'number' ? animate : 0 // if numeric, treat as delay (ms)
138+
const startDelay = typeof animate === 'number' ? animate : 0 // if numeric, treat as delay (ms)
138139
let numOfRepeats = parseInt(playback, 10) || 0
139140

140141
/* ----- JS MODE ----- */
@@ -184,7 +185,7 @@ export default class MtSvgLines extends React.Component {
184185
const pathQty = pathLenghts.length || 1
185186

186187
// 2) calc all timing values
187-
const staggerMult = clamp(stagger, 0, 100) / 100 // convert pct to 0-1
188+
const staggerMult = clamp(stagger, 0, 100) / 100 // convert pct to 0-1
188189
const pathStaggerDelay = (stagger > 0 ? duration / pathQty * staggerMult : 0)
189190
const pathDrawDuration = (stagger > 0 ? duration - ((pathStaggerDelay * (pathQty - 1)) * (2 - staggerMult)) : duration)
190191

@@ -221,7 +222,7 @@ export default class MtSvgLines extends React.Component {
221222
*/
222223
_onTweenUpdate = () => {
223224
this._setStrokeDashoffset(this._pathElems, this._tweenData)
224-
this._animate() // go again..
225+
this._animate() // go again..
225226
}
226227

227228
/*

0 commit comments

Comments
 (0)