ywana-core8 0.0.825 → 0.0.826

package/dist/index.umd.js

@@ -1,14 +1,15 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('moment'), require('moment-range'), require('moment/locale/es'), require('resumablejs'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('deep-equal')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'moment', 'moment-range', 'moment/locale/es', 'resumablejs', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'deep-equal'], factory) :
-    (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, null, global.resumablejs, global.reactNotificationsComponent, null, global.deepEqual));
-})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment$1, momentRange, es, ResumableJS, reactNotificationsComponent, theme_css, equal) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('moment'), require('moment-range'), require('moment/locale/es'), require('resumablejs'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('axios'), require('deep-equal')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'moment', 'moment-range', 'moment/locale/es', 'resumablejs', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'axios', 'deep-equal'], factory) :
+    (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, null, global.resumablejs, global.reactNotificationsComponent, null, global.axios, global.deepEqual));
+})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment$1, momentRange, es, ResumableJS, reactNotificationsComponent, theme_css, axios, equal) {
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment$1);
     var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
+    var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
     var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 
     /**
@@ -3795,7 +3796,7 @@
      * Upload File
      */
 
-    var UploadFile = function UploadFile(_ref) {
+    var UploadFile$1 = function UploadFile(_ref) {
       var file = _ref.file;
       var icon = file.icon,
           name = file.name,
@@ -3831,7 +3832,7 @@
           state: file.uploadState,
           error: file.uploadError
         };
-        return /*#__PURE__*/React__default["default"].createElement(UploadFile, {
+        return /*#__PURE__*/React__default["default"].createElement(UploadFile$1, {
           key: f.name,
           file: f
         });
@@ -5303,6 +5304,145 @@
       return editor(task);
     };
 
+    /*
+     * Upload Form
+     */
+
+    var UploadForm = function UploadForm(props) {
+      var _props$label = props.label,
+          label = _props$label === void 0 ? "Browse" : _props$label,
+          _props$text = props.text,
+          text = _props$text === void 0 ? "Drag and drop here" : _props$text,
+          url = props.url,
+          _props$headers = props.headers,
+          headers = _props$headers === void 0 ? {} : _props$headers,
+          onSuccess = props.onSuccess,
+          onError = props.onError;
+
+      var _useState = React.useState(null),
+          file = _useState[0],
+          setFile = _useState[1];
+
+      var _useState2 = React.useState(0),
+          progress = _useState2[0],
+          setProgress = _useState2[1];
+
+      React.useEffect(function () {
+        if (file) {
+          uploadFile(file);
+        }
+      }, [file]);
+
+      function onDragOver(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+
+      function onDragEnter(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.type === "dragenter" || e.type === "dragover") {
+          console.log("dragenter");
+        } else if (e.type === "dragleave") {
+          console.log("dragleave");
+        }
+      }
+
+      function onFileDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+          var files = e.dataTransfer.files;
+          handleFiles(files);
+        }
+      }
+
+      function handleFiles(files) {
+        var file = files[0];
+        console.log("handleFiles", files, file);
+        setFile(file);
+      }
+
+      function handleFile(e) {
+        var file = e.target.files[0];
+        setFile(file);
+      }
+
+      function uploadFile(file) {
+        var formData = new FormData();
+        formData.append('file', file);
+        var config = {
+          onUploadProgress: function onUploadProgress(progressEvent) {
+            setProgress(Math.round(progressEvent.loaded / progressEvent.total * 100));
+          },
+          headers: _extends({
+            'content-type': 'multipart/form-data'
+          }, headers)
+        };
+        axios__default["default"].post(url, formData, config).then(function (response) {
+          if (onSuccess) onSuccess(response);
+        })["catch"](function (error) {
+          if (onError) onError(error);
+        });
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-form",
+        onDragEnter: onDragEnter,
+        onDragOver: onDragOver,
+        onDrop: onFileDrop
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-area"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-area-text"
+      }, text), /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: "upload"
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "upload-label"
+      }, label)), /*#__PURE__*/React__default["default"].createElement("input", {
+        id: "upload",
+        type: "file",
+        onChange: handleFile
+      })), file ? /*#__PURE__*/React__default["default"].createElement(UploadFile, {
+        name: file.name,
+        progress: progress
+      }) : null);
+    };
+    /**
+     * Upload File
+     */
+
+    var UploadFile = function UploadFile(props) {
+      var name = props.name,
+          _props$progress = props.progress,
+          progress = _props$progress === void 0 ? 0 : _props$progress;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-file"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-file-info"
+      }, /*#__PURE__*/React__default["default"].createElement("label", null, name), /*#__PURE__*/React__default["default"].createElement("span", null, progress, " %")), /*#__PURE__*/React__default["default"].createElement(UploadProgressBar, {
+        progress: progress
+      }));
+    };
+    /**
+     * Upload Progress Bar
+     */
+
+
+    var UploadProgressBar = function UploadProgressBar(props) {
+      var progress = props.progress;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-progress-bar"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "upload-progress-bar-inner",
+        style: {
+          width: progress + "%"
+        }
+      }));
+    };
+
     /**
      * Password Editor
      */
@@ -11652,7 +11792,8 @@
     exports.TreededContentEditor = TreededContentEditor;
     exports.UploadArea = UploadArea;
     exports.UploadDialog = UploadDialog;
-    exports.UploadFile = UploadFile;
+    exports.UploadFile = UploadFile$1;
+    exports.UploadForm = UploadForm;
     exports.UploadIcon = UploadIcon;
     exports.Uploader = Uploader;
     exports.View = View;