@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/HiCell/CellPinToAction.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _HiPin = _interopRequireDefault(require("../HiPin"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = {
+  wrapperLeft: {
+    maxWidth: '100%',
+    display: 'inline-flex'
+  },
+  wrapperRigth: {
+    textAlign: 'right'
+  },
+  wrapperCenter: {
+    textAlign: 'center'
+  }
+};
+/**
+ * Cette cellule permet d'afficher un pin avec callback (optionnel).
+ */
+
+exports.styles = styles;
+
+var _ref = /*#__PURE__*/_react.default.createElement(_HiPin.default, null, "0");
+
+var CellPinToAction = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CellPinToAction, _React$PureComponent);
+
+  var _super = _createSuper(CellPinToAction);
+
+  function CellPinToAction() {
+    (0, _classCallCheck2.default)(this, CellPinToAction);
+    return _super.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,
+          color = _this$props.color,
+          align = _this$props.align;
+      if (number === undefined) return '';
+      var wrapperClass = classes.wrapperLeft;
+
+      if (align === "right") {
+        wrapperClass = classes.wrapperRigth;
+      } else if (align === "center") {
+        wrapperClass = classes.wrapperCenter;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: wrapperClass
+      }, number === 0 ? _ref : /*#__PURE__*/_react.default.createElement(_HiPin.default, {
+        color: color,
+        onClick: onClick
+      }, number));
+    }
+  }]);
+  return CellPinToAction;
+}(_react.default.PureComponent);
+
+CellPinToAction.defaultProps = {
+  color: "primary",
+  align: "left"
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellPin'
+})(CellPinToAction);
+
+exports.default = _default;

package/HiCell/CellRate.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ArrowBottomRight = _interopRequireDefault(require("mdi-material-ui/ArrowBottomRight"));
+
+var _ArrowTopRight = _interopRequireDefault(require("mdi-material-ui/ArrowTopRight"));
+
+var _Equal = _interopRequireDefault(require("mdi-material-ui/Equal"));
+
+var _helpers = require("../utils/helpers");
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = function styles(theme) {
+  return {
+    flexContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      position: 'relative',
+      textAlign: 'right',
+      maxHeight: '32px'
+    },
+    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: {
+      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)
+ */
+
+
+exports.styles = styles;
+
+var CellRate = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CellRate, _React$PureComponent);
+
+  var _super = _createSuper(CellRate);
+
+  function CellRate() {
+    (0, _classCallCheck2.default)(this, CellRate);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CellRate, [{
+    key: "render",
+    value: function render() {
+      var _classNames, _classNames2;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          value = _this$props.value,
+          trendchip = _this$props.trendchip,
+          isPositive = _this$props.isPositive,
+          indicator = _this$props.indicator,
+          locale = _this$props.locale,
+          view = _this$props.view;
+      var trendIcon;
+      var displayedRate = (0, _helpers.formatRate)(value, view, locale);
+
+      switch (trendchip) {
+        case 'equal':
+          trendIcon = /*#__PURE__*/_react.default.createElement(_Equal.default, {
+            className: (0, _classnames.default)(classes.trendChipIcon, classes.neutral)
+          });
+          break;
+
+        case 'up':
+          trendIcon = /*#__PURE__*/_react.default.createElement(_ArrowTopRight.default, {
+            className: (0, _classnames.default)(classes.trendChipIcon, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, isPositive), (0, _defineProperty2.default)(_classNames, classes.negative, !isPositive), _classNames))
+          });
+          break;
+
+        case 'down':
+          trendIcon = /*#__PURE__*/_react.default.createElement(_ArrowBottomRight.default, {
+            className: (0, _classnames.default)(classes.trendChipIcon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.positive, !isPositive), (0, _defineProperty2.default)(_classNames2, classes.negative, isPositive), _classNames2))
+          });
+          break;
+
+        default:
+          break;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.flexContent
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: typeof indicator === 'undefined' && classes.rateDiv || ''
+      }, displayedRate, trendIcon), typeof indicator !== 'undefined' && /*#__PURE__*/_react.default.createElement("span", {
+        className: classes.spanIndicator,
+        style: {
+          fontSize: view !== 'l' ? 10 : 11
+        }
+      }, indicator));
+    }
+  }]);
+  return CellRate;
+}(_react.default.PureComponent);
+
+CellRate.defaultProps = {
+  isPositive: true,
+  locale: 'en'
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellRate'
+})(CellRate);
+
+exports.default = _default;

package/HiCell/CellSentinel.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.styles = styles;
+
+var CellSentinel = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinel, _React$PureComponent);
+
+  var _super = _createSuper(CellSentinel);
+
+  function CellSentinel() {
+    (0, _classCallCheck2.default)(this, CellSentinel);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CellSentinel, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          color = _this$props.color,
+          label = _this$props.label,
+          letter = _this$props.letter,
+          outlined = _this$props.outlined,
+          reviewer = _this$props.reviewer,
+          value = _this$props.value;
+      var effectiveLabel = label || value;
+      var effectiveLetter = letter || effectiveLabel[0];
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.flexContent,
+        title: reviewer ? "".concat(effectiveLabel, "\n").concat(reviewer) : effectiveLabel
+      }, /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+        active: active,
+        classes: {
+          root: classes.label
+        },
+        color: color,
+        label: effectiveLetter,
+        outlined: outlined
+      }));
+    }
+  }]);
+  return CellSentinel;
+}(_react.default.PureComponent);
+
+CellSentinel.defaultProps = {
+  active: false,
+  outlined: false
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellSentinel'
+})(CellSentinel);
+
+exports.default = _default;

