argous 1.2.132 → 1.2.136

package/lib/components/Stepper/Stepper.js

@@ -0,0 +1,222 @@
+import { Box, Button, DialogActions, Divider, ListItem, ListItemIcon, ListItemText, MobileStepper, Paper, Step, StepButton, StepConnector, StepLabel, Stepper as MuiStepper, Typography, useMediaQuery, useTheme, withStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import React from 'react';
+import { IconContext } from 'react-icons/lib';
+import { MdCheck, MdChevronLeft, MdChevronRight } from 'react-icons/md';
+
+const ColorlibConnector = withStyles(theme => ({
+  alternativeLabel: {
+    top: 22,
+  },
+  active: {
+    '& $line': {
+      backgroundPosition: 'left bottom'
+    },
+  },
+  completed: {
+    '& $line': {
+      backgroundPosition: 'left bottom',
+      backgroundImage: `linear-gradient( to right, ${theme.palette.secondary.main} 0%,${theme.palette.secondary.main} 50%,#eaeaf0 51%, #eaeaf0 100%)`,
+    },
+  },
+  line: {
+    height: 3,
+    border: 0,
+    backgroundImage: `linear-gradient( to right, ${theme.palette.secondary.main} 0%,${theme.palette.primary.main} 50%,#eaeaf0 51%, #eaeaf0 100%)`,
+    backgroundSize: '200% 100%',
+    backgroundPosition: 'right bottom',
+    transition: 'background-position 500ms ease',
+    borderRadius: 1,
+  },
+}))(StepConnector);
+
+const ColorlibStepIcon = withStyles(theme => ({
+  root: {
+    zIndex: 1,
+    color: '#fff',
+    width: 50,
+    height: 50,
+    display: 'flex',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: 24,
+    backgroundColor: '#ccc',
+    transition: 'all 400ms ease 100ms'
+  },
+  active: {
+    backgroundColor: theme.palette.primary.main,
+    boxShadow: theme.shadows[5],
+  },
+  completed: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  error: {
+    backgroundColor: theme.palette.error.main,
+  },
+  icon: {
+    '& path': {
+      stroke: '#FFF'
+    }
+  }
+}))(({ active, completed, icon, classes, error }) => (
+  <div
+    className={clsx(classes.root, {
+      [classes.active]: active,
+      [classes.completed]: completed,
+      [classes.error]: error,
+    })}
+  >
+    <IconContext.Provider value={{ className: classes.icon }} >
+      {icon}
+    </IconContext.Provider>
+  </div>
+));
+
+const stepperStyles = theme => ({
+  root: {
+    '&>div': {
+      minHeight: 'calc(100vh - 50px)'
+    }
+  },
+  header: {
+    background: theme.palette.background.default,
+    marginTop: -10,
+  },
+  caption: {
+    display: 'block',
+    textAlign: 'center',
+    color: theme.palette.text.hint
+  },
+  selectedCaption: {
+    color: theme.palette.text.secondary
+  },
+  stepper: {
+    [theme.breakpoints.down('sm')]: {
+      padding: 0
+    }
+  },
+  icon: {
+    fontSize: theme.typography.fontSize * 2,
+    '& path': {
+      stroke: theme.palette.text.primary
+    }
+  },
+  mobileDivider: {
+    marginBottom: theme.spacing(2)
+  }
+});
+
+const Stepper = ({ 
+  children, 
+  classes = {}, 
+  steps = [], 
+  onClick = (index) => (event) => void(index, event), 
+  onNext = (event) => void(event), 
+  onPrevious = (event) => void(event), 
+  onFinish = (event) => void(event), 
+  maxStep: maxStepProps, 
+  activeStep = 0,
+  errors = [],
+  component: Component = 'div',
+  backLabel = 'Voltar',
+  nextLabel = 'Avançar',
+  finishLabel = 'Finalizar',
+  disableFinish = false,
+  disableNext = false,
+  disablePrevious = false,
+  ...props
+}) => {
+  const maxSteps = steps.length;
+  const maxStep = maxStepProps || steps.length - 1;
+  
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down(Math.max(maxSteps * 100, theme.breakpoints.values.sm)));
+  
+  return <Component {...props}>
+    {mobile ? (
+      <Paper square elevation={0}>
+        <ListItem dense className={classes.header}>
+          <ListItemIcon className={classes.icon}>{steps[activeStep][0]}</ListItemIcon>
+          <ListItemText primary={steps[activeStep][1]} secondary={steps[activeStep][2]}/>
+        </ListItem>
+        <Divider className={classes.mobileDivider}/>
+      </Paper>
+    ) : (
+      <MuiStepper 
+        className={classes.stepper} 
+        alternativeLabel 
+        activeStep={activeStep} 
+        connector={<ColorlibConnector />}>
+        {steps.map(([icon, label, description], i) => (
+          <Step key={label}>
+            <StepButton disabled={i > maxStep} onClick={onClick(i)} optional={
+              <Typography 
+                variant='caption' 
+                className={clsx(classes.caption, { [classes.selectedCaption]: activeStep >= i })}>
+                {description}
+              </Typography>}>
+              <StepLabel 
+                StepIconProps={{ icon, error: errors[i] }} 
+                disabled={i > maxStep} 
+                error={errors[i]} 
+                StepIconComponent={ColorlibStepIcon}>
+                {label}
+              </StepLabel>
+            </StepButton>
+          </Step>
+        ))}
+      </MuiStepper>
+    )}
+
+    <Box padding={mobile ? 0 : 4} pt={1} pb={0}>
+      {children}
+    </Box>
+
+    {mobile ? (
+      <MobileStepper
+        steps={maxSteps}
+        position='bottom'
+        variant='dots'
+        activeStep={activeStep}
+        backButton={
+          <Button 
+            startIcon={<MdChevronLeft/>} 
+            onClick={onPrevious} 
+            disabled={activeStep === 0}>
+            {backLabel}
+          </Button>
+        }
+        nextButton={
+          <Button 
+            variant='contained' 
+            color='primary' 
+            endIcon={activeStep === maxSteps - 1 ? <MdCheck/> : <MdChevronRight/>} 
+            onClick={activeStep === steps.length - 1 ? onFinish : onNext}>
+            {activeStep === steps.length - 1 ? finishLabel : nextLabel}            
+          </Button>
+        }
+      />
+    ) : (
+      <DialogActions>
+        <Box padding={mobile ? 0 : 4} paddingTop={1} paddingBottom={1}>
+          <Button 
+            disabled={activeStep === 0 || disablePrevious} 
+            onClick={onPrevious}>
+            {backLabel}
+          </Button>
+          <Button
+            variant='contained'
+            color='primary'
+            onClick={activeStep === steps.length - 1 ? onFinish : onNext}
+            disabled={activeStep === steps.length - 1 ? disableFinish : disableNext}
+          >
+            {activeStep === steps.length - 1 ? finishLabel : nextLabel}
+          </Button>
+        </Box>
+      </DialogActions>
+    ) }
+  </Component>;
+};
+
+export default withStyles(stepperStyles, { name: 'ArgousStepper' })(Stepper);

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

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

