@threekit-tools/treble 0.0.53 → 0.0.54

package/dist/components/Upload/index.js

@@ -60,31 +60,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Upload = void 0;
 var react_1 = __importStar(require("react"));
-var upload_styles_1 = require("./upload.styles");
 var constants_1 = require("../../constants");
 var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
 var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
 var shared_styles_1 = require("../shared.styles");
 var utils_1 = require("../../utils");
+var icons_1 = require("../../icons");
 var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var upload_styles_1 = require("./upload.styles");
 var Upload = function (props) {
     var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
-    var _a = (0, react_1.useState)(false), uploading = _a[0], setUploading = _a[1];
+    var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
+    var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
     var inputRef = (0, react_1.createRef)();
     var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
     var handleClick = function () {
         var _a;
+        if (isUploading)
+            return;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+        var reader;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    setUploading(true);
+                    setIsUploading(true);
                     return [4 /*yield*/, onChange(file)];
                 case 1:
                     _a.sent();
-                    setUploading(false);
+                    setIsUploading(false);
+                    setFilename(file.name);
+                    reader = new FileReader();
+                    reader.onload = function () {
+                        var imgEl = document.getElementById('trbl-upload-img');
+                        if (!imgEl)
+                            return;
+                        // @ts-ignore
+                        imgEl.src = reader.result;
+                    };
+                    reader.readAsDataURL(file);
                     return [2 /*return*/];
             }
         });
@@ -102,11 +117,19 @@ var Upload = function (props) {
                         return [2 /*return*/];
                     });
                 }); } }),
-            react_1.default.createElement("button", { type: "button", onClick: handleClick }, (value === null || value === void 0 ? void 0 : value.length)
-                ? 'Uploaded'
-                : uploading
-                    ? 'Uploading...'
-                    : 'Upload a file'))));
+            react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
+                react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.UploadingWrapper, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("img", { src: "#", id: "trbl-upload-img" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", null, filename),
+                    react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(icons_1.ImageIcon, null)),
+                react_1.default.createElement("div", null, "Click to upload"),
+                react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
 };
 exports.Upload = Upload;
 exports.Upload.componentName = 'upload';

package/dist/components/Upload/upload.styles.d.ts

@@ -3,4 +3,5 @@ interface IUploadWrapper {
     iconOnly?: boolean;
 }
 export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
+export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/components/Upload/upload.styles.js

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadWrapper = void 0;
+exports.UploadingWrapper = exports.UploadWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    height: 40px;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    height: 40px;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), function (props) {
+exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n\n  & button {\n    min-height: 40px;\n    height: max-content;\n    width: ", ";\n    padding: ", ";\n    overflow: hidden;\n    font-family: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: center;\n    background: white;\n    cursor: pointer;\n    border-radius: ", ";\n    border: 1px solid ", ";\n    transition: all 0.16s ease-in-out;\n  }\n\n  .tk-icon {\n    transition: all 0.16s ease-in-out;\n  }\n\n  & button:hover {\n    border: 1px solid ", ";\n    color: ", ";\n\n    .tk-icon {\n      stroke: ", ";\n    }\n  }\n\n  & input[type='file'] {\n    display: none;\n  }\n"])), function (props) {
     return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
-}, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
-var templateObject_1;
+}, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
+exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: max-content max-content;\n  grid-gap: 8px;\n\n  & > div {\n    height: max-content;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  img {\n    height: 72px;\n  }\n"])));
+var templateObject_1, templateObject_2;

package/dist/icons/Spinner.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ISpinnerProps {
+    size?: string;
+}
+declare function Spinner(props: ISpinnerProps): JSX.Element;
+declare namespace Spinner {
+    var iconName: string;
+}
+export default Spinner;

package/dist/icons/Spinner.js

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+function Spinner(props) {
+    return react_1.default.createElement(Wrapper, { size: props.size });
+}
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n    transform: rotate(360deg);\n}\n"], ["\nto {\n    transform: rotate(360deg);\n}\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"], ["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border: 5px solid rgba(0, 0, 0, 0.3);\n  border-radius: 50%;\n  border-top-color: #000;\n  animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, spin);
+Spinner.iconName = 'spinner';
+exports.default = Spinner;
+var templateObject_1, templateObject_2;

package/dist/icons/index.d.ts

@@ -39,11 +39,12 @@ import UndoIcon from './Undo';
 import WishlistIcon from './Wishlist';
 import ZoomInIcon from './ZoomIn';
 import ZoomOutIcon from './ZoomOut';
+import SpinnerIcon from './Spinner';
 export interface IIcon extends React.FC {
     iconName: string;
 }
-export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, };
+export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
 declare const _default: {
-    [x: string]: IIcon;
+    [x: string]: IIcon | typeof SpinnerIcon;
 };
 export default _default;

package/dist/icons/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
+exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
 var Add_1 = __importDefault(require("./Add"));
 exports.AddIcon = Add_1.default;
 var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
@@ -85,6 +85,8 @@ var ZoomIn_1 = __importDefault(require("./ZoomIn"));
 exports.ZoomInIcon = ZoomIn_1.default;
 var ZoomOut_1 = __importDefault(require("./ZoomOut"));
 exports.ZoomOutIcon = ZoomOut_1.default;
+var Spinner_1 = __importDefault(require("./Spinner"));
+exports.SpinnerIcon = Spinner_1.default;
 exports.default = (_a = {},
     _a[Add_1.default.iconName] = Add_1.default,
     _a[ArrowLeft_1.default.iconName] = ArrowLeft_1.default,
@@ -126,4 +128,5 @@ exports.default = (_a = {},
     _a[Wishlist_1.default.iconName] = Wishlist_1.default,
     _a[ZoomIn_1.default.iconName] = ZoomIn_1.default,
     _a[ZoomOut_1.default.iconName] = ZoomOut_1.default,
+    _a[Spinner_1.default.iconName] = Spinner_1.default,
     _a);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [