@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/es/HiCell/CellAddress.js

@@ -0,0 +1,96 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles() {
+  return {
+    rightEllipsisSpan: {
+      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'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellAddress'
+})(CellAddress);
+
+exports.default = _default;

package/es/HiCell/CellDate.js

@@ -0,0 +1,104 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+
+var _styles = require("@material-ui/core/styles");
+
+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, _momentTimezone.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'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellDate'
+})(CellDate);
+
+exports.default = _default;

package/es/HiCell/CellIcon.js

@@ -0,0 +1,127 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var styles = {
+  icon: {
+    float: 'left'
+  },
+  label: {
+    margin: '4px 0 4px 5px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  },
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  }
+};
+/**
+ * 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,
+          align = _this$props.align,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          icon = _this$props.icon,
+          label = _this$props.label,
+          onClick = _this$props.onClick,
+          size = _this$props.size,
+          view = _this$props.view;
+
+      if (onClick) {
+        return _react.default.createElement("div", {
+          className: align === 'right' ? classes.flexContent : classes.wrapper,
+          title: label
+        }, _react.default.createElement(_HiIconButton.default, {
+          color: 'inherit',
+          style: {
+            color: color,
+            fontSize: size || 24,
+            maxHeight: 31,
+            maxWidth: 31
+          },
+          onClick: onClick
+        }, _react.default.createElement(_HiIcon.default, {
+          className: classes.icon,
+          icon: icon,
+          color: color
+        }), view !== 's' && label && _react.default.createElement("span", {
+          className: classes.label
+        }, label)));
+      }
+
+      return _react.default.createElement("div", {
+        className: align === 'right' ? classes.flexContent : classes.wrapper,
+        title: label
+      }, _react.default.createElement(_HiIcon.default, {
+        color: 'inherit',
+        style: {
+          color: color,
+          fontSize: size || 24
+        },
+        className: classes.icon,
+        icon: icon
+      }), view !== 's' && label && _react.default.createElement("span", {
+        className: classes.label
+      }, label));
+    }
+  }]);
+  return CellIcon;
+}(_react.default.PureComponent);
+
+CellIcon.defaultProps = {
+  view: 'm',
+  color: 'neutral'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellIcon'
+})(CellIcon);
+
+exports.default = _default;

package/es/HiCell/CellImage.js

@@ -0,0 +1,113 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles() {
+  return {
+    img: {
+      height: 'auto',
+      float: 'left'
+    },
+    label: {
+      marginLeft: 5,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    wrapper: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var handleError = function handleError(fallbackImage) {
+  return function (e) {
+    if (fallbackImage) {
+      e.target.src = "".concat(fallbackImage);
+    } else {
+      e.target.style.display = 'none';
+    }
+  };
+};
+/**
+ * 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.
+ */
+
+
+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,
+          fallbackImage = _this$props.fallbackImage,
+          title = _this$props.title;
+      if (!path || path === '') return '';
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: label
+      }, _react.default.createElement("img", {
+        src: path,
+        alt: label,
+        title: title,
+        className: classes.img,
+        width: size,
+        onError: handleError(fallbackImage)
+      }), 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'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellImage'
+})(CellImage);
+
+exports.default = _default;

package/es/HiCell/CellNumeric.js

@@ -0,0 +1,108 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _helpers = require("../utils/helpers");
+
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
+var styles = function styles() {
+  return {
+    wrapper: {
+      textAlign: 'right'
+    },
+    button: {
+      padding: '1px 5px'
+    }
+  };
+};
+/**
+ * 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,
+          isButton = _this$props.isButton,
+          onClick = _this$props.onClick,
+          rowId = _this$props.rowId;
+      var displayedValue = '';
+      var title = '';
+
+      if (currency) {
+        displayedValue = (0, _helpers.formatCurrencyAmount)(value, view, locale, currency, precision);
+        title = (0, _helpers.formatCurrencyAmount)(value, 'l', locale, currency);
+      } else {
+        displayedValue = (0, _helpers.formatNumber)(value, view, locale, precision);
+        title = (0, _helpers.formatNumber)(value, 'l', locale, precision);
+      }
+
+      var content = displayedValue;
+
+      if (isButton) {
+        content = _react.default.createElement(_HiButton.default, {
+          onClick: onClick(rowId),
+          size: "small",
+          className: classes.button,
+          variant: "text"
+        }, displayedValue);
+      }
+
+      return _react.default.createElement("div", {
+        className: classes.wrapper,
+        title: title
+      }, content);
+    }
+  }]);
+  return CellNumeric;
+}(_react.default.PureComponent);
+
+CellNumeric.defaultProps = {
+  view: 'm',
+  locale: 'en'
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellNumeric'
+})(CellNumeric);
+
+exports.default = _default;

package/es/HiCell/CellPinToAction.js

@@ -0,0 +1,73 @@
+"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/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiPin = _interopRequireDefault(require("../HiPin"));
+
+var styles = {
+  wrapper: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  }
+};
+/**
+ * Cette cellule permet d'afficher un pin avec callback (optionnel).
+ */
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiPin.default, null, "0");
+
+var CellPinToAction =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(CellPinToAction, _React$PureComponent);
+
+  function CellPinToAction() {
+    (0, _classCallCheck2.default)(this, CellPinToAction);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CellPinToAction).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(CellPinToAction, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          number = _this$props.number;
+      if (number === undefined) return '';
+      return _react.default.createElement("div", {
+        className: classes.wrapper
+      }, number === 0 ? _ref : _react.default.createElement(_HiPin.default, {
+        color: "primary",
+        onClick: onClick
+      }, number));
+    }
+  }]);
+  return CellPinToAction;
+}(_react.default.PureComponent);
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'HmuiCellPin'
+})(CellPinToAction);
+
+exports.default = _default;