package/lib/components/Stepper/index.js

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

package/lib/components/TablePicker/TablePicker.d.ts

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

package/lib/components/TablePicker/TablePicker.js

@@ -0,0 +1,238 @@
+import Input from './../Input';
+import SimpleTable, { Action } from './../SimpleTable';
+import { setField, getField } from '../../fieldsRedux';
+import { serverAction } from '../../utils/api';
+import { withTheme } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+/**
+ * @deprecated 
+ */
+class TablePicker extends Component {
+  state = {
+    dropOpen: false,
+    typeMessage: 0,
+    resultHeight: 0
+  }
+  changesAfterSelect = 2;
+
+  componentWillUnmount() {
+    clearTimeout(this.searchTimeout);
+    clearTimeout(this.blurTimeout);
+  }
+
+  doSearchAction = (value) => {
+
+    const recemSelecionado = this.resultRecemSelecionado();
+
+    clearTimeout(this.searchTimeout);
+
+    if (value.value && value.value.length > 2 && !recemSelecionado) {
+
+      this.setState({ typeMessage: 2, resultHeight: 50 });
+
+      this.searchTimeout = setTimeout(() => {
+
+        serverAction(this.props.searchAction, { value: value.value }).then(res => {
+
+          if (res.result) {
+
+            const resultsFiltrados = this.filtraResults(res.result);
+            const aux = resultsFiltrados.length > 0;
+
+            this.setState({ typeMessage: aux ? 0 : 3, resultHeight: aux ? resultsFiltrados.length * 38 : 50 });
+
+            setField(`results-${this.props.field}`, 'value', resultsFiltrados);
+
+          } else {
+            this.setState({ typeMessage: 3, resultHeight: 50 });
+          }
+        });
+      }, 350);
+
+    } else {
+
+      const aux = value.value && value.value.length > 0;
+
+      this.setState({ typeMessage: !recemSelecionado && aux ? 1 : 0, resultHeight: !recemSelecionado && aux ? 50 : 0 });
+
+      setField(`results-${this.props.field}`, 'value', []);
+    }
+  }
+
+  filtraResults = (results) => {
+    const itensAlreadyAdded = getField(this.props.field, 'value');
+
+    if (itensAlreadyAdded && itensAlreadyAdded.length > 0) {
+
+      const resultsFiltrados = results.filter(r => {
+        const exist = itensAlreadyAdded.filter(a => !this.compareObjectsWithAlias(a, r)).length > 0;
+
+        return !exist;
+      });
+
+      return resultsFiltrados;
+    }
+
+    return results;
+  }
+
+  resultRecemSelecionado = () => {
+    this.changesAfterSelect++;
+
+    if (this.changesAfterSelect === 1) {
+      return true;
+    } else if (this.changesAfterSelect === 2) {
+      setField(`search-${this.props.field}`, 'selectedResult', undefined);
+    }
+
+    return false;
+  }
+
+  selectResult = (item) => {
+    const { field, alias } = this.props;
+
+    setField(`search-${field}`, 'selectedResult', item);
+    this.changesAfterSelect = 0;
+    setField(`search-${field}`, 'value', this.createSearchSelectedValue(item, alias));
+    setField(`results-${field}`, 'value', []);
+    this.setState({ typeMessage: 0, resultHeight: 0 });
+
+    this.add();
+  }
+
+  createSearchSelectedValue = (item, alias) => {
+    let text = '';
+    alias.map(m => text = text + (`${item[m]} `));
+    return text;
+  }
+
+  add = () => {
+    const itemToAdd = getField(`search-${this.props.field}`, 'selectedResult');
+
+    if (itemToAdd) {
+      if (this.props.addAction) {
+
+        serverAction(this.props.addAction, { item: itemToAdd }).then(res => {
+          if (res.pgmOk) {
+            const itensAlreadyAdded = getField(this.props.field, 'value');
+            setField(this.props.field, 'value', [itemToAdd, ...itensAlreadyAdded]);
+            setField(`search-${this.props.field}`, 'value', '');
+            setField(`search-${this.props.field}`, 'selectedResult', undefined);
+          }
+        });
+      } else {
+        const itensAlreadyAdded = getField(this.props.field, 'value');
+        setField(this.props.field, 'value', [itemToAdd, ...itensAlreadyAdded]);
+        setField(`search-${this.props.field}`, 'value', '');
+        setField(`search-${this.props.field}`, 'selectedResult', undefined);
+      }
+    }
+  }
+
+  focusTypeMessage = () => {
+    const resultsData = getField(`results-${this.props.field}`, 'value');
+
+    if (resultsData.length === 0) {
+      this.setState({ typeMessage: 1, resultHeight: 50 });
+    } else {
+      this.setState({ resultHeight: resultsData.length * 38 });
+    }
+  }
+
+  blurTypeMessage = () => {
+    this.blurTimeout = setTimeout(() => {
+      this.setState({ typeMessage: 0, resultHeight: 0 });
+    }, 250);
+  }
+
+  removeItem = (item) => {
+    serverAction(this.props.removeAction, { item }).then(res => {
+      if (res.pgmOk) {
+        const itensAlreadyAdded = getField(this.props.field, 'value');
+        const newItens = itensAlreadyAdded.filter(i => this.compareObjectsWithAlias(i, item));
+        setField(this.props.field, 'value', newItens);
+      }
+    });
+  }
+
+  compareObjectsWithAlias = (a, b) => {
+    let different = false;
+    this.props.alias.map(i => {
+      if (a[i] !== b[i]) {
+        different = true;
+      }
+      return null;
+    });
+    return different;
+  }
+
+  render() {
+    const { field, defaultValue, alias, head, rows, removeAction, fieldListener, placeholder } = this.props;
+    const { typeMessage, resultHeight } = this.state;
+
+    const value = getField(field, 'value');
+
+    return (
+      <form onSubmit={(e) => e.preventDefault()}>
+        <table className='argous-groupselect'>
+          <tbody>
+            <tr className='head'>
+              <td className='gs-search'>
+
+                <Input placeholder={placeholder} onFocus={this.focusTypeMessage} onBlur={this.blurTypeMessage} field={`search-${field}`} fieldListener={this.doSearchAction} />
+
+              </td>
+            </tr>
+            <tr>
+              <td colSpan='2'>
+
+                <div className='argous-list-dropdown' style={{ height: resultHeight }}>
+                  <Scrollbars>
+                    {typeMessage > 0 && (
+                      <div className='padding-top-sm padding-bottom-sm color999 text-center'>
+                        {typeMessage === 1 && 'Escreva para começar a buscar'}
+                        {typeMessage === 2 && 'Pesquisando...'}
+                        {typeMessage === 3 && 'Nenhum resultado foi encontrado'}
+                      </div>
+                    )}
+
+                    <SimpleTable field={`results-${field}`} alias={alias} onClick={this.selectResult} className='reset-margin' />
+                  </Scrollbars>
+                </div>
+
+                <SimpleTable field={field} defaultValue={defaultValue} alias={alias} head={head} rows={value && value.length > rows ? rows : undefined} fieldListener={fieldListener} className='reset-margin-bottom'>
+                  {removeAction && <Action onClick={this.removeItem} glyphicon='glyph-icon icon-close' />}
+                </SimpleTable>
+
+                {(!value || (value && value.length < 1)) && (
+                  <div className='padding-top-sm padding-bottom-sm text-center' style={{ backgroundColor: this.props.theme.palette.background.paper }}>
+                    Pesquise acima para adicionar
+                  </div>
+                )}
+
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </form>
+    );
+  }
+}
+
+TablePicker.propTypes = {
+  field: PropTypes.string.isRequired,
+  alias: PropTypes.array.isRequired,
+  searchAction: PropTypes.string.isRequired,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  addAction: PropTypes.string,
+  placeholder: PropTypes.string,
+  removeAction: PropTypes.string,
+  head: PropTypes.array,
+  rows: PropTypes.number
+};
+
+export default withTheme(TablePicker);

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

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

