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

package/es/transitions/Slide.js

@@ -0,0 +1,291 @@
+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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,5 @@
+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/transitions/utils.js

@@ -0,0 +1,10 @@
+export const reflow = node => node.scrollTop;
+
+export function getTransitionProps(props, options) {
+  const { timeout, style = {} } = props;
+
+  return {
+    duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode],
+    delay: style.transitionDelay
+  };
+}

package/es/utils/ClickAwayListener.js

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,99 @@
+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 hiGetMdiIcon from './hiGetMdiIcon';
+import { camelize } from './hiHelpers';
+import * as hiIcon from '../svg-icons';
+import { capitalizeFirstLetter } from './helpers';
+import keycode from "keycode/index";
+
+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 } = _props,
+              others = _objectWithoutProperties(_props, ['icon', 'size', 'className', 'style', 'onClick']);
+
+        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
+                }, 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
+            }, style),
+            onClick: onClick
+        }, props, others));
+    }
+}
+
+HiIconBuilder.defaultProps = {
+    size: 20
+};
+HiIconBuilder.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Permet de surcharger la classe
+     */
+    className: 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

@@ -0,0 +1,11 @@
+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/exactProp.js

@@ -0,0 +1,21 @@
+import _Object$keys from 'babel-runtime/core-js/object/keys';
+import _extends from 'babel-runtime/helpers/extends';
+
+// This module is based on https://github.com/airbnb/prop-types-exact repository.
+// However, in order to reduce the number of dependencies and to remove some extra safe checks
+// the module was forked.
+
+export const specialProperty = 'exact-prop: \u200b';
+
+export default function exactProp(propTypes, componentNameInError) {
+  return _extends({}, propTypes, {
+    // eslint-disable-next-line prefer-arrow-callback
+    [specialProperty]: props => {
+      const unknownProps = _Object$keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
+      if (unknownProps.length > 0) {
+        return new TypeError(`${componentNameInError}: unknown props found: ${unknownProps.join(', ')}. Please remove the unknown properties.`);
+      }
+      return null;
+    }
+  });
+}

package/es/utils/helpers.js

@@ -0,0 +1,65 @@
+import _Object$keys from 'babel-runtime/core-js/object/keys';
+//  weak
+
+import warning from 'warning';
+
+export function capitalizeFirstLetter(string) {
+    process.env.NODE_ENV !== "production" ? warning(typeof string === 'string', 'Material-UI: capitalizeFirstLetter(string) expects a string argument.') : void 0;
+
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function capitalize(string) {
+    if (process.env.NODE_ENV !== 'production' && typeof string !== 'string') {
+        throw new Error('Material-UI: capitalize(string) expects a string argument.');
+    }
+
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function contains(obj, pred) {
+    return _Object$keys(pred).every(key => {
+        return obj.hasOwnProperty(key) && obj[key] === pred[key];
+    });
+}
+
+export function findIndex(arr, pred) {
+    const predType = typeof pred;
+    for (let i = 0; i < arr.length; i += 1) {
+        if (predType === 'function' && !!pred(arr[i], i, arr) === true) {
+            return i;
+        }
+        if (predType === 'object' && contains(arr[i], pred)) {
+            return i;
+        }
+        if (['string', 'number', 'boolean'].indexOf(predType) !== -1) {
+            return arr.indexOf(pred);
+        }
+    }
+    return -1;
+}
+
+export function find(arr, pred) {
+    const index = findIndex(arr, pred);
+    return index > -1 ? arr[index] : undefined;
+}
+
+/**
+ * Safe chained function
+ *
+ * Will only create a new function if needed,
+ * otherwise will pass back existing functions or null.
+ *
+ * @param {function} functions to chain
+ * @returns {function|null}
+ */
+export function createChainedFunction(...funcs) {
+    return funcs.filter(func => func != null).reduce((acc, func) => {
+        process.env.NODE_ENV !== "production" ? warning(typeof func === 'function', 'Material-UI: invalid Argument Type, must only provide functions, undefined, or null.') : void 0;
+
+        return function chainedFunction(...args) {
+            acc.apply(this, args);
+            func.apply(this, args);
+        };
+    }, () => {});
+}