@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.36

package/es/transitions/Slide.js

@@ -1,291 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-// @inheritedComponent Transition
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
-import EventListener from 'react-event-listener';
-import debounce from 'lodash/debounce';
-import Transition from 'react-transition-group/Transition';
-import ownerWindow from 'dom-helpers/ownerWindow';
-import polyfill from 'react-lifecycles-compat';
-import withTheme from '../styles/withTheme';
-import { duration } from '../styles/transitions';
-import { reflow, getTransitionProps } from './utils';
-
-const GUTTER = 24;
-
-// Translate the node so he can't be seen on the screen.
-// Later, we gonna translate back the node to his original location
-// with `translate3d(0, 0, 0)`.`
-function getTranslateValue(props, node) {
-  const { direction } = props;
-  const rect = node.getBoundingClientRect();
-
-  let transform;
-
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    const computedStyle = ownerWindow(node).getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
-
-  let offsetX = 0;
-  let offsetY = 0;
-
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
-  }
-
-  if (direction === 'left') {
-    return `translateX(100vw) translateX(-${rect.left - offsetX}px)`;
-  } else if (direction === 'right') {
-    return `translateX(-${rect.left + rect.width + GUTTER - offsetX}px)`;
-  } else if (direction === 'up') {
-    return `translateY(100vh) translateY(-${rect.top - offsetY}px)`;
-  }
-
-  // direction === 'down'
-  return `translate3d(0, ${0 - (rect.top + rect.height)}px, 0)`;
-}
-
-export function setTranslateValue(props, node) {
-  const transform = getTranslateValue(props, node);
-
-  if (transform) {
-    node.style.transform = transform;
-    node.style.webkitTransform = transform;
-  }
-}
-
-/**
- * The Slide transition is used by the [Snackbar](/demos/snackbars) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-class Slide extends React.Component {
-  constructor(...args) {
-    var _temp;
-
-    return _temp = super(...args), this.state = {}, this.transition = null, this.handleResize = debounce(() => {
-      // Skip configuration where the position is screen size invariant.
-      if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
-        return;
-      }
-
-      const node = findDOMNode(this.transition);
-      if (node) {
-        setTranslateValue(this.props, node);
-      }
-    }, 166), this.handleEnter = node => {
-      setTranslateValue(this.props, node);
-      reflow(node);
-
-      if (this.props.onEnter) {
-        this.props.onEnter(node);
-      }
-    }, this.handleEntering = node => {
-      const { theme } = this.props;
-
-      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
-        mode: 'enter'
-      });
-      node.style.transition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        easing: theme.transitions.easing.easeOut,
-        delay
-      });
-      node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-        duration: transitionDuration,
-        easing: theme.transitions.easing.easeOut,
-        delay
-      });
-      node.style.transform = 'translate3d(0, 0, 0)';
-      node.style.webkitTransform = 'translate3d(0, 0, 0)';
-      if (this.props.onEntering) {
-        this.props.onEntering(node);
-      }
-    }, this.handleExit = node => {
-      const { theme } = this.props;
-
-      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
-        mode: 'exit'
-      });
-      node.style.transition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        easing: theme.transitions.easing.sharp,
-        delay
-      });
-      node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-        duration: transitionDuration,
-        easing: theme.transitions.easing.sharp,
-        delay
-      });
-      setTranslateValue(this.props, node);
-
-      if (this.props.onExit) {
-        this.props.onExit(node);
-      }
-    }, this.handleExited = node => {
-      // No need for transitions when the component is hidden
-      node.style.transition = '';
-      node.style.webkitTransition = '';
-
-      if (this.props.onExited) {
-        this.props.onExited(node);
-      }
-    }, _temp;
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.mounted === 'undefined') {
-      return {
-        mounted: false
-      };
-    }
-
-    return {
-      mounted: true
-    };
-  }
-
-  componentDidMount() {
-    // state.mounted handle SSR, once the component is mounted, we need
-    // to properly hide it.
-    if (!this.props.in) {
-      // We need to set initial translate values of transition element
-      // otherwise component will be shown when in=false.
-      this.updatePosition();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.direction !== this.props.direction && !this.props.in) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
-      this.updatePosition();
-    }
-  }
-
-  componentWillUnmount() {
-    this.handleResize.cancel();
-  }
-
-  updatePosition() {
-    const node = findDOMNode(this.transition);
-    if (node) {
-      node.style.visibility = 'inherit';
-      setTranslateValue(this.props, node);
-    }
-  }
-
-  render() {
-    const _props = this.props,
-          {
-      children,
-      onEnter,
-      onEntering,
-      onExit,
-      onExited,
-      style: styleProp,
-      theme
-    } = _props,
-          other = _objectWithoutProperties(_props, ['children', 'onEnter', 'onEntering', 'onExit', 'onExited', 'style', 'theme']);
-
-    let style = {};
-
-    // We use this state to handle the server-side rendering.
-    // We don't know the width of the children ahead of time.
-    // We need to render it.
-    if (!this.props.in && !this.state.mounted) {
-      style.visibility = 'hidden';
-    }
-
-    style = _extends({}, style, styleProp, React.isValidElement(children) ? children.props.style : {});
-
-    return React.createElement(
-      EventListener,
-      { target: 'window', onResize: this.handleResize },
-      React.createElement(
-        Transition,
-        _extends({
-          onEnter: this.handleEnter,
-          onEntering: this.handleEntering,
-          onExit: this.handleExit,
-          onExited: this.handleExited,
-          appear: true,
-          style: style,
-          ref: node => {
-            this.transition = node;
-          }
-        }, other),
-        children
-      )
-    );
-  }
-}
-
-Slide.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * A single child content element.
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  /**
-   * Direction the child node will enter from.
-   */
-  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
-  /**
-   * If `true`, show the component; triggers the enter or exit animation.
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntered: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onEntering: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExit: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExited: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExiting: PropTypes.func,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  theme: PropTypes.object.isRequired,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
-} : {};
-
-Slide.defaultProps = {
-  direction: 'down',
-  timeout: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  }
-};
-
-export default withTheme()(polyfill(Slide));

package/es/transitions/Zoom.js

@@ -1,129 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-// @inheritedComponent Transition
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import Transition from 'react-transition-group/Transition';
-import { duration } from '../styles/transitions';
-import withTheme from '../styles/withTheme';
-import { reflow, getTransitionProps } from './utils';
-
-const styles = {
-  entering: {
-    transform: 'scale(1)'
-  },
-  entered: {
-    transform: 'scale(1)'
-  }
-};
-
-/**
- * The Zoom transition can be used for the floating variant of the
- * [Button](https://material-ui-next.com/demos/buttons/#floating-action-buttons) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
- */
-class Zoom extends React.Component {
-  constructor(...args) {
-    var _temp;
-
-    return _temp = super(...args), this.handleEnter = node => {
-      const { theme } = this.props;
-      reflow(node); // So the animation always start from the start.
-
-      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
-        mode: 'enter'
-      });
-      node.style.transition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        delay
-      });
-      node.style.webkitTransition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        delay
-      });
-
-      if (this.props.onEnter) {
-        this.props.onEnter(node);
-      }
-    }, this.handleExit = node => {
-      const { theme } = this.props;
-      const { duration: transitionDuration, delay } = getTransitionProps(this.props, {
-        mode: 'exit'
-      });
-      node.style.transition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        delay
-      });
-      node.style.webkitTransition = theme.transitions.create('transform', {
-        duration: transitionDuration,
-        delay
-      });
-
-      if (this.props.onExit) {
-        this.props.onExit(node);
-      }
-    }, _temp;
-  }
-
-  render() {
-    const _props = this.props,
-          { children, onEnter, onExit, style: styleProp, theme } = _props,
-          other = _objectWithoutProperties(_props, ['children', 'onEnter', 'onExit', 'style', 'theme']);
-
-    const style = _extends({}, styleProp, React.isValidElement(children) ? children.props.style : {});
-
-    return React.createElement(
-      Transition,
-      _extends({ appear: true, onEnter: this.handleEnter, onExit: this.handleExit }, other),
-      (state, childProps) => {
-        return React.cloneElement(children, _extends({
-          style: _extends({
-            transform: 'scale(0)'
-          }, styles[state], style)
-        }, childProps));
-      }
-    );
-  }
-}
-
-Zoom.propTypes = process.env.NODE_ENV !== "production" ? {
-  /**
-   * A single child content element.
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  /**
-   * If `true`, the component will transition in.
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onEnter: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onExit: PropTypes.func,
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * @ignore
-   */
-  theme: PropTypes.object.isRequired,
-  /**
-   * The duration for the transition, in milliseconds.
-   * You may specify a single timeout for all transitions, or individually with an object.
-   */
-  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number })])
-} : {};
-
-Zoom.defaultProps = {
-  timeout: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen
-  }
-};
-
-export default withTheme()(Zoom);

