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

package/HiAppBar/HiAppBar.js

@@ -101,14 +101,12 @@ function (_React$Component) {
     value: function handleCollapse() {
       if (this.props.onCollapse) {
         this.props.onCollapse();
-        console.log('oncollapse');
       } else {
         this.setState(function (prevState) {
           return {
             collapsed: !prevState.collapsed
           };
         });
-        console.log('setState');
       }
     }
   }, {

package/HiCell/CellAddress.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = function styles() {
+  return {
+    rightEllipsisSpan: {
+      display: 'inline-block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'pre',
+      width: '100%'
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher une adresse ou le nom d'un lieu
+ * - si le nom du lieu est défini, on affiche le lieu et la ville
+ * - sinon on affiche la ville et le pays
+ * - tous les champs définis sont affichés dans le tooltip
+ */
+
+
+exports.styles = styles;
+
+var CellAddress =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellAddress, _React$PureComponent);
+
+  function CellAddress() {
+    (0, _classCallCheck2.default)(this, CellAddress);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellAddress).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellAddress, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          streetAddress = _this$props.streetAddress,
+          name = _this$props.name,
+          city = _this$props.city,
+          postalCode = _this$props.postalCode,
+          view = _this$props.view,
+          country = _this$props.country,
+          isoCountry = _this$props.isoCountry;
+      var labelItems = (view === 'l' ? [name, city, country] : [name, city, isoCountry]).filter(function (item) {
+        return item !== undefined;
+      });
+      var label = labelItems && labelItems.length > 0 ? labelItems.join(', ') : '';
+      var title = '';
+      if (name) title += "".concat(name, "\n");
+      if (streetAddress) title += "".concat(streetAddress, "\n");
+      if (city && postalCode) title += "".concat(city, ", ").concat(postalCode, "\n");
+      if (city && !postalCode) title += "".concat(city, "\n");
+      if (postalCode && !city) title += "".concat(postalCode, "\n");
+      if (country && isoCountry) title += "".concat(country, ", ").concat(isoCountry);
+      if (country && !isoCountry) title += country;
+      if (isoCountry && !country) title += isoCountry;
+      return _react.default.createElement("div", {
+        className: classes.rightEllipsisSpan,
+        title: title
+      }, label);
+    }
+  }]);
+  return CellAddress;
+}(_react.default.PureComponent);
+
+CellAddress.defaultProps = {
+  view: 'l'
+};
+CellAddress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Ville
+   */
+  city: _propTypes.default.string,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Pays
+   */
+  country: _propTypes.default.string,
+
+  /**
+   * Code ISO du pays
+   */
+  isoCountry: _propTypes.default.string,
+
+  /**
+   * Nom du lieu
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * Code postal
+   */
+  postalCode: _propTypes.default.string,
+
+  /**
+   * Numéro et nom de la rue
+   */
+  streetAddress: _propTypes.default.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellAddress'
+})(CellAddress);
+
+exports.default = _default;

package/HiCell/CellDate.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+require("moment/locale/fr");
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = {
+  rightEllipsisSpan: {
+    display: 'inline-block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'pre',
+    width: '100%'
+  }
+};
+/**
+ * Cette cellule permet d'afficher une date en fonction de la locale de l'utilisateur
+ */
+
+exports.styles = styles;
+
+var CellDate =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellDate, _React$PureComponent);
+
+  function CellDate() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CellDate);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(CellDate)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this.formatLong = 'dddd DD MMMM YYYY HH:mm:ss';
+    return _this;
+  }
+
+  (0, _createClass2.default)(CellDate, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          displayTime = _this$props.displayTime,
+          date = _this$props.date,
+          locale = _this$props.locale,
+          view = _this$props.view,
+          formatShort = _this$props.formatShort;
+      if (!date) return '';
+      var mdate = (0, _moment.default)(date);
+      mdate.locale(locale);
+      var label;
+
+      if (view === 'l') {
+        label = displayTime ? mdate.format(this.formatLong) : mdate.format(this.formatLong.replace(' HH:mm:ss', ''));
+      } else if (view === 'm') {
+        label = displayTime ? mdate.format("".concat(formatShort, " HH:mm:ss")) : mdate.format(formatShort);
+      } else {
+        label = displayTime ? mdate.format("".concat(formatShort.replace('YYYY', 'YY'), " HH:mm:ss")) : mdate.format(formatShort.replace('YYYY', 'YY'));
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.rightEllipsisSpan
+      }, label);
+    }
+  }]);
+  return CellDate;
+}(_react.default.PureComponent);
+
+CellDate.defaultProps = {
+  displayTime: false,
+  formatShort: 'DD/MM/YYYY',
+  locale: 'en',
+  view: 'm'
+};
+CellDate.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Date as string
+   */
+  date: _propTypes.default.string,
+
+  /**
+   * Affiche l'heure
+   */
+  displayTime: _propTypes.default.bool,
+
+  /**
+   * Format de la date en vue small (ex: DD/MM/YYYY)
+   * @see https://momentjs.com/docs/#/parsing/string-format/
+   */
+  formatShort: _propTypes.default.string,
+
+  /**
+   * Locale moment
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellDate'
+})(CellDate);
+
+exports.default = _default;

package/HiCell/CellIcon.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var styles = {
+  icon: {
+    float: 'left'
+  },
+  label: {
+    margin: '4px 0 4px 5px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  }
+};
+/**
+ * Cette cellule permet d'afficher une icône et un label (optionnel).
+ * En vue small (s) elle affiche uniquement l'icône avec une largeur fixe.
+ */
+
+exports.styles = styles;
+
+var CellIcon =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellIcon, _React$PureComponent);
+
+  function CellIcon() {
+    (0, _classCallCheck2.default)(this, CellIcon);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellIcon).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellIcon, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          icon = _this$props.icon,
+          label = _this$props.label,
+          view = _this$props.view;
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, icon && _react.default.createElement(_HiIcon.default, {
+        color: color,
+        className: classes.icon,
+        icon: icon,
+        width: 40,
+        height: 24
+      }), view !== 's' && label && _react.default.createElement("span", {
+        className: classes.label
+      }, label));
+    }
+  }]);
+  return CellIcon;
+}(_react.default.PureComponent);
+
+CellIcon.defaultProps = {
+  view: 'm',
+  color: 'neutral'
+};
+CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Couleur de l'icône
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * Icon name [from material-design-icons](https://materialdesignicons.com/)
+   * used by HiIconBuilder
+   */
+  icon: _propTypes.default.string,
+
+  /**
+   * Label
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * View (L/M/S)
+   */
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellIcon'
+})(CellIcon);
+
+exports.default = _default;

