nzk-react-components 0.3.5 → 0.4.0

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.js

@@ -1,82 +0,0 @@
-'use strict';
-
-var React = require('react');
-var MagicCropPopup_styles = require('./MagicCropPopup.styles.js');
-var Button = require('../../../Button/Button.js');
-var index = require('../../../../hooks/useCloudinary/index.js');
-var DrawingToolProvider = require('../../DrawingToolProvider.js');
-var Loader = require('../Loader.js');
-var Popup = require('../Popup.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function changeExt(fileName, newExt) {
-    var pos = fileName.includes(".") ? fileName.lastIndexOf(".") : fileName.length;
-    var fileRoot = fileName.substr(0, pos);
-    return fileRoot + "." + newExt;
-}
-var MagicCropPopup = (function (props) {
-    var uploadImage = index({
-        unsignedUploadPreset: props.cloudinaryUploadPreset
-    }).uploadImage;
-    var _a = DrawingToolProvider.useDrawingTool(), imageToCrop = _a.imageToCrop, setImageToCrop = _a.setImageToCrop, setImageToPlace = _a.setImageToPlace;
-    var _b = React.useState(), croppedImage = _b[0], setCroppedImage = _b[1];
-    var checkImageIsReady = function (imageUrl, size, retries) {
-        if (size === void 0) { size = 0; }
-        if (retries === void 0) { retries = 0; }
-        var img = new Image();
-        img.onload = function () {
-            fetch(img.src).then(function (resp) { return resp.blob(); }).then(function (blob) {
-                if (retries === 0 || size === blob.size) {
-                    var delay = retries === 0 ? 10000 : 4000;
-                    setTimeout(function () { return checkImageIsReady(imageUrl, blob.size, retries + 1); }, delay);
-                }
-                else {
-                    var croppedImg_1 = new Image();
-                    croppedImg_1.crossOrigin = "Anonymous";
-                    croppedImg_1.onload = function () {
-                        setCroppedImage(croppedImg_1);
-                    };
-                    croppedImg_1.src = changeExt(imageUrl.replace('/image/upload', '/image/upload/e_trim:10'), 'png');
-                }
-            });
-        };
-        img.crossOrigin = "Anonymous";
-        img.src = changeExt(imageUrl.replace('/image/upload', '/image/upload/w_150'), 'png') + "?" + Date.now();
-    };
-    React.useEffect(function () {
-        if (imageToCrop) {
-            uploadImage(imageToCrop.src, checkImageIsReady);
-        }
-    }, []);
-    var onNext = function () {
-        if (!croppedImage)
-            return;
-        setImageToCrop(undefined);
-        setImageToPlace(croppedImage);
-        props.onDismiss();
-    };
-    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
-        React__default['default'].createElement(MagicCropPopup_styles.Title, null, "Your Drawing"),
-        React__default['default'].createElement(MagicCropPopup_styles.Container, null,
-            React__default['default'].createElement(MagicCropPopup_styles.DrawingContainer, null, croppedImage
-                ? React__default['default'].createElement(MagicCropPopup_styles.Image, { src: croppedImage.src })
-                : React__default['default'].createElement("div", null,
-                    React__default['default'].createElement(Loader, { color: "#fff" }),
-                    React__default['default'].createElement("br", null),
-                    "Processing your image.",
-                    React__default['default'].createElement("br", null),
-                    "This can take a couple of minutes.")),
-            React__default['default'].createElement(MagicCropPopup_styles.Text, null,
-                "Select next to make final edits.",
-                React__default['default'].createElement("br", null),
-                "Not happy? Try manual cut-out instead.")),
-        React__default['default'].createElement(MagicCropPopup_styles.Actions, null,
-            React__default['default'].createElement(Button, { size: 'regular', theme: 'primary', onClick: props.onManual }, "Manual cut-out"),
-            React__default['default'].createElement(Button, { size: 'regular', theme: 'confirm', disabled: !croppedImage, onClick: onNext }, "Next")));
-});
-
-module.exports = MagicCropPopup;
-//# sourceMappingURL=MagicCropPopup.js.map

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

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

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

@@ -1,8 +0,0 @@
-export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DrawingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"div", any, {
-    src: string;
-}, never>;
-export declare const Actions: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.styles.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var Title = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  font-size: 60px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 4px 0px #A6A6A6, 0px 8px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 32px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n  }\n"], ["\n  font-size: 60px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 4px 0px #A6A6A6, 0px 8px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 32px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n  }\n"])));
-var Container = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n  font-size: 24px;\n  @media (max-height: 650px) {\n    font-size: 20px;\n  }\n  @media (max-height: 370px) {\n    font-size: 16px;\n  }\n"], ["\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n  font-size: 24px;\n  @media (max-height: 650px) {\n    font-size: 20px;\n  }\n  @media (max-height: 370px) {\n    font-size: 16px;\n  }\n"])));
-var DrawingContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: relative;\n  padding: 20px;\n  border-radius: 50px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 350px;\n  background-color: #701EA8;\n  color: white;\n  text-align: center;\n  margin-bottom: 20px;\n  @media (max-height: 750px) {\n    height: 300px;\n  }\n  @media (max-height: 650px) {\n    width: 50%;\n    margin-bottom: 0px;\n    padding: 10px;\n    height: 220px;\n  }\n  @media (max-width: 400px) {\n    height: 250px;\n    padding: 10px;\n  }\n  @media (max-height: 450px) {\n    height: 200px;\n  }\n  @media (max-height: 370px) {\n    height: 150px;\n  }\n"], ["\n  position: relative;\n  padding: 20px;\n  border-radius: 50px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 350px;\n  background-color: #701EA8;\n  color: white;\n  text-align: center;\n  margin-bottom: 20px;\n  @media (max-height: 750px) {\n    height: 300px;\n  }\n  @media (max-height: 650px) {\n    width: 50%;\n    margin-bottom: 0px;\n    padding: 10px;\n    height: 220px;\n  }\n  @media (max-width: 400px) {\n    height: 250px;\n    padding: 10px;\n  }\n  @media (max-height: 450px) {\n    height: 200px;\n  }\n  @media (max-height: 370px) {\n    height: 150px;\n  }\n"])));
-var Text = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  color: white;\n  width: 100%;\n  text-align: center;\n  @media (max-height: 650px) {\n    width: 50%;\n    padding-left: 40px;\n  }\n  @media (max-height: 370px) {\n    padding-left: 20px;\n  }\n"], ["\n  color: white;\n  width: 100%;\n  text-align: center;\n  @media (max-height: 650px) {\n    width: 50%;\n    padding-left: 40px;\n  }\n  @media (max-height: 370px) {\n    padding-left: 20px;\n  }\n"])));
-var Image = styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 100%;\n  height: 100%;\n"])), function (props) { return props.src; });
-var Actions = styled__default['default'].div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
-
-exports.Actions = Actions;
-exports.Container = Container;
-exports.DrawingContainer = DrawingContainer;
-exports.Image = Image;
-exports.Text = Text;
-exports.Title = Title;
-//# sourceMappingURL=MagicCropPopup.styles.js.map

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

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

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