package/es/transitions/index.js

@@ -1,5 +0,0 @@
-export { default as Slide } from './Slide';
-export { default as Grow } from './Grow';
-export { default as Fade } from './Fade';
-export { default as Collapse } from './Collapse';
-export { default as Zoom } from './Zoom';

package/es/utils/ClickAwayListener.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { findDOMNode } from 'react-dom';
-import EventListener from 'react-event-listener';
-import ownerDocument from 'dom-helpers/ownerDocument';
-
-const isDescendant = (el, target) => {
-  if (target !== null && target.parentNode) {
-    return el === target || isDescendant(el, target.parentNode);
-  }
-  return false;
-};
-
-/**
- * Listen for click events that are triggered outside of the component children.
- */
-class ClickAwayListener extends React.Component {
-  constructor(...args) {
-    var _temp;
-
-    return _temp = super(...args), this.mounted = false, this.handleClickAway = event => {
-      // Ignore events that have been `event.preventDefault()` marked.
-      if (event.defaultPrevented) {
-        return;
-      }
-
-      // IE11 support, which trigger the handleClickAway even after the unbind
-      if (this.mounted) {
-        const el = findDOMNode(this);
-        const doc = ownerDocument(el);
-
-        if (doc.documentElement && doc.documentElement.contains(event.target) && !isDescendant(el, event.target)) {
-          this.props.onClickAway(event);
-        }
-      }
-    }, _temp;
-  }
-
-  componentDidMount() {
-    this.mounted = true;
-  }
-
-  componentWillUnmount() {
-    this.mounted = false;
-  }
-
-  render() {
-    return React.createElement(
-      EventListener,
-      {
-        target: 'document',
-        onMouseup: this.handleClickAway,
-        onTouchend: this.handleClickAway
-      },
-      this.props.children
-    );
-  }
-}
-
-ClickAwayListener.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node.isRequired,
-  onClickAway: PropTypes.func.isRequired
-} : {};
-
-export default ClickAwayListener;

