@hipay/hipay-material-ui 2.0.0-beta.46 → 2.0.0-beta.47

package/es/HiSelect/HiSelect.js

@@ -27,9 +27,11 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100% !important',
     zIndex: 1200
   },
+  popperWidth: {
+    width: '100% !important'
+  },
   paper: {
     borderRadius: '0px 2px',
     maxHeight: 440,
@@ -598,7 +600,7 @@ class HiSelect extends React.PureComponent {
     }
 
     const popperClass = classNames(classes.popper, {
-      [classes.popperClose]: !open
+      [classes.popperWidth]: !this.props.containerWidth
     });
     let allSelected = false;
 
@@ -612,6 +614,10 @@ class HiSelect extends React.PureComponent {
       popperStyle = {
         width: this.props.containerWidth
       };
+
+      if (!staticPosition) {
+        popperStyle.position = 'absolute';
+      }
     }
 
     if (infiniteScroll && loadingMoreResults) {

package/es/HiSelectNew/HiSelect.js

@@ -15,6 +15,7 @@ import withStyles from '../styles/withStyles';
 import { getNextItemSelectable, foldAccents } from '../utils/helpers';
 import HiIcon from '../HiIcon';
 import keycode from 'keycode';
+import classNames from "classnames";
 export const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background2,
@@ -23,9 +24,15 @@ export const styles = theme => ({
     position: 'relative'
   },
   popper: {
-    width: '100% !important',
     zIndex: 1200
   },
+  popperWidth: {
+    width: '100% !important'
+  },
+  popperRightAlign: {
+    right: 0,
+    left: 'unset!important'
+  },
   paper: {
     borderRadius: '0px 2px',
     maxHeight: 480,
@@ -413,6 +420,22 @@ class HiSelect extends React.PureComponent {
       itemList,
       inputValue = this.buildInputValue(options, selectedItemIdList, loading)
     } = buildSelectProps(options, selectedItemIdList, searchValue, loading);
+    let popperStyle = {};
+
+    if (this.props.containerWidth > 0) {
+      popperStyle = {
+        width: this.props.containerWidth
+      };
+
+      if (!staticPosition) {
+        popperStyle.position = 'absolute';
+      }
+    }
+
+    const popperClass = classNames(classes.popper, {
+      [classes.popperWidth]: !this.props.containerWidth,
+      [classes.popperRightAlign]: this.props.containerWidth
+    });
     const content = React.createElement(ClickAwayListener, {
       onClickAway: this.handleClickAway
     }, React.createElement(Grow, {
@@ -477,13 +500,15 @@ class HiSelect extends React.PureComponent {
         this.inputEl = el;
       }
     })), open && staticPosition ? React.createElement("div", {
-      className: classes.popper
+      style: popperStyle,
+      className: popperClass
     }, content) : React.createElement(Popper, {
       anchorEl: this.inputEl,
       placement: "bottom-start",
       open: open,
-      className: classes.popper,
-      disablePortal: true
+      className: popperClass,
+      disablePortal: true,
+      style: popperStyle
     }, content));
   }
 
@@ -517,6 +542,11 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: PropTypes.object,
 
+  /**
+   * Popper width
+   */
+  containerWidth: PropTypes.number,
+
   /**
    * Inactif
    */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -76,6 +76,7 @@ export const styles = theme => ({
   }, theme.typography.b1, {
     fontWeight: 'inherit',
     width: '100%',
+    minWidth: '50%',
     padding: '5px 0',
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
@@ -102,11 +103,11 @@ export const styles = theme => ({
     color: theme.palette.neutral.main,
     fontWeight: theme.typography.fontWeightLight,
     fontSize: 12,
-    whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
     textAlign: 'right',
     margin: '4px 12px 4px 8px',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    width: '100%'
   }),
   checkbox: {
     marginTop: 3
@@ -378,6 +379,11 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   indeterminate: PropTypes.bool,
 
+  /**
+   * icon à afficher quand le composant a la prop indeterminate.
+   */
+  indeterminateIcon: PropTypes.string,
+
   /**
    * Text d'information affiché à droite de l'élément
    */
@@ -440,5 +446,5 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 export default withStyles(styles, {
   hiComponent: true,
-  name: 'HmuiHiSelectableList'
+  name: 'HmuiHiSelectableListItem'
 })(HiSelectableListItem);

package/es/HiTable/HiCellBuilder.js

@@ -0,0 +1,181 @@
+// @inheritedComponent CellBuilder
+import React from 'react';
+import PropTypes from 'prop-types';
+import TableCell from '@material-ui/core/TableCell';
+import CellAddress from '@hipay/hipay-material-ui/HiCell/CellAddress';
+import CellDate from '@hipay/hipay-material-ui/HiCell/CellDate';
+import CellIcon from '@hipay/hipay-material-ui/HiCell/CellIcon';
+import CellImage from '@hipay/hipay-material-ui/HiCell/CellImage';
+import CellNumeric from '@hipay/hipay-material-ui/HiCell/CellNumeric';
+import CellSentinel from '@hipay/hipay-material-ui/HiCell/CellSentinel';
+import CellText from '@hipay/hipay-material-ui/HiCell/CellText';
+import CellRate from '@hipay/hipay-material-ui/HiCell/CellRate';
+import CellPinToAction from '@hipay/hipay-material-ui/HiCell/CellPinToAction';
+import * as cst from './constants';
+
+class HiCellBuilder extends React.PureComponent {
+  createCell(cell, rowdata, locale) {
+    if (rowdata.datas[cell.colId]) {
+      let datacell = rowdata.datas[cell.colId];
+
+      if (cell.data !== undefined) {
+        const refproperties = cell.data.find(el => el.id === datacell.value);
+
+        if (refproperties) {
+          Object.keys(refproperties).forEach(key => {
+            datacell[key] = refproperties[key];
+          });
+        } else {
+          datacell = undefined;
+        }
+      }
+
+      if (datacell) {
+        switch (cell.type) {
+          case cst.TYPE_NUMERIC:
+            return React.createElement(CellNumeric, {
+              value: datacell.value,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+              precision: cell.precision,
+              currency: datacell.currency,
+              locale: datacell.locale || cell.locale || locale
+            });
+
+          case cst.TYPE_COUNTRY:
+            return React.createElement(CellImage, {
+              label: datacell.label,
+              shortLabel: datacell.id,
+              path: datacell.img,
+              size: datacell.size,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_IMAGE:
+            return React.createElement(CellImage, {
+              label: datacell.label,
+              shortLabel: datacell.id,
+              path: datacell.img,
+              size: datacell.size,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_RATE:
+            return React.createElement(CellRate, {
+              indicator: datacell.indicator,
+              isPositive: datacell.isPositive,
+              locale: datacell.locale || cell.locale || locale,
+              value: datacell.value,
+              trendchip: datacell.trendchip,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_ADDRESS:
+            return React.createElement(CellAddress, {
+              city: datacell.city,
+              country: datacell.country,
+              isoCountry: datacell.isoCountry,
+              name: datacell.name,
+              postalCode: datacell.postalCode,
+              streetAddress: datacell.streetAddress,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_DATE:
+            return React.createElement(CellDate, {
+              date: datacell.date,
+              displayTime: datacell.displayTime,
+              formatShort: datacell.formatShort,
+              locale: datacell.locale || cell.precision || locale,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_ICON:
+            return React.createElement(CellIcon, {
+              color: datacell.color,
+              icon: datacell.icon,
+              label: datacell.label,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+              size: cell.size
+            });
+
+          case cst.TYPE_THIRD_PARTY_SECURITY:
+            return React.createElement(CellIcon, {
+              color: datacell.color,
+              icon: datacell.icon,
+              label: datacell.label,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+              size: cell.size
+            });
+
+          case cst.TYPE_SENTINEL:
+            return React.createElement(CellSentinel, {
+              automaticFraudReviewResult: datacell.automaticFraudReviewResult,
+              fraudResult: datacell.value,
+              hideFraudResult: datacell.hideFraudResult,
+              pendingManualAction: datacell.pendingManualAction,
+              score: datacell.score,
+              smartDecision: datacell.smartDecision,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+
+          case cst.TYPE_PIN_TO_ACTION:
+            return React.createElement(CellPinToAction, {
+              number: datacell.number,
+              onClick: datacell.onClick
+            });
+
+          case cst.TYPE_ACCOUNT_NUMBER:
+            return React.createElement(CellText, {
+              label: datacell.value,
+              color: datacell.color,
+              ellipsis: datacell.ellipse
+            });
+
+          default:
+            return React.createElement(CellText, {
+              label: datacell.value,
+              color: datacell.color,
+              ellipsis: datacell.ellipse,
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+            });
+        }
+      }
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      column,
+      data,
+      locale
+    } = this.props;
+    return React.createElement(TableCell, {
+      style: {
+        border: 'none',
+        paddingRight: '13px',
+        paddingLeft: '13px'
+      }
+    }, this.createCell(column, data, locale));
+  }
+
+}
+
+HiCellBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Propriétés de la colonne
+   */
+  column: PropTypes.object.isRequired,
+
+  /**
+   * Données de la cellule
+   */
+  data: PropTypes.object.isRequired,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: PropTypes.string
+} : {};
+export default HiCellBuilder;

package/es/HiTable/HiTable.js

@@ -0,0 +1,114 @@
+// @inheritedComponent Table
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import Table from '@material-ui/core/Table';
+import HiTableHeader from './HiTableHeader';
+import HiTableBody from './HiTableBody';
+
+const styles = theme => ({
+  root: {
+    backgroundColor: theme.palette.background3
+  }
+});
+
+class HiTable extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleRequestSort = (event, property) => {
+      if (this.props.onSort) {
+        this.props.onSort(property);
+      }
+    };
+
+    this.handleRequestSort = this.handleRequestSort.bind(this);
+  }
+
+  render() {
+    const {
+      classes,
+      data,
+      columns,
+      locale,
+      sortable,
+      onRowClick,
+      dense,
+      order,
+      orderBy
+    } = this.props;
+    return React.createElement(Table, {
+      className: classes.root
+    }, React.createElement(HiTableHeader, {
+      columns: columns,
+      order: order,
+      orderBy: orderBy,
+      onRequestSort: this.handleRequestSort,
+      sortable: sortable,
+      dense: dense
+    }), React.createElement(HiTableBody, {
+      data: data,
+      columns: columns,
+      onClick: onRowClick,
+      dense: dense,
+      locale: locale
+    }));
+  }
+
+}
+
+HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: PropTypes.object.isRequired,
+
+  /**
+   * Données du tableau
+   */
+  data: PropTypes.array.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: PropTypes.bool,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Fonction se déclanchant au clic sur une ligne
+   */
+  onRowClick: PropTypes.func,
+
+  /**
+   * Fonction de trie des données
+   */
+  onSort: PropTypes.func,
+
+  /**
+   * Sens du tri
+   */
+  order: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Id de la colonne trié
+   */
+  orderBy: PropTypes.string,
+
+  /**
+   * Le tableau est-il triable ?
+   */
+  sortable: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTable'
+})(HiTable);

package/es/HiTable/HiTableBody.js

@@ -0,0 +1,56 @@
+// @inheritedComponent TableBody
+import React from 'react';
+import PropTypes from 'prop-types';
+import TableBody from '@material-ui/core/TableBody/TableBody';
+import HiTableRow from './HiTableRow';
+
+class HiTableBody extends React.PureComponent {
+  render() {
+    const {
+      columns,
+      data,
+      dense,
+      locale,
+      onClick
+    } = this.props;
+    return React.createElement(TableBody, null, data.map(n => {
+      return React.createElement(HiTableRow, {
+        columns: columns,
+        rowdata: n,
+        key: n.rowId,
+        onClick: onClick,
+        dense: dense,
+        locale: locale
+      });
+    }));
+  }
+
+}
+
+HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: PropTypes.object.isRequired,
+
+  /**
+   * Données du tableau
+   */
+  data: PropTypes.array.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: PropTypes.bool,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Fonction appelée au clic sur une ligne
+   */
+  onClick: PropTypes.func
+} : {};
+export default HiTableBody;

package/es/HiTable/HiTableHeader.js

@@ -0,0 +1,108 @@
+// @inheritedComponent TableHeader
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Tooltip from '@material-ui/core/Tooltip';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import * as cst from './constants';
+
+const styles = theme => ({
+  icon: {
+    color: '#00ADE9'
+  }
+});
+
+class HiTableHeader extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.createSortHandler = property => event => {
+      this.props.onRequestSort(event, property);
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      columns,
+      order,
+      orderBy,
+      sortable,
+      dense
+    } = this.props;
+    return React.createElement(TableHead, null, React.createElement(TableRow, {
+      style: {
+        height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
+        whiteSpace: 'nowrap'
+      }
+    }, Object.keys(columns).map(function (key) {
+      const column = columns[key];
+      return React.createElement(TableCell, {
+        key: column.colId,
+        sortDirection: orderBy === column.colId ? order : false,
+        style: {
+          border: 'none',
+          borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+          paddingRight: '13px',
+          paddingLeft: '13px'
+        },
+        numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
+      }, sortable ? React.createElement(Tooltip, {
+        title: "Sort",
+        enterDelay: 300
+      }, React.createElement(TableSortLabel, {
+        active: orderBy === column.colId,
+        direction: order,
+        onClick: this.createSortHandler(column.colId),
+        classes: {
+          icon: classes.icon
+        }
+      }, column.label)) : column.label);
+    }, this)));
+  }
+
+}
+
+HiTableHeader.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: PropTypes.object.isRequired,
+
+  /**
+   * Le tableau est-il triable ?
+   */
+  dense: PropTypes.bool,
+
+  /**
+   * Fonction d'appel du trie des données
+   */
+  onRequestSort: PropTypes.func.isRequired,
+
+  /**
+   * Sens du tri
+   */
+  order: PropTypes.oneOf(['asc', 'desc']),
+
+  /**
+   * Id de la colonne trié
+   */
+  orderBy: PropTypes.string,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  sortable: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTableHeader'
+})(HiTableHeader);

package/es/HiTable/HiTableRow.js

@@ -0,0 +1,103 @@
+// @inheritedComponent TableRow
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import TableRow from '@material-ui/core/TableRow';
+import HiCellBuilder from './HiCellBuilder';
+import * as cst from './constants';
+export const styles = theme => ({
+  row: {
+    '&:last-child': {
+      borderBottom: 'solid 1px #E4E7E8'
+    },
+    '&:first-child': {
+      borderTop: 'solid 1px #E4E7E8'
+    },
+    '&:hover': {
+      backgroundColor: `${theme.palette.action.hover} !important`
+    }
+  }
+});
+
+class HiTableRow extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(event, rowdata) {
+    if (this.props.onClick) {
+      this.props.onClick(event, rowdata);
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      columns,
+      dense,
+      key,
+      locale,
+      rowdata
+    } = this.props;
+    return React.createElement(TableRow, {
+      className: classes.row,
+      hover: true,
+      onClick: event => this.handleClick(event, rowdata),
+      key: key,
+      style: {
+        height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+      },
+      tabIndex: -1
+    }, Object.keys(columns).map(key => {
+      return React.createElement(HiCellBuilder, {
+        key: columns[key].colId,
+        column: columns[key],
+        data: rowdata,
+        locale: locale
+      });
+    }, this));
+  }
+
+}
+
+HiTableRow.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: PropTypes.object,
+
+  /**
+   * En-tête des colonnes et leurs paramètres
+   */
+  columns: PropTypes.object.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: PropTypes.bool,
+
+  /**
+   * Id de la ligne
+   */
+  key: PropTypes.string,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Action au clic sur une ligne
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Données de la ligne
+   */
+  rowdata: PropTypes.object.isRequired
+} : {};
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTableRow'
+})(HiTableRow);