@mackin.com/styleguide 7.1.0-beta.3 → 7.1.0

package/index.d.ts

@@ -761,6 +761,10 @@ interface FileUploaderProps {
     maxBytes?: number;
     multiple?: boolean;
     accept?: string;
+    /** Defaults to 'Click or drag and drop files.'*/
+    instructionMessage?: string;
+    /** For additional info below the instructionMessage. */
+    infoMessage?: string | JSX.Element;
 }
 declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
 

package/index.js

@@ -2934,7 +2934,7 @@ const hoverClass = css.css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
@@ -2947,7 +2947,7 @@ const FileUploader = (p) => {
     let filesDisplay = '';
     if (!message) {
         if (!(files === null || files === void 0 ? void 0 : files.length)) {
-            filesDisplay = `Click or drag and drop files.`;
+            filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
         }
         else {
             filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
@@ -3047,6 +3047,7 @@ const FileUploader = (p) => {
             !(files === null || files === void 0 ? void 0 : files.length) && React__default['default'].createElement(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
             React__default['default'].createElement(Text, { align: "center", noPad: true, spacedOut: true },
                 filesDisplay,
+                p.infoMessage && (React__default['default'].createElement("div", null, p.infoMessage)),
                 !!(files === null || files === void 0 ? void 0 : files.length) && (React__default['default'].createElement(Button, { onClick: e => {
                         e.stopPropagation();
                         onFilesChange(undefined);
@@ -3057,13 +3058,13 @@ const FileUploader = (p) => {
                 ".")),
             (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
                 "Max file size exceeded (",
-                getSizeString((_b = p.maxBytes) !== null && _b !== void 0 ? _b : 0),
+                getSizeString((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default['default'].createElement(Button, { className: css.css({
-                width: (_c = p.buttonWidth) !== null && _c !== void 0 ? _c : '10rem',
+                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_d = p.buttonVariant) !== null && _d !== void 0 ? _d : 'primary' }, (_e = p.buttonText) !== null && _e !== void 0 ? _e : 'Upload')),
-        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_f = p.successMessage) !== null && _f !== void 0 ? _f : 'Upload successful.', onClear: () => setMessage(undefined) })),
+            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : 'Upload')),
+        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : 'Upload successful.', onClear: () => setMessage(undefined) })),
         message === 'failure' && (React__default['default'].createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.1.0-beta.3",
+	"version": "7.1.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",