file uploader and loader

Author: vietnogi

.travis.yml

@@ -15,6 +15,6 @@ deploy:
 env:
   global:
   # NPM_EMAIL
-  - secure: "XVgfIy4vm0kOX+saefkpE98aHSzvSk0S9OydHC2/TfNnnfJfrdySOPyuVhfgtap/pKd9R2VtofSCIAy1bRNeE3wsFOpXNv/V/wQQ40cyJGQRL6uCJDkc7yvYnhCh5ZD6Jh2kJzB2FcT8V18+u12Azftbxz+SM0/wk4tgw5akRtUGVEZ01PaivY4VIESJ2qBJZiXeKfMCtCDi/a3OnUMUA6b8tbP+n35zl6JZGJtJhwcYqliyxzgnIR5bCDqPcab32cHsdcb7E8+Q/Co8vYc2ZVI6aQ/Oe+Cd2ON+WyTHZoWfKlKnXuYJ3DUnUxaDRTgfz+AdFZHwvlwfuDLexoTOS5Lps/aNh5/4kt7LwJyj3N4kxW/XgoZzJvn6foIYCqd6RnvTp05PVTUWiLKQwiMN9QxTLPhVv0RBqo+N9sDflq4eORv9WlsRF3XawZIr8GSqLiu7WM8w9wzdn66V94j4qO+gHQH/U3ck4z4Bie+QeDeOc8oYckbH5PaUcoRc3vEnGy9YKMwZ0RwJKZHXLE+g4xbDzJfhovC6835Hb6Sj81muSz4E8WVAsnyEtLs+JaWHA90qpfwsNB11aZHB7YO0HrHnMKA9P1F6A8eRagj6Ynhbl5Ko4Agtz0bqHVhyWi9bcF1V8WneuJSreC9naoWVvLYoyKc4UY/Qt7j7mdynm7w="
+  - secure: "kmo0afPY5HwJ5SryNY0XRRRekxd1teBR6lSiw2jtjU64sOdpjN7ZhGWy9q0lReGk6hloPfXewXRlpCbcDRFoxvJUdAbQoAN8gq/BxrwGmWlBepgUew1O6WLkpvqXCMe6lUmPEznjil2anjLHfm/cKiqwaY1n8MI+PSna6eNwAlffx72uPL1TzrijJjb7kKqTtjTHZzNiiUn2jZrc35G+MeryZmnd5xXV7cXgYb+flEMC5sDqhcO2aewYiCGMK2b3f7QDJFbGD4+v+HjN1XispJgCxDLTRLJ0HD8HPj87w/7s7PHqCuRUwga1Z2HTRDniqM7mb7TZ5RK990Olp4d1Fw/ApXhUEe4fwgTdN9PSwOzOrY4VGNyytYvJuMVqSVGIHx6Y2BuCt3gzPeM0ev8bjhE9PItYmDTr5FhNI1XLT7PKu+Ktp72bmdEVqNfnv7jXRKba9AeSBQVk70jKMpYAuGI/d/xXeaD2vImBhCflc0UArYfXf+JYMEwzhiMZQfq6csvg0UV/nlD9xidgBLt8QUGdFaQTjsQLt9CWbwcKM7/yFcfkOKEHrM5By1Do4gtSDxmK5F+81210YMO30OVwllHk/f+jOspti9EJv6r0vAZOkKXXL15VsyKQSrF/p6k+brVf0cQcnUMiSiNsl/aEftNW2ys5VCIRJcEol5bHt90="
   # NPM_API_KEY
-  - secure: "S9r5O41PS0+95/N5CTr8Euf5GISLmE8E6Rn9UWhuigjfuiquU3D7MWtl+v3Nyog7HH4k7wP13yg7UtmXekB9T5axSg3ViXiFAedGH7breS0nl0CCUCFCJdNiBDxiMTCDpI2C0KWKvTFdU1aCXJfRhVfDQE1kjJksdQ1BQvr0rLF5OIjh0JgRl6lmR9gMI3kY9hB/m6DRbvjonVe5T9yoWGKWPDODdkLT3GXW7hAQABluX01ARodHwvo5t/5dfIVjm3A2TKt7UHpR33ZM18zZ6qaJKsHosoWZ7JxuN4FrUvfxC4G/bXQML4a8MG566qV2Jr8cl6CYWY9sVyFWwgncbJdJEsYXongr6Mm41wREX0efXh0Fy9rDSGmXxVJSqY33MyYXGNQHzQ38V+dNascQ2V4Sk++3kfGGcDQ5s3yQpFdYXTORBra+O/eYwP8midJlLSJLD+vmrzTg/NWiFJeCvr0mqOMuQ+1Rwyf7xx6Qa2vhq8Bb8qEZgoPlefgHl5ivUzHT7JFiCcuigyeAGuOdR8Rdi6CEvmRpEy8KDvc/VtdBEXRCx2MZ/SGT4Q0h3Q4bdbeFDaXz8slLqt9uKhzHI5e+1CU5csHwpzkXrnsX/JZWYZtCT+3QopMwZYuDUNYF0hIJNCps6NCODrU2MulokcbTxUDMSkA8GQlNriGgF/0="
+  - secure: "OoRE9rbEzfAomE1h+PRDHJb0SgcyManma54qs72nwlBA3N4D+hV2Swy0xAidnVqdNvBlA4p9QmcrE0km+ZGVacFEhvleUGFDn5weWde2bukzkkdHtbaYQjyhxbrqfLA9G9vzs1BlHjhrR7Arl2TQuT21XnfagFBQ/LCgCRRu9yHHkZ4TejhuYu/9Fgdq08wnBpLZn7wllUq0OtrDgEgjK7avZ+yv5ob6zccxr3NAAchbdPJ2yUo82VvD+YdQaWbLq9ac5cwa0I6f/RuQUiZcLZItk/H3NuQqg32746QdwIqKpw5dh9wzddbckIK3WVsoJmE+7WpGAOgUU/TxmPijH6j1YwQ9uqcBGsax8RUFR+mG7imlS4YpL67K438JPUG7NCPgnN19zN/c+4WkVoKlLYEncyPp0C3sBbmauR0uuuVBWWUJL/1xBCuPyhT9JGXaocms/Ldshxr+TYf1tfQQ3uzs6wO3cniw3wIgXbgMF6NBwQdQpgUlSh++XJKgIG2I228GI3qMq8zJu/N/1oEKVkKkO8Z9Y3Vd5uo2VMbkp0KJJEfXnE8GZBBaajD+F8jONRQqYEDhK8EMYuqKhsQZMw3RgPtvOZNG+bhcnbElNnMjhd8CTKioKXAslkTP6Esi4Ce2PS6YR4CskjZaO7IT9KRqHvVZN42vlIVbhb2J0RI="

