argous 1.2.132 → 1.2.136

package/lib/components/Calendar/Calendar.js

@@ -0,0 +1,156 @@
+import { createField, initField, getField } from '../../fieldsRedux';
+import { addExtraZero } from '../../utils';
+import { getMonthName } from '../../utils/date';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Calendar as CalDep } from 'react-date-range';
+
+/**
+ * @deprecated 
+ */
+class Calendar extends Component {
+  state = {
+    open: false,
+    month: 0
+  }
+
+  componentDidMount() {
+    const { field, defaultValue } = this.props;
+    const defValHandled = this.checkDefaultValue(defaultValue);
+
+    initField(field, defValHandled).then(value => {
+      this.setMonthState(value);
+    });
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickCalendar);
+  }
+
+  openCalendar = (e) => {
+    e.stopPropagation();
+    this.setState({ open: true });
+    setTimeout(() => document.addEventListener('click', this.handleClickCalendar), 0);
+  }
+
+  handleClickCalendar = (e) => {
+
+    const eCls = e.target.className;
+    const eClsP = e.target.parentNode.className;
+
+    const prev = eCls !== 'rdr-MonthAndYear-button next' && eClsP !== 'rdr-MonthAndYear-button next';
+    const next = eCls !== 'rdr-MonthAndYear-button prev' && eClsP !== 'rdr-MonthAndYear-button prev';
+
+    if (next && prev) {
+      this.setState({ open: false });
+      document.removeEventListener('click', this.handleClickCalendar);
+    } else {
+      const { month } = this.state;
+
+      let newMonth = next
+        ? month + 1
+        : month - 1;
+
+      newMonth = newMonth < 0
+        ? 11
+        : newMonth > 11
+          ? 0
+          : newMonth;
+
+      this.setState({ month: newMonth });
+      this.setMonthName(null, newMonth);
+    }
+
+  }
+
+  checkDefaultValue = (defaultValue) => {
+    if (defaultValue && defaultValue.length === 10) {
+      if (!defaultValue.indexOf('-')) {
+        const newDefVal = `${defaultValue.substring(8, 10)}/${defaultValue.substring(5, 7)}/${defaultValue.substring(0, 4)}`;
+        return newDefVal;
+      }
+    }
+    return defaultValue;
+  }
+
+  setMonthState = (value) => {
+    let month;
+
+    if (value) {
+      if (value.length === 10) {
+        month = value.substring(3, 5);
+      } else {
+        const { field } = this.props;
+        console.error(`Valor da data inválido no campo ${field}. Formatos aceitos são 'dd/mm/aaaa' ou 'aaaa-mm-dd'`);
+      }
+    } else {
+      month = new Date().getMonth();
+    }
+
+    this.setState({ month });
+  }
+
+  handleSelect = (date) => {
+    const { onChange } = this.props;
+
+    const day = date._d.getDate();
+    const month = (date._d.getMonth() + 1);
+    const year = date._d.getFullYear();
+
+    const formattedDate = `${addExtraZero(day)}/${addExtraZero(month)}/${year}`;
+
+    if (onChange) {
+      onChange(year, month, day);
+    }
+    
+    this.props.handleUpdates(formattedDate);
+    this.setState({ open: false });
+  }
+
+  setMonthName = (date, month) => {
+
+    if (date) {
+      this.setState({ month: date._d.getMonth() });
+    }
+
+    const name = getMonthName(typeof month !== 'undefined'
+      ? month
+      : date._d.getMonth());
+
+    const monthDescription = document.getElementsByClassName('rdr-MonthAndYear-month')[0];
+    monthDescription.innerHTML = name;
+  }
+
+  render() {
+    const { openCalendar, handleSelect, setMonthName } = this;
+    const { open } = this.state;
+    const { field } = this.props;
+
+    const date = getField(field, 'value');
+
+    return (
+      <div className='argous-calendar'>
+        <span onMouseUp={openCalendar}>{date ? date : 'dd/mm/aaaa'}</span>
+        {open && (<CalDep date={date} onChange={handleSelect} onInit={setMonthName} />)}
+      </div>
+    );
+  }
+}
+
+Calendar.propTypes = {
+  field: PropTypes.string.isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]),
+  ajax: PropTypes.bool,
+  action: PropTypes.string,
+  dados: PropTypes.object,
+  sendUpdates: PropTypes.array,
+  receiveUpdates: PropTypes.array,
+  onFieldSuccess: PropTypes.func,
+  onActionSuccess: PropTypes.func,
+  onChange: PropTypes.func,
+  onAllUpdated: PropTypes.func,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool
+};
+
+export default createField(Calendar, { disableInitField: true });

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

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

package/lib/components/Calendar/index.js

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

package/lib/components/CartaoUsuario/CartaoUsuario.d.ts

@@ -0,0 +1,9 @@
+// import * as React from 'react';
+
+export interface CartaoUsuarioProps {
+
+}
+
+declare function CartaoUsuario(props: CartaoUsuarioProps): JSX.Element
+
+export default CartaoUsuario;

package/lib/components/CartaoUsuario/CartaoUsuario.js