package/lib/components/TablePicker/index.js

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

package/lib/components/Tabs/Tabs.d.ts

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

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class Tabs extends Component {
+  state = {
+    active: 0
+  }
+
+  render() {
+    const {
+      tabs = [],
+      children,
+      classContainer = '',
+      classContainerIndex = [],
+      classTabs = '',
+      classTabsIndex = [],
+      classSelected = '',
+      classSelectedIndex = [],
+      classActive = '',
+      classActiveIndex = []
+    } = this.props;
+
+    const { active } = this.state;
+    return (
+      <div className={`${classContainer} ${classContainerIndex[active] ? classContainerIndex[active] : ''}`}>
+        <ul className={`${classTabs} ${classTabsIndex[active] ? classTabsIndex[active] : ''}`}>
+          {tabs.map((tab, index) => (
+            <li key={index}
+              className={`${index === active ? classActive : ''} ${index === active ? classActiveIndex[active] ? classActiveIndex[active] : '' : ''}`}
+              onClick={() => this.setState({ active: index })}>
+              {tab}
+            </li>
+          ))}
+        </ul>
+        <div className={`${classSelected} ${classSelectedIndex[active] ? classSelectedIndex[active] : ''}`}>
+          {children && children[active]}
+        </div>
+      </div>
+    );
+  }
+}
+
+Tabs.propTypes = {
+  tabs: PropTypes.array,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+  classContainer: PropTypes.string,
+  classContainerIndex: PropTypes.array,
+  classTabs: PropTypes.string,
+  classTabsIndex: PropTypes.array,
+  classSelected: PropTypes.string,
+  classSelectedIndex: PropTypes.array,
+  classActive: PropTypes.string,
+  classActiveIndex: PropTypes.array,
+};
+
+export default Tabs;

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

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

