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

package/es/Menu/MenuList.js

@@ -0,0 +1,168 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent List
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { findDOMNode } from 'react-dom';
+import keycode from 'keycode';
+import contains from 'dom-helpers/query/contains';
+import activeElement from 'dom-helpers/activeElement';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import List from '../List';
+
+class MenuList extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.state = {
+      currentTabIndex: undefined
+    }, this.list = undefined, this.selectedItem = undefined, this.blurTimer = undefined, this.handleBlur = event => {
+      this.blurTimer = setTimeout(() => {
+        if (this.list) {
+          const list = findDOMNode(this.list);
+          const currentFocus = activeElement(ownerDocument(list));
+          if (!contains(list, currentFocus)) {
+            this.resetTabIndex();
+          }
+        }
+      }, 30);
+
+      if (this.props.onBlur) {
+        this.props.onBlur(event);
+      }
+    }, this.handleKeyDown = event => {
+      const list = findDOMNode(this.list);
+      const key = keycode(event);
+      const currentFocus = activeElement(ownerDocument(list));
+
+      if ((key === 'up' || key === 'down') && (!currentFocus || currentFocus && !contains(list, currentFocus))) {
+        if (this.selectedItem) {
+          findDOMNode(this.selectedItem).focus();
+        } else {
+          list.firstChild.focus();
+        }
+      } else if (key === 'down') {
+        event.preventDefault();
+        if (currentFocus.nextElementSibling) {
+          currentFocus.nextElementSibling.focus();
+        }
+      } else if (key === 'up') {
+        event.preventDefault();
+        if (currentFocus.previousElementSibling) {
+          currentFocus.previousElementSibling.focus();
+        }
+      }
+
+      if (this.props.onKeyDown) {
+        this.props.onKeyDown(event, key);
+      }
+    }, this.handleItemFocus = event => {
+      const list = findDOMNode(this.list);
+      if (list) {
+        for (let i = 0; i < list.children.length; i += 1) {
+          if (list.children[i] === event.currentTarget) {
+            this.setTabIndex(i);
+            break;
+          }
+        }
+      }
+    }, _temp;
+  }
+
+  componentDidMount() {
+    this.resetTabIndex();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.blurTimer);
+  }
+
+  setTabIndex(index) {
+    this.setState({ currentTabIndex: index });
+  }
+
+  focus() {
+    const { currentTabIndex } = this.state;
+    const list = findDOMNode(this.list);
+    if (!list || !list.children || !list.firstChild) {
+      return;
+    }
+
+    if (currentTabIndex && currentTabIndex >= 0) {
+      list.children[currentTabIndex].focus();
+    } else {
+      list.firstChild.focus();
+    }
+  }
+
+  resetTabIndex() {
+    const list = findDOMNode(this.list);
+    const currentFocus = activeElement(ownerDocument(list));
+    const items = [...list.children];
+    const currentFocusIndex = items.indexOf(currentFocus);
+
+    if (currentFocusIndex !== -1) {
+      return this.setTabIndex(currentFocusIndex);
+    }
+
+    if (this.selectedItem) {
+      return this.setTabIndex(items.indexOf(findDOMNode(this.selectedItem)));
+    }
+
+    return this.setTabIndex(0);
+  }
+
+  render() {
+    const _props = this.props,
+          { children, className, onBlur, onKeyDown } = _props,
+          other = _objectWithoutProperties(_props, ['children', 'className', 'onBlur', 'onKeyDown']);
+
+    return React.createElement(
+      List,
+      _extends({
+        role: 'menu',
+        ref: node => {
+          this.list = node;
+        },
+        className: className,
+        onKeyDown: this.handleKeyDown,
+        onBlur: this.handleBlur
+      }, other),
+      React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          tabIndex: index === this.state.currentTabIndex ? 0 : -1,
+          ref: child.props.selected ? node => {
+            this.selectedItem = node;
+          } : undefined,
+          onFocus: this.handleItemFocus
+        });
+      })
+    );
+  }
+}
+
+MenuList.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * MenuList contents, normally `MenuItem`s.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: PropTypes.func
+} : {};
+
+export default MenuList;

package/es/Menu/index.js

@@ -0,0 +1,3 @@
+export { default } from './Menu';
+export { default as MenuList } from './MenuList';
+export { default as MenuItem } from './MenuItem';

package/es/MobileStepper/MobileStepper.js

