argous 1.2.132 → 1.2.136

package/lib/components/MultipleSelect/MultipleSelect.js

@@ -0,0 +1,106 @@
+import { createField, initField, getField, clearField } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class MultipleSelect extends Component {
+
+  componentDidMount() {
+    const { optionsField, optionsDefaultValue } = this.props;
+    initField(optionsField, optionsDefaultValue);
+  }
+
+  componentWillUnmount() {
+    const { optionsField, destroyOnUnmount } = this.props;
+
+    if (destroyOnUnmount) {
+      clearField(optionsField);
+    }
+  }
+
+  onChange = (val) => {
+    const { onChange, field } = this.props;
+
+    let value = val.toString();
+
+    const fldValue = getField(field, 'value') || [];
+
+    const newValue = [...fldValue];
+    const index = newValue.indexOf(value);
+
+    if (index >= 0) {
+      newValue.splice(index, 1);
+    } else {
+      newValue.push(value);
+    }
+
+    value = newValue;
+
+    if (onChange) {
+      onChange(value);
+    }
+
+    this.props.handleUpdates(value);
+  }
+
+  checkListSelectProps = () => {
+    const {
+      className,
+      disabled,
+      multiple,
+      style,
+    } = this.props;
+
+    return {
+      className,
+      disabled,
+      multiple,
+      style,
+    };
+  }
+
+  render() {
+    const { checkListSelectProps, onChange } = this;
+    const { field, optionsField, optionsValue, optionsLabel, classActive } = this.props;
+
+    const selectProps = checkListSelectProps();
+    const value = getField(field, 'value') || [];
+    const options = getField(optionsField, 'value') || [];
+
+    return (
+      <ul {...selectProps}>
+        {options.map((item, index) => (
+          <li
+            // eslint-disable-next-line
+            className={value.indexOf(item[optionsValue].toString()) >= 0 ? classActive : ''} key={index} title={item[optionsLabel]} onClick={() => onChange(item[optionsValue])}>{item[optionsLabel]}</li>))}
+      </ul>
+    );
+  }
+}
+
+MultipleSelect.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,
+  onChange: PropTypes.func,
+  onFieldSuccess: PropTypes.func,
+  onActionSuccess: PropTypes.func,
+  onAllUpdated: PropTypes.func,
+  optionsField: PropTypes.string.isRequired,
+  optionsDefaultValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  optionsValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  optionsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  classActive: PropTypes.string,
+};
+
+export default createField(MultipleSelect);

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

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

package/lib/components/MultipleSelect/index.js

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

package/lib/components/OtpInput/OtpInput.tsx

