argous 1.2.131 → 1.2.135

package/lib/components/SimpleTable/SimpleTable.js

@@ -0,0 +1,504 @@
+import Button from './../Button';
+import Pagination from './../Pagination';
+import { createField, initField, setField, getField } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { FaSortAmountAsc, FaSortAmountDesc } from 'react-icons/fa';
+
+/**
+ * @deprecated 
+ */
+export class Action extends Component {
+  render() {
+    const {
+      glyphicon,
+      type = 'default',
+      className = '',
+      onClick,
+      item,
+      action,
+      dados,
+      sendUpdates,
+      receiveUpdates,
+      onSuccess,
+      onAllUpdated,
+      children,
+      style,
+      title,
+    } = this.props;
+
+    return (
+      <Button
+        onClick={(allFields, event) => onClick && onClick(item, event)}
+        sendUpdates={sendUpdates}
+        receiveUpdates={receiveUpdates}
+        onSuccess={onSuccess}
+        onAllUpdated={onAllUpdated}
+        action={action}
+        dados={{
+          dados,
+          item,
+        }}
+        className={`${
+          glyphicon
+            ? `btn btn-xs btn-round btn-action-min-size btn-${type}`
+            : ''
+        } ${className}`}
+        style={style}
+        title={title}
+      >
+        {glyphicon && <i className={glyphicon} />}
+        {children && <span>{children}</span>}
+      </Button>
+    );
+  }
+}
+
+Action.propTypes = {
+  glyphicon: PropTypes.string,
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  sendUpdates: PropTypes.array,
+  receiveUpdates: PropTypes.array,
+  onSuccess: PropTypes.func,
+  onAllUpdated: PropTypes.func,
+  action: PropTypes.string,
+  dados: PropTypes.object,
+  type: PropTypes.oneOf([
+    'default',
+    'primary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+  ]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  title: PropTypes.string,
+  item: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+};
+
+class SimpleTable extends Component {
+  state = {
+    editActived: undefined,
+    filterValue: '',
+  }
+
+  componentDidMount() {
+    const { field, defaultValue, filterLastValue } = this.props;
+    initField(field, defaultValue).then(value => {
+      const { order, sort, initialPage } = this.props;
+
+      if (order) {
+        setField(field, 'order', order);
+        setField(field, 'sort', sort ? sort : 'asc');
+      }
+      setField(field, 'offset', initialPage ? initialPage : 0);
+    });
+
+    if (filterLastValue) {
+      this.setState({ filterValue: filterLastValue });
+    }
+  }
+
+  filtraData = data => {
+    const { field, rows } = this.props;
+    const offset = getField(field, 'offset');
+
+    if (data) {
+      if (offset !== undefined && rows !== undefined) {
+        const nr1 = offset * rows;
+        const nr2 = nr1 + rows;
+
+        return data.filter((item, index) => {
+          if (index >= nr1 && index < nr2) {
+            return true;
+          }
+          return false;
+        });
+      }
+      return data;
+
+    }
+    return [];
+  }
+
+  listaFilhos = () => {
+    const { children } = this.props;
+
+    if (children) {
+      if (!children.length) {
+        return [children];
+      }
+      return children;
+    }
+
+    return [];
+  }
+
+  ordenaData = data => {
+    const { field } = this.props;
+
+    let dtAux = JSON.stringify(data);
+    dtAux = JSON.parse(dtAux);
+
+    const order = getField(field, 'order');
+    const sort = getField(field, 'sort');
+
+    if (!(typeof order === 'string' && order.length === 0)) {
+      const { verificaData } = this;
+      const sorted = dtAux.sort(
+        (a, b) =>
+          sort === 'asc'
+            ? verificaData(a[order]) > verificaData(b[order])
+            : verificaData(a[order]) < verificaData(b[order])
+              ? 1
+              : sort === 'asc'
+                ? verificaData(b[order]) > verificaData(a[order])
+                : verificaData(b[order]) < verificaData(a[order])
+                  ? -1
+                  : 0
+      );
+
+      return sorted;
+    }
+    return data;
+  }
+
+  verificaData = data => {
+    if (typeof data !== 'undefined') {
+      if (typeof data === 'string') {
+        data = data.trim().toLowerCase();
+
+        let aux = parseInt(data, 10);
+        data = isNaN(aux) ? data : aux;
+      }
+    }
+
+    return data;
+  }
+
+  setItemOrder = index => {
+    const { field, alias } = this.props;
+    const order = getField(field, 'order');
+    const sort = getField(field, 'sort');
+
+    let newOrder;
+    let newSort;
+
+    if (order !== alias[index]) {
+      newOrder = alias[index];
+      newSort = 'asc';
+    } else {
+      newOrder = sort === 'desc' ? '' : alias[index];
+      newSort = 'desc';
+    }
+
+    setField(field, 'order', newOrder);
+    setField(field, 'sort', newSort);
+  }
+
+  getPages = (values, rows) => {
+    if (values) {
+      const resto = values.length % rows;
+      const aux = values.length - resto;
+
+      let val = aux / rows;
+
+      val = resto ? val + 1 : val;
+
+      return val;
+    }
+    return 0;
+  }
+
+  changePage = data => {
+    const { field, onPageChange } = this.props;
+    const pagina = data.selected;
+
+    if (onPageChange) {
+      onPageChange(data);
+    }
+    setField(field, 'offset', pagina);
+  }
+
+  filterData = (value, data) => {
+    const { filter } = this.props;
+
+    return data.filter(d => {
+      for (let f of filter) {
+        if (d[f] && d[f].toString().toLowerCase().indexOf(value) >= 0) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }
+
+  checkColumnOptions = (item, value, key, columnOptions) => {
+    if (columnOptions) {
+      for (let co of columnOptions) {
+        if (co.alias === key) {
+          if (typeof co.decimalScale !== 'undefined') {
+            try {
+              if (!isNaN(value))
+                value = parseFloat(value, 10).toFixed(co.decimalScale);
+            } catch (e) { }
+          }
+
+          if (co.decimalSeparator) {
+            value = value.replace('.', co.decimalSeparator);
+          }
+
+          if (co.percentage) {
+            if (!isNaN(value)) {
+              value = value * 100;
+              value = `${value}%`;
+            }
+          }
+
+          value
+            = typeof co.prefixo !== 'undefined' ? `${co.prefixo}${value}` : value;
+          value
+            = typeof co.sufixo !== 'undefined' ? `${value}${co.sufixo}` : value;
+
+          if (co.customJsx && typeof co.customJsx === 'function') {
+            value = co.customJsx({ item, value });
+          }
+        }
+      }
+    }
+
+    return value;
+  }
+
+  checkEditConfs = (editConfs, a, index1, index2) => {
+    const { editActived } = this.state;
+
+    if (!editActived && editConfs[a]) {
+      this.setState({ editActived: { a, index1, index2 } });
+    }
+  }
+
+  finishEditing = () => {
+    this.setState({ editActived: undefined });
+  }
+
+  checkIfIsEditing = (item, a, columnOptions, editConfs, index1, index2) => {
+    const { editActived = {} } = this.state;
+
+    if (
+      editActived.a === a &&
+      editActived.index1 === index1 &&
+      editActived.index2 === index2
+    ) {
+      return editConfs[a]({
+        item,
+        value: item[a],
+        indexY: index1,
+        indexX: index2,
+        finishEditing: this.finishEditing,
+      });
+    }
+    return this.checkColumnOptions(item, item[a], a, columnOptions);
+
+  }
+
+  showFullContent = e => {
+    const cells = Array.from(e.currentTarget.cells);
+
+    cells.forEach(c => {
+      c.style.whiteSpace = 'normal';
+    });
+  }
+
+  hideFullContent = e => {
+    const cells = Array.from(e.currentTarget.cells);
+
+    cells.forEach(c => {
+      c.style.whiteSpace = 'nowrap';
+    });
+  }
+
+  render() {
+    const {
+      filtraData,
+      listaFilhos,
+      ordenaData,
+      getPages,
+      changePage,
+    } = this;
+
+    const {
+      filterValue
+    } = this.state;
+
+    const {
+      field,
+      head = [],
+      alias,
+      className = '',
+      onClick,
+      onMouseDown,
+      tdClassName = '',
+      rows,
+      id,
+      initialPage,
+      columnOptions,
+      editConfs = {},
+      filter,
+      filterPlaceholder = 'Digite aqui para buscar...',
+      filterClasses = 'form-control',
+      filterKeepLastValue,
+      wrap,
+      wrapWidth = 250,
+    } = this.props;
+
+    const wrapStyle = {
+      maxWidth: wrapWidth,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    };
+
+    let data = getField(field, 'value');
+    data = filterValue ? this.filterData(filterValue, data) : data;
+    const order = getField(field, 'order');
+    const sort = getField(field, 'sort');
+    const nrPages = getPages(data, rows);
+    const dataOrdenada = data ? ordenaData(data) : data;
+    const dataFiltrada = filtraData(dataOrdenada);
+    const listaChildrens = listaFilhos();
+
+    return (
+      <div id={id} className='over-hidden'>
+        {filter && (
+          <input
+            value={filterValue}
+            placeholder={filterPlaceholder}
+            onChange={e => {
+              this.setState({ filterValue: e.target.value.toLowerCase() }); filterKeepLastValue && filterKeepLastValue(e);
+            }}
+            className={filterClasses}
+          />
+        )}
+        <table className={`table argous-table ${className}`}>
+          {head.length > 0 && (
+            <thead>
+              <tr>
+                {head.map((item, index) => (
+                  <th
+                    key={index}
+                    // onClick={() => setItemOrder(index)}
+                    className={order === alias[index] ? 'active' : undefined}
+                  >
+                    {item}
+                    {order === alias[index] &&
+                      sort === 'asc' && <FaSortAmountAsc />}
+                    {order === alias[index] &&
+                      sort === 'desc' && <FaSortAmountDesc />}
+                  </th>
+                ))}
+                {listaChildrens.map((item, index) => (
+                  <th key={`act${index}`}>{item.props.head}</th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {dataFiltrada.length > 0 &&
+              dataFiltrada.map(
+                (item, index1) =>
+                  item && (
+                    <tr
+                      {...item.argousProps}
+                      key={index1}
+                      onClick={() => onClick && onClick(item, index1)}
+                      onMouseDown={onMouseDown}
+                      onMouseEnter={wrap ? (e => this.showFullContent(e)) : undefined}
+                      onMouseLeave={wrap ? (e => this.hideFullContent(e)) : undefined}
+                    >
+                      {alias &&
+                        alias.map((a, index2) => (
+                          <td
+                            key={index2}
+                            onClick={() =>
+                              this.checkEditConfs(editConfs, a, index1, index2)
+                            }
+                            className={tdClassName}
+                            style={wrap ? wrapStyle : undefined}
+                          >
+                            {this.checkIfIsEditing(
+                              item,
+                              a,
+                              columnOptions,
+                              editConfs,
+                              index1,
+                              index2
+                            )}
+                          </td>
+                        ))}
+                      {!alias &&
+                        item.map((a, index2) => <td key={index2}>{a}</td>)}
+                      {listaChildrens.map((act, index3) => (
+                        <td key={`act${index3}`} className={tdClassName}>
+                          {React.cloneElement(act, {
+                            ...item.props,
+                            item: item,
+                          })}
+                        </td>
+                      ))}
+                    </tr>
+                  )
+              )}
+          </tbody>
+        </table>
+        {nrPages > 0 && (
+          <Pagination
+            pages={nrPages}
+            initialPage={initialPage}
+            onChange={changePage}
+            className='pull-right'
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+SimpleTable.propTypes = {
+  field: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  ref: PropTypes.func,
+  alias: PropTypes.array,
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.array,
+  ]),
+  fieldListener: PropTypes.func,
+  onPageChange: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  head: PropTypes.array,
+  className: PropTypes.string,
+  rows: PropTypes.number,
+  order: PropTypes.string,
+  sort: PropTypes.oneOf(['asc', 'desc']),
+  onClick: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+  initialPage: PropTypes.number,
+  columnOptions: PropTypes.array,
+  editConfs: PropTypes.object,
+  filter: PropTypes.array,
+  filterKeepLastValue: PropTypes.func,
+  filterLastValue: PropTypes.string,
+  filterPlaceholder: PropTypes.string,
+  filterClasses: PropTypes.string,
+  onMouseDown: PropTypes.func,
+  tdClassName: PropTypes.string,
+  wrap: PropTypes.bool,
+  wrapWidth: PropTypes.number,
+};
+
+export default createField(SimpleTable, { disableInitField: true });

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

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

package/lib/components/SimpleTable/index.js

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

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

@@ -0,0 +1,54 @@
+import { OverrideProps, OverridableComponent } from '@material-ui/core/OverridableComponent';
+import * as React from 'react';
+import { IconType } from 'react-icons';
+
+export interface StepperTypeMap<P ={}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * Conteudo do Stepper
+     */
+    children?: React.ReactNode;
+    /**
+     * Array de passos para o stepper
+     */
+    steps?: [IconType, string, string?][];
+    /**
+     * Função chamada ao clicar em algum passo do stepper
+     */
+    onClick?: (index: number) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Função chamada ao clicar no botão de avançar
+     */
+    onNext?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Função chamada ao clicar no botão de voltar
+     */
+    onPrevious?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Função chamada ao clicar no botão de finalizar
+     */
+    onFinish?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Passo máximo permitido, utilizado para limitar ate onde o usuario pode ir
+     */
+    maxStep?: number;
+    /**
+     * Passo atual selecionado
+     */
+    activeStep?: number;
+    /**
+     * Array de booleans que mudam o passo para erro
+     */
+    errors?: boolean[];
+  };
+  defaultComponent: D;
+  classKey: StepperClassKey;
+}
+
+declare const Stepper: OverridableComponent<StepperTypeMap>;
+
+export type StepperClassKey = 'root' | 'header' | 'caption' | 'selectedCaption' | 'stepper' | 'icon' | 'mobileDivider'
+
+export type StepperProps<D extends React.ElementType = StepperTypeMap['defaultComponent'], P = {}> = OverrideProps<StepperTypeMap<P, D>, D>
+
+export default Stepper;