argous 1.2.131 → 1.2.135

package/lib/components/ImageResize/ImageResize.js

@@ -0,0 +1,479 @@
+
+import { useUpdateEffect } from '../../utils';
+import { Button, Dialog, DialogTitle, DialogContent, DialogActions, makeStyles, Grid, List, ListItem, ListItemText, Slider } from '@material-ui/core';
+import clsx from 'clsx';
+import $ from 'jquery';
+import React, { useEffect, useRef, useState } from 'react';
+import { MdCrop } from 'react-icons/md';
+
+const useStyles = makeStyles(({
+  component: {
+    position: 'relative',
+    background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
+    padding: '4em',
+    height: ({ height = 300 }) => `calc(${height}px + 200px)`,
+    border: '3px solid #49708A',
+    maxWidth: ({ width = 300 }) => `calc(${width}px + 600px)`,
+    overflow: 'hidden',
+    margin: '0 auto',
+  },
+  overlay: {
+    position: 'absolute',
+    left: ({ width = 300 }) => `calc(50% - ${(width - 300) / 2}px)`,
+    top: ({ height = 300 }) => `calc(50% - ${(height - 300) / 2}px)`,
+    marginLeft: '-150px',
+    marginTop: '-150px',
+    zIndex: 999,
+    width: ({ width }) => width ?? '300px',
+    height: ({ height }) => height ?? '300px',
+    border: 'solid 2px rgba(222,60,80,.9)',
+    borderRadius: ({ borderRadius }) => 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',
+  }
+}));
+
+const 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
+  },
+];
+
+const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) => {
+  const classes = useStyles(finalImageProperties);
+  const [urlImagem, setUrlImagem] = useState(undefined);
+
+  const [key, setKey] = useState(undefined);
+
+  const image = useRef();
+  const button = useRef();
+
+  useEffect(() => {
+    setKey(Math.floor((Math.random() * 10000) + 1));
+  }, []);
+
+  useUpdateEffect(() => {
+    if (!imagem || !key) return;
+    const src = window.URL.createObjectURL(imagem);
+    setUrlImagem(src);
+    resizeableImage(image.current, src);
+  }, [imagem, key]);
+
+  const resizeableImage = (imageTarget, src) => {
+  // Some variable and settings
+    let $container,
+        eventState = {},
+        constrain = false,
+        minWidth = $(`#overlay_${key}`).width(),
+        minHeight = $(`#overlay_${key}`).height(),
+        origSrc = new Image(),
+        resizeCanvas = document.createElement('canvas'),
+        resized = false;
+
+    const init = () => {
+    // When resizing, we will always use this copy of the original as the base
+      origSrc.src = src;
+
+      // Assign the container to a variable
+      $container = $(imageTarget).parent(`#container_${key}`);
+
+      // Add events
+      $container.on('mousedown touchstart', `.resize-handle_${key}`, startResize);
+      $container.on('mousedown touchstart', `#resizeImage_${key}`, startMoving);
+      $(`#js-crop_${key}`).on('click', crop);
+      // button.addEventListener('click', crop)
+      // button.onclick = crop
+    };
+
+    const startResize = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      saveEventState(e);
+      $(document).on('mousemove touchmove', resizing);
+      $(document).on('mouseup touchend', endResize);
+    };
+
+    const endResize = (e) => {
+      e.preventDefault();
+      $(document).off('mouseup touchend', endResize);
+      $(document).off('mousemove touchmove', resizing);
+    };
+
+    const saveEventState = (e) => {
+    // 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 || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft(); 
+      eventState.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches?.at(0).clientY) + $(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 = [];
+        $.each(e.originalEvent.touches, (i, ob) => {
+          eventState.touches[i] = {};
+          eventState.touches[i].clientX = 0 + ob.clientX;
+          eventState.touches[i].clientY = 0 + ob.clientY;
+        });
+      }
+      eventState.evnt = e;
+    };
+
+    const resizing = (e) => {
+      let mouse = {}, width, height, left, top;
+      mouse.x = (e.clientX || e.pageX || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft(); 
+      mouse.y = (e.clientY || e.pageY || e.originalEvent.touches?.at(0).clientY) + $(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
+        const wantedLeft = left;
+        const wantedTop = top;
+
+        const wantedMinLeft = wantedLeft + $container.width();
+        const wantedMinTop = wantedTop + $container.height();
+
+        const maxLeft = $(`#overlay_${key}`).offset().left;
+        const maxTop = $(`#overlay_${key}`).offset().top;
+
+        const minLeft = maxLeft + $(`#overlay_${key}`).width();
+        const minTop = maxTop + $(`#overlay_${key}`).height();
+
+        const finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+        const finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
+
+        $container.offset({
+          'left': finalLeft,
+          'top': finalTop
+        });
+      }
+    };
+
+    const resizeImage = (width, height) => {
+      resizeCanvas.width = width;
+      resizeCanvas.height = height;
+      resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);  
+      // setUrlImagem(resizeCanvas.toDataURL('image/png'))
+      $(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));  
+      resized = true;
+    };
+
+    const startMoving = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      saveEventState(e);
+      $(document).on('mousemove touchmove', moving);
+      $(document).on('mouseup touchend', endMoving);
+    };
+
+    const endMoving = (e) => {
+      e.preventDefault();
+      $(document).off('mouseup touchend', endMoving);
+      $(document).off('mousemove touchmove', moving);
+    };
+
+    const moving = (e) => {
+      let mouse = {}, touches;
+      e.preventDefault();
+      e.stopPropagation();
+    
+      touches = e.originalEvent.touches;
+    
+      mouse.x = (e.clientX || e.pageX || touches?.at(0).clientX) + $(window).scrollLeft(); 
+      mouse.y = (e.clientY || e.pageY || touches?.at(0).clientY) + $(window).scrollTop();
+    
+      //detecção de colisao para impedir q imagem saia do quadro
+      const wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
+      const wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
+
+      const wantedMinLeft = wantedLeft + $container.width();
+      const wantedMinTop = wantedTop + $container.height();
+
+      const maxLeft = $(`#overlay_${key}`).offset().left;
+      const maxTop = $(`#overlay_${key}`).offset().top;
+
+      const minLeft = maxLeft + $(`#overlay_${key}`).width();
+      const minTop = maxTop + $(`#overlay_${key}`).height();
+
+      const finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
+      const 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) {
+        let width = eventState.container_width, height = eventState.container_height;
+        let a = eventState.touches?.at(0).clientX - eventState.touches?.at(1).clientX;
+        a = a * a; 
+        let b = eventState.touches?.at(0).clientY - eventState.touches?.at(1).clientY;
+        b = b * b; 
+        let dist1 = Math.sqrt(a + b);
+      
+        a = e.originalEvent.touches?.at(0).clientX - touches?.at(1).clientX;
+        a = a * a; 
+        b = e.originalEvent.touches?.at(0).clientY - touches?.at(1).clientY;
+        b = b * b; 
+        let dist2 = Math.sqrt(a + b);
+
+        let ratio = dist2 / dist1;
+
+        width = width * ratio;
+        height = height * ratio;
+        // To improve performance you might limit how often resizeImage() is called
+        resizeImage(width, height);
+      }
+    };
+
+    const crop = () => {
+      //hack para a imagem ficar certa no caso de nao ter sido redimensionada
+      if (!resized) {
+        const { width, height } = imageTarget.getBoundingClientRect();
+        resizeImage(width, height);
+      }
+      setTimeout(() => {
+        
+        //Find the part of the image that is inside the crop box
+        let cropCanvas,
+            left = $(`#overlay_${key}`).offset().left - $container.offset().left,
+            top = $(`#overlay_${key}`).offset().top - $container.offset().top,
+            width = $(`#overlay_${key}`).width(),
+            height = $(`#overlay_${key}`).height();
+          
+        cropCanvas = document.createElement('canvas');
+        cropCanvas.width = width;
+        cropCanvas.height = height;
+      
+        const ctx = cropCanvas.getContext('2d');    
+        ctx.filter = $(`#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();
+  };
+
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
+  const [options, setOptions] = useState(DEFAULT_OPTIONS);
+  const selectedOption = options[selectedOptionIndex];
+
+  function handleSliderChange(_, value) {
+    setOptions(prevOptions => {
+      return prevOptions.map((option, index) => {
+        if (index !== selectedOptionIndex) return option;
+        return { ...option, value };
+      });
+    });
+  }
+
+  const getImageStyle = (onlyFilters = false) => {
+    const filters = options.map(option => `${option.property}(${option.value}${option.unit})`).join(' ');
+    return onlyFilters ? filters : { filter: filters };
+  };
+
+  return <Dialog {...props} maxWidth='lg' fullWidth keepMounted>
+    <DialogTitle>Ajustar Imagem</DialogTitle>
+    <DialogContent style={{ display: 'block', position: 'relative' }}>
+      
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <div className={classes.component}>
+            <div id={`overlay_${key}`} className={classes.overlay}></div>
+            <div id={`container_${key}`} className={classes.resizeContainer}>
+              <span id={`resizeHandleNw_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleNw)}></span>
+              <span id={`resizeHandleNe_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleNe)}></span>
+              <img ref={image} id={`resizeImage_${key}`} style={{ display: 'block', minWidth: $(`#overlay_${key}`).width(), minHeight: $(`#overlay_${key}`).height(), ...getImageStyle() }} src={urlImagem} alt='Imagem a ser Redimensionada'/>
+              <span id={`resizeHandleSw_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleSw)}></span>
+              <span id={`resizeHandleSe_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleSe)}></span>
+            </div>
+          </div>
+        </Grid>
+        <Grid item xs={2} style={{ display: 'flex', alignItems: 'center' }}>
+          <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}        
+          />
+        </Grid>
+        <Grid item xs={2}>
+          <List>
+            {options.map((option, index) => (
+              <ListItem button onClick={() => setSelectedOptionIndex(index)} key={index} selected={index === selectedOptionIndex}>
+                <ListItemText primary={option.name}/>
+              </ListItem>
+            ))}
+          </List>
+        </Grid>
+      </Grid>
+    </DialogContent>
+    <DialogActions>
+      <Button ref={button} id={`js-crop_${key}`} color='primary' variant='contained'>Recortar<MdCrop style={{ marginLeft: 5 }}/></Button>
+    </DialogActions>
+  </Dialog>;
+};
+
+export default ImageResize;

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

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