@@ -0,0 +1,244 @@
+
+
+import { useUpdateEffect } from '../../utils';
+import { Box, makeStyles, OutlinedTextFieldProps, TextField } from '@material-ui/core';
+import React, { useState, useEffect, useRef } from 'react';
+
+// keyCode constants
+const BACKSPACE = 8;
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+const DELETE = 46;
+const SPACEBAR = 32;
+const ENTER = 13;
+
+export interface Props extends Omit<OutlinedTextFieldProps, 'onChange' | 'variant'> {
+  numInputs?: number,
+  onChange?: (otp: string) => void,
+  separator?: React.ReactNode,
+  inputStyle?: Object,
+  value?: string,
+  onConfirm?: (otp: string) => void
+}
+
+export interface SingleProps extends Partial<Omit<Props, 'onChange'>> {
+  isLastChild: boolean,
+  focus: boolean,
+  index: number,
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const useStyles = makeStyles(theme => ({
+  field: {
+    '& [class*="MuiInputBase-root"]': {
+      height: '100%',
+      fontSize: 'inherit'
+    },
+    [theme.breakpoints.up('xs')]: {
+      margin: theme.spacing(0),
+      width: '1em', 
+      height: '1em',
+      fontSize: '.6em'
+    },
+    [theme.breakpoints.up('sm')]: {
+      margin: theme.spacing(1),
+      width: '1em', 
+      height: '1em',
+      fontSize: '.6em'
+    },
+    [theme.breakpoints.up('md')]: {
+      margin: theme.spacing(1),
+      width: '1.2em', 
+      height: '1.2em',
+      fontSize: '.8em'
+    },
+    [theme.breakpoints.up('lg')]: {
+      margin: theme.spacing(2),
+      width: '1.5em', 
+      height: '1.5em', 
+    },
+    [theme.breakpoints.up('xl')]: {
+      margin: theme.spacing(2),
+      width: '1.6em', 
+      height: '1.6em', 
+    },
+  },
+  input: {
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    padding: 0
+  }  
+}));
+
+const SingleOtpInput = ({
+  separator,
+  isLastChild,
+  focus,
+  autoFocus,
+  index,
+  value,
+  placeholder,
+  ...props
+}: SingleProps) => {
+  const classes = useStyles();
+  const inputRef = useRef<any>();
+
+  // Focus on first render
+  // Only when autoFocus is true
+  useEffect(() => {
+    if (inputRef?.current && focus && autoFocus) inputRef.current.focus();
+  }, [focus, autoFocus]);
+
+  useUpdateEffect(() => {
+    // Check if focusedInput changed
+    // Prevent calling function if input already in focus
+    if (inputRef?.current && focus) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [focus]);
+
+  return <>
+    <TextField
+      className={classes.field}
+      variant='outlined'
+      inputProps={{
+        ...props.inputProps,
+        className: classes.input,
+        autoComplete: 'off',
+        maxLength: '1',
+        ref: inputRef,
+      }}
+      value={value || ''}
+      placeholder={placeholder && placeholder[index]}
+      {...props}
+    />
+    {!isLastChild && separator}
+  </>;
+};
+
+const OtpInput = ({
+  numInputs = 6,
+  onChange = (otp: string) => void(otp),
+  value = '',
+  onConfirm = (otp: string) => void(otp),
+  ...props
+}: Props) => {
+  const [activeInput, setActiveInput] = useState(0);
+
+  const [localValue, setLocalValue] = useState(value?.toString().split('') || []);
+  const otpValue = value?.toString().split('') || localValue;
+
+  // Helper to return OTP from input
+  const handleOtpChange = (otp: string[]) => {
+    setLocalValue(otp);
+    onChange(otp.join('')?.toUpperCase());
+  };
+  
+  // Focus on input by index
+  const focusInput = (input: number) => setActiveInput(Math.max(Math.min(numInputs - 1, input), 0));
+  
+  // Focus on next input
+  const focusNextInput = () => focusInput(activeInput + 1);
+  
+  // Focus on previous input
+  const focusPrevInput = () => focusInput(activeInput - 1);
+  
+  // Change OTP value at focused input
+  const changeCodeAtFocus = (value: string) => {
+    const otp = otpValue;
+    otp[activeInput] = value[0];
+
+    handleOtpChange(otp);
+  };
+
+  // Handle pasted OTP
+  const handleOnPaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+
+    const { disabled } = props;
+
+    if (disabled) return;
+    
+    const otp = otpValue;
+    let nextActiveInput = activeInput;
+
+    // Get pastedData in an array of max size (num of inputs - current position)
+    const pastedData = e.clipboardData
+      .getData('text/plain')
+      .slice(0, numInputs - activeInput)
+      .split('');
+
+    // Paste data from focused input onwards
+    for (let pos = 0; pos < numInputs; ++pos) {
+      if (pos >= activeInput && pastedData.length > 0) {
+        otp[pos] = pastedData.shift() || '';
+        nextActiveInput++;
+      }
+    }
+
+    setActiveInput(nextActiveInput);
+
+    setTimeout(() => {
+      focusInput(nextActiveInput);
+      handleOtpChange(otp);
+    }, 0);
+  };
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => changeCodeAtFocus(e.target.value);    
+  
+  // Handle cases of backspace, delete, left arrow, right arrow, space
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+      e.preventDefault();
+      changeCodeAtFocus('');
+      focusPrevInput();
+    } else if (e.keyCode === DELETE || e.key === 'Delete') {
+      e.preventDefault();
+      changeCodeAtFocus('');
+    } else if (e.keyCode === LEFT_ARROW || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      focusPrevInput();
+    } else if (e.keyCode === RIGHT_ARROW || e.key === 'ArrowRight') {
+      e.preventDefault();
+      focusNextInput();
+    } else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
+      e.preventDefault();
+    } else if (e.keyCode === ENTER || e.key === 'Enter') {
+      onConfirm(otpValue.join('')?.toUpperCase());
+    }
+  };
+
+  // The content may not have changed, but some input took place hence change the focus
+  const handleOnInput = () => focusNextInput();
+
+  const handleFocus = (i: number) => (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setActiveInput(i);
+    e.target.select();
+  };
+
+  const handleBlur = () => setActiveInput(-1);
+
+  return (
+    <Box display='flex' alignItems='center' justifyContent='center' fontSize='8em'>
+      {Array(numInputs).fill(0).map((_, i) => (
+        <SingleOtpInput
+          {...props}
+          key={i}
+          index={i}
+          focus={activeInput === i}
+          value={otpValue[i]}
+          onChange={handleOnChange}
+          onKeyDown={handleOnKeyDown}
+          onInput={handleOnInput}
+          onPaste={handleOnPaste}
+          onFocus={handleFocus(i)}
+          onBlur={handleBlur}
+          isLastChild={i === numInputs - 1}
+        />
+      ))}
+    </Box>
+  );
+};
+
+export default OtpInput;

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

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