@@ -0,0 +1,137 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Paper
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import Paper from '../Paper';
+import { capitalize } from '../utils/helpers';
+import { LinearProgress } from '../Progress';
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    background: theme.palette.background.default,
+    padding: theme.spacing.unit
+  },
+  positionBottom: {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: theme.zIndex.mobileStepper
+  },
+  positionTop: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: theme.zIndex.mobileStepper
+  },
+  positionStatic: {},
+  dots: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  dot: {
+    backgroundColor: theme.palette.action.disabled,
+    borderRadius: '50%',
+    width: theme.spacing.unit,
+    height: theme.spacing.unit,
+    margin: '0 2px'
+  },
+  dotActive: {
+    backgroundColor: theme.palette.primary.main
+  },
+  progress: {
+    width: '50%'
+  }
+});
+
+function MobileStepper(props) {
+  const {
+    activeStep,
+    backButton,
+    classes,
+    className: classNameProp,
+    nextButton,
+    position,
+    steps,
+    variant
+  } = props,
+        other = _objectWithoutProperties(props, ['activeStep', 'backButton', 'classes', 'className', 'nextButton', 'position', 'steps', 'variant']);
+
+  const className = classNames(classes.root, classes[`position${capitalize(position)}`], classNameProp);
+
+  return React.createElement(
+    Paper,
+    _extends({ square: true, elevation: 0, className: className }, other),
+    backButton,
+    variant === 'dots' && React.createElement(
+      'div',
+      { className: classes.dots },
+      [...new Array(steps)].map((_, step) => {
+        const dotClassName = classNames(classes.dot, {
+          [classes.dotActive]: step === activeStep
+        });
+        // eslint-disable-next-line react/no-array-index-key
+        return React.createElement('div', { key: step, className: dotClassName });
+      })
+    ),
+    variant === 'progress' && React.createElement(LinearProgress, {
+      className: classes.progress,
+      variant: 'determinate',
+      value: Math.ceil(activeStep / (steps - 1) * 100)
+    }),
+    nextButton
+  );
+}
+
+MobileStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Set the active step (zero based index).
+   * Defines which dot is highlighted when the variant is 'dots'.
+   */
+  activeStep: PropTypes.number,
+  /**
+   * A back button element. For instance, it can be be a `Button` or a `IconButton`.
+   */
+  backButton: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * A next button element. For instance, it can be be a `Button` or a `IconButton`.
+   */
+  nextButton: PropTypes.node,
+  /**
+   * Set the positioning type.
+   */
+  position: PropTypes.oneOf(['bottom', 'top', 'static']),
+  /**
+   * The total steps.
+   */
+  steps: PropTypes.number.isRequired,
+  /**
+   * The type of mobile stepper to use.
+   */
+  variant: PropTypes.oneOf(['text', 'dots', 'progress'])
+} : {};
+
+MobileStepper.defaultProps = {
+  activeStep: 0,
+  position: 'bottom',
+  variant: 'dots'
+};
+
+export default withStyles(styles, { name: 'MuiMobileStepper' })(MobileStepper);

package/es/MobileStepper/index.js

@@ -0,0 +1 @@
+export { default } from './MobileStepper';

package/es/Modal/Backdrop.js

@@ -0,0 +1,67 @@
+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 Fade from '../transitions/Fade';
+
+export const styles = {
+  root: {
+    zIndex: -1,
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    willChange: 'opacity',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  invisible: {
+    backgroundColor: 'transparent'
+  }
+};
+
+function Backdrop(props) {
+  const { classes, invisible, open, transitionDuration } = props,
+        other = _objectWithoutProperties(props, ['classes', 'invisible', 'open', 'transitionDuration']);
+
+  const className = classNames(classes.root, {
+    [classes.invisible]: invisible
+  });
+
+  return React.createElement(
+    Fade,
+    _extends({ appear: true, 'in': open, timeout: transitionDuration }, other),
+    React.createElement('div', { className: className, 'aria-hidden': 'true' })
+  );
+}
+
+Backdrop.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * If `true`, the backdrop is invisible.
+   * It can be used when rendering a popover or a custom select component.
+   */
+  invisible: PropTypes.bool,
+  /**
+   * If `true`, the backdrop is open.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
+} : {};
+
+Backdrop.defaultProps = {
+  invisible: false
+};
+
+export default withStyles(styles, { name: 'MuiBackdrop' })(Backdrop);