@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/es/HiSelectableList/HiSelectableListItem.js

@@ -21,15 +21,20 @@ export const styles = theme => ({
   listItem: {
     backgroundColor: theme.palette.background3,
     color: theme.palette.neutral.dark,
-    padding: '5px 0',
+    padding: '5px 12px 5px 0px',
     fontWeight: theme.typography.fontWeightRegular,
     maxHeight: 56,
     display: 'inline-flex',
     alignItems: 'center',
     cursor: 'pointer',
+    '&$listItemInlineWithInfoWithoutSecondary': {
+      justifyContent: 'space-between'
+    },
+    '&$listItemWithoutSecondaryInline': {
+      display: 'block'
+    },
     '&$inline': {
       maxHeight: 40,
-      alignItems: 'flex-start',
       '& $secondaryLabel': {
         display: 'inline-block'
       }
@@ -39,6 +44,8 @@ export const styles = theme => ({
       outline: 'none'
     }
   },
+  listItemWithoutSecondaryInline: {},
+  listItemInlineWithInfoWithoutSecondary: {},
   listItemHover: {
     '&:hover:not($disabled):not($pinned)': {
       backgroundColor: theme.palette.action.hover,
@@ -72,20 +79,25 @@ export const styles = theme => ({
     padding: '8px 0',
     margin: 'auto'
   },
-  listItemContent: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  }, theme.typography.b1, {
+  listItemContent: _objectSpread({}, theme.typography.b1, {
     fontWeight: 'inherit',
     width: '100%',
     minWidth: '50%',
     padding: '5px 0',
+    '&$listItemContentSelected': {
+      marginBottom: -3,
+      marginLeft: -4
+    },
     '& strong': {
       fontWeight: theme.typography.fontWeightMedium
     }
   }),
+  listItemContentSelected: {},
   label: {
+    maxWidth: '100%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
     display: 'inline-block',
     margin: '1px 0',
     paddingLeft: 4
@@ -108,17 +120,9 @@ export const styles = theme => ({
     fontSize: 12,
     textOverflow: 'ellipsis',
     textAlign: 'right',
-    margin: '4px 12px 4px 8px',
-    alignSelf: 'center',
-    minWidth: '40%',
-    maxWidth: '100%'
+    padding: '4px 0px 4px 8px',
+    alignSelf: 'center'
   }),
-  checkbox: {
-    marginTop: 3
-  },
-  checkboxWithSecondaryInline: {
-    marginTop: '-8px'
-  },
   img: {
     width: 24,
     height: 'auto',
@@ -128,7 +132,34 @@ export const styles = theme => ({
   icon: {
     margin: '0 4px',
     verticalAlign: 'middle'
-  }
+  },
+  labelContent: {
+    display: 'flex',
+    alignItems: 'center',
+    maxWidth: '70%',
+    '&$labelWithoutSecondaryInline': {
+      maxWidth: '100%'
+    }
+  },
+  labelWithoutSecondaryInline: {},
+  infosContent: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    justifyContent: 'space-between',
+    '&$infosInlineWithoutSecondary': {
+      width: 'auto'
+    },
+    '&$infosWithoutSecondaryInline': {
+      paddingLeft: 28
+    },
+    '&$infosWithSecondaryInline': {
+      marginTop: -8
+    }
+  },
+  infosInlineWithoutSecondary: {},
+  infosWithSecondaryInline: {},
+  infosWithoutSecondaryInline: {}
 });
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
@@ -208,6 +239,7 @@ class HiSelectableListItem extends React.PureComponent {
       hideCheckbox,
       onSelect,
       onKeyDown,
+      onKeyUp,
       indeterminate,
       indeterminateIcon,
       icon,
@@ -222,7 +254,8 @@ class HiSelectableListItem extends React.PureComponent {
       secondaryInline,
       secondaryLabel,
       thin,
-      type
+      type,
+      color
     } = this.props; // Return simple loader list item
 
     if (type === 'loader') {
@@ -254,39 +287,37 @@ class HiSelectableListItem extends React.PureComponent {
         [classes.selected]: selected,
         [classes.thin]: thin,
         [classes.pinned]: pinned,
-        [classes.inline]: secondaryInline
+        [classes.inline]: secondaryInline,
+        [classes.listItemWithoutSecondaryInline]: !secondaryInline,
+        [classes.listItemInlineWithInfoWithoutSecondary]: secondaryInline && info && !secondaryLabel
       }),
       disabled: disabled
     }, disabled || {
       onClick: onSelect,
       onMouseEnter: this.setHover(true),
       onMouseLeave: this.setHover(false),
-      onKeyDown: onKeyDown
+      onKeyDown,
+      onKeyUp
     }, {
       style: {
         paddingLeft: `${paddingLeft + level * 32}px`
       }
-    }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
+    }), React.createElement("div", {
+      className: classNames(classes.labelContent, {
+        [classes.labelWithoutSecondaryInline]: !secondaryInline || !secondaryLabel && !info
+      })
+    }, !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
       tabIndex: onKeyDown ? '-1' : 0,
-      checked: selected,
-      checkedIcon: checkedIcon,
       classes: {
         root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },
-      color: disabled ? "inherit" : "primary",
+      checked: selected,
+      checkedIcon: checkedIcon,
+      color: disabled ? 'inherit' : 'primary',
       disabled: disabled,
       icon: displayedIcon,
       indeterminate: indeterminate,
       indeterminateIcon: indeterminateIcon
-    }), React.createElement("div", {
-      className: classNames(classes.listItemContent, {
-        [classes.centered]: centered,
-        [classes.primaryHighlight]: type === 'primary-highlight'
-      }),
-      "data-id": id
-    }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
-      icon: icon,
-      className: classes.icon
     }), type === 'image' && img && React.createElement("img", {
       src: img,
       alt: img,
@@ -298,13 +329,29 @@ class HiSelectableListItem extends React.PureComponent {
         }
       },
       className: classes.img
-    }), this.buildItemLabel(), !!secondaryLabel && React.createElement("div", {
+    }), React.createElement("div", {
+      className: classNames(classes.listItemContent, {
+        [classes.centered]: centered,
+        [classes.primaryHighlight]: type === 'primary-highlight',
+        [classes.listItemContentSelected]: selected && color
+      }),
+      "data-id": id
+    }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
+      icon: icon,
+      className: classes.icon
+    }), this.buildItemLabel())), React.createElement("div", {
+      className: classNames(classes.infosContent, {
+        [classes.infosWithoutSecondaryInline]: !secondaryInline,
+        [classes.infosWithSecondaryInline]: !secondaryInline,
+        [classes.infosInlineWithoutSecondary]: secondaryInline && !secondaryLabel
+      })
+    }, !!secondaryLabel && React.createElement("div", {
       className: classNames(classes.secondaryLabel, {
         [classes.inline]: secondaryInline
       })
-    }, secondaryLabel)), !!info && React.createElement("span", {
-      className: classes.info
-    }, info));
+    }, secondaryLabel), !!info && React.createElement("span", {
+      className: classNames(classes.info)
+    }, info)));
   }
 
 }