package/lib/components/OtpInput/index.js

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

package/lib/components/OutputText/OutputText.d.ts

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

package/lib/components/OutputText/OutputText.js

@@ -0,0 +1,57 @@
+import { createField, getField } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class OutputText extends Component {
+
+  handleDecimalValues = (value) => {
+    const { decimalSeparator, decimalScale } = this.props;
+
+    if (typeof decimalScale !== 'undefined') {
+      try {
+        if (!isNaN(value))
+          value = parseFloat(value, 10).toFixed(decimalScale);
+      } catch (e) { }
+    }
+
+    if (decimalSeparator) {
+      value = value.replace('.', decimalSeparator);
+    }
+
+    return value;
+  }
+
+  render() {
+    const { field, renderize = 'span', className, style, prefixo = '', sufixo = '' } = this.props;
+
+    let value = getField(field, 'value');
+    value = typeof value !== 'object' ? value : JSON.stringify(value);
+    value = this.handleDecimalValues(value);
+    value = `${prefixo}${value}${sufixo}`;
+
+    return React.createElement(
+      renderize,
+      { className, style },
+      value
+    );
+  }
+}
+
+OutputText.propTypes = {
+  field: PropTypes.string.isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  renderize: PropTypes.string,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  prefixo: PropTypes.string,
+  sufixo: PropTypes.string,
+  decimalSeparator: PropTypes.string,
+  decimalScale: PropTypes.number,
+};
+
+export default createField(OutputText);

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

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

package/lib/components/OutputText/index.js

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

package/lib/components/Pagination/Pagination.d.ts

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

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ReactPaginate from 'react-paginate';
+
+/**
+ * @deprecated 
+ */
+class Pagination extends Component {
+  render() {
+    const {
+      pages,
+      className = '',
+      onChange,
+      initialPage
+    } = this.props;
+
+    return (
+      <div className={className}>
+        <ReactPaginate initialPage={initialPage} pageCount={pages} pageRangeDisplayed={4} marginPagesDisplayed={0} onPageChange={onChange} previousLabel='Anterior' nextLabel='Próximo' activeClassName='active' containerClassName='pagination n-select reset-margin'/>
+      </div>
+    );
+  }
+}
+
+Pagination.propTypes = {
+  pages: PropTypes.number.isRequired,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  initialPage: PropTypes.number
+};
+
+export default Pagination;

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

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

