argous 1.2.134 → 1.2.138

package/dist/components/ImageResize/ImageResize.js

@@ -0,0 +1,472 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../../utils");
+var core_1 = require("@material-ui/core");
+var clsx_1 = __importDefault(require("clsx"));
+var jquery_1 = __importDefault(require("jquery"));
+var react_1 = __importStar(require("react"));
+var md_1 = require("react-icons/md");
+var useStyles = core_1.makeStyles(({
+    component: {
+        position: 'relative',
+        background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
+        padding: '4em',
+        height: function (_a) {
+            var _b = _a.height, height = _b === void 0 ? 300 : _b;
+            return "calc(" + height + "px + 200px)";
+        },
+        border: '3px solid #49708A',
+        maxWidth: function (_a) {
+            var _b = _a.width, width = _b === void 0 ? 300 : _b;
+            return "calc(" + width + "px + 600px)";
+        },
+        overflow: 'hidden',
+        margin: '0 auto',
+    },
+    overlay: {
+        position: 'absolute',
+        left: function (_a) {
+            var _b = _a.width, width = _b === void 0 ? 300 : _b;
+            return "calc(50% - " + (width - 300) / 2 + "px)";
+        },
+        top: function (_a) {
+            var _b = _a.height, height = _b === void 0 ? 300 : _b;
+            return "calc(50% - " + (height - 300) / 2 + "px)";
+        },
+        marginLeft: '-150px',
+        marginTop: '-150px',
+        zIndex: 999,
+        width: function (_a) {
+            var width = _a.width;
+            return width !== null && width !== void 0 ? width : '300px';
+        },
+        height: function (_a) {
+            var height = _a.height;
+            return height !== null && height !== void 0 ? height : '300px';
+        },
+        border: 'solid 2px rgba(222,60,80,.9)',
+        borderRadius: function (_a) {
+            var borderRadius = _a.borderRadius;
+            return borderRadius !== null && borderRadius !== void 0 ? borderRadius : '50%';
+        },
+        boxSizing: 'content-box',
+        pointerEvents: 'none',
+    },
+    resizeContainer: {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: 'move',
+        margin: '0 auto',
+        '&:hover, &:active': {
+            outline: '2px dashed rgba(222,60,80,.9)'
+        }
+    },
+    resizeHandle: {
+        position: 'absolute',
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        background: 'rgba(222,60,80,.9)',
+        zIndex: 999,
+    },
+    resizeHandleNw: {
+        top: '-5px',
+        left: '-5px',
+        cursor: 'nw-resize',
+    },
+    resizeHandleSw: {
+        bottom: '-5px',
+        left: '-5px',
+        cursor: 'sw-resize',
+    },
+    resizeHandleNe: {
+        top: '-5px',
+        right: '-5px',
+        cursor: 'ne-resize',
+    },
+    resizeHandleSe: {
+        bottom: '-5px',
+        right: '-5px',
+        cursor: 'se-resize',
+    }
+}));
+var DEFAULT_OPTIONS = [
+    {
+        name: 'Brilho',
+        property: 'brightness',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Contraste',
+        property: 'contrast',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Saturação',
+        property: 'saturate',
+        value: 100,
+        range: {
+            min: 0,
+            max: 200
+        },
+        unit: '%'
+    },
+    {
+        name: 'Escala de Cinza',
+        property: 'grayscale',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%'
+    },
+    {
+        name: 'Sépia',
+        property: 'sepia',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%'
+    },
+    {
+        name: 'Rotacionar Tonalidade',
+        property: 'hue-rotate',
+        value: 0,
+        range: {
+            min: 0,
+            max: 360
+        },
+        unit: 'deg'
+    },
+    {
+        name: 'Embaçar',
+        property: 'blur',
+        value: 0,
+        range: {
+            min: 0,
+            max: 20
+        },
+        unit: 'px',
+        step: 0.1
+    },
+    {
+        name: 'Inverter',
+        property: 'invert',
+        value: 0,
+        range: {
+            min: 0,
+            max: 100
+        },
+        unit: '%',
+        step: 100
+    },
+];
+var ImageResize = function (_a) {
+    var imagem = _a.imagem, onImage = _a.onImage, _b = _a.finalImageProperties, finalImageProperties = _b === void 0 ? {} : _b, props = __rest(_a, ["imagem", "onImage", "finalImageProperties"]);
+    var classes = useStyles(finalImageProperties);
+    var _c = react_1.useState(undefined), urlImagem = _c[0], setUrlImagem = _c[1];
+    var _d = react_1.useState(undefined), key = _d[0], setKey = _d[1];
+    var image = react_1.useRef();
+    var button = react_1.useRef();
+    react_1.useEffect(function () {
+        setKey(Math.floor((Math.random() * 10000) + 1));
+    }, []);
+    utils_1.useUpdateEffect(function () {
+        if (!imagem || !key)
+            return;
+        var src = window.URL.createObjectURL(imagem);
+        setUrlImagem(src);
+        resizeableImage(image.current, src);
+    }, [imagem, key]);
+    var resizeableImage = function (imageTarget, src) {
+        // Some variable and settings
+        var $container, eventState = {}, constrain = false, minWidth = jquery_1.default("#overlay_" + key).width(), minHeight = jquery_1.default("#overlay_" + key).height(), origSrc = new Image(), resizeCanvas = document.createElement('canvas'), resized = false;
+        var init = function () {
+            // When resizing, we will always use this copy of the original as the base
+            origSrc.src = src;
+            // Assign the container to a variable
+            $container = jquery_1.default(imageTarget).parent("#container_" + key);
+            // Add events
+            $container.on('mousedown touchstart', ".resize-handle_" + key, startResize);
+            $container.on('mousedown touchstart', "#resizeImage_" + key, startMoving);
+            jquery_1.default("#js-crop_" + key).on('click', crop);
+            // button.addEventListener('click', crop)
+            // button.onclick = crop
+        };
+        var startResize = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            saveEventState(e);
+            jquery_1.default(document).on('mousemove touchmove', resizing);
+            jquery_1.default(document).on('mouseup touchend', endResize);
+        };
+        var endResize = function (e) {
+            e.preventDefault();
+            jquery_1.default(document).off('mouseup touchend', endResize);
+            jquery_1.default(document).off('mousemove touchmove', resizing);
+        };
+        var saveEventState = function (e) {
+            var _a, _b;
+            // Save the initial event details and container state
+            eventState.container_width = $container.width();
+            eventState.container_height = $container.height();
+            eventState.container_left = $container.offset().left;
+            eventState.container_top = $container.offset().top;
+            eventState.mouse_x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            eventState.mouse_y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            // This is a fix for mobile safari
+            // For some reason it does not allow a direct copy of the touches property
+            if (typeof e.originalEvent.touches !== 'undefined') {
+                eventState.touches = [];
+                jquery_1.default.each(e.originalEvent.touches, function (i, ob) {
+                    eventState.touches[i] = {};
+                    eventState.touches[i].clientX = 0 + ob.clientX;
+                    eventState.touches[i].clientY = 0 + ob.clientY;
+                });
+            }
+            eventState.evnt = e;
+        };
+        var resizing = function (e) {
+            var _a, _b;
+            var mouse = {}, width, height, left, top;
+            mouse.x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            // Position image differently depending on the corner dragged and constraints
+            if (eventState.evnt.target.id === "resizeHandleSe_" + key) {
+                width = mouse.x - eventState.container_left;
+                height = mouse.y - eventState.container_top;
+                left = eventState.container_left;
+                top = eventState.container_top;
+            }
+            else if (eventState.evnt.target.id === "resizeHandleSw_" + key) {
+                width = eventState.container_width - (mouse.x - eventState.container_left);
+                height = mouse.y - eventState.container_top;
+                left = mouse.x;
+                top = eventState.container_top;
+            }
+            else if (eventState.evnt.target.id === "resizeHandleNw_" + key) {
+                width = eventState.container_width - (mouse.x - eventState.container_left);
+                height = eventState.container_height - (mouse.y - eventState.container_top);
+                left = mouse.x;
+                top = mouse.y;
+                if (constrain || !e.shiftKey) {
+                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
+                }
+            }
+            else if (eventState.evnt.target.id === "resizeHandleNe_" + key) {
+                width = mouse.x - eventState.container_left;
+                height = eventState.container_height - (mouse.y - eventState.container_top);
+                left = eventState.container_left;
+                top = mouse.y;
+                if (constrain || !e.shiftKey) {
+                    top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
+                }
+            }
+            // Optionally maintain aspect ratio
+            if (constrain || !e.shiftKey) {
+                height = width / origSrc.width * origSrc.height;
+            }
+            if (width > minWidth && height > minHeight) {
+                // To improve performance you might limit how often resizeImage() is called
+                resizeImage(width, height);
+                //detecção de colisao para impedir q imagem saia do quadro
+                var wantedLeft = left;
+                var wantedTop = top;
+                var wantedMinLeft = wantedLeft + $container.width();
+                var wantedMinTop = wantedTop + $container.height();
+                var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
+                var maxTop = jquery_1.default("#overlay_" + key).offset().top;
+                var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
+                var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+                var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+                var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
+                $container.offset({
+                    'left': finalLeft,
+                    'top': finalTop
+                });
+            }
+        };
+        var resizeImage = function (width, height) {
+            resizeCanvas.width = width;
+            resizeCanvas.height = height;
+            resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);
+            // setUrlImagem(resizeCanvas.toDataURL('image/png'))
+            jquery_1.default(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
+            resized = true;
+        };
+        var startMoving = function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            saveEventState(e);
+            jquery_1.default(document).on('mousemove touchmove', moving);
+            jquery_1.default(document).on('mouseup touchend', endMoving);
+        };
+        var endMoving = function (e) {
+            e.preventDefault();
+            jquery_1.default(document).off('mouseup touchend', endMoving);
+            jquery_1.default(document).off('mousemove touchmove', moving);
+        };
+        var moving = function (e) {
+            var _a, _b, _c, _d, _e, _f;
+            var mouse = {}, touches;
+            e.preventDefault();
+            e.stopPropagation();
+            touches = e.originalEvent.touches;
+            mouse.x = (e.clientX || e.pageX || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientX)) + jquery_1.default(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            //detecção de colisao para impedir q imagem saia do quadro
+            var wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
+            var wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
+            var wantedMinLeft = wantedLeft + $container.width();
+            var wantedMinTop = wantedTop + $container.height();
+            var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
+            var maxTop = jquery_1.default("#overlay_" + key).offset().top;
+            var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
+            var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+            var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+            var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
+            $container.offset({
+                'left': finalLeft,
+                'top': finalTop
+            });
+            // Watch for pinch zoom gesture while moving
+            if (eventState.touches && eventState.touches.length > 1 && touches.length > 1) {
+                var width = eventState.container_width, height = eventState.container_height;
+                var a = ((_a = eventState.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX) - ((_b = eventState.touches) === null || _b === void 0 ? void 0 : _b.at(1).clientX);
+                a = a * a;
+                var b = ((_c = eventState.touches) === null || _c === void 0 ? void 0 : _c.at(0).clientY) - ((_d = eventState.touches) === null || _d === void 0 ? void 0 : _d.at(1).clientY);
+                b = b * b;
+                var dist1 = Math.sqrt(a + b);
+                a = ((_e = e.originalEvent.touches) === null || _e === void 0 ? void 0 : _e.at(0).clientX) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientX);
+                a = a * a;
+                b = ((_f = e.originalEvent.touches) === null || _f === void 0 ? void 0 : _f.at(0).clientY) - (touches === null || touches === void 0 ? void 0 : touches.at(1).clientY);
+                b = b * b;
+                var dist2 = Math.sqrt(a + b);
+                var ratio = dist2 / dist1;
+                width = width * ratio;
+                height = height * ratio;
+                // To improve performance you might limit how often resizeImage() is called
+                resizeImage(width, height);
+            }
+        };
+        var crop = function () {
+            //hack para a imagem ficar certa no caso de nao ter sido redimensionada
+            if (!resized) {
+                var _a = imageTarget.getBoundingClientRect(), width = _a.width, height = _a.height;
+                resizeImage(width, height);
+            }
+            setTimeout(function () {
+                //Find the part of the image that is inside the crop box
+                var cropCanvas, left = jquery_1.default("#overlay_" + key).offset().left - $container.offset().left, top = jquery_1.default("#overlay_" + key).offset().top - $container.offset().top, width = jquery_1.default("#overlay_" + key).width(), height = jquery_1.default("#overlay_" + key).height();
+                cropCanvas = document.createElement('canvas');
+                cropCanvas.width = width;
+                cropCanvas.height = height;
+                var ctx = cropCanvas.getContext('2d');
+                ctx.filter = jquery_1.default("#resizeImage_" + key).css('filter');
+                ctx.drawImage(imageTarget, left, top, width, height, 0, 0, width, height);
+                // window.open(cropCanvas.toDataURL('image/png'));
+                onImage(cropCanvas.toDataURL('image/png'));
+            }, 0);
+        };
+        init();
+    };
+    var _e = react_1.useState(0), selectedOptionIndex = _e[0], setSelectedOptionIndex = _e[1];
+    var _f = react_1.useState(DEFAULT_OPTIONS), options = _f[0], setOptions = _f[1];
+    var selectedOption = options[selectedOptionIndex];
+    function handleSliderChange(_, value) {
+        setOptions(function (prevOptions) {
+            return prevOptions.map(function (option, index) {
+                if (index !== selectedOptionIndex)
+                    return option;
+                return __assign(__assign({}, option), { value: value });
+            });
+        });
+    }
+    var getImageStyle = function (onlyFilters) {
+        if (onlyFilters === void 0) { onlyFilters = false; }
+        var filters = options.map(function (option) { return option.property + "(" + option.value + option.unit + ")"; }).join(' ');
+        return onlyFilters ? filters : { filter: filters };
+    };
+    return react_1.default.createElement(core_1.Dialog, __assign({}, props, { maxWidth: 'lg', fullWidth: true, keepMounted: true }),
+        react_1.default.createElement(core_1.DialogTitle, null, "Ajustar Imagem"),
+        react_1.default.createElement(core_1.DialogContent, { style: { display: 'block', position: 'relative' } },
+            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 },
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 8 },
+                    react_1.default.createElement("div", { className: classes.component },
+                        react_1.default.createElement("div", { id: "overlay_" + key, className: classes.overlay }),
+                        react_1.default.createElement("div", { id: "container_" + key, className: classes.resizeContainer },
+                            react_1.default.createElement("span", { id: "resizeHandleNw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNw) }),
+                            react_1.default.createElement("span", { id: "resizeHandleNe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNe) }),
+                            react_1.default.createElement("img", { ref: image, id: "resizeImage_" + key, style: __assign({ display: 'block', minWidth: jquery_1.default("#overlay_" + key).width(), minHeight: jquery_1.default("#overlay_" + key).height() }, getImageStyle()), src: urlImagem, alt: 'Imagem a ser Redimensionada' }),
+                            react_1.default.createElement("span", { id: "resizeHandleSw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSw) }),
+                            react_1.default.createElement("span", { id: "resizeHandleSe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSe) })))),
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 2, style: { display: 'flex', alignItems: 'center' } },
+                    react_1.default.createElement(core_1.Slider, { style: { height: 'calc(100% - 30px)' }, orientation: 'vertical', 
+                        // getAriaValueText={valuetext}
+                        step: selectedOption.step, min: selectedOption.range.min, max: selectedOption.range.max, value: selectedOption.value, onChange: handleSliderChange })),
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 2 },
+                    react_1.default.createElement(core_1.List, null, options.map(function (option, index) { return (react_1.default.createElement(core_1.ListItem, { button: true, onClick: function () { return setSelectedOptionIndex(index); }, key: index, selected: index === selectedOptionIndex },
+                        react_1.default.createElement(core_1.ListItemText, { primary: option.name }))); }))))),
+        react_1.default.createElement(core_1.DialogActions, null,
+            react_1.default.createElement(core_1.Button, { ref: button, id: "js-crop_" + key, color: 'primary', variant: 'contained' },
+                "Recortar",
+                react_1.default.createElement(md_1.MdCrop, { style: { marginLeft: 5 } }))));
+};
+exports.default = ImageResize;

package/dist/components/ImageResize/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageResize';
+export * from './ImageResize'; 

package/dist/components/ImageResize/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImageResize_1 = require("./ImageResize");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImageResize_1).default; } });

