ywana-core8 0.0.825 → 0.0.826

package/dist/index.modern.js

@@ -7,6 +7,7 @@ import 'moment/locale/es';
 import ResumableJS from 'resumablejs';
 import { ReactNotifications, Store } from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css';
+import axios from 'axios';
 import equal from 'deep-equal';
 
 /**
@@ -3793,7 +3794,7 @@ var UPLOAD_STATES = {
  * Upload File
  */
 
-var UploadFile = function UploadFile(_ref) {
+var UploadFile$1 = function UploadFile(_ref) {
   var file = _ref.file;
   var icon = file.icon,
       name = file.name,
@@ -3829,7 +3830,7 @@ var UploadProgress = function UploadProgress(_ref) {
       state: file.uploadState,
       error: file.uploadError
     };
-    return /*#__PURE__*/React.createElement(UploadFile, {
+    return /*#__PURE__*/React.createElement(UploadFile$1, {
       key: f.name,
       file: f
     });
@@ -5301,6 +5302,145 @@ var TaskInfo = function TaskInfo(props) {
   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 = useState(null),
+      file = _useState[0],
+      setFile = _useState[1];
+
+  var _useState2 = useState(0),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  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.post(url, formData, config).then(function (response) {
+      if (onSuccess) onSuccess(response);
+    })["catch"](function (error) {
+      if (onError) onError(error);
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "upload-form",
+    onDragEnter: onDragEnter,
+    onDragOver: onDragOver,
+    onDrop: onFileDrop
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-area"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-area-text"
+  }, text), /*#__PURE__*/React.createElement("label", {
+    htmlFor: "upload"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "upload-label"
+  }, label)), /*#__PURE__*/React.createElement("input", {
+    id: "upload",
+    type: "file",
+    onChange: handleFile
+  })), file ? /*#__PURE__*/React.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.createElement("div", {
+    className: "upload-file"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-file-info"
+  }, /*#__PURE__*/React.createElement("label", null, name), /*#__PURE__*/React.createElement("span", null, progress, " %")), /*#__PURE__*/React.createElement(UploadProgressBar, {
+    progress: progress
+  }));
+};
+/**
+ * Upload Progress Bar
+ */
+
+
+var UploadProgressBar = function UploadProgressBar(props) {
+  var progress = props.progress;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "upload-progress-bar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "upload-progress-bar-inner",
+    style: {
+      width: progress + "%"
+    }
+  }));
+};
+
 /**
  * Password Editor
  */
@@ -11558,5 +11698,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FilesGrid, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
+export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FilesGrid, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
 //# sourceMappingURL=index.modern.js.map