package/es/utils/HiIconBuilder.js

@@ -1,107 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
-//  weak
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import keycode from 'keycode/index';
-import hiGetMdiIcon from './hiGetMdiIcon';
-import { camelize } from './hiHelpers';
-import * as hiIcon from '../svg-icons';
-import { capitalizeFirstLetter } from './helpers';
-
-class HiIconBuilder extends PureComponent {
-
-    constructor(props) {
-        super(props);
-
-        this.handleKeyDown = event => {
-            const { onClick } = this.props;
-            const key = keycode(event);
-
-            if (onClick && (key === 'space' || key === 'enter')) {
-                event.preventDefault();
-                onClick(event);
-            }
-        };
-
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-    }
-
-    render() {
-        const _props = this.props,
-              { icon, size, className, style, onClick, color, backgroundColor } = _props,
-              others = _objectWithoutProperties(_props, ['icon', 'size', 'className', 'style', 'onClick', 'color', 'backgroundColor']);
-
-        let props = {};
-        if (onClick) {
-            props = {
-                role: 'button',
-                onKeyDown: this.handleKeyDown,
-                focusable: 'true',
-                tabIndex: 0
-            };
-        }
-
-        // Line Awesome icons
-        if (icon.indexOf('fa-') === 0) {
-            return React.createElement('i', _extends({
-                className: classNames('fa', icon, className),
-                style: _extends({
-                    fontSize: size
-                }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
-                onClick: onClick
-            }, props, others));
-        }
-
-        let IconName;
-        if (icon.indexOf('hi_') === 0) {
-            IconName = hiIcon[capitalizeFirstLetter(camelize(icon))];
-        } else {
-            IconName = hiGetMdiIcon(icon);
-        }
-        return React.createElement(IconName, _extends({
-            className: className,
-            style: _extends({
-                height: size,
-                width: size
-            }, color && { color }, backgroundColor && { backgroundColor, padding: 2, borderRadius: size }, style),
-            onClick: onClick
-        }, props, others));
-    }
-}
-
-HiIconBuilder.defaultProps = {
-    size: 20
-};
-HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Couleur du fond
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * Permet de surcharger la classe
-     */
-    className: PropTypes.string,
-    /**
-     * Couleur de l'icône
-     */
-    color: PropTypes.string,
-    /**
-     * Nom de l'icône
-     */
-    icon: PropTypes.string.isRequired,
-    /**
-     * Function de callback au clic
-     */
-    onClick: PropTypes.func,
-    /**
-     * Taile de la police
-     */
-    size: PropTypes.number,
-    /**
-     * Style surchargé
-     */
-    style: PropTypes.object
-} : {};
-export default HiIconBuilder;

package/es/utils/addEventListener.js

@@ -1,11 +0,0 @@
-import addEventListener from 'dom-helpers/events/on';
-import removeEventListener from 'dom-helpers/events/off';
-
-export default function (node, event, handler, capture = null) {
-  addEventListener(node, event, handler, capture);
-  return {
-    remove() {
-      removeEventListener(node, event, handler, capture);
-    }
-  };
-}

package/es/utils/hiGetMdiIcon.js

@@ -1,12 +0,0 @@
-//  weak
-import * as mdi from 'mdi-material-ui';
-import { capitalizeFirstLetter } from './helpers';
-import { camelize } from './hiHelpers';
-
-/**
- * Renvoie un icon material design icon
- */
-export default function (icon) {
-  const mdiLeftIcon = capitalizeFirstLetter(camelize(icon));
-  return mdi[mdiLeftIcon];
-}