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

package/es/List/ListItemAvatar.js

@@ -0,0 +1,63 @@
+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 warning from 'warning';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => ({
+  root: {
+    width: 36,
+    height: 36,
+    fontSize: theme.typography.pxToRem(18),
+    marginRight: 4
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    fontSize: theme.typography.pxToRem(20)
+  }
+});
+
+/**
+ * It's a simple wrapper to apply the `dense` mode styles to `Avatar`.
+ */
+function ListItemAvatar(props, context) {
+  const { children, classes, className: classNameProp } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
+
+  if (context.dense === undefined) {
+    process.env.NODE_ENV !== "production" ? warning(false, `Material-UI: <ListItemAvatar> is a simple wrapper to apply the dense styles
+      to <Avatar>. You do not need it unless you are controlling the <List> dense property.`) : void 0;
+    return props.children;
+  }
+
+  return React.cloneElement(children, _extends({
+    className: classNames({ [classes.root]: context.dense }, classNameProp, children.props.className),
+    childrenClassName: classNames({ [classes.icon]: context.dense }, children.props.childrenClassName)
+  }, other));
+}
+
+ListItemAvatar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component, normally `Avatar`.
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : {};
+
+ListItemAvatar.contextTypes = {
+  dense: PropTypes.bool
+};
+
+ListItemAvatar.muiName = 'ListItemAvatar';
+
+export default withStyles(styles, { name: 'MuiListItemAvatar' })(ListItemAvatar);

package/es/List/ListItemIcon.js

@@ -0,0 +1,46 @@
+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: {
+    height: 24,
+    marginRight: theme.spacing.unit * 2,
+    width: 24,
+    color: theme.palette.action.active,
+    flexShrink: 0
+  }
+});
+
+/**
+ * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
+ */
+function ListItemIcon(props) {
+  const { children, classes, className: classNameProp } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
+
+  return React.cloneElement(children, _extends({
+    className: classNames(classes.root, classNameProp, children.props.className)
+  }, other));
+}
+
+ListItemIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component, normally `Icon`, `SvgIcon`,
+   * or a `material-ui-icons` SVG icon component.
+   */
+  children: PropTypes.element.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'MuiListItemIcon' })(ListItemIcon);

package/es/List/ListItemSecondaryAction.js

@@ -0,0 +1,45 @@
+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: {
+    position: 'absolute',
+    right: 4,
+    top: '50%',
+    marginTop: -theme.spacing.unit * 3
+  }
+});
+
+function ListItemSecondaryAction(props) {
+  const { children, classes, className } = props,
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className']);
+
+  return React.createElement(
+    'div',
+    _extends({ className: classNames(classes.root, className) }, other),
+    children
+  );
+}
+
+ListItemSecondaryAction.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component, normally an `IconButton` or selection control.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : {};
+
+ListItemSecondaryAction.muiName = 'ListItemSecondaryAction';
+
+export default withStyles(styles, { name: 'MuiListItemSecondaryAction' })(ListItemSecondaryAction);

package/es/List/ListItemText.js

@@ -0,0 +1,114 @@
+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';
+import Typography from '../Typography';
+
+export const styles = theme => ({
+  root: {
+    flex: '1 1 auto',
+    minWidth: 0,
+    padding: '0 16px',
+    '&:first-child': {
+      paddingLeft: 0
+    }
+  },
+  inset: {
+    '&:first-child': {
+      paddingLeft: theme.spacing.unit * 7
+    }
+  },
+  dense: {
+    fontSize: theme.typography.pxToRem(13)
+  },
+  primary: {
+    '&$textDense': {
+      fontSize: 'inherit'
+    }
+  },
+  secondary: {
+    '&$textDense': {
+      fontSize: 'inherit'
+    }
+  },
+  textDense: {}
+});
+
+function ListItemText(props, context) {
+  const {
+    classes,
+    className: classNameProp,
+    disableTypography,
+    inset,
+    primary,
+    secondary
+  } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'disableTypography', 'inset', 'primary', 'secondary']);
+  const { dense } = context;
+  const className = classNames(classes.root, {
+    [classes.dense]: dense,
+    [classes.inset]: inset
+  }, classNameProp);
+
+  return React.createElement(
+    'div',
+    _extends({ className: className }, other),
+    primary && (disableTypography ? primary : React.createElement(
+      Typography,
+      {
+        variant: 'subheading',
+        className: classNames(classes.primary, { [classes.textDense]: dense })
+      },
+      primary
+    )),
+    secondary && (disableTypography ? secondary : React.createElement(
+      Typography,
+      {
+        variant: 'body1',
+        className: classNames(classes.secondary, {
+          [classes.textDense]: dense
+        }),
+        color: 'textSecondary'
+      },
+      secondary
+    ))
+  );
+}
+
+ListItemText.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the children won't be wrapped by a typography component.
+   * For instance, that can be useful to can render an h4 instead of a
+   */
+  disableTypography: PropTypes.bool,
+  /**
+   * If `true`, the children will be indented.
+   * This should be used if there is no left avatar or left icon.
+   */
+  inset: PropTypes.bool,
+  primary: PropTypes.node,
+  secondary: PropTypes.node
+} : {};
+
+ListItemText.defaultProps = {
+  disableTypography: false,
+  inset: false,
+  primary: false,
+  secondary: false
+};
+
+ListItemText.contextTypes = {
+  dense: PropTypes.bool
+};
+
+export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);