package/lib/components/Tabs/index.js

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

package/lib/components/TextArea/TextArea.d.ts

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

package/lib/components/TextArea/TextArea.js

@@ -0,0 +1,123 @@
+import { createField, getField } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class TextArea extends Component {
+
+  componentWillUnmount() {
+    if (this.props.stopWriting) {
+      clearTimeout(this.stopWritingTimeout);
+    }
+  }
+
+  onChange = (event) => {
+    const { onChange } = this.props;
+
+    const value = event.target.value;
+
+    if (onChange) {
+      onChange(value);
+    }
+
+    this.props.handleUpdates(value);
+    this.stopWritingHandler(value);
+  }
+
+  stopWritingHandler = (value) => {
+    const { stopWriting, stopWritingTime = 2000 } = this.props;
+
+    if (stopWriting) {
+      clearTimeout(this.stopWritingTimeout);
+      this.stopWritingTimeout = setTimeout(() => {
+        stopWriting(value);
+      }, stopWritingTime);
+    }
+  }
+
+  checkTextAreaProps = () => {
+    const {
+      field,
+      autoComplete,
+      autoFocus,
+      cols,
+      rows,
+      disabled,
+      form,
+      maxLength,
+      minLength,
+      name,
+      placeholder,
+      spellCheck,
+      wrap,
+      style,
+    } = this.props;
+
+    const className = `${this.props.className ? this.props.className : 'form-control'}`;
+    const onChange = this.onChange;
+    const value = getField(field, 'value');
+
+    return {
+      className,
+      onChange,
+      value,
+      autoComplete,
+      autoFocus,
+      cols,
+      rows,
+      disabled,
+      form,
+      maxLength,
+      minLength,
+      name,
+      placeholder,
+      spellCheck,
+      wrap,
+      style
+    };
+  }
+
+  render() {
+    const { checkTextAreaProps } = this;
+
+    const textAreaProps = checkTextAreaProps();
+
+    return (<textarea {...textAreaProps} />);
+  }
+}
+
+TextArea.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,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  autoComplete: PropTypes.oneOf(['on', 'off']),
+  autoFocus: PropTypes.bool,
+  cols: PropTypes.string,
+  rows: PropTypes.string,
+  disabled: PropTypes.bool,
+  form: PropTypes.string,
+  maxLength: PropTypes.string,
+  minLength: PropTypes.string,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  spellCheck: PropTypes.oneOf(['default', 'true', 'false']),
+  wrap: PropTypes.oneOf(['hard', 'soft', 'off']),
+  stopWriting: PropTypes.func,
+  stopWritingTime: PropTypes.number
+};
+
+export default createField(TextArea);

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

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

package/lib/components/TextArea/index.js

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