Merge pull request #30 from buildo/27-animation_support

#27: animation support (closes #27)
buildo · May 31, 2017 · ed11ea4 · ed11ea4
2 parents e5c3707 + fc1c35d
commit ed11ea4
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -30,19 +30,20 @@ npm install --save react-placeholder
 ### Props
 
 ```jsx
-children:          React.PropTypes.oneOfType([
-                      React.PropTypes.node,
-                      React.PropTypes.element
-                   ]).isRequired,
-ready:             React.PropTypes.bool.isRequired,
-firstLaunchOnly:   React.PropTypes.bool,
-type:              React.PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
-rows:              React.PropTypes.number,
-color:             React.PropTypes.string,
-customPlaceholder: React.PropTypes.oneOfType([
-                      React.PropTypes.node,
-                      React.PropTypes.element
-                   ])
+children:             PropTypes.oneOfType([
+                         PropTypes.node,
+                         PropTypes.element
+                      ]).isRequired,
+ready:                PropTypes.bool.isRequired,
+firstLaunchOnly:      PropTypes.bool,
+showLoadingAnimation: PropTypes.bool,
+type:                 PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
+rows:                 PropTypes.number,
+color:                PropTypes.string,
+customPlaceholder:    PropTypes.oneOfType([
+                         PropTypes.node,
+                         PropTypes.element
+                      ])
 ```
 
 ### Customization

diff --git a/examples/bundle.js b/examples/bundle.js
diff --git a/examples/examples.js b/examples/examples.js
@@ -9,6 +9,8 @@ import {
   RoundShape
 } from '../src/placeholders';
 
+import '../src/reactPlaceholder.scss';
+
 class Example extends React.Component {
 
   state = {
@@ -74,14 +76,14 @@ class Example extends React.Component {
           <ReactPlaceholder
             ready={this.state.ready}
             rows={this.state.textBlockRows}
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-block'
           >
             {realComponent}
           </ReactPlaceholder>
         </div>
 
-        <p>"media"</p>
+        <p>"media (with loading animation)"</p>
         <div className='ui input'>
           <span style={{ lineHeight: '40px' }}>
             nº of rows:
@@ -95,10 +97,10 @@ class Example extends React.Component {
         </div>
         <div className='ui segment'>
           <ReactPlaceholder
+            showLoadingAnimation
             ready={this.state.ready}
             type='media'
             rows={this.state.mediaBlockRows}
-            color='#F0F0F0'
             className='my-text-block'
           >
             {realComponent}
@@ -110,7 +112,7 @@ class Example extends React.Component {
           <ReactPlaceholder
             ready={this.state.ready}
             type='textRow'
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-row'
           >
             {realComponent}
@@ -122,7 +124,7 @@ class Example extends React.Component {
           <ReactPlaceholder
             ready={this.state.ready}
             type='rect'
-            color='#F0F0F0'
+            color='#E0E0E0'
             style={{ width: 50, height: 50 }}
             className='my-rect'
           >
@@ -135,7 +137,7 @@ class Example extends React.Component {
           <ReactPlaceholder
             ready={this.state.ready}
             type='round'
-            color='#F0F0F0'
+            color='#E0E0E0'
             style={{ width: 50, height: 50 }}
             className='my-round'
           >
@@ -165,7 +167,7 @@ class Example extends React.Component {
           <ReactPlaceholder
             ready={this.state.readyFirstLaunch}
             rows={4}
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-block'
             firstLaunchOnly
           >
@@ -178,31 +180,31 @@ class Example extends React.Component {
         <p>TextBlock</p>
         <div className='ui segment'>
           <TextBlock
-            color='#F0F0F0'
+            color='#E0E0E0'
             rows={4}
             className='my-text-row'
           />
         </div>
         <p>MediaBlock</p>
         <div className='ui segment'>
           <MediaBlock
-            color='#F0F0F0'
+            color='#E0E0E0'
             rows={4}
             className='my-text-row'
           />
         </div>
         <p>TextRow</p>
         <div className='ui segment'>
           <TextRow
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-row'
           />
         </div>
 
         <p>RectShape</p>
         <div className='ui segment'>
           <RectShape
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-row'
             style={{ width: 50, height: 50 }}
           />
@@ -211,7 +213,7 @@ class Example extends React.Component {
         <p>RoundShape</p>
         <div className='ui segment'>
           <RoundShape
-            color='#F0F0F0'
+            color='#E0E0E0'
             className='my-text-row'
             style={{ width: 50, height: 50 }}
           />

diff --git a/examples/index.html b/examples/index.html
@@ -5,6 +5,13 @@
     <!-- <link rel='stylesheet' href='style.css'> -->
     <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.js'></script> -->
+
+      <link
+        rel="stylesheet"
+        href="style.47d3187b90130d6ea73c.min.css"
+        media="all"
+      />
+
   </head>
   <body>
     <div id='container'/>

diff --git a/examples/webpack.base.babel.js b/examples/webpack.base.babel.js
@@ -1,4 +1,6 @@
 import path from 'path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
 
 export const paths = {
   SRC: path.resolve(__dirname, '../src'),
@@ -12,13 +14,32 @@ export default {
     filename: 'bundle.js'
   },
 
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'examples/index.html',
+      inject: false,
+      gzip: '',
+      buildPath: ''
+    }),
+    new ExtractTextPlugin('style', 'style.[hash].min.css')
+  ],
+
   module: {
     loaders: [
       {
         test: /\.jsx?$/,
         loader: 'babel',
         include: [paths.SRC, paths.EXAMPLES],
         exclude: /node_modules/
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style', 'css')
+      },
+      // SASS
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
       }
     ],
     preLoaders: [

diff --git a/examples/webpack.config.babel.js b/examples/webpack.config.babel.js
@@ -22,5 +22,5 @@ export default {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('development')
     })
-  ]
+  ].concat(webpackBase.plugins)
 };
diff --git a/examples/webpack.config.build.babel.js b/examples/webpack.config.build.babel.js
@@ -15,6 +15,6 @@ export default {
         warnings: false
       }
     })
-  ]
+  ].concat(webpackBase.plugins)
 
 };
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "lib",
   "scripts": {
     "test": "jest",
-    "build": "rm -rf lib && mkdir lib && babel src -d lib && rsync -a --include '*/' --include '*.d.ts' --exclude '*' src/ lib/",
+    "build": "rm -rf lib && mkdir lib && node-sass src --importer -o lib && babel src -d lib && rsync -a --include '*/' --include '*.d.ts' --exclude '*' src/ lib/",
     "lint": "scriptoni lint src examples/examples.js",
     "lint-fix": "scriptoni lint src examples/examples.js --fix",
     "preversion": "npm run lint && npm run test && npm run build-examples",
@@ -47,14 +47,20 @@
     "babel-jest": "^19.0.0",
     "babel-loader": "^6.4.1",
     "babel-preset-buildo": "^0.1.1",
+    "css-loader": "^0.28.3",
     "enzyme": "^2.7.1",
     "eslint-loader": "^1.7.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.28.0",
     "jest": "^19.0.2",
+    "node-sass": "4.5.2",
     "react": "^15",
     "react-addons-test-utils": "^15.4.2",
     "react-dom": "^15",
+    "sass-loader": "^4.1.1",
     "scriptoni": "^0.4.4",
     "smooth-release": "^8.0.0",
+    "style-loader": "^0.17.0",
     "webpack": "^1",
     "webpack-dev-server": "^1"
   },

