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

package/es/Table/TablePagination.js

@@ -0,0 +1,224 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent TableCell
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import Input from '../Input';
+import { MenuItem } from '../Menu';
+import Select from '../Select';
+import TableCell from './TableCell';
+import Toolbar from '../Toolbar';
+import Typography from '../Typography';
+import TablePaginationActions from './TablePaginationActions';
+
+export const styles = theme => ({
+  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.
+ */
+class TablePagination extends React.Component {
+  componentWillReceiveProps(nextProps) {
+    const { count, onChangePage, rowsPerPage } = nextProps;
+    const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
+    if (this.props.page > newLastPage) {
+      onChangePage(null, newLastPage);
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      Actions,
+      backIconButtonProps,
+      classes,
+      colSpan: colSpanProp,
+      component: Component,
+      count,
+      labelDisplayedRows,
+      labelRowsPerPage,
+      nextIconButtonProps,
+      onChangePage,
+      onChangeRowsPerPage,
+      page,
+      rowsPerPage,
+      rowsPerPageOptions
+    } = _props,
+          other = _objectWithoutProperties(_props, ['Actions', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions']);
+
+    let colSpan;
+
+    if (Component === TableCell || Component === 'td') {
+      colSpan = colSpanProp || 1000; // col-span over everything
+    }
+
+    return React.createElement(
+      Component,
+      _extends({ className: classes.root, colSpan: colSpan }, other),
+      React.createElement(
+        Toolbar,
+        { className: classes.toolbar },
+        React.createElement('div', { className: classes.spacer }),
+        rowsPerPageOptions.length > 1 && React.createElement(
+          Typography,
+          { variant: 'caption', className: classes.caption },
+          labelRowsPerPage
+        ),
+        rowsPerPageOptions.length > 1 && React.createElement(
+          Select,
+          {
+            classes: {
+              root: classes.selectRoot,
+              select: classes.select,
+              icon: classes.selectIcon
+            },
+            input: React.createElement(Input, { className: classes.input, disableUnderline: true }),
+            value: rowsPerPage,
+            onChange: onChangeRowsPerPage
+          },
+          rowsPerPageOptions.map(rowsPerPageOption => React.createElement(
+            MenuItem,
+            { key: rowsPerPageOption, value: rowsPerPageOption },
+            rowsPerPageOption
+          ))
+        ),
+        React.createElement(
+          Typography,
+          { variant: 'caption', className: classes.caption },
+          labelDisplayedRows({
+            from: count === 0 ? 0 : page * rowsPerPage + 1,
+            to: Math.min(count, (page + 1) * rowsPerPage),
+            count,
+            page
+          })
+        ),
+        React.createElement(Actions, {
+          backIconButtonProps: backIconButtonProps,
+          count: count,
+          nextIconButtonProps: nextIconButtonProps,
+          onChangePage: onChangePage,
+          page: page,
+          rowsPerPage: rowsPerPage
+        })
+      )
+    );
+  }
+}
+
+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: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the back arrow `IconButton` component.
+   */
+  backIconButtonProps: PropTypes.object,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  colSpan: PropTypes.number,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * The total number of rows.
+   */
+  count: PropTypes.number.isRequired,
+  /**
+   * Useful to customize the displayed rows label.
+   */
+  labelDisplayedRows: PropTypes.func,
+  /**
+   * Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }`
+   * object.
+   */
+  labelRowsPerPage: PropTypes.node,
+  /**
+   * Properties applied to the next arrow `IconButton` component.
+   */
+  nextIconButtonProps: PropTypes.object,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} page The page selected
+   */
+  onChangePage: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the number of rows per page is changed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onChangeRowsPerPage: PropTypes.func,
+  /**
+   * The zero-based index of the current page.
+   */
+  page: PropTypes.number.isRequired,
+  /**
+   * The number of rows per page.
+   */
+  rowsPerPage: PropTypes.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: PropTypes.array
+} : {};
+
+TablePagination.defaultProps = {
+  Actions: TablePaginationActions,
+  component: TableCell,
+  labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
+  labelRowsPerPage: 'Rows per page:',
+  rowsPerPageOptions: [5, 10, 25]
+};
+
+export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination);

package/es/Table/TablePaginationActions.js

@@ -0,0 +1,116 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
+import withStyles from '../styles/withStyles';
+import IconButton from '../IconButton';
+
+export const styles = theme => ({
+  root: {
+    flexShrink: 0,
+    color: theme.palette.text.secondary,
+    marginLeft: theme.spacing.unit * 2.5
+  }
+});
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement(KeyboardArrowRight, null);
+
+var _ref2 = React.createElement(KeyboardArrowLeft, null);
+
+var _ref3 = React.createElement(KeyboardArrowLeft, null);
+
+var _ref4 = React.createElement(KeyboardArrowRight, null);
+
+class TablePaginationActions extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.handleBackButtonClick = event => {
+      this.props.onChangePage(event, this.props.page - 1);
+    }, this.handleNextButtonClick = event => {
+      this.props.onChangePage(event, this.props.page + 1);
+    }, _temp;
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      backIconButtonProps,
+      classes,
+      count,
+      nextIconButtonProps,
+      onChangePage,
+      page,
+      rowsPerPage,
+      theme
+    } = _props,
+          other = _objectWithoutProperties(_props, ['backIconButtonProps', 'classes', 'count', 'nextIconButtonProps', 'onChangePage', 'page', 'rowsPerPage', 'theme']);
+
+    return React.createElement(
+      'div',
+      _extends({ className: classes.root }, other),
+      React.createElement(
+        IconButton,
+        _extends({
+          onClick: this.handleBackButtonClick,
+          disabled: page === 0
+        }, backIconButtonProps),
+        theme.direction === 'rtl' ? _ref : _ref2
+      ),
+      React.createElement(
+        IconButton,
+        _extends({
+          onClick: this.handleNextButtonClick,
+          disabled: page >= Math.ceil(count / rowsPerPage) - 1
+        }, nextIconButtonProps),
+        theme.direction === 'rtl' ? _ref3 : _ref4
+      )
+    );
+  }
+}
+
+TablePaginationActions.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Properties applied to the back arrow `IconButton` component.
+   */
+  backIconButtonProps: PropTypes.object,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * The total number of rows.
+   */
+  count: PropTypes.number.isRequired,
+  /**
+   * Properties applied to the next arrow `IconButton` component.
+   */
+  nextIconButtonProps: PropTypes.object,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} page The page selected
+   */
+  onChangePage: PropTypes.func.isRequired,
+  /**
+   * The zero-based index of the current page.
+   */
+  page: PropTypes.number.isRequired,
+  /**
+   * The number of rows per page.
+   */
+  rowsPerPage: PropTypes.number.isRequired,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired
+} : {};
+
+export default withStyles(styles, { name: 'MuiTablePaginationActions', withTheme: true })(TablePaginationActions);