package/HiCell/CellSentinelScore.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.sentinelColorById = exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = {
+  flexContent: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  label: {}
+};
+exports.styles = styles;
+var sentinelColorById = {
+  NOT_LAUNCHED: '#737373',
+  ACCEPTED: '#00AF01',
+  AUTHENTICATE: '#484A4B',
+  FORCE_AUTHENTICATE: '#20272B',
+  PENDING: '#3987AD',
+  CHALLENGED: '#FF8F01',
+  BLOCKED: '#D50000',
+  ALLOWED: '#00AF01',
+  DENIED: '#D50000'
+};
+/**
+ * Cette cellule permet d'afficher le résultat de Sentinel (score & fraudResult & smartDecision)
+ */
+
+exports.sentinelColorById = sentinelColorById;
+
+var CellSentinelScore = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(CellSentinelScore, _React$PureComponent);
+
+  var _super = _createSuper(CellSentinelScore);
+
+  function CellSentinelScore() {
+    (0, _classCallCheck2.default)(this, CellSentinelScore);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CellSentinelScore, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          classes = _this$props.classes,
+          result = _this$props.result,
+          value = _this$props.value;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.flexContent
+      }, /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+        active: active,
+        classes: {
+          root: classes.label
+        },
+        color: sentinelColorById[result],
+        label: value > 0 ? "+".concat(value) : "".concat(value)
+      }));
+    }
+  }]);
+  return CellSentinelScore;
+}(_react.default.PureComponent);
+
+CellSentinelScore.defaultProps = {
+  active: false
+};
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellSentinelScore'
+})(CellSentinelScore);
+
+exports.default = _default;

package/HiCell/CellText.js

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var 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'
+  }
+};
+exports.styles = styles;
+
+var CellText = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(CellText, _React$Component);
+
+  var _super = _createSuper(CellText);
+
+  function CellText(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CellText);
+    _this = _super.call(this, props);
+    _this.cellText = null;
+    _this.buildEllipsis = _this.buildEllipsis.bind((0, _assertThisInitialized2.default)(_this));
+    return _this;
+  }
+  /**
+   * TODO - Ellipsis (middle, after-first-word)
+   */
+
+
+  (0, _createClass2.default)(CellText, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.buildEllipsis();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.label !== this.props.label) this.buildEllipsis();
+    }
+  }, {
+    key: "buildEllipsis",
+    value: function 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) {
+          var _this$cellText$getEle = this.cellText.getElementsByTagName('span'),
+              _this$cellText$getEle2 = (0, _slicedToArray2.default)(_this$cellText$getEle, 2),
+              startSpan = _this$cellText$getEle2[0],
+              endSpan = _this$cellText$getEle2[1];
+
+          if (typeof startSpan !== 'undefined' && typeof endSpan !== 'undefined') {
+            var availableEndSpace = this.cellText.offsetWidth - startSpan.offsetWidth - 2;
+
+            if (availableEndSpace > 0) {
+              endSpan.style.width = "".concat(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) {
+          var _this$cellText$getEle3 = this.cellText.getElementsByTagName('span'),
+              _this$cellText$getEle4 = (0, _slicedToArray2.default)(_this$cellText$getEle3, 2),
+              _startSpan = _this$cellText$getEle4[0],
+              _endSpan = _this$cellText$getEle4[1];
+
+          if (typeof _startSpan !== 'undefined' && typeof _endSpan !== 'undefined') {
+            var _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';
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          label = _this$props.label,
+          ellipsis = _this$props.ellipsis,
+          color = _this$props.color,
+          title = _this$props.title;
+      var start;
+      var end;
+      var valueElement = '';
+      var 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 = /*#__PURE__*/_react.default.createElement("div", {
+            ref: function ref(div) {
+              _this2.cellText = div;
+            },
+            title: title
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.rightEllipsisSpan
+          }, "".concat(start, " ")), /*#__PURE__*/_react.default.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 = /*#__PURE__*/_react.default.createElement("div", {
+            ref: function ref(div) {
+              _this2.cellText = div;
+            },
+            title: title
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.noEllipsisSpan
+          }, start), /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.leftEllipsisSpan
+          }, end));
+          break;
+
+        case 'left':
+          valueElement = color ? /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+            className: classes.leftEllipsisSpan,
+            label: valueString,
+            color: color
+          }) : /*#__PURE__*/_react.default.createElement("div", {
+            className: classes.leftEllipsisSpan,
+            style: {
+              width: '100%'
+            },
+            title: title
+          }, valueString);
+          break;
+
+        case 'right':
+        default:
+          valueElement = color ? /*#__PURE__*/_react.default.createElement(_HiColoredLabel.default, {
+            className: classes.rightEllipsisSpan,
+            label: valueString,
+            color: color
+          }) : /*#__PURE__*/_react.default.createElement("div", {
+            className: classes.rightEllipsisSpan,
+            style: {
+              width: '100%'
+            },
+            title: title
+          }, valueString);
+          break;
+      }
+
+      return valueElement;
+    }
+  }]);
+  return CellText;
+}(_react.default.Component);
+
+var _default = (0, _withStyles.default)(styles, {
+  name: 'HmuiCellText'
+})(CellText);
+
+exports.default = _default;