ywana-core8 0.0.953 → 0.0.954
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +250 -228
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +80 -80
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +249 -227
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +253 -231
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/table.js +16 -0
package/dist/index.umd.js
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
(function (global, factory) {
|
2
|
-
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('
|
3
|
-
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', '
|
4
|
-
(global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, null, global.
|
5
|
-
})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment$1, momentRange, es,
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('resumablejs'), require('react-switch'), require('moment'), require('moment-range'), require('moment/locale/es'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('axios'), require('deep-equal')) :
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'resumablejs', 'react-switch', 'moment', 'moment-range', 'moment/locale/es', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'axios', 'deep-equal'], factory) :
|
4
|
+
(global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.resumablejs, global.reactSwitch, global.moment, global.momentRange, null, global.reactNotificationsComponent, null, global.axios, global.deepEqual));
|
5
|
+
})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, moment$1, momentRange, es, reactNotificationsComponent, theme_css, axios, equal) {
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
7
7
|
|
8
8
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
9
|
+
var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
|
9
10
|
var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
|
10
11
|
var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment$1);
|
11
|
-
var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
|
12
12
|
var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
|
13
13
|
var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
|
14
14
|
|
@@ -1673,6 +1673,210 @@
|
|
1673
1673
|
}));
|
1674
1674
|
};
|
1675
1675
|
|
1676
|
+
/**
|
1677
|
+
* Upload Area
|
1678
|
+
*/
|
1679
|
+
var UploadArea = function UploadArea(props) {
|
1680
|
+
var _props$label = props.label,
|
1681
|
+
label = _props$label === void 0 ? 'Add file or drop file here...' : _props$label;
|
1682
|
+
var areaElement = React.useRef();
|
1683
|
+
var _useState = React.useState(false),
|
1684
|
+
drag = _useState[0],
|
1685
|
+
setDrag = _useState[1];
|
1686
|
+
var resumable = props.resumable;
|
1687
|
+
React.useEffect(function () {
|
1688
|
+
if (resumable && areaElement) {
|
1689
|
+
resumable.assignDrop(areaElement.current);
|
1690
|
+
}
|
1691
|
+
}, []);
|
1692
|
+
var onDragOver = function onDragOver() {
|
1693
|
+
setDrag(true);
|
1694
|
+
};
|
1695
|
+
var onDragLeave = function onDragLeave() {
|
1696
|
+
setDrag(false);
|
1697
|
+
};
|
1698
|
+
var dragging = drag === true ? 'drag-over' : '';
|
1699
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
1700
|
+
className: "upload-area6 " + dragging,
|
1701
|
+
onDragOver: onDragOver,
|
1702
|
+
onDragLeave: onDragLeave,
|
1703
|
+
ref: areaElement
|
1704
|
+
}, /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
|
1705
|
+
resumable: resumable
|
1706
|
+
}), /*#__PURE__*/React__default["default"].createElement("label", null, label));
|
1707
|
+
};
|
1708
|
+
|
1709
|
+
/**
|
1710
|
+
* Upload Icon
|
1711
|
+
*/
|
1712
|
+
var UploadIcon = function UploadIcon(_ref) {
|
1713
|
+
var _ref$icon = _ref.icon,
|
1714
|
+
icon = _ref$icon === void 0 ? "folder_open" : _ref$icon,
|
1715
|
+
resumable = _ref.resumable;
|
1716
|
+
var iconElement = React.useRef();
|
1717
|
+
React.useEffect(function () {
|
1718
|
+
if (resumable && iconElement.current) {
|
1719
|
+
resumable.assignBrowse(iconElement.current);
|
1720
|
+
}
|
1721
|
+
}, [iconElement]);
|
1722
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
1723
|
+
className: "upload-icon",
|
1724
|
+
ref: iconElement
|
1725
|
+
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
1726
|
+
icon: icon,
|
1727
|
+
clickable: true
|
1728
|
+
}));
|
1729
|
+
};
|
1730
|
+
|
1731
|
+
var UPLOAD_STATES = {
|
1732
|
+
IDLE: 0,
|
1733
|
+
RUNNING: 1,
|
1734
|
+
SUCCESS: 2,
|
1735
|
+
ERROR: 3,
|
1736
|
+
COMPLETED: 4
|
1737
|
+
};
|
1738
|
+
|
1739
|
+
/**
|
1740
|
+
* Upload File
|
1741
|
+
*/
|
1742
|
+
var UploadFile$1 = function UploadFile(_ref) {
|
1743
|
+
var file = _ref.file;
|
1744
|
+
var icon = file.icon,
|
1745
|
+
name = file.name,
|
1746
|
+
state = file.state,
|
1747
|
+
progress = file.progress,
|
1748
|
+
error = file.error;
|
1749
|
+
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
1750
|
+
className: "upload-file"
|
1751
|
+
}, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
|
1752
|
+
icon: icon
|
1753
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement("label", null, name), state === UPLOAD_STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(LinearProgress, {
|
1754
|
+
progress: progress
|
1755
|
+
}), /*#__PURE__*/React__default["default"].createElement(Icon, {
|
1756
|
+
icon: "close",
|
1757
|
+
clickable: true
|
1758
|
+
})) : '', state === UPLOAD_STATES.SUCCESS ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
1759
|
+
icon: "done"
|
1760
|
+
})) : '', state === UPLOAD_STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
1761
|
+
className: "error"
|
1762
|
+
}, error), /*#__PURE__*/React__default["default"].createElement(Icon, {
|
1763
|
+
icon: "error"
|
1764
|
+
})) : ''));
|
1765
|
+
};
|
1766
|
+
|
1767
|
+
var UploadProgress = function UploadProgress(_ref) {
|
1768
|
+
var _ref$files = _ref.files,
|
1769
|
+
files = _ref$files === void 0 ? [] : _ref$files;
|
1770
|
+
return /*#__PURE__*/React__default["default"].createElement("div", null, files.map(function (file) {
|
1771
|
+
var f = {
|
1772
|
+
icon: "description",
|
1773
|
+
name: file.fileName,
|
1774
|
+
progress: file.progress() * 100,
|
1775
|
+
state: file.uploadState,
|
1776
|
+
error: file.uploadError
|
1777
|
+
};
|
1778
|
+
return /*#__PURE__*/React__default["default"].createElement(UploadFile$1, {
|
1779
|
+
key: f.name,
|
1780
|
+
file: f
|
1781
|
+
});
|
1782
|
+
}));
|
1783
|
+
};
|
1784
|
+
|
1785
|
+
/**
|
1786
|
+
* Uploader
|
1787
|
+
*/
|
1788
|
+
var Uploader = function Uploader(_ref) {
|
1789
|
+
var icon = _ref.icon,
|
1790
|
+
label = _ref.label,
|
1791
|
+
_ref$view = _ref.view,
|
1792
|
+
view = _ref$view === void 0 ? "area" : _ref$view,
|
1793
|
+
target = _ref.target,
|
1794
|
+
accept = _ref.accept,
|
1795
|
+
_ref$simultaneousUplo = _ref.simultaneousUploads,
|
1796
|
+
simultaneousUploads = _ref$simultaneousUplo === void 0 ? 1 : _ref$simultaneousUplo,
|
1797
|
+
className = _ref.className,
|
1798
|
+
onProgress = _ref.onProgress,
|
1799
|
+
onSuccess = _ref.onSuccess,
|
1800
|
+
onError = _ref.onError,
|
1801
|
+
onComplete = _ref.onComplete;
|
1802
|
+
var resumable = React.useMemo(function () {
|
1803
|
+
var config = {
|
1804
|
+
target: target,
|
1805
|
+
chunkSize: 1 * 1024 * 1024,
|
1806
|
+
simultaneousUploads: simultaneousUploads,
|
1807
|
+
testChunks: false,
|
1808
|
+
throttleProgressCallbacks: 1,
|
1809
|
+
fileType: accept
|
1810
|
+
};
|
1811
|
+
var resumable = new ResumableJS__default["default"](config);
|
1812
|
+
resumable.on('fileAdded', onFileAdded);
|
1813
|
+
resumable.on('fileProgress', onFileProgress);
|
1814
|
+
resumable.on('fileSuccess', onFileSuccess);
|
1815
|
+
resumable.on('fileError', onFileError);
|
1816
|
+
resumable.on('complete', onAllComplete);
|
1817
|
+
return resumable;
|
1818
|
+
}, []);
|
1819
|
+
var _useState = React.useState(0),
|
1820
|
+
setProgress = _useState[1];
|
1821
|
+
var _useState2 = React.useState(UPLOAD_STATES.IDLE),
|
1822
|
+
state = _useState2[0],
|
1823
|
+
setState = _useState2[1];
|
1824
|
+
var _useState3 = React.useState([]),
|
1825
|
+
files = _useState3[0],
|
1826
|
+
setFiles = _useState3[1];
|
1827
|
+
function onFileAdded(file) {
|
1828
|
+
files.push(file);
|
1829
|
+
setFiles(files);
|
1830
|
+
setState(UPLOAD_STATES.RUNNING);
|
1831
|
+
resumable.upload();
|
1832
|
+
}
|
1833
|
+
function onFileProgress(file) {
|
1834
|
+
file.uploadState = UPLOAD_STATES.RUNNING;
|
1835
|
+
var progress = file.progress();
|
1836
|
+
setProgress(progress);
|
1837
|
+
if (onProgress) onProgress(files);
|
1838
|
+
}
|
1839
|
+
function onFileSuccess(file, message) {
|
1840
|
+
file.uploadState = UPLOAD_STATES.SUCCESS;
|
1841
|
+
if (onSuccess) onSuccess(file, message);
|
1842
|
+
}
|
1843
|
+
function onFileError(file, message) {
|
1844
|
+
file.uploadState = UPLOAD_STATES.ERROR;
|
1845
|
+
file.uploadError = message;
|
1846
|
+
if (onError) onError(file, message);
|
1847
|
+
}
|
1848
|
+
function onAllComplete() {
|
1849
|
+
setState(UPLOAD_STATES.COMPLETED);
|
1850
|
+
if (onComplete) onComplete(files);
|
1851
|
+
}
|
1852
|
+
function renderView() {
|
1853
|
+
switch (view) {
|
1854
|
+
case "area":
|
1855
|
+
return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
|
1856
|
+
resumable: resumable,
|
1857
|
+
icon: icon,
|
1858
|
+
label: label
|
1859
|
+
});
|
1860
|
+
case "icon":
|
1861
|
+
return /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
|
1862
|
+
resumable: resumable,
|
1863
|
+
icon: icon
|
1864
|
+
});
|
1865
|
+
default:
|
1866
|
+
return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
|
1867
|
+
resumable: resumable,
|
1868
|
+
icon: icon,
|
1869
|
+
label: label
|
1870
|
+
});
|
1871
|
+
}
|
1872
|
+
}
|
1873
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
1874
|
+
className: "uploader " + className
|
1875
|
+
}, state === UPLOAD_STATES.IDLE ? renderView() : /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
|
1876
|
+
files: files
|
1877
|
+
}));
|
1878
|
+
};
|
1879
|
+
|
1676
1880
|
var isFunction$1 = function isFunction(value) {
|
1677
1881
|
return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
|
1678
1882
|
};
|
@@ -2056,6 +2260,12 @@
|
|
2056
2260
|
return _onChange(row.id, id, value);
|
2057
2261
|
}
|
2058
2262
|
});
|
2263
|
+
case "Image":
|
2264
|
+
return /*#__PURE__*/React__default["default"].createElement(ImageCellViewer, {
|
2265
|
+
id: id,
|
2266
|
+
value: cell,
|
2267
|
+
uploadURL: column.uploadURL
|
2268
|
+
});
|
2059
2269
|
default:
|
2060
2270
|
return cell;
|
2061
2271
|
}
|
@@ -2106,14 +2316,30 @@
|
|
2106
2316
|
}, render(column.type));
|
2107
2317
|
};
|
2108
2318
|
|
2319
|
+
/**
|
2320
|
+
* Image Cell Viewer
|
2321
|
+
*/
|
2322
|
+
var ImageCellViewer = function ImageCellViewer(_ref7) {
|
2323
|
+
var value = _ref7.value,
|
2324
|
+
uploadURL = _ref7.uploadURL;
|
2325
|
+
var canUpload = uploadURL ? true : false;
|
2326
|
+
return canUpload ? /*#__PURE__*/React__default["default"].createElement(Uploader, {
|
2327
|
+
view: "icon",
|
2328
|
+
icon: "cloud_upload",
|
2329
|
+
target: uploadURL
|
2330
|
+
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
2331
|
+
src: value
|
2332
|
+
});
|
2333
|
+
};
|
2334
|
+
|
2109
2335
|
/**
|
2110
2336
|
* Entity Cell Viewer
|
2111
2337
|
* @param {*} param0
|
2112
2338
|
* @returns
|
2113
2339
|
*/
|
2114
|
-
var EntityCellViewer = function EntityCellViewer(
|
2115
|
-
var item =
|
2116
|
-
value =
|
2340
|
+
var EntityCellViewer = function EntityCellViewer(_ref8) {
|
2341
|
+
var item = _ref8.item,
|
2342
|
+
value = _ref8.value;
|
2117
2343
|
var fields = Object.values(item).filter(function (field) {
|
2118
2344
|
return field.column === true;
|
2119
2345
|
});
|
@@ -2178,9 +2404,9 @@
|
|
2178
2404
|
/**
|
2179
2405
|
* Boolean Cell Viewer
|
2180
2406
|
*/
|
2181
|
-
var BooleanCellViewer = function BooleanCellViewer(
|
2182
|
-
var
|
2183
|
-
value =
|
2407
|
+
var BooleanCellViewer = function BooleanCellViewer(_ref9) {
|
2408
|
+
var _ref9$value = _ref9.value,
|
2409
|
+
value = _ref9$value === void 0 ? false : _ref9$value;
|
2184
2410
|
var icon = value === true ? "check_box" : "check_box_outline_blank";
|
2185
2411
|
return /*#__PURE__*/React__default["default"].createElement(Icon, {
|
2186
2412
|
icon: icon
|
@@ -2190,10 +2416,10 @@
|
|
2190
2416
|
/**
|
2191
2417
|
* NumberCellViewer
|
2192
2418
|
*/
|
2193
|
-
var NumberCellViewer = function NumberCellViewer(
|
2194
|
-
var value =
|
2195
|
-
format =
|
2196
|
-
maxDecimals =
|
2419
|
+
var NumberCellViewer = function NumberCellViewer(_ref10) {
|
2420
|
+
var value = _ref10.value,
|
2421
|
+
format = _ref10.format,
|
2422
|
+
maxDecimals = _ref10.maxDecimals;
|
2197
2423
|
/*
|
2198
2424
|
function formatNumber(number) {
|
2199
2425
|
// convert number to numeric
|
@@ -2263,12 +2489,12 @@
|
|
2263
2489
|
/**
|
2264
2490
|
* String Cell Viewer
|
2265
2491
|
*/
|
2266
|
-
var StringCellViewer = function StringCellViewer(
|
2267
|
-
var id =
|
2268
|
-
value =
|
2269
|
-
format =
|
2270
|
-
options =
|
2271
|
-
action =
|
2492
|
+
var StringCellViewer = function StringCellViewer(_ref11) {
|
2493
|
+
var id = _ref11.id,
|
2494
|
+
value = _ref11.value,
|
2495
|
+
format = _ref11.format,
|
2496
|
+
options = _ref11.options,
|
2497
|
+
action = _ref11.action;
|
2272
2498
|
function buildOptions() {
|
2273
2499
|
var opts = typeof options === 'function' ? options() : options;
|
2274
2500
|
return opts;
|
@@ -2338,12 +2564,12 @@
|
|
2338
2564
|
/**
|
2339
2565
|
* String Cell Editor
|
2340
2566
|
*/
|
2341
|
-
var StringCellEditor = function StringCellEditor(
|
2342
|
-
var id =
|
2343
|
-
|
2344
|
-
value =
|
2345
|
-
options =
|
2346
|
-
onChange =
|
2567
|
+
var StringCellEditor = function StringCellEditor(_ref12) {
|
2568
|
+
var id = _ref12.id,
|
2569
|
+
_ref12$value = _ref12.value,
|
2570
|
+
value = _ref12$value === void 0 ? '' : _ref12$value,
|
2571
|
+
options = _ref12.options,
|
2572
|
+
onChange = _ref12.onChange;
|
2347
2573
|
function change(id, value) {
|
2348
2574
|
if (onChange) onChange(id, value);
|
2349
2575
|
}
|
@@ -3893,210 +4119,6 @@
|
|
3893
4119
|
}, title);
|
3894
4120
|
};
|
3895
4121
|
|
3896
|
-
/**
|
3897
|
-
* Upload Area
|
3898
|
-
*/
|
3899
|
-
var UploadArea = function UploadArea(props) {
|
3900
|
-
var _props$label = props.label,
|
3901
|
-
label = _props$label === void 0 ? 'Add file or drop file here...' : _props$label;
|
3902
|
-
var areaElement = React.useRef();
|
3903
|
-
var _useState = React.useState(false),
|
3904
|
-
drag = _useState[0],
|
3905
|
-
setDrag = _useState[1];
|
3906
|
-
var resumable = props.resumable;
|
3907
|
-
React.useEffect(function () {
|
3908
|
-
if (resumable && areaElement) {
|
3909
|
-
resumable.assignDrop(areaElement.current);
|
3910
|
-
}
|
3911
|
-
}, []);
|
3912
|
-
var onDragOver = function onDragOver() {
|
3913
|
-
setDrag(true);
|
3914
|
-
};
|
3915
|
-
var onDragLeave = function onDragLeave() {
|
3916
|
-
setDrag(false);
|
3917
|
-
};
|
3918
|
-
var dragging = drag === true ? 'drag-over' : '';
|
3919
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
3920
|
-
className: "upload-area6 " + dragging,
|
3921
|
-
onDragOver: onDragOver,
|
3922
|
-
onDragLeave: onDragLeave,
|
3923
|
-
ref: areaElement
|
3924
|
-
}, /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
|
3925
|
-
resumable: resumable
|
3926
|
-
}), /*#__PURE__*/React__default["default"].createElement("label", null, label));
|
3927
|
-
};
|
3928
|
-
|
3929
|
-
/**
|
3930
|
-
* Upload Icon
|
3931
|
-
*/
|
3932
|
-
var UploadIcon = function UploadIcon(_ref) {
|
3933
|
-
var _ref$icon = _ref.icon,
|
3934
|
-
icon = _ref$icon === void 0 ? "folder_open" : _ref$icon,
|
3935
|
-
resumable = _ref.resumable;
|
3936
|
-
var iconElement = React.useRef();
|
3937
|
-
React.useEffect(function () {
|
3938
|
-
if (resumable && iconElement.current) {
|
3939
|
-
resumable.assignBrowse(iconElement.current);
|
3940
|
-
}
|
3941
|
-
}, [iconElement]);
|
3942
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
3943
|
-
className: "upload-icon",
|
3944
|
-
ref: iconElement
|
3945
|
-
}, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
3946
|
-
icon: icon,
|
3947
|
-
clickable: true
|
3948
|
-
}));
|
3949
|
-
};
|
3950
|
-
|
3951
|
-
var UPLOAD_STATES = {
|
3952
|
-
IDLE: 0,
|
3953
|
-
RUNNING: 1,
|
3954
|
-
SUCCESS: 2,
|
3955
|
-
ERROR: 3,
|
3956
|
-
COMPLETED: 4
|
3957
|
-
};
|
3958
|
-
|
3959
|
-
/**
|
3960
|
-
* Upload File
|
3961
|
-
*/
|
3962
|
-
var UploadFile$1 = function UploadFile(_ref) {
|
3963
|
-
var file = _ref.file;
|
3964
|
-
var icon = file.icon,
|
3965
|
-
name = file.name,
|
3966
|
-
state = file.state,
|
3967
|
-
progress = file.progress,
|
3968
|
-
error = file.error;
|
3969
|
-
return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
3970
|
-
className: "upload-file"
|
3971
|
-
}, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
|
3972
|
-
icon: icon
|
3973
|
-
}) : null, /*#__PURE__*/React__default["default"].createElement("label", null, name), state === UPLOAD_STATES.RUNNING ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(LinearProgress, {
|
3974
|
-
progress: progress
|
3975
|
-
}), /*#__PURE__*/React__default["default"].createElement(Icon, {
|
3976
|
-
icon: "close",
|
3977
|
-
clickable: true
|
3978
|
-
})) : '', state === UPLOAD_STATES.SUCCESS ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
|
3979
|
-
icon: "done"
|
3980
|
-
})) : '', state === UPLOAD_STATES.ERROR ? /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
|
3981
|
-
className: "error"
|
3982
|
-
}, error), /*#__PURE__*/React__default["default"].createElement(Icon, {
|
3983
|
-
icon: "error"
|
3984
|
-
})) : ''));
|
3985
|
-
};
|
3986
|
-
|
3987
|
-
var UploadProgress = function UploadProgress(_ref) {
|
3988
|
-
var _ref$files = _ref.files,
|
3989
|
-
files = _ref$files === void 0 ? [] : _ref$files;
|
3990
|
-
return /*#__PURE__*/React__default["default"].createElement("div", null, files.map(function (file) {
|
3991
|
-
var f = {
|
3992
|
-
icon: "description",
|
3993
|
-
name: file.fileName,
|
3994
|
-
progress: file.progress() * 100,
|
3995
|
-
state: file.uploadState,
|
3996
|
-
error: file.uploadError
|
3997
|
-
};
|
3998
|
-
return /*#__PURE__*/React__default["default"].createElement(UploadFile$1, {
|
3999
|
-
key: f.name,
|
4000
|
-
file: f
|
4001
|
-
});
|
4002
|
-
}));
|
4003
|
-
};
|
4004
|
-
|
4005
|
-
/**
|
4006
|
-
* Uploader
|
4007
|
-
*/
|
4008
|
-
var Uploader = function Uploader(_ref) {
|
4009
|
-
var icon = _ref.icon,
|
4010
|
-
label = _ref.label,
|
4011
|
-
_ref$view = _ref.view,
|
4012
|
-
view = _ref$view === void 0 ? "area" : _ref$view,
|
4013
|
-
target = _ref.target,
|
4014
|
-
accept = _ref.accept,
|
4015
|
-
_ref$simultaneousUplo = _ref.simultaneousUploads,
|
4016
|
-
simultaneousUploads = _ref$simultaneousUplo === void 0 ? 1 : _ref$simultaneousUplo,
|
4017
|
-
className = _ref.className,
|
4018
|
-
onProgress = _ref.onProgress,
|
4019
|
-
onSuccess = _ref.onSuccess,
|
4020
|
-
onError = _ref.onError,
|
4021
|
-
onComplete = _ref.onComplete;
|
4022
|
-
var resumable = React.useMemo(function () {
|
4023
|
-
var config = {
|
4024
|
-
target: target,
|
4025
|
-
chunkSize: 1 * 1024 * 1024,
|
4026
|
-
simultaneousUploads: simultaneousUploads,
|
4027
|
-
testChunks: false,
|
4028
|
-
throttleProgressCallbacks: 1,
|
4029
|
-
fileType: accept
|
4030
|
-
};
|
4031
|
-
var resumable = new ResumableJS__default["default"](config);
|
4032
|
-
resumable.on('fileAdded', onFileAdded);
|
4033
|
-
resumable.on('fileProgress', onFileProgress);
|
4034
|
-
resumable.on('fileSuccess', onFileSuccess);
|
4035
|
-
resumable.on('fileError', onFileError);
|
4036
|
-
resumable.on('complete', onAllComplete);
|
4037
|
-
return resumable;
|
4038
|
-
}, []);
|
4039
|
-
var _useState = React.useState(0),
|
4040
|
-
setProgress = _useState[1];
|
4041
|
-
var _useState2 = React.useState(UPLOAD_STATES.IDLE),
|
4042
|
-
state = _useState2[0],
|
4043
|
-
setState = _useState2[1];
|
4044
|
-
var _useState3 = React.useState([]),
|
4045
|
-
files = _useState3[0],
|
4046
|
-
setFiles = _useState3[1];
|
4047
|
-
function onFileAdded(file) {
|
4048
|
-
files.push(file);
|
4049
|
-
setFiles(files);
|
4050
|
-
setState(UPLOAD_STATES.RUNNING);
|
4051
|
-
resumable.upload();
|
4052
|
-
}
|
4053
|
-
function onFileProgress(file) {
|
4054
|
-
file.uploadState = UPLOAD_STATES.RUNNING;
|
4055
|
-
var progress = file.progress();
|
4056
|
-
setProgress(progress);
|
4057
|
-
if (onProgress) onProgress(files);
|
4058
|
-
}
|
4059
|
-
function onFileSuccess(file, message) {
|
4060
|
-
file.uploadState = UPLOAD_STATES.SUCCESS;
|
4061
|
-
if (onSuccess) onSuccess(file, message);
|
4062
|
-
}
|
4063
|
-
function onFileError(file, message) {
|
4064
|
-
file.uploadState = UPLOAD_STATES.ERROR;
|
4065
|
-
file.uploadError = message;
|
4066
|
-
if (onError) onError(file, message);
|
4067
|
-
}
|
4068
|
-
function onAllComplete() {
|
4069
|
-
setState(UPLOAD_STATES.COMPLETED);
|
4070
|
-
if (onComplete) onComplete(files);
|
4071
|
-
}
|
4072
|
-
function renderView() {
|
4073
|
-
switch (view) {
|
4074
|
-
case "area":
|
4075
|
-
return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
|
4076
|
-
resumable: resumable,
|
4077
|
-
icon: icon,
|
4078
|
-
label: label
|
4079
|
-
});
|
4080
|
-
case "icon":
|
4081
|
-
return /*#__PURE__*/React__default["default"].createElement(UploadIcon, {
|
4082
|
-
resumable: resumable,
|
4083
|
-
icon: icon
|
4084
|
-
});
|
4085
|
-
default:
|
4086
|
-
return /*#__PURE__*/React__default["default"].createElement(UploadArea, {
|
4087
|
-
resumable: resumable,
|
4088
|
-
icon: icon,
|
4089
|
-
label: label
|
4090
|
-
});
|
4091
|
-
}
|
4092
|
-
}
|
4093
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
4094
|
-
className: "uploader " + className
|
4095
|
-
}, state === UPLOAD_STATES.IDLE ? renderView() : /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
|
4096
|
-
files: files
|
4097
|
-
}));
|
4098
|
-
};
|
4099
|
-
|
4100
4122
|
/**
|
4101
4123
|
* Page Context
|
4102
4124
|
*/
|