@longline/aqua-ui 1.0.27 → 1.0.28

package/controls/Dropzone/Dropbox.d.ts

@@ -2,6 +2,11 @@ import * as React from 'react';
 interface IProps {
     /** @ignore */
     className?: string;
+    /**
+     * If set, allows a file filter, e.g. `.xls,.xlsx`.
+     * This does _not_ prevent the user to upload another kind of file.
+     */
+    accept?: string;
     onDragover: () => void;
     onDragLeave: () => void;
     onAddFiles: (files: File[]) => void;

package/controls/Dropzone/Dropbox.js

@@ -40,7 +40,7 @@ var DropboxBase = function (props) {
         React.createElement("div", null, (_a = props.message) !== null && _a !== void 0 ? _a : "Drop a file here to upload, or click to select."),
         React.createElement("svg", null,
             React.createElement("use", { xlinkHref: SVG.Other.CloudUpload })),
-        React.createElement("input", { ref: inputElement, type: "file", multiple: true, onChange: handleAddFile })));
+        React.createElement("input", { ref: inputElement, type: "file", accept: props.accept, multiple: true, onChange: handleAddFile })));
 };
 var Dropbox = styled(DropboxBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  width: 100%;\n  text-align: center;\n\n  ", "\n\n  div {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n"], ["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  width: 100%;\n  text-align: center;\n\n  ", "\n\n  div {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n"])), function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.hover && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n  "], ["\n    background: ", ";\n  "])), p.theme.colors.primary[3]); }, function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.hover ? p.theme.colors.primary[1] : p.theme.colors.primary[2]; });
 export { Dropbox };

package/controls/Dropzone/Dropzone.d.ts

@@ -4,6 +4,11 @@ interface IDropzoneProps {
     className?: string;
     /** @ignore */
     children?: React.ReactNode;
+    /**
+     * If set, allows a file filter, e.g. `.xls,.xlsx`.
+     * This does _not_ prevent the user to upload another kind of file.
+     */
+    accept?: string;
     /**
      * Callback to call when files are dropped in the Dropzone. Multiple files can be uploaded at
      * a time.

package/controls/Dropzone/Dropzone.js

@@ -25,6 +25,6 @@ var Dropzone = function (props) {
     var handleDragLeave = function () {
         setHover(false);
     };
-    return (React.createElement(Dropbox, { hover: hover, message: props.message, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
+    return (React.createElement(Dropbox, { hover: hover, message: props.message, accept: props.accept, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
 };
 export { Dropzone };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",