package/es/List/ListSubheader.js

@@ -0,0 +1,90 @@
+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';
+import { capitalize } from '../utils/helpers';
+
+export const styles = theme => ({
+  root: theme.mixins.gutters({
+    boxSizing: 'border-box',
+    lineHeight: '48px',
+    listStyle: 'none',
+    color: theme.palette.text.secondary,
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.pxToRem(theme.typography.fontSize)
+  }),
+  colorPrimary: {
+    color: theme.palette.primary.main
+  },
+  colorInherit: {
+    color: 'inherit'
+  },
+  inset: {
+    paddingLeft: theme.spacing.unit * 9
+  },
+  sticky: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+    backgroundColor: 'inherit'
+  }
+});
+
+function ListSubheader(props) {
+  const { classes, className, color, component: Component, disableSticky, inset } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'color', 'component', 'disableSticky', 'inset']);
+
+  return React.createElement(Component, _extends({
+    className: classNames(classes.root, {
+      [classes[`color${capitalize(color)}`]]: color !== 'default',
+      [classes.inset]: inset,
+      [classes.sticky]: !disableSticky
+    }, className)
+  }, other));
+}
+
+ListSubheader.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'primary', 'inherit']),
+  /**
+   * 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 List Subheader will not stick to the top during scroll.
+   */
+  disableSticky: PropTypes.bool,
+  /**
+   * If `true`, the List Subheader will be indented.
+   */
+  inset: PropTypes.bool
+} : {};
+
+ListSubheader.defaultProps = {
+  color: 'default',
+  component: 'li',
+  disableSticky: false,
+  inset: false
+};
+
+ListSubheader.muiName = 'ListSubheader';
+
+export default withStyles(styles, { name: 'MuiListSubheader' })(ListSubheader);

package/es/List/index.js

@@ -0,0 +1,7 @@
+export { default } from './List';
+export { default as ListItem } from './ListItem';
+export { default as ListItemAvatar } from './ListItemAvatar';
+export { default as ListItemText } from './ListItemText';
+export { default as ListItemIcon } from './ListItemIcon';
+export { default as ListItemSecondaryAction } from './ListItemSecondaryAction';
+export { default as ListSubheader } from './ListSubheader';

package/es/Menu/Menu.js

