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

package/es/Snackbar/Snackbar.js

@@ -0,0 +1,370 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import EventListener from 'react-event-listener';
+import polyfill from 'react-lifecycles-compat';
+import withStyles from '../styles/withStyles';
+import { duration } from '../styles/transitions';
+import ClickAwayListener from '../utils/ClickAwayListener';
+import { capitalize, createChainedFunction } from '../utils/helpers';
+import Slide from '../transitions/Slide';
+import SnackbarContent from './SnackbarContent';
+
+export const styles = theme => {
+  const gutter = theme.spacing.unit * 3;
+  const top = { top: 0 };
+  const bottom = { bottom: 0 };
+  const right = { justifyContent: 'flex-end' };
+  const left = { justifyContent: 'flex-start' };
+  const topSpace = { top: gutter };
+  const bottomSpace = { bottom: gutter };
+  const rightSpace = { right: gutter };
+  const leftSpace = { left: gutter };
+  const center = {
+    left: '50%',
+    right: 'auto',
+    transform: 'translateX(-50%)'
+  };
+
+  return {
+    root: {
+      zIndex: theme.zIndex.snackbar,
+      position: 'fixed',
+      display: 'flex',
+      left: 0,
+      right: 0,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    anchorOriginTopCenter: _extends({}, top, {
+      [theme.breakpoints.up('md')]: _extends({}, center)
+    }),
+    anchorOriginBottomCenter: _extends({}, bottom, {
+      [theme.breakpoints.up('md')]: _extends({}, center)
+    }),
+    anchorOriginTopRight: _extends({}, top, right, {
+      [theme.breakpoints.up('md')]: _extends({
+        left: 'auto'
+      }, topSpace, rightSpace)
+    }),
+    anchorOriginBottomRight: _extends({}, bottom, right, {
+      [theme.breakpoints.up('md')]: _extends({
+        left: 'auto'
+      }, bottomSpace, rightSpace)
+    }),
+    anchorOriginTopLeft: _extends({}, top, left, {
+      [theme.breakpoints.up('md')]: _extends({
+        right: 'auto'
+      }, topSpace, leftSpace)
+    }),
+    anchorOriginBottomLeft: _extends({}, bottom, left, {
+      [theme.breakpoints.up('md')]: _extends({
+        right: 'auto'
+      }, bottomSpace, leftSpace)
+    })
+  };
+};
+
+class Snackbar extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.state = {}, this.timerAutoHide = null, this.handleMouseEnter = event => {
+      if (this.props.onMouseEnter) {
+        this.props.onMouseEnter(event);
+      }
+      this.handlePause();
+    }, this.handleMouseLeave = event => {
+      if (this.props.onMouseLeave) {
+        this.props.onMouseLeave(event);
+      }
+      this.handleResume();
+    }, this.handleClickAway = event => {
+      if (this.props.onClose) {
+        this.props.onClose(event, 'clickaway');
+      }
+    }, this.handlePause = () => {
+      clearTimeout(this.timerAutoHide);
+    }, this.handleResume = () => {
+      if (this.props.autoHideDuration != null) {
+        if (this.props.resumeHideDuration !== undefined) {
+          this.setAutoHideTimer(this.props.resumeHideDuration);
+          return;
+        }
+        this.setAutoHideTimer((this.props.autoHideDuration || 0) * 0.5);
+      }
+    }, this.handleExited = () => {
+      this.setState({ exited: true });
+    }, _temp;
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (typeof prevState.exited === 'undefined') {
+      return {
+        exited: !nextProps.open
+      };
+    }
+
+    if (nextProps.open) {
+      return {
+        exited: false
+      };
+    }
+
+    return null;
+  }
+
+  componentDidMount() {
+    if (this.props.open) {
+      this.setAutoHideTimer();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.open !== this.props.open) {
+      if (this.props.open) {
+        this.setAutoHideTimer();
+      } else {
+        clearTimeout(this.timerAutoHide);
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timerAutoHide);
+  }
+
+  // Timer that controls delay before snackbar auto hides
+  setAutoHideTimer(autoHideDuration = null) {
+    if (!this.props.onClose || this.props.autoHideDuration == null) {
+      return;
+    }
+
+    clearTimeout(this.timerAutoHide);
+    this.timerAutoHide = setTimeout(() => {
+      if (!this.props.onClose || this.props.autoHideDuration == null) {
+        return;
+      }
+
+      this.props.onClose(null, 'timeout');
+    }, autoHideDuration || this.props.autoHideDuration || 0);
+  }
+
+  // Pause the timer when the user is interacting with the Snackbar
+  // or when the user hide the window.
+
+
+  // Restart the timer when the user is no longer interacting with the Snackbar
+  // or when the window is shown back.
+
+
+  render() {
+    const _props = this.props,
+          {
+      action,
+      anchorOrigin: { vertical, horizontal },
+      autoHideDuration,
+      children,
+      classes,
+      className,
+      disableWindowBlurListener,
+      message,
+      onClose,
+      onEnter,
+      onEntered,
+      onEntering,
+      onExit,
+      onExited,
+      onExiting,
+      onMouseEnter,
+      onMouseLeave,
+      open,
+      resumeHideDuration,
+      SnackbarContentProps,
+      transition: TransitionProp,
+      transitionDuration
+    } = _props,
+          other = _objectWithoutProperties(_props, ['action', 'anchorOrigin', 'autoHideDuration', 'children', 'classes', 'className', 'disableWindowBlurListener', 'message', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onExit', 'onExited', 'onExiting', 'onMouseEnter', 'onMouseLeave', 'open', 'resumeHideDuration', 'SnackbarContentProps', 'transition', 'transitionDuration']);
+
+    // So we only render active snackbars.
+    if (!open && this.state.exited) {
+      return null;
+    }
+
+    const transitionProps = {};
+
+    // The provided transition might not support the direction property.
+    if (TransitionProp === Slide) {
+      transitionProps.direction = vertical === 'top' ? 'down' : 'up';
+    }
+
+    return React.createElement(
+      EventListener,
+      {
+        target: 'window',
+        onFocus: disableWindowBlurListener ? undefined : this.handleResume,
+        onBlur: disableWindowBlurListener ? undefined : this.handlePause
+      },
+      React.createElement(
+        ClickAwayListener,
+        { onClickAway: this.handleClickAway },
+        React.createElement(
+          'div',
+          _extends({
+            className: classNames(classes.root, classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`], className),
+            onMouseEnter: this.handleMouseEnter,
+            onMouseLeave: this.handleMouseLeave
+          }, other),
+          React.createElement(
+            TransitionProp,
+            _extends({
+              appear: true,
+              'in': open,
+              onEnter: onEnter,
+              onEntered: onEntered,
+              onEntering: onEntering,
+              onExit: onExit,
+              onExited: createChainedFunction(this.handleExited, onExited),
+              onExiting: onExiting,
+              timeout: transitionDuration
+            }, transitionProps),
+            children || React.createElement(SnackbarContent, _extends({ message: message, action: action }, SnackbarContentProps))
+          )
+        )
+      )
+    );
+  }
+}
+
+Snackbar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The action to display.
+   */
+  action: PropTypes.node,
+  /**
+   * The anchor of the `Snackbar`.
+   */
+  anchorOrigin: PropTypes.shape({
+    horizontal: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['left', 'center', 'right'])]),
+    vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])])
+  }),
+  /**
+   * The number of milliseconds to wait before automatically calling the
+   * `onClose` function. `onClose` should then set the state of the `open`
+   * prop to hide the Snackbar. This behavior is disabled by default with
+   * the `null` value.
+   */
+  autoHideDuration: PropTypes.number,
+  /**
+   * If you wish the take control over the children of the component you can use this property.
+   * When used, you replace the `SnackbarContent` component with the children.
+   */
+  children: PropTypes.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+   */
+  disableWindowBlurListener: PropTypes.bool,
+  /**
+   * When displaying multiple consecutive Snackbars from a parent rendering a single
+   * <Snackbar/>, add the key property to ensure independent treatment of each message.
+   * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
+   * features such as autoHideDuration may be canceled.
+   */
+  key: PropTypes.any,
+  /**
+   * The message to display.
+   */
+  message: PropTypes.node,
+  /**
+   * Callback fired when the component requests to be closed.
+   * Typically `onClose` is used to set state in the parent component,
+   * which is used to control the `Snackbar` `open` prop.
+   * The `reason` parameter can optionally be used to control the response to `onClose`,
+   * for example ignoring `clickaway`.
+   *
+   * @param {object} event The event source of the callback
+   * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"`
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired before the transition is entering.
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired when the transition has entered.
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired when the transition is entering.
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired before the transition is exiting.
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired when the transition has exited.
+   */
+  onExited: PropTypes.func,
+  /**
+   * Callback fired when the transition is exiting.
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * If true, `Snackbar` is open.
+   */
+  open: PropTypes.bool,
+  /**
+   * The number of milliseconds to wait before dismissing after user interaction.
+   * If `autoHideDuration` property isn't specified, it does nothing.
+   * If `autoHideDuration` property is specified but `resumeHideDuration` isn't,
+   * we default to `autoHideDuration / 2` ms.
+   */
+  resumeHideDuration: PropTypes.number,
+  /**
+   * Properties applied to the `SnackbarContent` element.
+   */
+  SnackbarContentProps: PropTypes.object,
+  /**
+   * Transition component.
+   */
+  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * 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 })])
+} : {};
+
+Snackbar.defaultProps = {
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'center'
+  },
+  disableWindowBlurListener: false,
+  transition: Slide,
+  transitionDuration: {
+    enter: duration.enteringScreen,
+    exit: duration.leavingScreen
+  }
+};
+
+export default withStyles(styles, { flip: false, name: 'MuiSnackbar' })(polyfill(Snackbar));

package/es/Snackbar/SnackbarContent.js

@@ -0,0 +1,96 @@
+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 Typography from '../Typography';
+import { emphasize } from '../styles/colorManipulator';
+
+export const styles = theme => {
+  const emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;
+  const backgroundColor = emphasize(theme.palette.background.default, emphasis);
+
+  return {
+    root: {
+      pointerEvents: 'initial',
+      color: theme.palette.getContrastText(backgroundColor),
+      backgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      padding: `6px ${theme.spacing.unit * 3}px`,
+      [theme.breakpoints.up('md')]: {
+        minWidth: 288,
+        maxWidth: 568,
+        borderRadius: 2
+      },
+      [theme.breakpoints.down('sm')]: {
+        flexGrow: 1
+      }
+    },
+    message: {
+      padding: `${theme.spacing.unit}px 0`
+    },
+    action: {
+      display: 'flex',
+      alignItems: 'center',
+      marginLeft: 'auto',
+      paddingLeft: theme.spacing.unit * 3,
+      marginRight: -theme.spacing.unit
+    }
+  };
+};
+
+function SnackbarContent(props) {
+  const { action, classes, className, message } = props,
+        other = _objectWithoutProperties(props, ['action', 'classes', 'className', 'message']);
+
+  return React.createElement(
+    Paper,
+    _extends({
+      component: Typography,
+      headlineMapping: {
+        body1: 'div'
+      },
+      role: 'alertdialog',
+      square: true,
+      elevation: 6,
+      className: classNames(classes.root, className)
+    }, other),
+    React.createElement(
+      'div',
+      { className: classes.message },
+      message
+    ),
+    action ? React.createElement(
+      'div',
+      { className: classes.action },
+      action
+    ) : null
+  );
+}
+
+SnackbarContent.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The action to display.
+   */
+  action: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The message to display.
+   */
+  message: PropTypes.node
+} : {};
+
+export default withStyles(styles, { name: 'MuiSnackbarContent' })(SnackbarContent);

package/es/Snackbar/index.js

@@ -0,0 +1,2 @@
+export { default } from './Snackbar';
+export { default as SnackbarContent } from './SnackbarContent';

package/es/Stepper/Step.js

@@ -0,0 +1,120 @@
+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: {},
+  horizontal: {
+    paddingLeft: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    '&:first-child': {
+      paddingLeft: 0
+    },
+    '&:last-child': {
+      paddingRight: 0
+    }
+  },
+  vertical: {},
+  alternativeLabel: {
+    flex: 1,
+    position: 'relative'
+  }
+});
+
+function Step(props) {
+  const {
+    active,
+    alternativeLabel,
+    children,
+    classes,
+    className: classNameProp,
+    completed,
+    connector,
+    disabled,
+    index,
+    last,
+    orientation
+  } = props,
+        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'connector', 'disabled', 'index', 'last', 'orientation']);
+
+  const className = classNames(classes.root, classes[orientation], {
+    [classes.alternativeLabel]: alternativeLabel
+  }, classNameProp);
+
+  return React.createElement(
+    'div',
+    _extends({ className: className }, other),
+    React.Children.map(children, child => React.cloneElement(child, _extends({
+      active,
+      alternativeLabel,
+      completed,
+      disabled,
+      icon: index + 1,
+      last,
+      orientation
+    }, child.props))),
+    connector && alternativeLabel && !last && React.cloneElement(connector, { orientation, alternativeLabel })
+  );
+}
+
+Step.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Sets the step as active. Is passed to child components.
+   */
+  active: PropTypes.bool,
+  /**
+   * @ignore
+   * Set internally by Stepper when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: PropTypes.bool,
+  /**
+   * @ignore
+   * Passed down from Stepper if alternativeLabel is also set.
+   */
+  connector: PropTypes.element,
+  /**
+   * Mark the step as disabled, will also disable the button if
+   * `StepButton` is a child of `Step`. Is passed to child components.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   * Used internally for numbering.
+   */
+  index: PropTypes.number,
+  /**
+   * @ignore
+   */
+  last: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+Step.defaultProps = {
+  active: false,
+  completed: false,
+  disabled: false
+};
+
+export default withStyles(styles, { name: 'MuiStep' })(Step);