package/lib/components/ImageResize/index.js

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

package/lib/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/lib/components/ImageResizeButton/ImageResizeButton.js

@@ -0,0 +1,65 @@
+import { ImageResize } from '../';
+import { Button } from '@material-ui/core';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+
+const ImageResizeButton = forwardRef(({ children, ImageResizeProps, onImage, Component = Button, ...props }, ref) => {
+  const [enviandoFoto, setEnviandoFoto] = useState(undefined);
+
+  const inputRef = useRef();
+
+  const handleClick = () => inputRef.current && inputRef.current.click();
+  
+  const handleChange = e => setEnviandoFoto(e.target.files[0]);  
+
+  const handleImage = image => {
+    onImage(dataURLtoFile(image, enviandoFoto.name), image);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setEnviandoFoto(undefined);
+    clearInputFile(inputRef.current);
+  };
+
+  useImperativeHandle(ref, () => ({
+    handleChange
+  }), []);
+
+  return <>
+    <Component onClick={handleClick} {...props}>{children}</Component>
+    <input ref={inputRef} type='file' style={{ display: 'none' }} onChange={handleChange} accept='image/*'/>
+    <ImageResize imagem={enviandoFoto} open={!!enviandoFoto} onImage={handleImage} onClose={handleClose} { ...ImageResizeProps }/>
+  </>;
+});
+
+export default ImageResizeButton;
+
+
+function clearInputFile(f) {
+  if (f?.value) {
+    try {
+      f.value = '';
+    } catch (e) { 
+      let 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/lib/components/ImageResizeButton/index.d.ts

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

package/lib/components/ImageResizeButton/index.js

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

package/lib/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;