package/lib/components/Pagination/index.js

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

package/lib/components/Programa/Programa.d.ts

@@ -0,0 +1,31 @@
+import { BoxProps } from '@material-ui/core';
+import * as React from 'react';
+
+export interface ProgramaProps extends BoxProps {
+  code: string,
+  children: React.ReactNode,
+  loading: boolean,
+  threads: Array<any>,
+  hint: string,
+  title: string,
+  panelTitle: string,
+  hideTitle: boolean, 
+  programDidMount: () => void,
+  bfHabNavegador: boolean,
+  bfAbas: Array<any>,
+  bfFerramentas: Array<any>,
+  bfExecutaFuncao: (prm: string) => void,
+  bfNmFuncaoVoltar: string,
+  bfNmCompartilhar: string,
+  bfHabCrud: boolean,
+  bfNmSalva: string,
+  bfNmExclui: string,
+  bfHabFavorito: boolean,
+  bfTitulo: string, 
+  linkCompartilhamento: string,
+  className: string
+}
+
+declare function Programa(props: ProgramaProps): JSX.Element
+
+export default Programa;

package/lib/components/Programa/Programa.js

@@ -0,0 +1,172 @@
+import BarraFerramentas from './../BarraFerramentas';
+import * as argous from '../../actions';
+import { getProgram, toggleFavorite } from '../../api';
+import { Box, CircularProgress, Paper, Typography, useTheme } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { FaExclamationTriangle } from 'react-icons/fa';
+import { connect } from 'react-redux';
+
+function Programa({
+  code,
+  children,
+  loading = false,
+  threads = [],
+  hint,
+  title,
+  panelTitle,
+  hideTitle, 
+  setCurrentProgram,
+  programDidMount,
+  favorites,
+  setFavorites,
+  bfHabNavegador,
+  bfAbas = [],
+  bfFerramentas = [],
+  bfExecutaFuncao,
+  bfNmFuncaoVoltar,
+  bfNmCompartilhar,
+  bfHabCrud,
+  bfNmSalva,
+  bfNmExclui,
+  bfHabFavorito = true,
+  bfTitulo, 
+  // permissoes = { salvar: true, editar: true, excluir: true },
+  linkCompartilhamento,
+  className,
+  fields: _,
+  ...props
+}) {
+  const [programa, setPrograma] = useState({});
+  const [favoriteAnimationInsert, setFavoriteAnimationInsert] = useState(false);
+  const [favoriteAnimationRemove, setFavoriteAnimationRemove] = useState(false);
+
+  const theme = useTheme();
+
+  useEffect(() => {
+    (async () => {
+      setCurrentProgram(code);
+      const res = await getProgram(code);
+      // TODO prever aqui tempo de bloqueio diferenciado
+      if (res.pgmOk) setPrograma({ ...res.pgmDd, loaded: true });
+      else setPrograma(p => ({ ...p, dsErro: res.dsErro, loaded: true }));   
+      programDidMount && programDidMount();
+    })();
+    return () => setCurrentProgram(undefined);
+  }, []);
+
+  const addFavorite = () => {
+    const path = window.location.pathname;
+    toggleFavorite({ link: path }).then(res => {
+      setFavorites(res.fvrts);
+      const existIn = res.fvrts.filter(item => item[3] === path);
+      if (existIn.length > 0) {
+        setFavoriteAnimationInsert(true);
+        setTimeout(() => setFavoriteAnimationInsert(false), 300);
+      } else {
+        setFavoriteAnimationRemove(true);
+        setTimeout(() => setFavoriteAnimationRemove(false), 500);
+      }
+    });
+  };
+
+  const checkIfIsFavorite = () => {
+    const path = window.location.pathname;
+    const existIn = favorites.filter(item => item[3] === path);
+    return existIn.length > 0 ? 'active' : '';
+  };
+
+  let { pgHint, pgTitle, pnlTitle, dsErro, loaded } = programa;
+
+  if (title !== undefined) pgTitle = title;
+  if (hint !== undefined) pgHint = hint;
+  if (panelTitle !== undefined) pnlTitle = panelTitle;
+  if (bfTitulo === undefined) bfTitulo = pnlTitle;
+
+  return (
+    <Box fontFamily='Raleway, Helvetica, Arial, sans-serif' className={className} {...props}>
+      {!hideTitle &&
+        <span component='span' style={{ cursor: 'default', overflow: 'hidden', display: 'block', marginBottom: '2px', color: theme.palette.text.primary }}>
+          <h2 className='reset-margin pull-left' style={{ color: theme.palette.text.primary }}>
+            {pgTitle}
+            <span className='text-muted' style={{ color: theme.palette.text.primary }} >&nbsp;|&nbsp;</span>
+          </h2>
+          <p id='pg-subtitulo' className='pull-left hw-program-subtitulo' style={{ color: theme.palette.text.primary }}>{pgHint}</p>
+        </span>
+      }
+      <Paper variant='outlined' style={{ padding: 10, position: 'relative' }}>
+        <BarraFerramentas
+          titulo={bfTitulo}
+          abas={bfAbas}
+          habFavorito={bfHabFavorito}
+          habNavegador={bfHabNavegador}
+          executaFuncao={bfExecutaFuncao}
+          nmFuncaoVoltar={bfNmFuncaoVoltar}
+          nmCompartilhar={bfNmCompartilhar}
+          habCrud={bfHabCrud}
+          nmSalva={bfNmSalva}
+          nmExclui={bfNmExclui}
+          ferramentas={bfFerramentas}
+          checkIfIsFavorite={checkIfIsFavorite}
+          addFavorite={addFavorite}
+          linkCompartilhamento={linkCompartilhamento}
+          favoriteAnimationInsert={favoriteAnimationInsert}
+          favoriteAnimationRemove={favoriteAnimationRemove}
+          threads={threads}
+          currentProgram={code}
+        />
+        {dsErro ? (
+          <Box textAlign='center' >
+            <FaExclamationTriangle style={{ color: '#ED1651', width: '90px', height: '90px' }} />
+            <Typography variant='h6'>{dsErro}</Typography>
+          </Box>
+        ) : (!pnlTitle || loading || !loaded) ? (
+          <Box position='relative' top={20} left='50%' z-index={20} height={80} width={0} marginLeft='-20px'>
+            <CircularProgress disableShrink/>
+          </Box>
+        ) : children}
+      </Paper>
+    </Box>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return { fields: state.argous.fields, favorites: state.argous.favorites };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    setCurrentProgram: data => dispatch(argous.setCurrentProgram(data)),
+    setFavorites: data => dispatch(argous.setFavorites(data))
+  };
+};
+
+Programa.propTypes = {
+  code: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+  favorites: PropTypes.array,
+  setFavorites: PropTypes.func,
+  setCurrentProgram: PropTypes.func,
+  programDidMount: PropTypes.func,
+  threads: PropTypes.array,
+  hideTitle: PropTypes.bool,  
+  bfHabNavegador: PropTypes.bool,
+  bfTitulo: PropTypes.string,
+  bfFerramentas: PropTypes.array,
+  bfAbas: PropTypes.array,
+  bfExecutaFuncao: PropTypes.func,
+  bfNmFuncaoVoltar: PropTypes.string,
+  bfNmCompartilhar: PropTypes.string,
+  bfHabCrud: PropTypes.bool,
+  bfNmSalva: PropTypes.string,
+  bfNmExclui: PropTypes.string,
+  bfHabFavorito: PropTypes.bool,
+  hint: PropTypes.string,
+  linkCompartilhamento: PropTypes.string,
+  title: PropTypes.string,
+  panelTitle: PropTypes.string,
+  // permissoes: PropTypes.object,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Programa);

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

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