package/dist/components/ImageResizeButton/ImageResizeButton.d.ts

@@ -0,0 +1,26 @@
+import { ImageResizeProps } from '../ImageResize/ImageResize';
+import { ButtonClassKey, ExtendButtonBase } from '@material-ui/core';
+import React from 'react';
+export interface ImageResizeButtonTypeMap<P = {}, D extends React.ElementType = 'button'>{
+  props: P & {
+    /**
+     * Props repassados ao componente de resize
+     */
+    ImageResizeProps?: ImageResizeProps, 
+    /**
+    * Função chamada quando a imagem fica pronta
+    * 
+    * @param image - Arquivo da imagem
+    * @param b64 - Imagem em Base64
+    * 
+    * @returns {void} Sem Retorno
+    */
+    onImage?: (image: File, b64: string) => void,
+  };
+  defaultComponent: D;
+  classKey: ButtonClassKey;
+}
+
+declare const ImageResizeButton: ExtendButtonBase<ImageResizeButtonTypeMap>;
+
+export default ImageResizeButton;

package/dist/components/ImageResizeButton/ImageResizeButton.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var __1 = require("../");
+var core_1 = require("@material-ui/core");
+var react_1 = __importStar(require("react"));
+var ImageResizeButton = react_1.forwardRef(function (_a, ref) {
+    var children = _a.children, ImageResizeProps = _a.ImageResizeProps, onImage = _a.onImage, _b = _a.Component, Component = _b === void 0 ? core_1.Button : _b, props = __rest(_a, ["children", "ImageResizeProps", "onImage", "Component"]);
+    var _c = react_1.useState(undefined), enviandoFoto = _c[0], setEnviandoFoto = _c[1];
+    var inputRef = react_1.useRef();
+    var handleClick = function () { return inputRef.current && inputRef.current.click(); };
+    var handleChange = function (e) { return setEnviandoFoto(e.target.files[0]); };
+    var handleImage = function (image) {
+        onImage(dataURLtoFile(image, enviandoFoto.name), image);
+        handleClose();
+    };
+    var handleClose = function () {
+        setEnviandoFoto(undefined);
+        clearInputFile(inputRef.current);
+    };
+    react_1.useImperativeHandle(ref, function () { return ({
+        handleChange: handleChange
+    }); }, []);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Component, __assign({ onClick: handleClick }, props), children),
+        react_1.default.createElement("input", { ref: inputRef, type: 'file', style: { display: 'none' }, onChange: handleChange, accept: 'image/*' }),
+        react_1.default.createElement(__1.ImageResize, __assign({ imagem: enviandoFoto, open: !!enviandoFoto, onImage: handleImage, onClose: handleClose }, ImageResizeProps)));
+});
+exports.default = ImageResizeButton;
+function clearInputFile(f) {
+    if (f === null || f === void 0 ? void 0 : f.value) {
+        try {
+            f.value = '';
+        }
+        catch (e) {
+            var form = document.createElement('form'), parentNode = f.parentNode, ref = f.nextSibling;
+            form.appendChild(f);
+            form.reset();
+            parentNode.insertBefore(f, ref);
+        }
+    }
+}
+function dataURLtoFile(dataurl, filename) {
+    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, { type: mime });
+}

package/dist/components/ImageResizeButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImageResizeButton';
+export * from './ImageResizeButton'; 

package/dist/components/ImageResizeButton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImageResizeButton_1 = require("./ImageResizeButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImageResizeButton_1).default; } });

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,8 @@
+export interface InputProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function Input(props: InputProps): JSX.Element
+
+export default Input;