README.md

@@ -5,7 +5,7 @@
 ## Install
 
 ```shell
-npm install appirio-tech-file-uploader
+npm install appirio-tech-react-components
 ```
 
 ## Developing

components/FileUploader/FileUploader.cjsx

@@ -5,7 +5,7 @@ require './FileUploaderStyles'
 React                  = require 'react'
 UploadedFilesContainer = require '../UploadedFiles/UploadedFilesContainer'
 Dropzone               = require 'react-dropzone'
-Loader                 = require 'appirio-tech-ng-ui-components/components/Loader/Loader.cjsx'
+Loader                 = require '../Loader/Loader.cjsx'
 
 FileUploader = ({ multiple, onChange, loading}) ->
   <div className="FileUploader">

components/FileUploader/FileUploaderExamples.cjsx

@@ -9,9 +9,9 @@ FileUploaderExamples = ->
 
     <FileUploader/>
 
-    <h1>multiple is true</h1>
+    <h1>loading is true</h1>
 
-    <FileUploader multiple={true} id={'123'} assetType={'work'} category={'development'}/>
+    <FileUploader loading={true} id={'123'} assetType={'work'} category={'development'}/>
   </div>
 
 module.exports = FileUploaderExamples

components/Loader/Loader.cjsx

@@ -0,0 +1,14 @@
+'use strict'
+
+require './LoaderStyle.scss'
+
+React = require 'react'
+
+Loader = ->
+  <div className="Loader">
+    <div className="container">
+      <div className="loader"/>
+    </div>
+  </div>
+
+module.exports = Loader

components/Loader/LoaderExamples.cjsx

@@ -0,0 +1,13 @@
+'use strict'
+
+Loader = require './Loader'
+React  = require 'react'
+
+LoaderExamples = ->
+  <div className="LoaderExamples flex column middle center">
+    <h1>Default</h1>
+
+    <Loader />
+  </div>
+
+module.exports = LoaderExamples

components/Loader/LoaderStyle.scss

@@ -0,0 +1,61 @@
+@import "work/work-includes";
+
+.Loader {
+  position       : absolute;
+  display        : flex;
+  top            : 0;
+  left           : 0;
+  width          : 100%;
+  height         : 100%;
+  justify-content: center;
+  align-items    : center;
+
+  .container {
+    padding         : 25px;
+    // background-color: $primary-color;
+    opacity         : .98;
+    border-radius   : 10px;
+  }
+
+  .loader {
+    width: 50px;
+    height: 50px;
+    border-top       : 10px solid $grey-light;
+    border-right     : 10px solid $grey-light;
+    border-bottom    : 10px solid $grey-light;
+    border-left      : 10px solid $grey-lighter ;
+    -webkit-transform: translateZ(0);
+    -ms-transform    : translateZ(0);
+    transform        : translateZ(0);
+    -webkit-animation: load8 .8s infinite linear;
+    animation        : load8 .8s infinite linear;
+  }
+  .loader,
+  .loader:after {
+    border-radius: 50%;
+  }
+
+
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package.json

@@ -15,9 +15,10 @@
     "build": "webpack --config webpack.config.js; cp example/index.html dist/"
   },
   "dependencies": {
-    "appirio-styles": "0.x.x",
-    "appirio-tech-client-app-layer": "0.x.x",
-    "react-dropzone": "3.x.x",
-    "react-redux": "4.x.x"
+    "appirio-styles": "0.0.23",
+    "appirio-tech-api-schemas": "^5.0.69",
+    "classnames": "^2.2.3",
+    "react-dropzone": "^3.3.2",
+    "react-redux": "^4.2.1"
   }
 }