@@ -0,0 +1,205 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Popover
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
+import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import withStyles from '../styles/withStyles';
+import Popover from '../Popover';
+import MenuList from './MenuList';
+
+const RTL_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'right'
+};
+
+const LTR_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'left'
+};
+
+export const styles = {
+  paper: {
+    // specZ: The maximum height of a simple menu should be one or more rows less than the view
+    // height. This ensures a tappable area outside of the simple menu with which to dismiss
+    // the menu.
+    maxHeight: 'calc(100vh - 96px)',
+    // Add iOS momentum scrolling.
+    WebkitOverflowScrolling: 'touch'
+  }
+};
+
+class Menu extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.getContentAnchorEl = () => {
+      if (!this.menuList || !this.menuList.selectedItem) {
+        return findDOMNode(this.menuList).firstChild;
+      }
+
+      return findDOMNode(this.menuList.selectedItem);
+    }, this.menuList = undefined, this.focus = () => {
+      if (this.menuList && this.menuList.selectedItem) {
+        findDOMNode(this.menuList.selectedItem).focus();
+        return;
+      }
+
+      const menuList = findDOMNode(this.menuList);
+      if (menuList && menuList.firstChild) {
+        menuList.firstChild.focus();
+      }
+    }, this.handleEnter = element => {
+      const { theme } = this.props;
+      const menuList = findDOMNode(this.menuList);
+
+      // Focus so the scroll computation of the Popover works as expected.
+      this.focus();
+
+      // Let's ignore that piece of logic if users are already overriding the width
+      // of the menu.
+      if (menuList && element.clientHeight < menuList.clientHeight && !menuList.style.width) {
+        const size = `${getScrollbarSize()}px`;
+        menuList.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = size;
+        menuList.style.width = `calc(100% + ${size})`;
+      }
+
+      if (this.props.onEnter) {
+        this.props.onEnter(element);
+      }
+    }, this.handleListKeyDown = (event, key) => {
+      if (key === 'tab') {
+        event.preventDefault();
+
+        if (this.props.onClose) {
+          this.props.onClose(event);
+        }
+      }
+    }, _temp;
+  }
+
+  componentDidMount() {
+    if (this.props.open) {
+      this.focus();
+    }
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      children,
+      classes,
+      MenuListProps,
+      onEnter,
+      PaperProps = {},
+      PopoverClasses,
+      theme
+    } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'classes', 'MenuListProps', 'onEnter', 'PaperProps', 'PopoverClasses', 'theme']);
+
+    return React.createElement(
+      Popover,
+      _extends({
+        getContentAnchorEl: this.getContentAnchorEl,
+        classes: PopoverClasses,
+        onEnter: this.handleEnter,
+        anchorOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
+        transformOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,
+        PaperProps: _extends({}, PaperProps, {
+          classes: _extends({}, PaperProps.classes, {
+            root: classes.paper
+          })
+        })
+      }, other),
+      React.createElement(
+        MenuList,
+        _extends({
+          role: 'menu',
+          onKeyDown: this.handleListKeyDown
+        }, MenuListProps, {
+          ref: node => {
+            this.menuList = node;
+          }
+        }),
+        children
+      )
+    );
+  }
+}
+
+Menu.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The DOM element used to set the position of the menu.
+   */
+  anchorEl: PropTypes.object,
+  /**
+   * Menu contents, normally `MenuItem`s.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * Properties applied to the `MenuList` element.
+   */
+  MenuListProps: PropTypes.object,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the Menu enters.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the Menu has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the Menu is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired before the Menu exits.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the Menu has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the Menu is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * If `true`, the menu is visible.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  PaperProps: PropTypes.object,
+  /**
+   * `classes` property applied to the `Popover` element.
+   */
+  PopoverClasses: PropTypes.object,
+  /**
+   * @ignore
+   */
+  theme: PropTypes.object.isRequired,
+  /**
+   * The length of the transition in `ms`, or 'auto'
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto'])])
+} : {};
+
+Menu.defaultProps = {
+  transitionDuration: 'auto'
+};
+
+export default withStyles(styles, { name: 'MuiMenu', withTheme: true })(Menu);

package/es/Menu/MenuItem.js

@@ -0,0 +1,75 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent ListItem
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import ListItem from '../List/ListItem';
+
+export const styles = theme => ({
+  root: _extends({}, theme.typography.subheading, {
+    height: theme.spacing.unit * 3,
+    boxSizing: 'content-box',
+    width: 'auto',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    paddingLeft: theme.spacing.unit * 2,
+    paddingRight: theme.spacing.unit * 2,
+    '&$selected': {
+      backgroundColor: theme.palette.action.selected
+    }
+  }),
+  selected: {}
+});
+
+function MenuItem(props) {
+  const { classes, className, component, selected, role } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'selected', 'role']);
+
+  return React.createElement(ListItem, _extends({
+    button: true,
+    role: role,
+    tabIndex: -1,
+    className: classNames(classes.root, { [classes.selected]: selected }, className),
+    component: component
+  }, other));
+}
+
+MenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Menu item contents.
+   */
+  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]),
+  /**
+   * @ignore
+   */
+  role: PropTypes.string,
+  /**
+   * Use to apply selected styling.
+   */
+  selected: PropTypes.bool
+} : {};
+
+MenuItem.defaultProps = {
+  component: 'li',
+  role: 'menuitem',
+  selected: false
+};
+
+export default withStyles(styles, { name: 'MuiMenuItem' })(MenuItem);