@hipay/hipay-material-ui 2.0.0-beta.36 → 2.0.0-beta.37

package/es/HiCell/CellPinToAction.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiPin from '../HiPin';
+export const styles = {
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  }
+};
+/**
+ * Cette cellule permet d'afficher un pin avec callback (optionnel).
+ */
+
+var _ref = React.createElement(HiPin, null, "0");
+
+class CellPinToAction extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      onClick,
+      number
+    } = this.props;
+    if (number === undefined) return '';
+    return React.createElement("div", {
+      className: classes.wrapper
+    }, number === 0 ? _ref : React.createElement(HiPin, {
+      color: "primary",
+      onClick: onClick
+    }, number));
+  }
+
+}
+
+CellPinToAction.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Pin number to display
+   */
+  number: PropTypes.number,
+
+  /**
+   * Fonction de callback onClick sur le pin
+   */
+  onClick: PropTypes.func
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellPin'
+})(CellPinToAction);

package/es/HiCell/CellRate.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { ArrowBottomRight, ArrowTopRight, Equal } from 'mdi-material-ui';
+import { formatRate } from '../utils/helpers';
+import withStyles from '../styles/withStyles';
+export const styles = theme => ({
+  flexContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    position: 'relative',
+    textAlign: 'right'
+  },
+  trendChipIcon: {
+    width: 14,
+    height: 14,
+    position: 'relative',
+    top: 2
+  },
+  positive: {
+    color: theme.palette.positive.main
+  },
+  negative: {
+    color: theme.palette.negative.main
+  },
+  neutral: {
+    color: theme.palette.neutral.main
+  },
+  spanIndicator: {
+    fontSize: 11,
+    float: 'right',
+    color: '#737373',
+    position: 'relative',
+    right: 3
+  },
+  rateDiv: {
+    position: 'relative'
+  }
+});
+/**
+ * Cette cellule permet d'afficher un pourcentage
+ * avec une icône d'évolution (optionnelle) et un indicateur du type de données représentées (optionnel)
+ */
+
+class CellRate extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      value,
+      trendchip,
+      isPositive,
+      indicator,
+      locale,
+      view
+    } = this.props;
+    let trendIcon;
+    const displayedRate = formatRate(value, view, locale);
+
+    switch (trendchip) {
+      case 'equal':
+        trendIcon = React.createElement(Equal, {
+          className: classNames(classes.trendChipIcon, classes.neutral)
+        });
+        break;
+
+      case 'up':
+        trendIcon = React.createElement(ArrowTopRight, {
+          className: classNames(classes.trendChipIcon, {
+            [classes.positive]: isPositive,
+            [classes.negative]: !isPositive
+          })
+        });
+        break;
+
+      case 'down':
+        trendIcon = React.createElement(ArrowBottomRight, {
+          className: classNames(classes.trendChipIcon, {
+            [classes.positive]: !isPositive,
+            [classes.negative]: isPositive
+          })
+        });
+        break;
+
+      default:
+        break;
+    }
+
+    return React.createElement("div", {
+      className: classes.flexContent
+    }, React.createElement("div", {
+      className: typeof indicator === 'undefined' && classes.rateDiv || ''
+    }, displayedRate, trendIcon), typeof indicator !== 'undefined' && React.createElement("span", {
+      className: classes.spanIndicator
+    }, indicator));
+  }
+
+}
+
+CellRate.defaultProps = {
+  isPositive: true
+};
+CellRate.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Spécifie le type de donnée évalué (ex: 'volume', 'amount', ...)
+   */
+  indicator: PropTypes.string,
+
+  /**
+   * True si une augmentation est considérée comme positive, détermine la couleur de l'icône
+   */
+  isPositive: PropTypes.bool,
+
+  /**
+   * Locale BCP 47
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Évolution par rapport à la période précédente, détermine l'icône associée
+   */
+  trendchip: PropTypes.oneOf(['up', 'down', 'equal']).isRequired,
+
+  /**
+   * Rate
+   */
+  value: PropTypes.number.isRequired,
+
+  /**
+   * View (L/M/S)
+   */
+  view: PropTypes.oneOf(['l', 'm', 's'])
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellRate'
+})(CellRate);