package/HiCell/CellImage.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var styles = function styles() {
+  return {
+    img: {
+      height: 'auto',
+      float: 'left'
+    },
+    label: {
+      marginLeft: 5,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    wrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
+ * En vue large, aucun tooltip n'est affiché
+ * En vue small (s) elle affiche uniquement l'image avec une largeur fixe.
+ */
+
+
+exports.styles = styles;
+
+var CellImage =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellImage, _React$PureComponent);
+
+  function CellImage() {
+    (0, _classCallCheck2.default)(this, CellImage);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellImage).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellImage, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          path = _this$props.path,
+          label = _this$props.label,
+          shortLabel = _this$props.shortLabel,
+          view = _this$props.view,
+          size = _this$props.size;
+      if (!path || path === '') return '';
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, _react.default.createElement("img", {
+        src: path,
+        alt: label,
+        className: classes.img,
+        width: size
+      }), shortLabel && view === 'm' && _react.default.createElement("span", {
+        className: classes.label
+      }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {
+        className: classes.label
+      }, label));
+    }
+  }]);
+  return CellImage;
+}(_react.default.PureComponent);
+
+CellImage.defaultProps = {
+  size: 24,
+  view: 's'
+};
+CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Label
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Image path
+   */
+  path: _propTypes.default.string,
+
+  /**
+   * Short label
+   */
+  shortLabel: _propTypes.default.string,
+
+  /**
+   * Image size
+   */
+  size: _propTypes.default.number,
+
+  /**
+   * View (L/M/S)
+   */
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellImage'
+})(CellImage);
+
+exports.default = _default;

package/HiCell/CellNumeric.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _helpers = require("../utils/helpers");
+
+var styles = function styles() {
+  return {
+    wrapper: {
+      textAlign: 'right',
+      direction: 'rtl'
+    }
+  };
+};
+/**
+ * Cette cellule permet d'afficher un volume ou un montant avec devise
+ */
+
+
+exports.styles = styles;
+
+var CellNumeric =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellNumeric, _React$PureComponent);
+
+  function CellNumeric() {
+    (0, _classCallCheck2.default)(this, CellNumeric);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellNumeric).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellNumeric, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          value = _this$props.value,
+          locale = _this$props.locale,
+          currency = _this$props.currency,
+          view = _this$props.view,
+          precision = _this$props.precision;
+      var displayedValue = '';
+      var title = '';
+
+      if (currency) {
+        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency);
+        title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
+      } else {
+        displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);
+        title = (0, _helpers.formatNumber)(value, 'l', locale);
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: title
+      }, displayedValue);
+    }
+  }]);
+  return CellNumeric;
+}(_react.default.PureComponent);
+
+CellNumeric.defaultProps = {
+  view: 'm'
+};
+CellNumeric.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Code de la devise (ISO 4217)
+   */
+  currency: _propTypes.default.string,
+
+  /**
+   * Locale BCP 47
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Nombre de chiffres après la virgule
+   */
+  precision: _propTypes.default.number,
+
+  /**
+   * Volume/Amount
+   */
+  value: _propTypes.default.number.isRequired,
+
+  /**
+   * View (L/M/S)
+   */
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellNumeric'
+})(CellNumeric);
+
+exports.default = _default;