diff --git a/src/ReactPlaceholder.js b/src/ReactPlaceholder.js
@@ -14,6 +14,7 @@ export default class ReactPlaceholder extends React.Component {
     type: PropTypes.oneOf(['text', 'media', 'textRow', 'rect', 'round']),
     rows: PropTypes.number,
     color: PropTypes.string,
+    showLoadingAnimation: PropTypes.bool,
     customPlaceholder: PropTypes.oneOfType([
       PropTypes.node,
       PropTypes.element
@@ -34,16 +35,22 @@ export default class ReactPlaceholder extends React.Component {
   )
 
   getFiller = () => {
-    // eslint-disable-next-line no-unused-vars
-    const { type, customPlaceholder, children, ready, firstLaunchOnly, ...rest } = this.props;
+    const {
+      firstLaunchOnly, children, ready, className, // eslint-disable-line no-unused-vars
+      type, customPlaceholder, showLoadingAnimation, ...rest
+    } = this.props;
 
     if (customPlaceholder) {
       return customPlaceholder;
     }
 
+    const classes = showLoadingAnimation ?
+      ['show-loading-animation', className].filter(c => c).join(' ') :
+      className;
+
     const Placeholder = placeholders[type];
 
-    return <Placeholder {...rest} />;
+    return <Placeholder {...rest} className={classes} />;
   };
 
   render() {

diff --git a/src/reactPlaceholder.scss b/src/reactPlaceholder.scss
@@ -0,0 +1,23 @@
+.show-loading-animation {
+  &.react-shape,
+  &.round-shape,
+  &.text-row,
+  .react-shape,
+  .round-shape,
+  .text-row {
+    animation: pulse 1.5s infinite;
+  }
+}
+
+
+@keyframes pulse {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .6;
+  }
+}