package/es/Table/TableRow.js

@@ -0,0 +1,99 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: {
+    color: 'inherit',
+    display: 'table-row',
+    height: 48,
+    verticalAlign: 'middle',
+    '&:focus': {
+      outline: 'none'
+    }
+  },
+  head: {
+    height: 56
+  },
+  footer: {
+    height: 56
+  },
+  selected: {
+    backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' // grey[100]
+    : 'rgba(255, 255, 255, 0.08)'
+  },
+  hover: {
+    '&:hover': {
+      backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.07)' // grey[200]
+      : 'rgba(255, 255, 255, 0.14)'
+    }
+  }
+});
+
+/**
+ * Will automatically set dynamic row height
+ * based on the material table element parent (head, body, etc).
+ */
+function TableRow(props, context) {
+  const {
+    classes,
+    className: classNameProp,
+    component: Component,
+    hover,
+    selected
+  } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'hover', 'selected']);
+  const { table } = context;
+
+  const className = classNames(classes.root, {
+    [classes.head]: table && table.head,
+    [classes.footer]: table && table.footer,
+    [classes.hover]: table && hover,
+    [classes.selected]: table && selected
+  }, classNameProp);
+
+  return React.createElement(Component, _extends({ className: className }, other));
+}
+
+TableRow.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Should be valid `<tr>` children such as `TableCell`.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the table row will shade on hover.
+   */
+  hover: PropTypes.bool,
+  /**
+   * If `true`, the table row will have the selected shading.
+   */
+  selected: PropTypes.bool
+} : {};
+
+TableRow.defaultProps = {
+  component: 'tr',
+  hover: false,
+  selected: false
+};
+
+TableRow.contextTypes = {
+  table: PropTypes.object
+};
+
+export default withStyles(styles, { name: 'MuiTableRow' })(TableRow);

package/es/Table/TableSortLabel.js

@@ -0,0 +1,101 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent ButtonBase
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
+import withStyles from '../styles/withStyles';
+import ButtonBase from '../ButtonBase';
+import { capitalize } from '../utils/helpers';
+
+export const styles = theme => ({
+  root: {
+    cursor: 'pointer',
+    display: 'inline-flex',
+    justifyContent: 'flex-start',
+    flexDirection: 'inherit',
+    alignItems: 'center',
+    '&:hover': {
+      color: theme.palette.text.primary
+    },
+    '&:focus': {
+      color: theme.palette.text.primary
+    }
+  },
+  active: {
+    color: theme.palette.text.primary,
+    '& $icon': {
+      opacity: 1
+    }
+  },
+  icon: {
+    height: 16,
+    marginRight: 4,
+    marginLeft: 4,
+    opacity: 0,
+    transition: theme.transitions.create(['opacity', 'transform'], {
+      duration: theme.transitions.duration.shorter
+    }),
+    userSelect: 'none',
+    width: 16
+  },
+  iconDirectionDesc: {
+    transform: 'rotate(0deg)'
+  },
+  iconDirectionAsc: {
+    transform: 'rotate(180deg)'
+  }
+});
+
+/**
+ * A button based label for placing inside `TableCell` for column sorting.
+ */
+function TableSortLabel(props) {
+  const { active, classes, className, children, direction } = props,
+        other = _objectWithoutProperties(props, ['active', 'classes', 'className', 'children', 'direction']);
+
+  return React.createElement(
+    ButtonBase,
+    _extends({
+      className: classNames(classes.root, { [classes.active]: active }, className),
+      component: 'span',
+      disableRipple: true
+    }, other),
+    children,
+    React.createElement(ArrowDownwardIcon, {
+      className: classNames(classes.icon, classes[`iconDirection${capitalize(direction)}`])
+    })
+  );
+}
+
+TableSortLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * If `true`, the label will have the active styling (should be true for the sorted column).
+   */
+  active: PropTypes.bool,
+  /**
+   * Label contents, the arrow will be appended automatically.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The current sort direction.
+   */
+  direction: PropTypes.oneOf(['asc', 'desc'])
+} : {};
+
+TableSortLabel.defaultProps = {
+  active: false,
+  direction: 'desc'
+};
+
+export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);

package/es/Table/index.js

@@ -0,0 +1,8 @@
+export { default } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableFooter } from './TableFooter';
+export { default as TableHead } from './TableHead';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';
+export { default as TableSortLabel } from './TableSortLabel';