@hipay/hipay-material-ui 2.0.0-beta.45 → 2.0.0-beta.47

package/HiTable/HiTable.js

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
+
+var _HiTableHeader = _interopRequireDefault(require("./HiTableHeader"));
+
+var _HiTableBody = _interopRequireDefault(require("./HiTableBody"));
+
+// @inheritedComponent Table
+var styles = function styles(theme) {
+  return {
+    root: {
+      backgroundColor: theme.palette.background3
+    }
+  };
+};
+
+var HiTable =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTable, _React$PureComponent);
+
+  function HiTable(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiTable);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTable).call(this, props));
+
+    _this.handleRequestSort = function (event, property) {
+      if (_this.props.onSort) {
+        _this.props.onSort(property);
+      }
+    };
+
+    _this.handleRequestSort = _this.handleRequestSort.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiTable, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          data = _this$props.data,
+          columns = _this$props.columns,
+          locale = _this$props.locale,
+          sortable = _this$props.sortable,
+          onRowClick = _this$props.onRowClick,
+          dense = _this$props.dense,
+          order = _this$props.order,
+          orderBy = _this$props.orderBy;
+      return _react.default.createElement(_Table.default, {
+        className: classes.root
+      }, _react.default.createElement(_HiTableHeader.default, {
+        columns: columns,
+        order: order,
+        orderBy: orderBy,
+        onRequestSort: this.handleRequestSort,
+        sortable: sortable,
+        dense: dense
+      }), _react.default.createElement(_HiTableBody.default, {
+        data: data,
+        columns: columns,
+        onClick: onRowClick,
+        dense: dense,
+        locale: locale
+      }));
+    }
+  }]);
+  return HiTable;
+}(_react.default.PureComponent);
+
+HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: _propTypes.default.object.isRequired,
+
+  /**
+   * Données du tableau
+   */
+  data: _propTypes.default.array.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: _propTypes.default.bool,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Fonction se déclanchant au clic sur une ligne
+   */
+  onRowClick: _propTypes.default.func,
+
+  /**
+   * Fonction de trie des données
+   */
+  onSort: _propTypes.default.func,
+
+  /**
+   * Sens du tri
+   */
+  order: _propTypes.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Id de la colonne trié
+   */
+  orderBy: _propTypes.default.string,
+
+  /**
+   * Le tableau est-il triable ?
+   */
+  sortable: _propTypes.default.bool
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTable'
+})(HiTable);
+
+exports.default = _default;

package/HiTable/HiTableBody.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody/TableBody"));
+
+var _HiTableRow = _interopRequireDefault(require("./HiTableRow"));
+
+// @inheritedComponent TableBody
+var HiTableBody =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTableBody, _React$PureComponent);
+
+  function HiTableBody() {
+    (0, _classCallCheck2.default)(this, HiTableBody);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableBody).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiTableBody, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          columns = _this$props.columns,
+          data = _this$props.data,
+          dense = _this$props.dense,
+          locale = _this$props.locale,
+          onClick = _this$props.onClick;
+      return _react.default.createElement(_TableBody.default, null, data.map(function (n) {
+        return _react.default.createElement(_HiTableRow.default, {
+          columns: columns,
+          rowdata: n,
+          key: n.rowId,
+          onClick: onClick,
+          dense: dense,
+          locale: locale
+        });
+      }));
+    }
+  }]);
+  return HiTableBody;
+}(_react.default.PureComponent);
+
+HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: _propTypes.default.object.isRequired,
+
+  /**
+   * Données du tableau
+   */
+  data: _propTypes.default.array.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: _propTypes.default.bool,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Fonction appelée au clic sur une ligne
+   */
+  onClick: _propTypes.default.func
+} : {};
+var _default = HiTableBody;
+exports.default = _default;