@@ -413,12 +460,17 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onSelect: PropTypes.func,
+  onKeyDown: PropTypes.func,
 
   /**
    * Fonction de callback à la sélection de l'élément
    */
-  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onSelect: PropTypes.func,
 
   /**
    * Padding par défaut des éléments

package/es/HiTable/HiCellBuilder.js

@@ -15,137 +15,144 @@ import CellPinToAction from '../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],
-              fallbackImage: datacell.fallbackImage
-            });
-
-          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]
-            });
+  constructor(...args) {
+    super(...args);
 
-          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
-            });
+    this.createCell = (cell, rowdata, locale) => {
+      if (rowdata.datas[cell.colId]) {
+        let datacell = rowdata.datas[cell.colId];
 
-          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
-            });
+        if (cell.data !== undefined) {
+          const refproperties = cell.data.find(el => el.id === datacell.value);
 
-          case cst.TYPE_SENTINEL:
-            return React.createElement(CellSentinel, {
-              color: datacell.color,
-              label: datacell.label,
-              letter: datacell.label2,
-              active: datacell.active,
-              reviewer: datacell.reviewer,
-              outlined: datacell.outlined
-            });
-
-          case cst.TYPE_SENTINEL_SCORE:
-            return React.createElement(CellSentinelScore, {
-              value: datacell.value,
-              result: datacell.result,
-              active: datacell.active
-            });
-
-          case cst.TYPE_PIN_TO_ACTION:
-            return React.createElement(CellPinToAction, {
-              number: datacell.number,
-              onClick: datacell.onClick
+          if (refproperties) {
+            Object.keys(refproperties).forEach(key => {
+              datacell[key] = refproperties[key];
             });
+          } else {
+            datacell = undefined;
+          }
+        }
 
-          case cst.TYPE_ACCOUNT_NUMBER:
-          default:
-            return React.createElement(CellTextStyled, {
-              active: datacell.active,
-              color: datacell.color,
-              label: datacell.label,
-              title: datacell.title,
-              value: datacell.value
-            });
+        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 || cell.size,
+                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                fallbackImage: datacell.fallbackImage,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title
+              });
+
+            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, {
+                color: datacell.color,
+                label: datacell.label,
+                letter: datacell.label2,
+                active: datacell.active,
+                reviewer: datacell.reviewer,
+                outlined: datacell.outlined
+              });
+
+            case cst.TYPE_SENTINEL_SCORE:
+              return React.createElement(CellSentinelScore, {
+                value: datacell.value,
+                result: datacell.result,
+                active: datacell.active
+              });
+
+            case cst.TYPE_PIN_TO_ACTION:
+              return React.createElement(CellPinToAction, {
+                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                ,
+                onClick: datacell.onClick
+              });
+
+            case cst.TYPE_ACCOUNT_NUMBER:
+            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
+            default:
+              return React.createElement(CellTextStyled, {
+                active: datacell.active,
+                color: datacell.color,
+                label: datacell.label,
+                title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                value: datacell.value
+              });
+          }
         }
       }
-    }
 
-    return null;
+      return null;
+    };
   }
 
   render() {

package/es/HiTable/HiTableHeader.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 // @inheritedComponent TableHeader
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -6,15 +5,16 @@ 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 => ({
+const styles = {
   icon: {
     color: '#00ADE9'
+  },
+  headerRoot: {
+    cursor: 'inherit'
   }
-});
+};
 
 class HiTableHeader extends React.PureComponent {
   constructor(...args) {
@@ -45,8 +45,10 @@ class HiTableHeader extends React.PureComponent {
         type,
         label,
         smallLabel,
-        view
+        view,
+        headerTooltip
       } = columns[key];
+      const finalLabel = view === 's' ? smallLabel : label;
       return React.createElement(TableCell, {
         key: colId,
         sortDirection: orderBy === colId ? order : false,
@@ -56,17 +58,17 @@ class HiTableHeader extends React.PureComponent {
           paddingRight: '13px',
           paddingLeft: '13px'
         },
-        numeric: cst.ALIGN_RIGHT_TYPES.includes(type)
-      }, React.createElement(TableSortLabel, _extends({}, sortable && {
+        numeric: cst.ALIGN_RIGHT_TYPES.includes(type),
+        title: headerTooltip
+      }, sortable ? React.createElement(TableSortLabel, {
         active: orderBy === colId,
         direction: order,
-        onClick: this.createSortHandler(colId)
-      }, {
+        onClick: this.createSortHandler(colId),
         classes: {
           icon: classes.icon
         },
-        title: label
-      }), view === 's' ? smallLabel : label));
+        title: headerTooltip || label
+      }, finalLabel) : finalLabel);
     }, this)));
   }
 

package/es/HiTable/constants.js

@@ -18,6 +18,7 @@ export const CELL_HEADER_HEIGHT_DENSE = 40;
 
 export const TYPE_ACCOUNT = 'account';
 export const TYPE_ACCOUNT_NUMBER = 'account_number';
+export const TYPE_CUSTOMER_ACCOUNT_NUMBER = 'customer_account_number';
 export const TYPE_ADDRESS = 'address';
 export const TYPE_CHECKBOX = 'checkbox';
 export const TYPE_DATE = 'date';

package/es/index.js

@@ -5,16 +5,24 @@ export { default as HiCheckbox } from './HiCheckbox';
 export { default as HiChip } from './HiChip';
 export { default as HiChipSwitch } from './HiChip/HiChipSwitch';
 export { default as HiInput } from './HiForm/HiInput';
+export { default as HiAddressField } from './HiForm/HiAddressField';
 export { default as HiEmailField } from './HiForm/HiEmailField';
 export { default as HiFormControl } from './HiForm/HiFormControl';
 export { default as HiFormLabel } from './HiForm/HiFormLabel';
+export { default as HiMap } from './HiMap/HiMap';
+export { default as HiMapExpand } from './HiMap/HiMapExpand';
 export { default as HiTextField } from './HiForm/HiTextField';
 export { default as HiPasswordField } from './HiForm/HiPasswordField';
+export { default as HiPdfReader } from './HiPdfReader/HiPdfReader';
+export { default as HiSlider } from './HiForm/HiSlider';
 export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as HiTable } from './HiTable/HiTable';
+export { default as HiDotsStepper } from './HiDotsStepper/HiDotsStepper';
+export { default as HiDot } from './HiDotsStepper/HiDot';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
 export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
 export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
-export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';
+export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';
+export { default as HiLocaleUtils } from './HiDatePicker/hiLocaleUtils';

package/es/utils/helpers.js

@@ -121,7 +121,7 @@ export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
       break;
   }
 
-  const effectivePrecision = precision !== undefined ? precision : size === 'l' ? 2 : 0; // To locale
+  const effectivePrecision = precision || (size === 'l' ? 2 : 0); // To locale
 
   const options = {
     minimumFractionDigits: effectivePrecision,

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.55
+/** @license HiPay-Material-UI v2.0.0-beta.57
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,16 +10,24 @@ export { default as HiCheckbox } from './HiCheckbox';
 export { default as HiChip } from './HiChip';
 export { default as HiChipSwitch } from './HiChip/HiChipSwitch';
 export { default as HiInput } from './HiForm/HiInput';
+export { default as HiAddressField } from './HiForm/HiAddressField';
 export { default as HiEmailField } from './HiForm/HiEmailField';
 export { default as HiFormControl } from './HiForm/HiFormControl';
 export { default as HiFormLabel } from './HiForm/HiFormLabel';
+export { default as HiMap } from './HiMap/HiMap';
+export { default as HiMapExpand } from './HiMap/HiMapExpand';
 export { default as HiTextField } from './HiForm/HiTextField';
 export { default as HiPasswordField } from './HiForm/HiPasswordField';
+export { default as HiPdfReader } from './HiPdfReader/HiPdfReader';
+export { default as HiSlider } from './HiForm/HiSlider';
 export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as HiTable } from './HiTable/HiTable';
+export { default as HiDotsStepper } from './HiDotsStepper/HiDotsStepper';
+export { default as HiDot } from './HiDotsStepper/HiDot';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
 export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
 export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
 export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';
+export { default as HiLocaleUtils } from './HiDatePicker/hiLocaleUtils';