argous 1.2.131 → 1.2.135

package/lib/components/Collapse/Collapse.js

@@ -0,0 +1,317 @@
+import { useTheme } from '@material-ui/core';
+import { duration } from '@material-ui/core/styles/transitions';
+import withStyles from '@material-ui/core/styles/withStyles';
+import { getTransitionProps } from '@material-ui/core/transitions/utils';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { Transition } from 'react-transition-group';
+
+export const styles = (theme) => ({
+  /* Styles applied to the container element. */
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+    height: 0,
+    transition: theme.transitions.create('height'),
+    '&$horizontal': {
+      width: 0,
+      height: 'auto',
+      transition: theme.transitions.create('width'),
+    },
+  },
+  /* Pseudo-class applied to the root element if `orientation="horizontal"`. */
+  horizontal: {},
+  /* Styles applied to the container element when the transition has entered. */
+  entered: {
+    height: 'auto',
+    overflow: 'visible',
+    '&$horizontal': {
+      height: 'initial',
+      width: 'auto',
+    },
+  },
+  /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */
+  hidden: {
+    visibility: 'hidden',
+  },
+  /* Styles applied to the outer wrapper element. */
+  wrapper: {
+    // Hack to get children with a negative margin to not falsify the height computation.
+    display: 'flex',
+  },
+  /* Styles applied to the inner wrapper element. */
+  wrapperInner: {
+    width: '100%',
+    '&$horizontal': {
+      // width: 'initial',
+      height: '100%',
+    },
+  },
+});
+
+/**
+ * The Collapse transition is used by the
+ * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ */
+const Collapse = React.forwardRef(function Collapse(props, ref) {
+  const {
+    children,
+    classes,
+    className,
+    collapsedHeight = '0px',
+    collapsedSize: collapsedSizeProp = '0px',
+    component: Component = 'div',
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExiting,
+    orientation = 'vertical',
+    style = {},
+    timeout = duration.standard,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
+  const theme = useTheme();
+  const timer = React.useRef();
+  const wrapperRef = React.useRef(null);
+  const autoTransitionDuration = React.useRef();
+  const collapsedSizeOrHeight = collapsedHeight === '0px' ? collapsedSizeProp : collapsedHeight;
+  const collapsedSize
+    = typeof collapsedSizeOrHeight === 'number'
+      ? `${collapsedSizeOrHeight}px`
+      : collapsedSizeOrHeight;
+  const isHorizontal = orientation === 'horizontal';
+  const size = isHorizontal ? 'width' : 'height';
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
+
+  const handleEnter = (node, isAppearing) => {
+    // Set absolute position to get the size of collapsed content
+    wrapperRef.current.style.position = 'absolute';
+    node.style[size] = collapsedSize;
+
+    if (onEnter) {
+      onEnter(node, isAppearing);
+    }
+  };
+
+  const handleEntering = (node, isAppearing) => {
+    const wrapperSize = wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'];
+    // After the size is read reset the position back to default
+    wrapperRef.current.style.position = '';
+
+    const { duration: transitionDuration } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'enter',
+      },
+    );
+
+    if (timeout === 'auto') {
+      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
+      node.style.transitionDuration = `${duration2}ms`;
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration
+        = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+    }
+
+    node.style[size] = `${wrapperSize}px`;
+
+    if (onEntering) {
+      onEntering(node, isAppearing);
+    }
+  };
+
+  const handleEntered = (node, isAppearing) => {
+    node.style[size] = style[size] || 'auto';
+
+    if (onEntered) {
+      onEntered(node, isAppearing);
+    }
+  };
+
+  const handleExit = (node) => {
+    const wrapperSize = wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'];
+    node.style[size] = `${wrapperSize}px`;
+
+    if (onExit) {
+      onExit(node);
+    }
+  };
+
+  const handleExiting = (node) => {
+    const wrapperSize = wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'];
+
+    const { duration: transitionDuration } = getTransitionProps(
+      { style, timeout },
+      {
+        mode: 'exit',
+      },
+    );
+
+    if (timeout === 'auto') {
+      // TODO: rename getAutoHeightDuration to something more generic (width support)
+      // Actually it just calculates animation duration based on size
+      const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
+      node.style.transitionDuration = `${duration2}ms`;
+      autoTransitionDuration.current = duration2;
+    } else {
+      node.style.transitionDuration
+        = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+    }
+
+    node.style[size] = collapsedSize;
+
+    if (onExiting) {
+      onExiting(node);
+    }
+  };
+
+  const addEndListener = (_, next) => {
+    if (timeout === 'auto') {
+      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+    }
+  };
+
+  return (
+    <TransitionComponent
+      in={inProp}
+      onEnter={handleEnter}
+      onEntered={handleEntered}
+      onEntering={handleEntering}
+      onExit={handleExit}
+      onExiting={handleExiting}
+      addEndListener={addEndListener}
+      timeout={timeout === 'auto' ? null : timeout}
+      {...other}
+    >
+      {(state, childProps) => (
+        <Component
+          className={clsx(
+            classes.container,
+            {
+              [classes.horizontal]: isHorizontal,
+              [classes.entered]: state === 'entered',
+              [classes.hidden]: state === 'exited' && !inProp && collapsedSize === '0px',
+            },
+            className,
+          )}
+          style={{
+            [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize,
+            ...style,
+          }}
+          ref={ref}
+          {...childProps}
+        >
+          <div className={classes.wrapper} ref={wrapperRef}>
+            <div
+              className={clsx(classes.wrapperInner, {
+                [classes.horizontal]: isHorizontal,
+              })}
+            >
+              {children}
+            </div>
+          </div>
+        </Component>
+      )}
+    </TransitionComponent>
+  );
+});
+
+Collapse.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content node to be collapsed.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   * @deprecated
+   * The height of the container when collapsed.
+   *
+   * This prop will be deprecated and removed in v5, use collapsedSize instead.
+   */
+  collapsedHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The width (horizontal) or height (vertical) of the container when collapsed.
+   */
+  collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component will transition in.
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+  /**
+   * The collapse transition orientation.
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   */
+  timeout: PropTypes.oneOfType([
+    PropTypes.oneOf(['auto']),
+    PropTypes.number,
+    PropTypes.shape({
+      appear: PropTypes.number,
+      enter: PropTypes.number,
+      exit: PropTypes.number,
+    }),
+  ]),
+};
+
+Collapse.muiSupportAuto = true;
+
+export default withStyles(styles, { name: 'MuiCollapse' })(Collapse);

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

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