package/es/HiCell/CellSentinel.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiColoredLabel from '../HiColoredLabel';
+import withStyles from '../styles/withStyles';
+export const styles = {
+  smartDecision: {
+    marginLeft: 2,
+    display: 'inline-block',
+    minWidth: 18
+  },
+  label: {
+    marginLeft: 2
+  },
+  nowrap: {
+    whiteSpace: 'nowrap'
+  }
+};
+/**
+ * Get Theme color from fraudResult
+ * @param fraudResult
+ * @returns {*}
+ */
+
+function getColorFromFraudResult(fraudResult) {
+  let color;
+
+  switch (fraudResult.toUpperCase()) {
+    case 'ACCEPTED':
+      color = 'positive';
+      break;
+
+    case 'BLOCKED':
+      color = 'negative';
+      break;
+
+    case 'CHALLENGED':
+      color = 'middle';
+      break;
+
+    case 'PENDING':
+      color = 'primary';
+      break;
+
+    case 'FORCE_AUTHENTICATE':
+    case 'ASK_AUTHENTICATE':
+    default:
+      color = 'neutral';
+      break;
+  }
+
+  return color;
+}
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+
+class CellSentinel extends React.PureComponent {
+  render() {
+    const {
+      classes,
+      score,
+      fraudResult,
+      automaticFraudReviewResult,
+      pendingManualAction,
+      smartDecision,
+      hideFraudResult
+    } = this.props;
+    const scoreLabel = score > 0 ? `+${score}` : `${score}`;
+    return React.createElement("div", {
+      style: {
+        textAlign: 'right'
+      }
+    }, React.createElement(HiColoredLabel, {
+      label: scoreLabel,
+      color: getColorFromFraudResult(fraudResult),
+      classes: {
+        root: classes.label
+      },
+      active: pendingManualAction
+    }), !hideFraudResult && React.createElement(HiColoredLabel, {
+      label: fraudResult.toUpperCase().substr(0, 1),
+      color: getColorFromFraudResult(fraudResult),
+      classes: {
+        root: classes.label
+      },
+      active: pendingManualAction
+    }), !!smartDecision && React.createElement("div", {
+      className: classes.smartDecision
+    }, automaticFraudReviewResult && React.createElement(HiColoredLabel, {
+      label: automaticFraudReviewResult.toUpperCase().substr(0, 1),
+      color: getColorFromFraudResult(automaticFraudReviewResult),
+      active: pendingManualAction
+    })));
+  }
+
+}
+
+CellSentinel.defaultProps = {
+  hideFraudResult: false
+};
+CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Résultat de l'automaticFraudReview si la transaction est passée par SmartDecision
+   */
+  automaticFraudReviewResult: PropTypes.string,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Résultat de la fraude
+   */
+  fraudResult: PropTypes.string.isRequired,
+
+  /**
+   * Si true le fraudResult ne sera pas affiché
+   */
+  hideFraudResult: PropTypes.bool,
+
+  /**
+   * Signal qu'il attend une réponse manuelle
+   */
+  pendingManualAction: PropTypes.bool,
+
+  /**
+   * Score de la fraude
+   */
+  score: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+
+  /**
+   * Active le SmartDecision (ajoute l'indicateur ou blanc)
+   */
+  smartDecision: PropTypes.bool
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellSentinel'
+})(CellSentinel);