@@ -0,0 +1,108 @@
+import { ArgousAvatar } from '../';
+import { setAnotherProgramField } from '../../fieldsRedux';
+import { useStore } from '../../utils';
+import { serverAction } from '../../utils/api';
+import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { IoIosCall } from 'react-icons/io';
+import { MdMail, MdMessage } from 'react-icons/md';
+
+function CartaoUsuario({ anchor, idUsuario }) {
+  const tempo = useRef();
+  const deixaMostrar = useRef(false);
+  const limpar = useRef(true);
+  const { usuarioLogado: { idUsuario: idUsuarioLogado } } = useStore();
+
+  const [localAnchor, setLocalAnchor] = useState(anchor);
+  const [localIdUsuario, setLocalIdUsuario] = useState(idUsuario);
+  const [dados, setDados] = useState({});
+  const [mostrar, setMostrar] = useState(false);
+
+  useEffect(() => {
+    if (anchor && idUsuario) {
+      setLocalAnchor(anchor);
+      setLocalIdUsuario(idUsuario);
+      deixaMostrar.current = true;
+    } else {
+      clearTimeout(tempo.current);
+      deixaMostrar.current = false;
+      setTimeout(() => {
+        if (!limpar.current) return;
+        setDados({});
+        setMostrar(false);
+      }, 200);
+    }
+  }, [anchor, idUsuario, mostrar]);
+
+  const busca = useCallback(async () => {
+    if (!localIdUsuario || !localAnchor) {
+      setMostrar(false);
+      clearTimeout(tempo.current);
+      return;
+    }
+    const res = await serverAction('getInfoUsuario', { idUsuario: localIdUsuario }, 'Argous.MntUsuarios', true);
+    tempo.current = setTimeout(() => {
+      if (deixaMostrar.current) {
+        setDados(res);
+        setMostrar(true);
+      }
+    }, 500);
+  }, [localAnchor, localIdUsuario]);
+  useEffect(() => void(busca()), [busca]);
+
+  const retornaUser = () => {
+    return { idUsuario, titulo: dados.dsNomeUsuario, subTitulo: dados.dsFuncaoUsuario, msgsNaoLidas: 0, online: false };
+  };
+
+  function mouseLeave() {
+    setLocalAnchor(null);
+    setLocalIdUsuario(null);
+    clearTimeout(tempo.current);
+    limpar.current = true;
+  }
+
+  function mouseEnter() {
+    clearTimeout(limpar.current);
+    limpar.current = false;
+  }
+
+  if (localIdUsuario && mostrar) return (
+    <Portal>
+      <Popper onClick={e => e.stopPropagation()} style={{ zIndex: 5 }} onMouseLeave={mouseLeave} onMouseEnter={mouseEnter} open={(!!anchor || !!localAnchor) && !!dados.dsNomeUsuario} anchorEl={anchor || localAnchor}>
+        <Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
+          <Grid container spacing={1}>
+            <Grid item xs='auto'>
+              <ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={dados.dsNomeUsuario} idUsuario={idUsuario || localIdUsuario} />
+            </Grid>
+            <Grid item xs='auto'>
+              <Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dados.dsNomeUsuario}</Typography>
+              <Typography variant='body2' style={{ width: '250px' }}>{dados.dsFuncaoUsuario}</Typography>
+              <Typography variant='caption' style={{ width: '250px' }}>{dados.dsSetor}</Typography>
+            </Grid>
+            {dados.dtExclusaoUsuario ? 
+              <Typography variant='h6'>Usuário excluido em {dados.dtExclusaoUsuario}</Typography> 
+              : 
+              ((idUsuario && (idUsuarioLogado !== idUsuario)) || (localIdUsuario && (idUsuarioLogado !== localIdUsuario))) &&
+              <React.Fragment>
+                {dados.nrRamalUsuario &&
+                  <Grid item xs>
+                    <Button fullWidth variant='contained' href={`tel: ${dados.nrRamalUsuario}`} title={`Ramal: ${dados.nrRamalUsuario}`}><IoIosCall/>&nbsp;{dados.nrRamalUsuario}</Button>
+                  </Grid>
+                }
+                <Grid item xs>
+                  <Button fullWidth variant='contained' href={`mailto: ${dados.dsEmailUsuario}`} title={dados.dsEmailUsuario}><MdMail/>&nbsp;Email</Button>
+                </Grid>
+                <Grid item xs>
+                  <Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', retornaUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/>&nbsp;Mensagem</Button>
+                </Grid>
+              </React.Fragment>
+            }
+          </Grid>
+        </Card>
+      </Popper>
+    </Portal>
+  );
+  return null;
+}
+
+export default CartaoUsuario;

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

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

package/lib/components/CartaoUsuario/index.js

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

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

@@ -0,0 +1,60 @@
+import { StandardProps } from '@material-ui/core';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+import * as React from 'react';
+
+export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
+  /**
+   * The content node to be collapsed.
+   */
+  children?: React.ReactNode;
+  /**
+   * The height of the container when collapsed.
+   */
+  collapsedHeight?: string | number;
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType<TransitionProps>;
+  /**
+   * Enable this prop if you encounter 'Function components cannot be given refs',
+   * use `unstable_createStrictModeTheme`,
+   * and can't forward the ref in the passed `Component`.
+   */
+  disableStrictModeCompat?: boolean;
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: boolean;
+  /**
+   * 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?: TransitionProps['timeout'] | 'auto';
+  /**
+   * Orientation of the collapse
+   */
+  orientation?: 'vertical' | 'horizontal'
+}
+
+export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' | 'wrapperInner';
+
+/**
+ * The Collapse transition is used by the
+ * [Vertical Stepper](https://material-ui.com/components/steppers/#vertical-stepper) StepContent component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ * Demos:
+ *
+ * - [Cards](https://material-ui.com/components/cards/)
+ * - [Lists](https://material-ui.com/components/lists/)
+ * - [Transitions](https://material-ui.com/components/transitions/)
+ *
+ * API:
+ *
+ * - [Collapse API](https://material-ui.com/api/collapse/)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)
+ */
+
+export default function Collapse(props: CollapseProps): JSX.Element;

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;