package/HiTable/HiTableHeader.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+
+var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
+
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+
+var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+
+var cst = _interopRequireWildcard(require("./constants"));
+
+// @inheritedComponent TableHeader
+var styles = function styles(theme) {
+  return {
+    icon: {
+      color: '#00ADE9'
+    }
+  };
+};
+
+var HiTableHeader =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTableHeader, _React$PureComponent);
+
+  function HiTableHeader() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiTableHeader);
+
+    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)(HiTableHeader)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _this.createSortHandler = function (property) {
+      return function (event) {
+        _this.props.onRequestSort(event, property);
+      };
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiTableHeader, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          columns = _this$props.columns,
+          order = _this$props.order,
+          orderBy = _this$props.orderBy,
+          sortable = _this$props.sortable,
+          dense = _this$props.dense;
+      return _react.default.createElement(_TableHead.default, null, _react.default.createElement(_TableRow.default, {
+        style: {
+          height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
+          whiteSpace: 'nowrap'
+        }
+      }, Object.keys(columns).map(function (key) {
+        var column = columns[key];
+        return _react.default.createElement(_TableCell.default, {
+          key: column.colId,
+          sortDirection: orderBy === column.colId ? order : false,
+          style: {
+            border: 'none',
+            borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+            paddingRight: '13px',
+            paddingLeft: '13px'
+          },
+          numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
+        }, sortable ? _react.default.createElement(_Tooltip.default, {
+          title: "Sort",
+          enterDelay: 300
+        }, _react.default.createElement(_TableSortLabel.default, {
+          active: orderBy === column.colId,
+          direction: order,
+          onClick: this.createSortHandler(column.colId),
+          classes: {
+            icon: classes.icon
+          }
+        }, column.label)) : column.label);
+      }, this)));
+    }
+  }]);
+  return HiTableHeader;
+}(_react.default.PureComponent);
+
+HiTableHeader.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * En-tête des données et leurs paramètres
+   */
+  columns: _propTypes.default.object.isRequired,
+
+  /**
+   * Le tableau est-il triable ?
+   */
+  dense: _propTypes.default.bool,
+
+  /**
+   * Fonction d'appel du trie des données
+   */
+  onRequestSort: _propTypes.default.func.isRequired,
+
+  /**
+   * Sens du tri
+   */
+  order: _propTypes.default.oneOf(['asc', 'desc']),
+
+  /**
+   * Id de la colonne trié
+   */
+  orderBy: _propTypes.default.string,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  sortable: _propTypes.default.bool
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTableHeader'
+})(HiTableHeader);
+
+exports.default = _default;

package/HiTable/HiTableRow.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+
+var _HiCellBuilder = _interopRequireDefault(require("./HiCellBuilder"));
+
+var cst = _interopRequireWildcard(require("./constants"));
+
+// @inheritedComponent TableRow
+var styles = function styles(theme) {
+  return {
+    row: {
+      '&:last-child': {
+        borderBottom: 'solid 1px #E4E7E8'
+      },
+      '&:first-child': {
+        borderTop: 'solid 1px #E4E7E8'
+      },
+      '&:hover': {
+        backgroundColor: "".concat(theme.palette.action.hover, " !important")
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiTableRow =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiTableRow, _React$PureComponent);
+
+  function HiTableRow(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiTableRow);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiTableRow).call(this, props));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiTableRow, [{
+    key: "handleClick",
+    value: function handleClick(event, rowdata) {
+      if (this.props.onClick) {
+        this.props.onClick(event, rowdata);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          columns = _this$props.columns,
+          dense = _this$props.dense,
+          key = _this$props.key,
+          locale = _this$props.locale,
+          rowdata = _this$props.rowdata;
+      return _react.default.createElement(_TableRow.default, {
+        className: classes.row,
+        hover: true,
+        onClick: function onClick(event) {
+          return _this2.handleClick(event, rowdata);
+        },
+        key: key,
+        style: {
+          height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
+        },
+        tabIndex: -1
+      }, Object.keys(columns).map(function (key) {
+        return _react.default.createElement(_HiCellBuilder.default, {
+          key: columns[key].colId,
+          column: columns[key],
+          data: rowdata,
+          locale: locale
+        });
+      }, this));
+    }
+  }]);
+  return HiTableRow;
+}(_react.default.PureComponent);
+
+HiTableRow.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * En-tête des colonnes et leurs paramètres
+   */
+  columns: _propTypes.default.object.isRequired,
+
+  /**
+   * Densité d'affichage (joue sur la hauteur des lignes)
+   */
+  dense: _propTypes.default.bool,
+
+  /**
+   * Id de la ligne
+   */
+  key: _propTypes.default.string,
+
+  /**
+   * Locale pour afficher les nombres et montants
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Action au clic sur une ligne
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * Données de la ligne
+   */
+  rowdata: _propTypes.default.object.isRequired
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiTableRow'
+})(HiTableRow);
+
+exports.default = _default;