package/es/HiCell/CellText.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiColoredLabel from '../HiColoredLabel';
+export const styles = {
+  leftEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    direction: 'rtl'
+  },
+  rightEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre'
+  },
+  noEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    whiteSpace: 'pre'
+  }
+};
+
+class CellText extends React.Component {
+  constructor(props) {
+    super(props);
+    this.cellText = null;
+    this.buildEllipsis = this.buildEllipsis.bind(this);
+  }
+  /**
+   * TODO - Ellipsis (middle, after-first-word)
+   */
+
+
+  componentDidMount() {
+    this.buildEllipsis();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.label !== this.props.label) this.buildEllipsis();
+  }
+
+  buildEllipsis() {
+    /**
+     * Calcul l'espace disponible dans la cellule en plus du premier mot
+     * si il reste de l'espace, définit la largeur du span pour le reste du texte
+     */
+    if (this.props.ellipsis === 'after-first-word' || this.props.ellipsis === 'name') {
+      if (this.cellText !== null) {
+        const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
+
+        if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+          const availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - 2;
+
+          if (availableEndSpace > 0) {
+            endSpan.style.width = `${availableEndSpace}px`;
+          } else {
+            startSpan.style.width = '100%';
+          }
+        }
+      }
+    }
+    /**
+     * Calcul l'espace pris par les 2 spans (les 2 moitiés du texte),
+     * si ils dépassent la largeur de la cellule :
+     * - diminue d'autant et proportionnellement chaque span
+     * - ajoute l'ellipse à gauche de la deuxième moitié du texte.
+     */
+
+
+    if (this.props.ellipsis === 'middle') {
+      if (this.cellText !== null) {
+        const [startSpan, endSpan] = this.cellText.getElementsByTagName('span');
+
+        if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+          const availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - endSpan.offsetWidth;
+
+          if (availableEndSpace < 0) {
+            startSpan.style.width = '50%';
+            endSpan.style.width = '49%';
+          } else {
+            startSpan.style.width = 'initial';
+            endSpan.style.width = 'initial';
+          }
+        }
+      }
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      label,
+      ellipsis,
+      color
+    } = this.props;
+    let start;
+    let end;
+    let valueElement = '';
+    const valueString = label.toString();
+
+    switch (ellipsis) {
+      case 'name':
+      case 'after-first-word':
+        // Split value in 2 strings around first whitespace
+        start = valueString.substr(0, valueString.indexOf(' '));
+        end = valueString.substr(valueString.indexOf(' ') + 1);
+
+        if (start === '') {
+          start = end;
+          end = '';
+        }
+
+        valueElement = React.createElement("div", {
+          ref: div => {
+            this.cellText = div;
+          }
+        }, React.createElement("span", {
+          className: classes.rightEllipsisSpan
+        }, `${start} `), React.createElement("span", {
+          className: classes.leftEllipsisSpan
+        }, end));
+        break;
+
+      case 'middle':
+        // Split value in 2 strings
+        start = valueString.substr(0, Math.round(valueString.length / 2));
+        end = valueString.substr(Math.round(valueString.length / 2));
+        valueElement = React.createElement("div", {
+          ref: div => {
+            this.cellText = div;
+          }
+        }, React.createElement("span", {
+          className: classes.noEllipsisSpan
+        }, start), React.createElement("span", {
+          className: classes.leftEllipsisSpan
+        }, end));
+        break;
+
+      case 'left':
+        valueElement = color ? React.createElement(HiColoredLabel, {
+          className: classes.leftEllipsisSpan,
+          label: valueString,
+          color: color
+        }) : React.createElement("div", {
+          className: classes.leftEllipsisSpan,
+          style: {
+            width: '100%'
+          }
+        }, valueString);
+        break;
+
+      case 'right':
+      default:
+        valueElement = color ? React.createElement(HiColoredLabel, {
+          className: classes.rightEllipsisSpan,
+          label: valueString,
+          color: color
+        }) : React.createElement("div", {
+          className: classes.rightEllipsisSpan,
+          style: {
+            width: '100%'
+          }
+        }, valueString);
+        break;
+    }
+
+    return valueElement;
+  }
+
+}
+
+CellText.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Couleur du text & du background
+   */
+  color: PropTypes.string,
+
+  /**
+   * Ellipsis
+   */
+  ellipsis: PropTypes.oneOf(['left', 'right', 'middle', 'name', 'after-first-word']),
+
+  /**
+   * Label à afficher
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+} : {};
+export default withStyles(styles, {
+  name: 'HmuiCellText'
+})(CellText);

package/es/HiCell/index.js

@@ -0,0 +1,8 @@
+export { default as CellAddress } from './CellAddress';
+export { default as CellDate } from './CellDate';
+export { default as CellIcon } from './CellIcon';
+export { default as CellImage } from './CellImage';
+export { default as CellNumeric } from './CellNumeric';
+export { default as CellRate } from './CellRate';
+export { default as CellSentinel } from './CellSentinel';
+export { default as CellText } from './CellText';

package/es/HiCheckbox/HiCheckbox.js

@@ -10,8 +10,8 @@ import HiIcon from '../HiIcon';
 import classNames from 'classnames';
 export const styles = theme => ({
   root: {
-    marginRight: 6,
-    marginLeft: 6,
+    marginRight: 4,
+    marginLeft: 4,
     padding: 0
   },
   checked: {},

package/es/HiDatePicker/Caption.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread";
-// @flow weak
 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '../styles/withStyles';

package/es/HiDatePicker/HiDatePicker.js

@@ -213,7 +213,7 @@ class HiDatePicker extends React.Component {
       todayButton: translations.today,
       onTodayButtonClick: this.handleCurrentMonthChange,
       weekdayElement: Weekday,
-      navbarElement: props2 => React.createElement(NavBar, _extends({
+      NavBarElement: props2 => React.createElement(NavBar, _extends({
         showClockButton: enableTime,
         onClockClick: this.handleClockClick
       }, props2)),