package/lib/components/Collapse/index.js

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

package/lib/components/Compartilhar/Compartilhar.d.ts

@@ -0,0 +1,7 @@
+export interface CompartilharProps {
+  linkCompartilhamento?: string
+}
+
+declare function Compartilhar(props: CompartilharProps): JSX.Element
+
+export default Compartilhar;

package/lib/components/Compartilhar/Compartilhar.js

@@ -0,0 +1,314 @@
+import { enviaCompartilhamentoDePrograma, searchUsers } from '../../api/index';
+import { formataNome, setError } from '../../utils/index';
+import { IconButton, Grid, TextField, Button, InputAdornment, Typography, Collapse, Chip, makeStyles, Paper } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import React, { useState, useEffect, forwardRef } from 'react';
+import { MdLink } from 'react-icons/md';
+
+const useStyles = makeStyles({
+  fundoCompartilhar: {
+    width: '500px',
+    padding: '20px',
+    marginTop: 5,
+  }
+});
+
+const Compartilhar = forwardRef((props, ref) => {
+
+  const [metodoCompartilhar, setMetodoCompartilhar] = useState('');
+  const [mensagemEmail, setMensagemEmail] = useState('');
+  const [email, setEmail] = useState([]);
+  const [stringEmail, setStringEmail] = useState('');
+
+  const [notificacao, setNotificacao] = useState([]);
+  const [stringNotificacao, setStringNotificacao] = useState('');
+
+  const [mensagemNotificação, setMensagemNotificacao] = useState('');
+  const link = props.linkCompartilhamento;
+
+  const [copiado, setCopiado] = useState(false);
+  const [enviado, setEnviado] = useState(false);
+
+  const [options, setOptions] = useState([]);
+
+  const erroVazio = { email: '', stringEmail: '', notificacao: '', stringNotificacao: '' };
+  const [erro, setErro] = useState(erroVazio);
+
+  const classes = useStyles();
+
+  function copiarParaAreaDeTransferencia() {
+    let link = document.getElementById('link');
+    link.select();
+    link.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    setCopiado(true);
+    setTimeout(() => {
+      setCopiado(false);
+    }, 3500);
+  }
+
+  useEffect(() => {
+    if (stringEmail.length < 3 && stringNotificacao.length < 3) return;
+    (async () => {
+      const res = await searchUsers({ dsFiltroNome: metodoCompartilhar === 'email' ? stringEmail : stringNotificacao });
+      if (res.status) {
+        setOptions(res.users);
+      } else setError(res.dsErro);
+    })();
+  }, [stringEmail, stringNotificacao, metodoCompartilhar]);
+
+  async function enviaCompartilhamento(tpComp) {
+    let temp = false;
+    if (tpComp === 'E') {
+      if (email.length === 0 && mensagemEmail === '') {
+        setErro({ ...erro, email: 'Campo Obrigatório', stringEmail: 'Campo Obrigatório' });
+        temp = true;
+      } else {
+        if (email.length === 0) {
+          setErro({ ...erro, email: 'Campo Obrigatório' });
+          temp = true;
+        }
+        if (mensagemEmail === '') {
+          setErro({ ...erro, stringEmail: 'Campo Obrigatório' });
+          temp = true;
+        }
+      }
+    } else if (notificacao.length === 0 && mensagemNotificação === '') {
+      setErro({ ...erro, notificacao: 'Campo Obrigatório', stringNotificacao: 'Campo Obrigatório' });
+      temp = true;
+    } else if (notificacao.length === 0) {
+      setErro({ ...erro, notificacao: 'Campo Obrigatório' });
+      temp = true;
+    } else if (mensagemNotificação === '') {
+      setErro({ ...erro, stringNotificacao: 'Campo Obrigatório' });
+      temp = true;
+    }
+
+    if (temp) return;
+
+    const not = notificacao.map(item => item[0]);
+    const mail = email.map(item => item[0]);
+
+    const dados = {
+      mensagem: mensagemNotificação || mensagemEmail,
+      usuarios: not.length > 0 ? not : mail,
+      tpMensagem: tpComp,
+      link: link
+    };
+    const res = await enviaCompartilhamentoDePrograma(dados);
+    if (res.status) {
+      setNotificacao([]);
+      setEmail([]);
+      setMensagemEmail('');
+      setStringEmail('');
+      setStringNotificacao('');
+      setMensagemNotificacao('');
+      setEnviado(true);
+      setTimeout(() => {
+        setEnviado(false);
+      }, 3500);
+    }
+  }
+
+  return (
+    <Grid innerRef={ref} className={classes.fundoCompartilhar} component={Paper} elevation={2} onClick={e => e.stopPropagation()}>
+      <Grid container spacing={2} style={{ position: 'relative', padding: '6px 12px', display: 'flex' }} justifyContent='center'>
+        <Typography component='h3' style={{ fontSize: '24px', textAlign: 'center', marginTop: '0px' }}>Compartilhar</Typography>
+        <Grid item xs={12} className='row'>
+          <TextField
+            label='Link'
+            value={link}
+            readOnly
+            id='link'
+            fullWidth
+            variant='outlined'
+            margin='dense'
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position='end'>
+                  <IconButton onClick={() => copiarParaAreaDeTransferencia()} title='Copiar Link'>
+                    <MdLink />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }} />
+          <Collapse in={copiado}>
+            <Typography variant='body2' component='div' color='primary'>Link copiado para a área de transferência!</Typography>
+          </Collapse>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconButton size='medium' title='Enviar link por notificação' onClick={() => {
+            setErro(erroVazio); setEmail([]); setStringEmail(''); setMetodoCompartilhar(metodoCompartilhar === 'notificacao' ? '' : 'notificacao'); 
+          }} >
+            <Typography component='span' variant='body1' className='icon-linecons-megaphone icon-lg'
+              style={{
+                fontSize: '45px',
+                width: '75px',
+                height: '75px',
+                color: 'white',
+                background: '#009C6A',
+                borderRadius: '50px',
+                border: '5px solid #33b088',
+              }}
+            />
+          </IconButton>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconButton size='medium' title='Enviar link por email' onClick={() => {
+            setErro(erroVazio); setNotificacao([]); setStringNotificacao(''); setMetodoCompartilhar(metodoCompartilhar === 'email' ? '' : 'email'); 
+          }} >
+            <Typography component='span' variant='body1' className='glyph-icon icon-envelope icon-lg'
+              style={{
+                fontSize: '45px',
+                width: '75px',
+                height: '75px',
+                color: 'white',
+                background: '#009C6A',
+                borderRadius: '50px',
+                border: '5px solid #33b088',
+              }}
+            />
+          </IconButton>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+          <Typography component='label' variant='body1'>Notificação</Typography>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+          <Typography component='label' variant='body1'>Email</Typography>
+        </Grid>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          <Collapse in={metodoCompartilhar === 'notificacao'}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <Autocomplete
+                  multiple
+                  value={notificacao}
+                  options={options}
+                  getOptionLabel={option => formataNome(option[1])}
+                  size='small'
+                  limitTags={1}
+                  onChange={(_e, value) => setNotificacao(value)}
+                  disableCloseOnSelect
+                  disablePortal
+                  noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
+                  renderTags={(value, getTagProps) => (
+                    value.map((option, index) => (
+                      <Chip
+                        variant='outlined'
+                        label={option[1] || option}
+                        {...getTagProps({ index })} />
+                    ))
+                  )}
+                  renderInput={params => (
+                    <TextField
+                      variant='outlined'
+                      margin='dense'
+                      label='Contatos:'
+                      onChange={e => setStringNotificacao(e.target.value)}
+                      placeholder={notificacao.length === 0 ? 'Selecionar' : undefined}
+                      InputLabelProps={{ shrink: true }}
+                      error={!!erro.notificacao}
+                      helperText={erro.notificacao}
+                      {...params}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  variant='outlined'
+                  margin='dense'
+                  label='Mensagem:'
+                  placeholder='Mensagem da Notificação'
+                  fullWidth
+                  value={mensagemNotificação}
+                  onChange={e => setMensagemNotificacao(e.target.value)}
+                  error={!!erro.stringNotificacao}
+                  helperText={erro.stringNotificacao} />
+              </Grid>
+              <Grid container style={{ display: 'flex ' }} direction='row-reverse'>
+                <Grid item xs={2}>
+                  <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('N')}>Enviar</Button>
+                </Grid>
+                <Grid item xs={10}>
+                  <Collapse in={enviado}>
+                    <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
+                  </Collapse>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Collapse>
+        </Grid>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          <Collapse in={metodoCompartilhar === 'email'}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <Autocomplete
+                  multiple
+                  freeSolo
+                  value={email}
+                  options={options}
+                  getOptionLabel={option => option[2]}
+                  size='small'
+                  limitTags={1}
+                  onChange={(_e, value) => setEmail(value)}
+                  disableCloseOnSelect
+                  disablePortal
+                  noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
+                  renderTags={(value, getTagProps) => (
+                    value.map((option, index) => (
+                      <Chip
+                        variant='outlined'
+                        label={option[2] || option}
+                        {...getTagProps({ index })} />
+                    ))
+                  )}
+                  renderInput={params => (
+                    <TextField
+                      variant='outlined'
+                      margin='dense'
+                      label='Emails:'
+                      onChange={e => setStringEmail(e.target.value)}
+                      placeholder={email.length === 0 ? 'Selecionar' : undefined}
+                      InputLabelProps={{ shrink: true }}
+                      error={!!erro.email}
+                      helperText={erro.email}
+                      {...params}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  multiline
+                  label='Mensagem:'
+                  rows='2'
+                  margin='dense'
+                  variant='outlined'
+                  fullWidth
+                  placeholder='Mensagem do Email'
+                  value={mensagemEmail}
+                  onChange={e => setMensagemEmail(e.target.value)}
+                  style={{ resize: 'vertical', height: '50px' }}
+                  error={!!erro.stringEmail}
+                  helperText={erro.stringEmail} />
+              </Grid>
+              <Grid container style={{ display: 'flex' }} direction='row-reverse'>
+                <Grid item xs={2}>
+                  <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('E')}>Enviar</Button>
+                </Grid>
+                <Grid item xs={10}>
+                  <Collapse in={enviado}>
+                    <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
+                  </Collapse>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Collapse>
+        </Grid>
+      </Grid>
+    </Grid >
+  );
+});
+
+export default Compartilhar;

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

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

package/lib/components/Compartilhar/index.js

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