@hipay/hipay-material-ui 1.0.0-beta.1

package/Table/TableFooter.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TableFooter = function (_React$Component) {
+  (0, _inherits3.default)(TableFooter, _React$Component);
+
+  function TableFooter() {
+    (0, _classCallCheck3.default)(this, TableFooter);
+    return (0, _possibleConstructorReturn3.default)(this, (TableFooter.__proto__ || (0, _getPrototypeOf2.default)(TableFooter)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(TableFooter, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      // eslint-disable-line class-methods-use-this
+      return {
+        table: {
+          footer: true
+        }
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          Component = _props.component,
+          other = (0, _objectWithoutProperties3.default)(_props, ['component']);
+
+
+      return _react2.default.createElement(Component, other);
+    }
+  }]);
+  return TableFooter;
+}(_react2.default.Component);
+
+TableFooter.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children: _propTypes2.default.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
+} : {};
+
+TableFooter.defaultProps = {
+  component: 'tfoot'
+};
+
+TableFooter.childContextTypes = {
+  table: _propTypes2.default.object
+};
+
+exports.default = TableFooter;

package/Table/TableHead.js

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {
+  root: {
+    display: 'table-header-group'
+  }
+};
+
+var TableHead = function (_React$Component) {
+  (0, _inherits3.default)(TableHead, _React$Component);
+
+  function TableHead() {
+    (0, _classCallCheck3.default)(this, TableHead);
+    return (0, _possibleConstructorReturn3.default)(this, (TableHead.__proto__ || (0, _getPrototypeOf2.default)(TableHead)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(TableHead, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      // eslint-disable-line class-methods-use-this
+      return {
+        table: {
+          head: true
+        }
+      };
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          classes = _props.classes,
+          classNameProp = _props.className,
+          Component = _props.component,
+          other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'className', 'component']);
+
+
+      return _react2.default.createElement(Component, (0, _extends3.default)({ className: (0, _classnames2.default)(classes.root, classNameProp) }, other));
+    }
+  }]);
+  return TableHead;
+}(_react2.default.Component);
+
+TableHead.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component, normally `TableRow`.
+   */
+  children: _propTypes2.default.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func])
+} : {};
+
+TableHead.defaultProps = {
+  component: 'thead'
+};
+
+TableHead.childContextTypes = {
+  table: _propTypes2.default.object
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTableHead' })(TableHead);

package/Table/TablePagination.js

@@ -0,0 +1,310 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _Input = require('../Input');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Menu = require('../Menu');
+
+var _Select = require('../Select');
+
+var _Select2 = _interopRequireDefault(_Select);
+
+var _TableCell = require('./TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _Toolbar = require('../Toolbar');
+
+var _Toolbar2 = _interopRequireDefault(_Toolbar);
+
+var _Typography = require('../Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _TablePaginationActions = require('./TablePaginationActions');
+
+var _TablePaginationActions2 = _interopRequireDefault(_TablePaginationActions);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent TableCell
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      // Increase the specificity to override TableCell.
+      '&:last-child': {
+        padding: 0
+      }
+    },
+    toolbar: {
+      height: 56,
+      minHeight: 56,
+      paddingRight: 2
+    },
+    spacer: {
+      flex: '1 1 100%'
+    },
+    caption: {
+      flexShrink: 0
+    },
+    input: {
+      fontSize: 'inherit',
+      flexShrink: 0
+    },
+    selectRoot: {
+      marginRight: theme.spacing.unit * 4,
+      marginLeft: theme.spacing.unit,
+      color: theme.palette.text.secondary
+    },
+    select: {
+      paddingLeft: theme.spacing.unit,
+      paddingRight: theme.spacing.unit * 2
+    },
+    selectIcon: {
+      top: 1
+    },
+    actions: {
+      flexShrink: 0,
+      color: theme.palette.text.secondary,
+      marginLeft: theme.spacing.unit * 2.5
+    }
+  };
+};
+
+/**
+ * A `TableCell` based component for placing inside `TableFooter` for pagination.
+ */
+
+var TablePagination = function (_React$Component) {
+  (0, _inherits3.default)(TablePagination, _React$Component);
+
+  function TablePagination() {
+    (0, _classCallCheck3.default)(this, TablePagination);
+    return (0, _possibleConstructorReturn3.default)(this, (TablePagination.__proto__ || (0, _getPrototypeOf2.default)(TablePagination)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(TablePagination, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var count = nextProps.count,
+          onChangePage = nextProps.onChangePage,
+          rowsPerPage = nextProps.rowsPerPage;
+
+      var newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
+      if (this.props.page > newLastPage) {
+        onChangePage(null, newLastPage);
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          Actions = _props.Actions,
+          backIconButtonProps = _props.backIconButtonProps,
+          classes = _props.classes,
+          colSpanProp = _props.colSpan,
+          Component = _props.component,
+          count = _props.count,
+          labelDisplayedRows = _props.labelDisplayedRows,
+          labelRowsPerPage = _props.labelRowsPerPage,
+          nextIconButtonProps = _props.nextIconButtonProps,
+          onChangePage = _props.onChangePage,
+          onChangeRowsPerPage = _props.onChangeRowsPerPage,
+          page = _props.page,
+          rowsPerPage = _props.rowsPerPage,
+          rowsPerPageOptions = _props.rowsPerPageOptions,
+          other = (0, _objectWithoutProperties3.default)(_props, ['Actions', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions']);
+
+
+      var colSpan = void 0;
+
+      if (Component === _TableCell2.default || Component === 'td') {
+        colSpan = colSpanProp || 1000; // col-span over everything
+      }
+
+      return _react2.default.createElement(
+        Component,
+        (0, _extends3.default)({ className: classes.root, colSpan: colSpan }, other),
+        _react2.default.createElement(
+          _Toolbar2.default,
+          { className: classes.toolbar },
+          _react2.default.createElement('div', { className: classes.spacer }),
+          rowsPerPageOptions.length > 1 && _react2.default.createElement(
+            _Typography2.default,
+            { variant: 'caption', className: classes.caption },
+            labelRowsPerPage
+          ),
+          rowsPerPageOptions.length > 1 && _react2.default.createElement(
+            _Select2.default,
+            {
+              classes: {
+                root: classes.selectRoot,
+                select: classes.select,
+                icon: classes.selectIcon
+              },
+              input: _react2.default.createElement(_Input2.default, { className: classes.input, disableUnderline: true }),
+              value: rowsPerPage,
+              onChange: onChangeRowsPerPage
+            },
+            rowsPerPageOptions.map(function (rowsPerPageOption) {
+              return _react2.default.createElement(
+                _Menu.MenuItem,
+                { key: rowsPerPageOption, value: rowsPerPageOption },
+                rowsPerPageOption
+              );
+            })
+          ),
+          _react2.default.createElement(
+            _Typography2.default,
+            { variant: 'caption', className: classes.caption },
+            labelDisplayedRows({
+              from: count === 0 ? 0 : page * rowsPerPage + 1,
+              to: Math.min(count, (page + 1) * rowsPerPage),
+              count: count,
+              page: page
+            })
+          ),
+          _react2.default.createElement(Actions, {
+            backIconButtonProps: backIconButtonProps,
+            count: count,
+            nextIconButtonProps: nextIconButtonProps,
+            onChangePage: onChangePage,
+            page: page,
+            rowsPerPage: rowsPerPage
+          })
+        )
+      );
+    }
+  }]);
+  return TablePagination;
+}(_react2.default.Component);
+
+TablePagination.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The component used for displaying the actions.
+   * Either a string to use a DOM element or a component.
+   */
+  Actions: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * Properties applied to the back arrow `IconButton` component.
+   */
+  backIconButtonProps: _propTypes2.default.object,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  colSpan: _propTypes2.default.number,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * The total number of rows.
+   */
+  count: _propTypes2.default.number.isRequired,
+  /**
+   * Useful to customize the displayed rows label.
+   */
+  labelDisplayedRows: _propTypes2.default.func,
+  /**
+   * Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }`
+   * object.
+   */
+  labelRowsPerPage: _propTypes2.default.node,
+  /**
+   * Properties applied to the next arrow `IconButton` component.
+   */
+  nextIconButtonProps: _propTypes2.default.object,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} page The page selected
+   */
+  onChangePage: _propTypes2.default.func.isRequired,
+  /**
+   * Callback fired when the number of rows per page is changed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onChangeRowsPerPage: _propTypes2.default.func,
+  /**
+   * The zero-based index of the current page.
+   */
+  page: _propTypes2.default.number.isRequired,
+  /**
+   * The number of rows per page.
+   */
+  rowsPerPage: _propTypes2.default.number.isRequired,
+  /**
+   * Customizes the options of the rows per page select field. If less than two options are
+   * available, no select field will be displayed.
+   */
+  rowsPerPageOptions: _propTypes2.default.array
+} : {};
+
+TablePagination.defaultProps = {
+  Actions: _TablePaginationActions2.default,
+  component: _TableCell2.default,
+  labelDisplayedRows: function labelDisplayedRows(_ref) {
+    var from = _ref.from,
+        to = _ref.to,
+        count = _ref.count;
+    return from + '-' + to + ' of ' + count;
+  },
+  labelRowsPerPage: 'Rows per page:',
+  rowsPerPageOptions: [5, 10, 25]
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTablePagination' })(TablePagination);

package/Table/TablePaginationActions.js

@@ -0,0 +1,183 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _KeyboardArrowLeft = require('../internal/svg-icons/KeyboardArrowLeft');
+
+var _KeyboardArrowLeft2 = _interopRequireDefault(_KeyboardArrowLeft);
+
+var _KeyboardArrowRight = require('../internal/svg-icons/KeyboardArrowRight');
+
+var _KeyboardArrowRight2 = _interopRequireDefault(_KeyboardArrowRight);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _IconButton = require('../IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      flexShrink: 0,
+      color: theme.palette.text.secondary,
+      marginLeft: theme.spacing.unit * 2.5
+    }
+  };
+};
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref2 = _react2.default.createElement(_KeyboardArrowRight2.default, null);
+
+var _ref3 = _react2.default.createElement(_KeyboardArrowLeft2.default, null);
+
+var _ref4 = _react2.default.createElement(_KeyboardArrowLeft2.default, null);
+
+var _ref5 = _react2.default.createElement(_KeyboardArrowRight2.default, null);
+
+var TablePaginationActions = function (_React$Component) {
+  (0, _inherits3.default)(TablePaginationActions, _React$Component);
+
+  function TablePaginationActions() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, TablePaginationActions);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TablePaginationActions.__proto__ || (0, _getPrototypeOf2.default)(TablePaginationActions)).call.apply(_ref, [this].concat(args))), _this), _this.handleBackButtonClick = function (event) {
+      _this.props.onChangePage(event, _this.props.page - 1);
+    }, _this.handleNextButtonClick = function (event) {
+      _this.props.onChangePage(event, _this.props.page + 1);
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(TablePaginationActions, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          backIconButtonProps = _props.backIconButtonProps,
+          classes = _props.classes,
+          count = _props.count,
+          nextIconButtonProps = _props.nextIconButtonProps,
+          onChangePage = _props.onChangePage,
+          page = _props.page,
+          rowsPerPage = _props.rowsPerPage,
+          theme = _props.theme,
+          other = (0, _objectWithoutProperties3.default)(_props, ['backIconButtonProps', 'classes', 'count', 'nextIconButtonProps', 'onChangePage', 'page', 'rowsPerPage', 'theme']);
+
+
+      return _react2.default.createElement(
+        'div',
+        (0, _extends3.default)({ className: classes.root }, other),
+        _react2.default.createElement(
+          _IconButton2.default,
+          (0, _extends3.default)({
+            onClick: this.handleBackButtonClick,
+            disabled: page === 0
+          }, backIconButtonProps),
+          theme.direction === 'rtl' ? _ref2 : _ref3
+        ),
+        _react2.default.createElement(
+          _IconButton2.default,
+          (0, _extends3.default)({
+            onClick: this.handleNextButtonClick,
+            disabled: page >= Math.ceil(count / rowsPerPage) - 1
+          }, nextIconButtonProps),
+          theme.direction === 'rtl' ? _ref4 : _ref5
+        )
+      );
+    }
+  }]);
+  return TablePaginationActions;
+}(_react2.default.Component);
+
+TablePaginationActions.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Properties applied to the back arrow `IconButton` component.
+   */
+  backIconButtonProps: _propTypes2.default.object,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * The total number of rows.
+   */
+  count: _propTypes2.default.number.isRequired,
+  /**
+   * Properties applied to the next arrow `IconButton` component.
+   */
+  nextIconButtonProps: _propTypes2.default.object,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} page The page selected
+   */
+  onChangePage: _propTypes2.default.func.isRequired,
+  /**
+   * The zero-based index of the current page.
+   */
+  page: _propTypes2.default.number.isRequired,
+  /**
+   * The number of rows per page.
+   */
+  rowsPerPage: _propTypes2.default.number.isRequired,
+  /**
+   * @ignore
+   */
+  theme: _propTypes2.default.object.isRequired
+} : {};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiTablePaginationActions', withTheme: true })(TablePaginationActions);