@@ -1,2 +0,0 @@
-import MagicCropPopup from "./MagicCropPopup";
-export default MagicCropPopup;

package/dist/components/DrawingTool/components/MagicCropPopup/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var MagicCropPopup = require('./MagicCropPopup.js');
-
-
-
-module.exports = MagicCropPopup;
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    onDismiss: () => void;
-    onNext: () => void;
-}
-declare const _default: (props: Props) => JSX.Element;
-export default _default;

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.js

@@ -1,25 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ManualCropPopup_styles = require('./ManualCropPopup.styles.js');
-var Button = require('../../../Button/Button.js');
-var Popup = require('../Popup.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var ManualCropPopup = (function (props) {
-    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
-        React__default['default'].createElement(ManualCropPopup_styles.Container, null,
-            React__default['default'].createElement("div", null,
-                "Cut out your animal.",
-                React__default['default'].createElement("br", null),
-                "Click, hold and make sure you draw around it."),
-            React__default['default'].createElement(ManualCropPopup_styles.Image, { src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
-            React__default['default'].createElement("div", null,
-                React__default['default'].createElement(Button, { size: 'regular', theme: "primary", onClick: props.onNext }, "Ok"))));
-});
-
-module.exports = ManualCropPopup;
-//# sourceMappingURL=ManualCropPopup.js.map

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

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

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

@@ -1,4 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"div", any, {
-    src: string;
-}, never>;

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.styles.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  font-size: 24px;\n  text-align: center;\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  font-size: 24px;\n  text-align: center;\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])));
-var Image = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 250px;\n  background-image: url(", ");\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  @media (max-height: 400px) {\n    height: 170px;\n  }\n"], ["\n  width: 100%;\n  height: 250px;\n  background-image: url(", ");\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  @media (max-height: 400px) {\n    height: 170px;\n  }\n"])), function (props) { return props.src; });
-var templateObject_1, templateObject_2;
-
-exports.Container = Container;
-exports.Image = Image;
-//# sourceMappingURL=ManualCropPopup.styles.js.map

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

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

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

@@ -1,2 +0,0 @@
-import ManualCropPopup from './ManualCropPopup';
-export default ManualCropPopup;

package/dist/components/DrawingTool/components/ManualCropPopup/index.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var ManualCropPopup = require('./ManualCropPopup.js');
-
-
-
-module.exports = ManualCropPopup;
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-export declare const QuitButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface Props {
-    children: React.ReactNode;
-    onDismiss?: undefined | (() => void);
-}
-declare const Popup: {
-    (props: Props): JSX.Element;
-    defaultProps: {
-        onDismiss: undefined;
-    };
-};
-export default Popup;

package/dist/components/DrawingTool/components/Popup.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var styled = require('styled-components');
-var Button = require('../../Button/Button.js');
-var Icon = require('../../Icon/Icon.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var Overlay = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0,0,0, .4);\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0,0,0, .4);\n"])));
-var Container = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 90%;\n  max-width: 900px;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  color: white;\n  * {\n    box-sizing: border-box;\n  }\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    box-shadow: none;\n    padding: 20px;\n  }\n"], ["\n  position: relative;\n  width: 90%;\n  max-width: 900px;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  color: white;\n  * {\n    box-sizing: border-box;\n  }\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    box-shadow: none;\n    padding: 20px;\n  }\n"])));
-var QuitButton = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    top: 15px;\n    right: 15px;\n  }\n"], ["\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    top: 15px;\n    right: 15px;\n  }\n"])));
-var Popup = function (props) {
-    return React__default['default'].createElement(Overlay, null,
-        React__default['default'].createElement(Container, null,
-            props.onDismiss && React__default['default'].createElement(QuitButton, { onClick: props.onDismiss },
-                React__default['default'].createElement(Button, { size: "regular", round: true, theme: 'red' },
-                    React__default['default'].createElement(Icon, { name: 'close' }))),
-            props.children));
-};
-Popup.defaultProps = {
-    onDismiss: undefined
-};
-var templateObject_1, templateObject_2, templateObject_3;
-
-exports.QuitButton = QuitButton;
-exports['default'] = Popup;
-//# sourceMappingURL=Popup.js.map

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

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