nzk-react-components 0.2.19-0 → 0.2.19-12

package/dist/_virtual/index.js_commonjs-module

@@ -0,0 +1,4 @@
+var lib = {exports: {}};
+
+export { lib as l };
+//# sourceMappingURL=index.js_commonjs-module.map

package/dist/_virtual/index.js_commonjs-module.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js_commonjs-module","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index2.js_commonjs-module

@@ -0,0 +1,4 @@
+var propTypes = {exports: {}};
+
+export { propTypes as p };
+//# sourceMappingURL=index2.js_commonjs-module.map

package/dist/_virtual/index2.js_commonjs-module.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js_commonjs-module","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index3.js_commonjs-module

@@ -0,0 +1,4 @@
+var reactIs = {exports: {}};
+
+export { reactIs as r };
+//# sourceMappingURL=index3.js_commonjs-module.map

package/dist/_virtual/index3.js_commonjs-module.map

@@ -0,0 +1 @@
+{"version":3,"file":"index3.js_commonjs-module","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/react-is.development.js_commonjs-exports

@@ -0,0 +1,4 @@
+var reactIs_development = {};
+
+export { reactIs_development as __exports };
+//# sourceMappingURL=react-is.development.js_commonjs-exports.map

package/dist/_virtual/react-is.development.js_commonjs-exports.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development.js_commonjs-exports","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/react-is.production.min.js_commonjs-exports

@@ -0,0 +1,4 @@
+var reactIs_production_min = {};
+
+export { reactIs_production_min as __exports };
+//# sourceMappingURL=react-is.production.min.js_commonjs-exports.map

package/dist/_virtual/react-is.production.min.js_commonjs-exports.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min.js_commonjs-exports","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,43 @@
+import React__default, { useMemo } from 'react';
+import { Wrapper, Flag, AvatarImage } from './Avatar.styles.js';
+
+var Avatar = function (props) {
+    var countryCode = useMemo(function () {
+        var _a;
+        return ((_a = props.user) === null || _a === void 0 ? void 0 : _a.countryCode) || props.countryCode;
+    }, [props]);
+    var avatarUrl = useMemo(function () {
+        var _a, _b, _c;
+        var avatarUrl = ((_b = (_a = props.user) === null || _a === void 0 ? void 0 : _a.avatar) === null || _b === void 0 ? void 0 : _b.url) || props.src;
+        if (avatarUrl)
+            return avatarUrl;
+        if (!avatarUrl && ((_c = props.user) === null || _c === void 0 ? void 0 : _c.type) === 'student')
+            return 'https://cdn.nightzookeeper.com/edu-assets/images/empty-avatar.png';
+        return 'https://cdn.nightzookeeper.com/nzk-assets/empty-avatar.png';
+    }, [props]);
+    var flagUrl = useMemo(function () {
+        if (!countryCode)
+            return undefined;
+        return "https://cdn.nightzookeeper.com/edu-assets/images/flags/" + countryCode + ".png";
+    }, [countryCode]);
+    var flagShown = useMemo(function () {
+        if (flagUrl && !props.flagHidden)
+            return true;
+        return false;
+    }, [flagUrl, props]);
+    return React__default.createElement(Wrapper, { size: props.size, colors: props.colors },
+        flagShown && React__default.createElement(Flag, { src: flagUrl }),
+        React__default.createElement(AvatarImage, { src: avatarUrl }));
+};
+Avatar.defaultProps = {
+    size: '60px',
+    flagHidden: false,
+    colors: {
+        border: '#8B26D4',
+        shadow: '#53167E',
+        dropshadow: 'rgba(0,0,0,0.4)'
+    }
+};
+
+export { Avatar as default };
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Avatar/Avatar.styles.js

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from '../../node_modules/tslib/tslib.es6.js';
+import styled from '../../node_modules/styled-components/dist/styled-components.browser.esm.js';
+
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  --border-color: ", ";\n  --shadow-color: ", ";\n  --dropshadow-color: ", ";\n  --size: ", ";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"], ["\n  position: relative;\n  --border-color: ", ";\n  --shadow-color: ", ";\n  --dropshadow-color: ", ";\n  --size: ", ";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"])), function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.border; }, function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.shadow; }, function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.dropshadow; }, function (props) { return props.size; });
+var AvatarImage = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"], ["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"])), function (props) { return props.src; });
+var Flag = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"], ["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"])), function (props) { return props.src; });
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { AvatarImage, Flag, Wrapper };
+//# sourceMappingURL=Avatar.styles.js.map

package/dist/components/Avatar/Avatar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar.js';
+export { default } from './Avatar.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Button/Button.js

@@ -0,0 +1,15 @@
+import { __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { Wrapper } from './Button.styles.js';
+import { SIZES, THEMES } from './constants.js';
+
+var Button = function (props) {
+    return (React__default.createElement(Wrapper, __assign({ height: props.size && SIZES[props.size] }, props, (props.theme ? THEMES[props.theme] : {}), { onClick: function () {
+            if (props.onClick) {
+                props.onClick();
+            }
+        } })));
+};
+
+export { Button as default };
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from '../../node_modules/tslib/tslib.es6.js';
+import { getLuminance, darken as curriedDarken, lighten as curriedLighten } from '../../node_modules/polished/dist/polished.esm.js';
+import styled, { css as Ae } from '../../node_modules/styled-components/dist/styled-components.browser.esm.js';
+import { getSizeComparedToBase, getPadding, getTextSize, getTextColor } from './utils.js';
+
+var getShadows = function (props) {
+    var light = getLuminance(props.backgroundColor);
+    var shadowColor = props.shadowColor
+        || light && curriedDarken(0.2, props.backgroundColor)
+        || !light && curriedLighten(0.2, props.backgroundColor);
+    var dropShadowColor = props.dropShadowColor || "rgba(0,0,0,0.3)";
+    var strokeColor = props.strokeColor
+        || light && curriedLighten(0.1, props.backgroundColor)
+        || !light && curriedDarken(0.1, props.backgroundColor);
+    return Ae(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 ", "px 0 ", ",\n      0 ", "px 0 ", ",\n      inset 0 0px 0px ", "px ", ";\n\n    :active {\n      transform: translateY(", "px);\n      box-shadow: 0 ", "px 0 ", ",\n        inset 0 0px 0px ", "px ", ";\n    }\n  "], ["\n    box-shadow: 0 ", "px 0 ", ",\n      0 ", "px 0 ", ",\n      inset 0 0px 0px ", "px ", ";\n\n    :active {\n      transform: translateY(", "px);\n      box-shadow: 0 ", "px 0 ", ",\n        inset 0 0px 0px ", "px ", ";\n    }\n  "])), getSizeComparedToBase(props, 5), shadowColor, getSizeComparedToBase(props, 12), dropShadowColor, getSizeComparedToBase(props, 5), strokeColor, getSizeComparedToBase(props, 7), getSizeComparedToBase(props, 5), shadowColor, getSizeComparedToBase(props, 5), strokeColor);
+};
+var Wrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Rammetto One';\n  border-radius: 1000px;\n  cursor: pointer;\n  user-select: none;\n  ", ";\n  ", "\n  ", "\n  ", "\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Rammetto One';\n  border-radius: 1000px;\n  cursor: pointer;\n  user-select: none;\n  ", ";\n  ", "\n  ", "\n  ", "\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) { return Ae(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    height: ", "px;\n    margin-bottom: ", "px;\n    color: ", ";\n    font-size: ", ";\n    padding: ", ";\n    ", ";\n    filter: ", ";\n  "], ["\n    background-color: ", ";\n    height: ", "px;\n    margin-bottom: ", "px;\n    color: ", ";\n    font-size: ", ";\n    padding: ", ";\n    ", ";\n    filter: ", ";\n  "])), props.backgroundColor, props.height, getSizeComparedToBase(props, 12), getTextColor(props), getTextSize(props), getPadding(props), getShadows(props), props.disabled ? 'grayscale(100%)' : 'none'); }, function (props) { return props.fullWidth && Ae(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (props) { return props.wiggle && Ae(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: wiggle alternate-reverse 2s linear infinite;\n  animation-delay: ", "s;\n    @keyframes wiggle {\n      0% {\n        transform: rotate(-3deg);\n      }\n      10% {\n        transform: rotate(3deg);\n      }\n      20% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  "], ["\n  animation: wiggle alternate-reverse 2s linear infinite;\n  animation-delay: ", "s;\n    @keyframes wiggle {\n      0% {\n        transform: rotate(-3deg);\n      }\n      10% {\n        transform: rotate(3deg);\n      }\n      20% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  "])), Math.random()); }, function (props) {
+    return props.round && Ae(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", "px;\n      padding: 0;\n      flex-shrink: 0;\n    "], ["\n      width: ", "px;\n      padding: 0;\n      flex-shrink: 0;\n    "])), props.height);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Wrapper, getShadows };
+//# sourceMappingURL=Button.styles.js.map

package/dist/components/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Button/constants.js

@@ -0,0 +1,67 @@
+var THEMES = {
+    primary: {
+        backgroundColor: '#009EE2',
+        color: '#fff',
+        strokeColor: '#00C5ED',
+        shadowColor: '#025899'
+    },
+    confirm: {
+        backgroundColor: '#8CC63F',
+        color: '#fff',
+        strokeColor: '#AFD752',
+        shadowColor: '#579800'
+    },
+    'the-pink': {
+        backgroundColor: '#E40071',
+        color: '',
+        shadowColor: '',
+        strokeColor: ''
+    },
+    'purple': {
+        backgroundColor: '#701EA8',
+        color: '',
+        shadowColor: '#4E1B6D',
+        strokeColor: '#9026C1'
+    },
+    'red': {
+        color: 'white',
+        backgroundColor: '#E20514',
+        strokeColor: '#F60A21',
+        shadowColor: '#931120'
+    },
+    'orange': {
+        color: 'white',
+        backgroundColor: '#F29226',
+        strokeColor: '#F6B230',
+        shadowColor: '#CB6217'
+    },
+    'green': {
+        color: 'white',
+        backgroundColor: '#8DC63F',
+        strokeColor: '#AED752',
+        shadowColor: '#58981F'
+    },
+    'yellow': {
+        color: 'white',
+        backgroundColor: '#FEC532',
+        strokeColor: '#FEE13A',
+        shadowColor: '#C59928'
+    },
+    'white': {
+        color: '',
+        backgroundColor: '#EEEEEE',
+        strokeColor: '#D9D9D9',
+        shadowColor: '#8E9197'
+    }
+};
+var SIZES = {
+    'xx-large': 142,
+    'x-large': 109,
+    large: 71,
+    regular: 50,
+    small: 39,
+    'x-small': 30
+};
+
+export { SIZES, THEMES };
+//# sourceMappingURL=constants.js.map

package/dist/components/Button/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button.js';
+export { default } from './Button.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Button/utils.js

@@ -0,0 +1,25 @@
+import { getLuminance } from '../../node_modules/polished/dist/polished.esm.js';
+
+var getTextColor = function (props) {
+    if (props.color) {
+        return props.color;
+    }
+    if (getLuminance(props.backgroundColor) <= 0.5)
+        return '#fff';
+    return '#000';
+};
+var getTextSize = function (props) {
+    if (props.fontSize) {
+        return props.fontSize;
+    }
+    return props.height / 2.5 + "px";
+};
+var getPadding = function (props) {
+    return 0.001 * props.height + "px " + props.height / 2 + "px";
+};
+var getSizeComparedToBase = function (props, originalValue) {
+    return (props.height * originalValue) / 64;
+};
+
+export { getPadding, getSizeComparedToBase, getTextColor, getTextSize };
+//# sourceMappingURL=utils.js.map

package/dist/components/Button/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingTool.d.ts

@@ -1,8 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     prompt: string;
-    backButton: React.ReactNode;
-    saveButton: React.ReactNode;
+    showHeader: boolean;
+    onBack: () => void;
+    onSave: () => void;
     showPaperBackground?: boolean;
     disableCameraUpload?: boolean;
     disableAutoCache?: boolean;
@@ -13,6 +14,10 @@ export declare type Orientation = 'LANDSCAPE' | 'PORTRAIT';
 declare const Drawing: {
     (props: Props): JSX.Element;
     defaultProps: {
+        prompt: string;
+        showHeader: boolean;
+        onBack: () => void;
+        onSave: () => void;
         showPaperBackground: boolean;
         disableCameraUpload: boolean;
         disableAutoCache: boolean;

package/dist/components/DrawingTool/DrawingTool.js

@@ -0,0 +1,268 @@
+import { __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { getLuminance, darken as curriedDarken, lighten as curriedLighten } from '../../node_modules/polished/dist/polished.esm.js';
+import Moveable from '../../node_modules/react-moveable/dist/moveable.esm.js';
+import MoveableHelper from '../../node_modules/moveable-helper/dist/moveable-helper.esm.js';
+import ReactTooltip from '../../node_modules/react-tooltip/dist/index.es.js';
+import { Container, Tool, LeftToolbarContainer, ButtonGroup, SketchContainer, PaperBackground, ImageToPlaceContainer, ImageToPlace, InSketchActions, InSketchAction, CutImageTutorial, RightToolbarContainer, ModalOverlay } from './DrawingTool.styles.js';
+import useDebounce from '../../hooks/useDebounce.js';
+import useElementSize from '../../hooks/useElementSize.js';
+import Button from '../Button/Button.js';
+import Icon from '../Icon/Icon.js';
+import IconButton from '../IconButton/IconButton.js';
+import ColourToolbar from './components/ColourToolbar/ColourToolbar.js';
+import Modal from '../Modal/Modal.js';
+import { useDrawingTool, BrushSize } from './DrawingToolProvider.js';
+import FileInput from './components/FileInput/FileInput.js';
+import Placeable from './components/Placeable/index.js';
+import OpacityToggle from './components/OpacityToggle/OpacityToggle.js';
+import Header from './components/Header/Header.js';
+
+var Drawing = function (props) {
+    var _a, _b;
+    var containerRef = useRef(null);
+    var sketchOuterRef = useRef(null);
+    var sketchInnerRef = useRef(null);
+    var sketchCutInnerRef = useRef(null);
+    var imageToPlaceContainerRef = useRef(null);
+    var moveableRef = useRef(null);
+    var helper = useState(function () {
+        return new MoveableHelper();
+    })[0];
+    var _c = useElementSize(containerRef), containerWidth = _c.width, containerHeight = _c.height;
+    var debouncedContainerWidth = useDebounce(containerWidth, 1000);
+    var debouncedContainerHeight = useDebounce(containerHeight, 1000);
+    var _d = useState('LANDSCAPE'), orientation = _d[0], setOrientation = _d[1];
+    var _e = useState(1280), maxContainerWidth = _e[0], setMaxContainerWidth = _e[1];
+    var _f = useState(960), maxContainerHeight = _f[0], setMaxContainerHeight = _f[1];
+    var _g = useState(50), buttonSize = _g[0], setButtonSize = _g[1];
+    var _h = useState(false), isMobile = _h[0], setIsMobile = _h[1];
+    var _j = useState(true), resizing = _j[0], setResizing = _j[1];
+    var _k = useState(false), showRestartConfirmModal = _k[0], setShowRestartConfirmModal = _k[1];
+    var _l = useState(props.openUploadPopupOnStart), showFileInput = _l[0], setShowFileInput = _l[1];
+    var _m = useState(), imageToCut = _m[0], setImageToCut = _m[1];
+    var _o = useState(true), showCutTutorial = _o[0], setShowCutTutorial = _o[1];
+    var _p = useState(false), showSaveCutAction = _p[0], setShowSaveCutAction = _p[1];
+    var _q = useState(), imageToPlace = _q[0], setImageToPlace = _q[1];
+    var _r = useDrawingTool(), initSketch = _r.initSketch, initSketchCut = _r.initSketchCut, exportSketchCut = _r.exportSketchCut, currentColour = _r.currentColour, brushSize = _r.brushSize, setBrushSize = _r.setBrushSize, brushType = _r.brushType, setBrushType = _r.setBrushType, undo = _r.undo, redo = _r.redo, restart = _r.restart, setCacheKey = _r.setCacheKey, setAutoCache = _r.setAutoCache, resetCut = _r.resetCut, mergeImage = _r.mergeImage, setToolMode = _r.setToolMode;
+    useEffect(function () {
+        if (typeof props.disableAutoCache === 'boolean') {
+            setAutoCache(!props.disableAutoCache);
+        }
+        if (props.cacheKey)
+            setCacheKey(props.cacheKey);
+    }, []);
+    useLayoutEffect(function () {
+        if (debouncedContainerHeight !== containerHeight || debouncedContainerWidth !== containerWidth) {
+            setResizing(true);
+        }
+        else if (containerWidth > 0 && containerHeight > 0) {
+            setResizing(false);
+            if (containerWidth < 768) {
+                setIsMobile(true);
+            }
+            else {
+                setIsMobile(false);
+            }
+        }
+    }, [debouncedContainerWidth, debouncedContainerHeight, containerWidth, containerHeight]);
+    useLayoutEffect(function () {
+        setMaxContainerHeight(containerWidth * 1.4);
+        setMaxContainerWidth(containerHeight * 1.4);
+        if (containerWidth < containerHeight && containerWidth < 1024) {
+            setButtonSize(Math.floor(containerWidth / 11) * 0.85);
+            setOrientation('PORTRAIT');
+        }
+        else {
+            if (containerHeight < 420) {
+                setButtonSize(Math.floor(containerHeight / 13) * 0.85);
+            }
+            else if (containerHeight < 1024) {
+                setButtonSize(Math.floor(containerHeight / 12) * 0.85);
+            }
+            else {
+                setButtonSize(Math.floor(containerHeight / 11) * 0.85);
+            }
+            setOrientation('LANDSCAPE');
+        }
+    }, [containerWidth, containerHeight]);
+    useEffect(function () {
+        if (!imageToCut && !resizing && sketchInnerRef.current) {
+            initSketch(sketchInnerRef.current);
+        }
+    }, [resizing, sketchInnerRef, imageToCut]);
+    useEffect(function () {
+        if (!resizing && sketchCutInnerRef.current && imageToCut) {
+            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
+                setShowSaveCutAction(true);
+            });
+        }
+    }, [resizing, sketchCutInnerRef, imageToCut]);
+    var onClickRestart = function () {
+        setShowRestartConfirmModal(true);
+    };
+    var onClickCamera = function () {
+        setShowFileInput(true);
+    };
+    var onImageUploaded = function (image) {
+        setShowFileInput(false);
+        setImageToCut(image);
+        setToolMode("CUT");
+    };
+    var strokeBrushColour = getLuminance(currentColour.hex) > 0.05 ? curriedDarken(0.15, currentColour.hex) : curriedLighten(0.1, currentColour.hex);
+    var deselectedButtonColourProps = {
+        theme: 'white'
+    };
+    var selectedButtonColourProps = {
+        backgroundColor: currentColour.hex,
+        strokeColor: strokeBrushColour,
+        dropShadowColor: 'rgba(0,0,0,.3)',
+        shadowColor: 'rgba(0,0,0,.5)'
+    };
+    var eraserBrushColourProps = (brushType === 'eraser' ? selectedButtonColourProps : deselectedButtonColourProps);
+    var fillBrushColourProps = (brushType === 'fill' ? selectedButtonColourProps : deselectedButtonColourProps);
+    var lineBrushColourProps = (brushType === 'line' ? selectedButtonColourProps : deselectedButtonColourProps);
+    var smallLineColourProps = (brushSize === BrushSize.small ? selectedButtonColourProps : deselectedButtonColourProps);
+    var mediumLineColourProps = (brushSize === BrushSize.medium ? selectedButtonColourProps : deselectedButtonColourProps);
+    var largeLineColourProps = (brushSize === BrushSize.large ? selectedButtonColourProps : deselectedButtonColourProps);
+    var sketchStyles;
+    if (!resizing && sketchOuterRef && sketchOuterRef.current) {
+        sketchStyles = {
+            width: sketchOuterRef.current.offsetWidth + "px",
+            height: sketchOuterRef.current.offsetHeight + "px",
+            position: 'absolute',
+            top: '0px',
+            left: '0px'
+        };
+    }
+    var disableToolbars = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
+    var inSketchActions = [];
+    if (showSaveCutAction) {
+        inSketchActions.push({
+            key: 'retry-cut',
+            component: React__default.createElement(IconButton, { icon: React__default.createElement(Icon, { name: "drawing-tool-undo", fill: "white" }), theme: 'orange', size: isMobile ? "small" : "regular", onClick: function () {
+                    setShowSaveCutAction(false);
+                    setShowCutTutorial(true);
+                    resetCut();
+                } }, "Retry")
+        }, {
+            key: 'save-cut',
+            component: React__default.createElement(IconButton, { icon: React__default.createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
+                    setShowSaveCutAction(false);
+                    setImageToCut(undefined);
+                    var newImage = new Image;
+                    newImage.onload = function () {
+                        setImageToPlace(newImage);
+                        setToolMode('PLACE');
+                    };
+                    newImage.src = exportSketchCut();
+                } }, "Save")
+        });
+    }
+    else if (imageToPlace) {
+        inSketchActions.push({
+            key: 'cancel-place',
+            component: React__default.createElement(IconButton, { icon: React__default.createElement(Icon, { name: "close" }), theme: 'red', size: isMobile ? "small" : "regular", onClick: function () {
+                    setImageToPlace(undefined);
+                    setToolMode('DRAW');
+                } }, "Cancel")
+        }, {
+            key: 'save-place',
+            component: React__default.createElement(IconButton, { icon: React__default.createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
+                    if (moveableRef.current) {
+                        var rect = moveableRef.current.getRect();
+                        mergeImage({
+                            image: imageToPlace,
+                            x: rect.left,
+                            y: rect.top,
+                            origin: rect.origin,
+                            width: Math.hypot(rect.pos2[0] - rect.pos1[0], rect.pos2[1] - rect.pos1[1]),
+                            height: Math.hypot(rect.pos3[0] - rect.pos2[0], rect.pos3[1] - rect.pos2[1]),
+                            rotation: rect.rotation
+                        });
+                        setToolMode('DRAW');
+                        setImageToPlace(undefined);
+                    }
+                } }, "Save")
+        });
+    }
+    var headerHeight = 90;
+    if (containerHeight < 800 || containerWidth < 728)
+        headerHeight = 70;
+    if (containerHeight < 500 || containerWidth < 500)
+        headerHeight = 50;
+    return React__default.createElement(Container, { ref: containerRef, maxWidth: maxContainerWidth, maxHeight: maxContainerHeight },
+        props.showHeader && React__default.createElement(Header, { height: headerHeight, prompt: props.prompt, onBack: props.onBack, onSave: props.onSave }),
+        React__default.createElement(Tool, { hasHeader: props.showHeader, headerHeight: headerHeight, orientation: orientation },
+            React__default.createElement(ReactTooltip, { effect: "solid", delayShow: 750, multiline: true }),
+            React__default.createElement(LeftToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
+                React__default.createElement(ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
+                    React__default.createElement(Button, { "data-tip": "Start again?", height: buttonSize, round: true, theme: 'red', onClick: onClickRestart },
+                        React__default.createElement(Icon, { name: 'trash-white' }))),
+                React__default.createElement(ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
+                    React__default.createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: undo },
+                        React__default.createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-undo' })),
+                    React__default.createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: redo },
+                        React__default.createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-redo' }))),
+                !props.disableCameraUpload && React__default.createElement(ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
+                    React__default.createElement(Button, { "data-tip": "Upload a drawing", height: buttonSize, round: true, theme: 'purple', onClick: onClickCamera },
+                        React__default.createElement(Icon, { name: 'drawing-tool-camera' }))),
+                React__default.createElement(ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
+                    React__default.createElement(Button, __assign({ height: buttonSize, round: true }, eraserBrushColourProps, { onClick: function () { return setBrushType('eraser'); } }),
+                        React__default.createElement(Icon, { "data-tip": "Eraser", fill: brushType === 'eraser' ? 'white' : currentColour.hex, name: 'drawing-tool-eraser' })),
+                    React__default.createElement(Button, __assign({ "data-tip": "Fill brush", height: buttonSize, round: true }, fillBrushColourProps, { onClick: function () { return setBrushType('fill'); } }),
+                        React__default.createElement(Icon, { fill: brushType === 'fill' ? 'white' : currentColour.hex, name: 'drawing-tool-fill-brush' })),
+                    React__default.createElement(Button, __assign({ "data-tip": "Line brush", height: buttonSize, round: true }, lineBrushColourProps, { onClick: function () { return setBrushType('line'); } }),
+                        React__default.createElement(Icon, { fill: brushType === 'line' ? 'white' : currentColour.hex, name: 'drawing-tool-line-brush' })),
+                    React__default.createElement(Button, __assign({ height: buttonSize, round: true }, smallLineColourProps, { onClick: function () { return setBrushSize(BrushSize.small); } }),
+                        React__default.createElement(Icon, { fill: brushSize === BrushSize.small ? 'white' : currentColour.hex, name: 'drawing-tool-small-line' })),
+                    React__default.createElement(Button, __assign({ height: buttonSize, round: true }, mediumLineColourProps, { onClick: function () { return setBrushSize(BrushSize.medium); } }),
+                        React__default.createElement(Icon, { fill: brushSize === BrushSize.medium ? 'white' : currentColour.hex, name: 'drawing-tool-medium-line' })),
+                    React__default.createElement(Button, __assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(BrushSize.large); } }),
+                        React__default.createElement(Icon, { fill: brushSize === BrushSize.large ? 'white' : currentColour.hex, name: 'drawing-tool-large-line' })))),
+            React__default.createElement(SketchContainer, { orientation: orientation, ref: sketchOuterRef },
+                props.showPaperBackground && React__default.createElement(PaperBackground, { cutMode: imageToCut && true }),
+                !imageToCut && sketchStyles && React__default.createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
+                imageToCut && sketchStyles && React__default.createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
+                imageToPlace && sketchStyles && (React__default.createElement("div", { style: __assign(__assign({}, sketchStyles), { zIndex: '101' }) },
+                    React__default.createElement(ImageToPlaceContainer, null,
+                        React__default.createElement(ImageToPlace, { ref: imageToPlaceContainerRef, src: imageToPlace.src })),
+                    React__default.createElement(Moveable, { ref: moveableRef, target: imageToPlaceContainerRef, ables: [Placeable], props: {
+                            placeable: true,
+                        }, snappable: true, bounds: { left: 0, top: 0, bottom: (_a = sketchOuterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, right: (_b = sketchOuterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, draggable: true, scalable: true, keepRatio: true, rotatable: true, onDragStart: helper.onDragStart, onDrag: helper.onDrag, onScaleStart: helper.onScaleStart, onScale: helper.onScale, onRotateStart: helper.onRotateStart, onRotate: helper.onRotate }))),
+                inSketchActions.length && (React__default.createElement(InSketchActions, null, inSketchActions.map(function (action) { return (React__default.createElement(InSketchAction, { key: action.key }, action.component)); }))),
+                imageToCut && showCutTutorial && React__default.createElement(CutImageTutorial, { onClick: function () { return setShowCutTutorial(false); } },
+                    React__default.createElement("div", null, "Now cut out your animal: Click, hold and make sure you draw around it."),
+                    React__default.createElement("img", { alt: "crop example", src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
+                    React__default.createElement("div", null,
+                        React__default.createElement(Button, { size: isMobile ? "small" : "regular", theme: "primary" }, "Ok")))),
+            React__default.createElement(RightToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
+                React__default.createElement(ColourToolbar, { orientation: orientation, size: buttonSize, currentColour: currentColour }),
+                React__default.createElement(OpacityToggle, { orientation: orientation, buttonSize: buttonSize }))),
+        showRestartConfirmModal && React__default.createElement(ModalOverlay, null,
+            React__default.createElement(Modal, { title: "Are you sure?", actions: [
+                    React__default.createElement(Button, { key: 'cancel', size: isMobile ? "small" : "regular", theme: "red", onClick: function () {
+                            setShowRestartConfirmModal(false);
+                        } }, "No"),
+                    React__default.createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
+                            restart();
+                            setShowRestartConfirmModal(false);
+                        } }, "Yes"),
+                ] })),
+        showFileInput && React__default.createElement(ModalOverlay, null,
+            React__default.createElement(FileInput, { isMobile: isMobile, dismiss: function () { return setShowFileInput(false); }, onImageUploaded: onImageUploaded })));
+};
+Drawing.defaultProps = {
+    prompt: 'Draw your Animal',
+    showHeader: true,
+    onBack: function () { },
+    onSave: function () { },
+    showPaperBackground: true,
+    disableCameraUpload: false,
+    disableAutoCache: false,
+    cacheKey: 'nzk-sketch-cache',
+    openUploadPopupOnStart: false
+};
+
+export { Drawing as default };
+//# sourceMappingURL=DrawingTool.js.map

package/dist/components/DrawingTool/DrawingTool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawingTool.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingTool.styles.d.ts

@@ -3,9 +3,10 @@ export declare const Container: import("styled-components").StyledComponent<"div
     maxWidth: number;
     maxHeight: number;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Tool: import("styled-components").StyledComponent<"div", any, {
     orientation: Orientation;
+    hasHeader: boolean;
+    headerHeight: number;
 }, never>;
 export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
     orientation: Orientation;