package/es/Stepper/StepButton.js

@@ -0,0 +1,111 @@
+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 withStyles from '../styles/withStyles';
+import ButtonBase from '../ButtonBase';
+import StepLabel from './StepLabel';
+import { isMuiElement } from '../utils/reactHelpers';
+
+export const styles = theme => ({
+  root: {
+    width: '100%',
+    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    margin: `${-theme.spacing.unit * 3}px ${-theme.spacing.unit * 2}px`,
+    boxSizing: 'content-box'
+  }
+});
+
+function StepButton(props) {
+  const {
+    active,
+    alternativeLabel,
+    children,
+    classes,
+    className: classNameProp,
+    completed,
+    disabled,
+    icon,
+    last,
+    optional,
+    orientation
+  } = props,
+        other = _objectWithoutProperties(props, ['active', 'alternativeLabel', 'children', 'classes', 'className', 'completed', 'disabled', 'icon', 'last', 'optional', 'orientation']);
+
+  const childProps = {
+    active,
+    alternativeLabel,
+    completed,
+    disabled,
+    icon,
+    optional,
+    orientation
+  };
+  const child = isMuiElement(children, ['StepLabel']) ? React.cloneElement(children, childProps) : React.createElement(
+    StepLabel,
+    childProps,
+    children
+  );
+
+  return React.createElement(
+    ButtonBase,
+    _extends({ disabled: disabled, className: classNames(classes.root, classNameProp) }, other),
+    child
+  );
+}
+
+StepButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * @ignore
+   * Passed in via `Step` - passed through to `StepLabel`.
+   */
+  active: PropTypes.bool,
+  /**
+   * @ignore
+   * Set internally by Stepper when it's supplied with the alternativeLabel property.
+   */
+  alternativeLabel: PropTypes.bool,
+  /**
+   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * @ignore
+   * Sets completed styling. Is passed to StepLabel.
+   */
+  completed: PropTypes.bool,
+  /**
+   * @ignore
+   * Disables the button and sets disabled styling. Is passed to StepLabel.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The icon displayed by the step label.
+   */
+  icon: PropTypes.node,
+  /**
+   * @ignore
+   */
+  last: PropTypes.bool,
+  /**
+   * The optional node to display.
+   */
+  optional: PropTypes.node,
+  /**
+   * @ignore
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : {};
+
+export default withStyles(styles, { name: 'MuiStepButton' })(StepButton);