argous 1.2.132 → 1.2.136

package/lib/components/MaterialButton/MaterialButton.js

@@ -0,0 +1,177 @@
+import { makeStyles, capitalize, alpha } from '@material-ui/core';
+import MaterialButton from '@material-ui/core/Button';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  containedInfo: {
+    color: theme.palette.info.contrastText,
+    backgroundColor: theme.palette.info.main,
+    '&:hover': {
+      backgroundColor: theme.palette.info.dark,
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.info.main,
+      },
+    }
+  },
+  outlinedInfo: {
+    color: theme.palette.info.main,
+    border: `1px solid ${alpha(theme.palette.info.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.info.main}`,
+      backgroundColor: alpha(theme.palette.info.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  textInfo: {
+    color: theme.palette.info.main,
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.info.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  containedSuccess: {
+    color: theme.palette.success.contrastText,
+    backgroundColor: theme.palette.success.main,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.success.main,
+      },
+    }
+  },
+  outlinedSuccess: {
+    color: theme.palette.success.main,
+    border: `1px solid ${alpha(theme.palette.success.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.success.main}`,
+      backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  textSuccess: {
+    color: theme.palette.success.main,
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.success.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  containedWarning: {
+    color: theme.palette.warning.contrastText,
+    backgroundColor: theme.palette.warning.main,
+    '&:hover': {
+      backgroundColor: theme.palette.warning.dark,
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.warning.main,
+      },
+    }
+  },
+  outlinedWarning: {
+    color: theme.palette.warning.main,
+    border: `1px solid ${alpha(theme.palette.warning.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.warning.main}`,
+      backgroundColor: alpha(theme.palette.warning.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  textWarning: {
+    color: theme.palette.warning.main,
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.warning.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  containedDanger: {
+    color: theme.palette.error.contrastText,
+    backgroundColor: theme.palette.error.main,
+    '&:hover': {
+      backgroundColor: theme.palette.error.dark,
+      '@media (hover: none)': {
+        backgroundColor: theme.palette.error.main,
+      },
+    }
+  },
+  outlinedDanger: {
+    color: theme.palette.error.main,
+    border: `1px solid ${alpha(theme.palette.error.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.error.main}`,
+      backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+  textDanger: {
+    color: theme.palette.error.main,
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    }
+  },
+}));
+
+export default function Button({ color = 'default', variant = 'text', className, ...props }) {
+
+  const classes = useStyles();
+
+  function checarCor() {
+    switch (color) {
+      case 'primary':
+        return 'primary';
+      case 'secondary':
+        return 'secondary';
+      case 'inherit':
+        return 'inherit';
+      default:
+        return 'default';
+    }
+  }
+
+  return (
+    <MaterialButton
+      variant={variant}
+      color={checarCor()}
+      className={clsx(classes[variant], { [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit' && color !== 'primary' && color !== 'secondary', }, className)}
+      {...props}
+    >
+      {props.children}
+    </MaterialButton>
+  );
+}
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'info', 'success', 'warning', 'danger']),
+  component: PropTypes.elementType,
+  disabled: PropTypes.bool,
+  disableElevation: PropTypes.bool,
+  disableFocusRipple: PropTypes.bool,
+  disableRipple: PropTypes.bool,
+  endIcon: PropTypes.node,
+  focusVisibleClassName: PropTypes.string,
+  fullWidth: PropTypes.bool,
+  href: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  startIcon: PropTypes.node,
+  type: PropTypes.string,
+  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
+};

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

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

package/lib/components/MaterialButton/index.js

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

package/lib/components/MenuBar/MenuBar.d.ts

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

package/lib/components/MenuBar/MenuBar.js

@@ -0,0 +1,139 @@
+import { createField } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { FaCheck } from 'react-icons/fa';
+
+/**
+ * @deprecated 
+ */
+class MenuBar extends Component {
+  state = {
+    liWidths: [],
+    guidePositionX: 0,
+    guidePositionY: 0,
+  }
+
+  componentDidMount() {
+    this.setLiWidths(() => {
+      this.initSelectedGuide();
+      this.updateWindowDimensions();
+      window.addEventListener('resize', this.updateWindowDimensions);
+    });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { guides = [], getField, getPreviousField } = this.props;
+    const { selectedGuide, selectedGuideRow } = getField();
+    const { selectedGuide: selectedGuidePrev, selectedGuideRow: selectedGuideRowPrev } = getPreviousField(prevProps);
+
+    if (selectedGuide !== selectedGuidePrev || selectedGuideRow !== selectedGuideRowPrev) {
+      if (guides[selectedGuideRow]) {
+        this.alterGuide(guides[selectedGuideRow].indexOf(selectedGuide));
+      }
+    }
+  }
+
+  initSelectedGuide = () => {
+    const { guides = [], setField, getField } = this.props;
+    const { selectedGuide, selectedGuideRow } = getField();
+
+    if (guides.length > 0 && typeof selectedGuide !== 'undefined' && typeof selectedGuideRow !== 'undefined') {
+      this.alterGuide(guides[selectedGuideRow].indexOf(selectedGuide));
+    } else if (guides.length > 0) {
+      setField({ selectedGuide: guides[0][0], selectedGuideRow: 0 });
+    }
+  }
+
+  setLiWidths = (callback) => {
+    const { guides = [] } = this.props;
+    const liWidths = [];
+
+    for (let g of guides) {
+      liWidths.push(100 / g.length);
+    }
+    this.setState({ liWidths }, callback);
+  }
+
+  updateWindowDimensions = () => {
+    const { guides = [], getField } = this.props;
+    const { selectedGuide, selectedGuideRow } = getField();
+
+    this.alterGuide(guides[selectedGuideRow].indexOf(selectedGuide));
+  }
+
+  alterGuide = (index) => {
+    const { liWidths } = this.state;
+    const { positionSpace = 16.5, getField } = this.props;
+    const { selectedGuideRow } = getField();
+
+    if (this.fpLineGuide) {
+      const lineGuideWidth = this.fpLineGuide.offsetWidth;
+      const guidePositionX = (((lineGuideWidth * liWidths[selectedGuideRow]) / 100) * index);
+
+      let heightChildrens = 0;
+      for (let i = 0; i < this.fpLineGuide.children.length; i++) {
+
+        if (i === selectedGuideRow) {
+          break;
+        }
+
+        heightChildrens += this.fpLineGuide.children[i].offsetHeight;
+      }
+
+      const guidePositionY = heightChildrens + selectedGuideRow * positionSpace;
+
+      this.setState({ guidePositionX, guidePositionY });
+    }
+  }
+
+  render() {
+    const { liWidths, guidePositionX, guidePositionY } = this.state;
+    const { movingTabColor, guides = [], getField, setField, style, className } = this.props;
+    const { selectedGuide, selectedGuideRow, preenchidos = [] } = getField();
+
+    return (
+      <div ref={input => {
+        this.fpLineGuide = input;
+      }} style={style} className={`fp-container-line-guide ${className}`}>
+        {guides.map((g, indexG) =>
+          <ul key={indexG}>
+            {g.map((item, index) => (
+              <li key={index} style={{ width: `${liWidths[indexG]}%` }} onClick={() => {
+                setField({ selectedGuide: item, selectedGuideRow: indexG }); this.alterGuide(index);
+              }}>
+                {item}
+                {preenchidos.indexOf(item) >= 0 && <FaCheck className='fp-chck-g' />}
+              </li>
+            ))}
+          </ul>
+        )}
+        <div className='fp-moving-tab'
+          style={{
+            backgroundColor: movingTabColor,
+            boxShadow: movingTabColor ? `0 16px 26px -14px ${movingTabColor}` : undefined,
+            width: `${liWidths[selectedGuideRow]}%`,
+            transform: `translate3d(${guidePositionX}px, ${guidePositionY}px, 0px)`,
+          }}>
+          {selectedGuide}
+          {preenchidos.indexOf(selectedGuide) >= 0 && <FaCheck className='fp-chck-w' />}
+        </div>
+      </div>
+    );
+  }
+}
+
+MenuBar.propTypes = {
+  field: PropTypes.string.isRequired,
+  guides: PropTypes.array.isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]),
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  movingTabColor: PropTypes.string,
+  positionSpace: PropTypes.number,
+};
+
+export default createField(MenuBar);

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

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

package/lib/components/MenuBar/index.js

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

package/lib/components/MonthPicker/MonthPicker.d.ts

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

package/lib/components/MonthPicker/MonthPicker.js

@@ -0,0 +1,313 @@
+import { createField, setField, getField, fieldChangeListener } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import MaskedInput from 'react-maskedinput';
+
+/**
+ * @deprecated 
+ */
+class MonthPicker extends Component {
+  mobj = [
+    [{
+      mes: '01',
+      nome: 'Janeiro'
+    }, {
+      mes: '02',
+      nome: 'Fevereiro'
+    }, {
+      mes: '03',
+      nome: 'Março'
+    }], [{
+      mes: '04',
+      nome: 'Abril'
+    }, {
+      mes: '05',
+      nome: 'Maio'
+    }, {
+      mes: '06',
+      nome: 'Junho'
+    }], [{
+      mes: '07',
+      nome: 'Julho'
+    }, {
+      mes: '08',
+      nome: 'Agosto'
+    }, {
+      mes: '09',
+      nome: 'Setembro'
+    }], [{
+      mes: '10',
+      nome: 'Outubro'
+    }, {
+      mes: '11',
+      nome: 'Novembro'
+    }, {
+      mes: '12',
+      nome: 'Dezembro'
+    }]
+  ];
+  state = {
+    initialized: false,
+    year: 0,
+    stageMonths: [],
+    selectOpen: false,
+    selectOpenClicks: 0
+  }
+
+  componentDidMount() {
+    this.restYear();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.closeSelect);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { field } = this.props;
+    fieldChangeListener(field, this.fieldListener, prevProps);
+  }
+
+  fieldListener = (fieldObject, prevFieldObject) => {
+    const { initialized } = this.state;
+    const { fieldListener } = this.props;
+
+    if (!initialized && typeof fieldObject.defaultValue !== 'undefined') {
+      if (fieldObject.defaultValue.length > 0) {
+
+        if (typeof fieldObject.value[0] !== 'string') {
+          const stringifyedValues = fieldObject.value.map(v => v.toString());
+          setField(this.props.field, 'value', stringifyedValues);
+        }
+
+        const last = fieldObject.defaultValue[fieldObject.defaultValue.length - 1].toString();
+        this.setState({ year: parseInt(last.slice(0, 4), 10) });
+      }
+      this.handleinputValue(fieldObject.defaultValue);
+      this.setState({ initialized: true });
+    }
+
+    if (fieldObject.value !== prevFieldObject.value) {
+      this.handleinputValue(fieldObject.value ? fieldObject.value : []);
+    }
+
+    if (fieldListener) {
+      fieldListener(fieldObject);
+    }
+  }
+
+  onClick = (values, month) => {
+    const { year } = this.state;
+    const { type = 'single' } = this.props;
+
+    const formatedValue = `${year}${month}`;
+
+    let newValue;
+    if (values && values.length > 0) {
+      newValue = this.handleExistentValue(values, formatedValue, month);
+
+      if (type === 'stage' || type === 'multiple') {
+        newValue = newValue.sort((a, b) => a > b ? 1 : 0);
+      }
+
+    } else {
+      newValue = [formatedValue];
+    }
+
+    this.handleinputValue(newValue);
+    this.props.handleUpdates(newValue);
+
+    if (type === 'single' && newValue.length > 0) {
+      this.closeSelect();
+    }
+  }
+
+  handleExistentValue = (value, formatedValue, month) => {
+    const { field, type = 'single' } = this.props;
+    const indexValue = value.indexOf(formatedValue);
+
+    if (indexValue > -1) {
+      value.splice(indexValue, 1);
+      return [...value];
+    }
+
+    switch (type) {
+      case 'single':
+        return [formatedValue];
+      case 'stage': {
+
+        const fieldValueLgt2 = getField(field, 'value').length === 2;
+
+        const newValue = fieldValueLgt2 ? [formatedValue] : [value[0], formatedValue];
+
+        if (!fieldValueLgt2) {
+          this.closeSelect();
+        }
+
+        return newValue;
+      } case 'multiple':
+        return [...value, formatedValue];
+      default:
+        return [formatedValue];
+    }
+  }
+
+  handleinputValue = (value) => {
+    const { field, type = 'single' } = this.props;
+    value = [...value];
+    const sortedValues = value.sort((a, b) => a > b ? 1 : 0);
+    const inputValues = sortedValues.map(v => `${v.toString().slice(4)}${v.toString().slice(0, 4)}`);
+
+    switch (type) {
+      case 'single':
+        setField(field, 'inputValue', inputValues[0]);
+        break;
+      case 'stage':
+        setField(field, 'inputValue', `${inputValues[0]}${inputValues[1] ? inputValues[1] : ''}`);
+        break;
+      case 'multiple': {
+
+        let multipleValue = '';
+
+        for (let v of inputValues) {
+          multipleValue += `${v.slice(0, 2)}/${v.slice(2)} `;
+        }
+
+        setField(field, 'inputValue', multipleValue);
+        break;
+      } default:
+        setField(field, 'inputValue', inputValues[0]);
+    }
+  }
+
+  isActive = (values, month) => {
+    const { year, stageMonths } = this.state;
+    const formatedValue = `${year}${month}`;
+
+    return `${values.indexOf(formatedValue) < 0 ? '' : 'active'} ${stageMonths.indexOf(formatedValue) < 0 ? '' : 'hovered'}`;
+  }
+
+  restYear = () => {
+    const date = new Date();
+    this.setState({ year: date.getFullYear() });
+  }
+
+  onValueCapture = (v) => {
+    const { field } = this.props;
+    let value = v.target.value;
+    setField(field, 'inputValue', value);
+    value = value.replace(/\D+/g, '');
+
+    const valueLength = value.length;
+
+    let resolvedValues = [];
+    if (valueLength >= 6) {
+      const resto = valueLength % 6;
+      const valueAux = value.slice(0, valueLength - resto);
+
+      const length = valueAux.length / 6;
+
+      for (let i = 0; i < length; i++) {
+        const aux = i * 6;
+        const mes = valueAux.slice(aux, aux + 2);
+        const ano = valueAux.slice(aux + 2, aux + 6);
+
+        if (parseInt(mes, 10) <= 12 && parseInt(mes, 10) >= 1) {
+          resolvedValues.push(`${ano}${mes}`);
+        }
+      }
+    }
+
+    this.props.handleUpdates(resolvedValues);
+  }
+
+  openSelect = () => {
+
+    const { selectOpen } = this.state;
+
+    if (!selectOpen) {
+      this.setState({ selectOpen: true, selectOpenClicks: 0 });
+      window.addEventListener('click', this.closeSelect);
+    }
+  }
+
+  closeSelect = () => {
+    const { selectOpenClicks } = this.state;
+
+    if (selectOpenClicks > 0) {
+
+      this.setState({ selectOpen: false });
+      window.removeEventListener('click', this.closeSelect);
+    }
+    this.setState({ selectOpenClicks: selectOpenClicks + 1 });
+  }
+
+  render() {
+    const { field, type = 'single' } = this.props;
+    const { year, selectOpen } = this.state;
+    const values = getField(field, 'value');
+    const inputValue = getField(field, 'inputValue');
+
+    const mask = type === 'single' ? '11/1111' : '11/1111 à 11/1111';
+
+    return (
+      <div className='monthPickermaxwidth'>
+        {(type === 'single' || type === 'stage') && (
+          <MaskedInput value={inputValue} onClick={this.openSelect} onChange={this.onValueCapture} mask={mask} className='pg-monthpicker-input' />
+        )}
+        {type === 'multiple' && (
+          <input value={inputValue} onClick={this.openSelect} onChange={this.onValueCapture} className='pg-monthpicker-input' />
+        )}
+        {selectOpen && (
+          <div onClick={e => e.stopPropagation()} className='monthPickerSelect'>
+            <div className='pg-monthpicker-year' onClick={this.restYear}>
+              {year}
+            </div>
+            <div className='system-btn-group pull-left' style={{ width: '100%' }}>
+              <span onClick={() => this.setState({ year: year - 1 })} className='btn system-btn-white' style={{ width: '50%', borderRadius: 0 }}>
+                <i className='glyphicon glyphicon-chevron-left'></i>
+              </span>
+              <span onClick={() => this.setState({ year: year + 1 })} className='btn system-btn-white' style={{ width: '50%', borderRadius: 0 }}>
+                <i className='glyphicon glyphicon-chevron-right'></i>
+              </span>
+            </div>
+            <table className='table table-bordered table-monthpicker'>
+              <tbody>
+                {this.mobj.map((item, index) => (
+                  <tr key={index}>
+                    {item.map((month, index) => (
+                      <td
+                        key={index}
+                        className={this.isActive(values, month.mes)}
+                        onClick={() => this.onClick(values, month.mes)}
+                      >
+                        {month.nome}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+MonthPicker.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,
+  receiveUpdates: PropTypes.array,
+  sendUpdates: PropTypes.array,
+  onFieldSuccess: PropTypes.func,
+  onActionSuccess: PropTypes.func,
+  onAllUpdated: PropTypes.func,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  type: PropTypes.oneOf(['single', 'stage', 'multiple'])
+};
+
+export default createField(MonthPicker, { disableFieldChangeListener: true });

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

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

package/lib/components/MonthPicker/index.js

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

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

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