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

package/Checkbox/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Checkbox = require('./Checkbox');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Checkbox).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/Chip/Chip.js

@@ -0,0 +1,322 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _keycode = require('keycode');
+
+var _keycode2 = _interopRequireDefault(_keycode);
+
+var _Cancel = require('../internal/svg-icons/Cancel');
+
+var _Cancel2 = _interopRequireDefault(_Cancel);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _colorManipulator = require('../styles/colorManipulator');
+
+require('../Avatar/Avatar');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// So we don't have any override priority issue.
+
+var styles = exports.styles = function styles(theme) {
+  var height = 32;
+  var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];
+  var deleteIconColor = (0, _colorManipulator.fade)(theme.palette.text.primary, 0.26);
+
+  return {
+    root: {
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.pxToRem(13),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: height,
+      color: theme.palette.getContrastText(backgroundColor),
+      backgroundColor: backgroundColor,
+      borderRadius: height / 2,
+      whiteSpace: 'nowrap',
+      transition: theme.transitions.create(),
+      // label will inherit this from root, then `clickable` class overrides this for both
+      cursor: 'default',
+      outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      border: 'none', // Remove `button` border
+      padding: 0 // Remove `button` padding
+    },
+    clickable: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      cursor: 'pointer',
+      '&:hover, &:focus': {
+        backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
+      },
+      '&:active': {
+        boxShadow: theme.shadows[1],
+        backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.12)
+      }
+    },
+    deletable: {
+      '&:focus': {
+        backgroundColor: (0, _colorManipulator.emphasize)(backgroundColor, 0.08)
+      }
+    },
+    avatar: {
+      marginRight: -4,
+      width: height,
+      height: height,
+      color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      fontSize: theme.typography.pxToRem(16)
+    },
+    avatarChildren: {
+      width: 19,
+      height: 19
+    },
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      paddingLeft: 12,
+      paddingRight: 12,
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      cursor: 'inherit'
+    },
+    deleteIcon: {
+      // Remove grey highlight
+      WebkitTapHighlightColor: 'transparent',
+      color: deleteIconColor,
+      cursor: 'pointer',
+      height: 'auto',
+      margin: '0 4px 0 -8px',
+      '&:hover': {
+        color: (0, _colorManipulator.fade)(deleteIconColor, 0.4)
+      }
+    }
+  };
+};
+
+/**
+ * Chips represent complex entities in small blocks, such as a contact.
+ */
+
+var Chip = function (_React$Component) {
+  (0, _inherits3.default)(Chip, _React$Component);
+
+  function Chip() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, Chip);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Chip.__proto__ || (0, _getPrototypeOf2.default)(Chip)).call.apply(_ref, [this].concat(args))), _this), _this.chipRef = null, _this.handleDeleteIconClick = function (event) {
+      // Stop the event from bubbling up to the `Chip`
+      event.stopPropagation();
+      var onDelete = _this.props.onDelete;
+
+      if (onDelete) {
+        onDelete(event);
+      }
+    }, _this.handleKeyDown = function (event) {
+      // Ignore events from children of `Chip`.
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          onDelete = _this$props.onDelete,
+          onKeyDown = _this$props.onKeyDown;
+
+      var key = (0, _keycode2.default)(event);
+
+      if (onClick && (key === 'space' || key === 'enter')) {
+        event.preventDefault();
+        onClick(event);
+      } else if (onDelete && key === 'backspace') {
+        event.preventDefault();
+        onDelete(event);
+      } else if (key === 'esc') {
+        event.preventDefault();
+        if (_this.chipRef) {
+          _this.chipRef.blur();
+        }
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(Chip, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          avatarProp = _props.avatar,
+          classes = _props.classes,
+          classNameProp = _props.className,
+          Component = _props.component,
+          deleteIconProp = _props.deleteIcon,
+          label = _props.label,
+          onClick = _props.onClick,
+          onDelete = _props.onDelete,
+          onKeyDown = _props.onKeyDown,
+          tabIndexProp = _props.tabIndex,
+          other = (0, _objectWithoutProperties3.default)(_props, ['avatar', 'classes', 'className', 'component', 'deleteIcon', 'label', 'onClick', 'onDelete', 'onKeyDown', 'tabIndex']);
+
+
+      var className = (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes.clickable, onClick), (0, _defineProperty3.default)({}, classes.deletable, onDelete), classNameProp);
+
+      var deleteIcon = null;
+      if (onDelete) {
+        deleteIcon = deleteIconProp && _react2.default.isValidElement(deleteIconProp) ? _react2.default.cloneElement(deleteIconProp, {
+          className: (0, _classnames2.default)(deleteIconProp.props.className, classes.deleteIcon),
+          onClick: this.handleDeleteIconClick
+        }) : _react2.default.createElement(_Cancel2.default, { className: classes.deleteIcon, onClick: this.handleDeleteIconClick });
+      }
+
+      var avatar = null;
+      if (avatarProp && _react2.default.isValidElement(avatarProp)) {
+        avatar = _react2.default.cloneElement(avatarProp, {
+          className: (0, _classnames2.default)(classes.avatar, avatarProp.props.className),
+          childrenClassName: (0, _classnames2.default)(classes.avatarChildren, avatarProp.props.childrenClassName)
+        });
+      }
+
+      var tabIndex = tabIndexProp;
+
+      if (!tabIndex) {
+        tabIndex = onClick || onDelete ? 0 : -1;
+      }
+
+      return _react2.default.createElement(
+        Component,
+        (0, _extends3.default)({
+          role: 'button',
+          className: className,
+          tabIndex: tabIndex,
+          onClick: onClick,
+          onKeyDown: this.handleKeyDown,
+          ref: function ref(node) {
+            _this2.chipRef = node;
+          }
+        }, other),
+        avatar,
+        _react2.default.createElement(
+          'span',
+          { className: classes.label },
+          label
+        ),
+        deleteIcon
+      );
+    }
+  }]);
+  return Chip;
+}(_react2.default.Component);
+
+Chip.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Avatar element.
+   */
+  avatar: _propTypes2.default.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: _propTypes2.default.element,
+  /**
+   * The content of the label.
+   */
+  label: _propTypes2.default.node,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes2.default.func,
+  /**
+   * Callback function fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: _propTypes2.default.func,
+  /**
+   * @ignore
+   */
+  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
+} : {};
+
+Chip.defaultProps = {
+  component: 'div'
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiChip' })(Chip);

package/Chip/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Chip = require('./Chip');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Chip).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/Dialog/Dialog.js

@@ -0,0 +1,271 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = undefined;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _helpers = require('../utils/helpers');
+
+var _Modal = require('../Modal');
+
+var _Modal2 = _interopRequireDefault(_Modal);
+
+var _Fade = require('../transitions/Fade');
+
+var _Fade2 = _interopRequireDefault(_Fade);
+
+var _transitions = require('../styles/transitions');
+
+var _Paper = require('../Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+  return {
+    root: {
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    paper: {
+      display: 'flex',
+      margin: theme.spacing.unit * 4,
+      flexDirection: 'column',
+      flex: '0 1 auto',
+      position: 'relative',
+      maxHeight: '90vh',
+      overflowY: 'auto', // Fix IE11 issue, to remove at some point.
+      '&:focus': {
+        outline: 'none'
+      }
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360)
+    },
+    paperWidthSm: {
+      maxWidth: theme.breakpoints.values.sm
+    },
+    paperWidthMd: {
+      maxWidth: theme.breakpoints.values.md
+    },
+    paperFullWidth: {
+      width: '100%'
+    },
+    paperFullScreen: {
+      margin: 0,
+      width: '100%',
+      maxWidth: '100%',
+      height: '100%',
+      maxHeight: '100%',
+      borderRadius: 0
+    }
+  };
+};
+
+/**
+ * Dialogs are overlaid modal paper based components with a backdrop.
+ */
+// @inheritedComponent Modal
+
+function Dialog(props) {
+  var _classNames;
+
+  var children = props.children,
+      classes = props.classes,
+      className = props.className,
+      fullScreen = props.fullScreen,
+      fullWidth = props.fullWidth,
+      disableBackdropClick = props.disableBackdropClick,
+      disableEscapeKeyDown = props.disableEscapeKeyDown,
+      maxWidth = props.maxWidth,
+      onBackdropClick = props.onBackdropClick,
+      onClose = props.onClose,
+      onEnter = props.onEnter,
+      onEntered = props.onEntered,
+      onEntering = props.onEntering,
+      onEscapeKeyDown = props.onEscapeKeyDown,
+      onExit = props.onExit,
+      onExited = props.onExited,
+      onExiting = props.onExiting,
+      open = props.open,
+      PaperProps = props.PaperProps,
+      TransitionProp = props.transition,
+      transitionDuration = props.transitionDuration,
+      other = (0, _objectWithoutProperties3.default)(props, ['children', 'classes', 'className', 'fullScreen', 'fullWidth', 'disableBackdropClick', 'disableEscapeKeyDown', 'maxWidth', 'onBackdropClick', 'onClose', 'onEnter', 'onEntered', 'onEntering', 'onEscapeKeyDown', 'onExit', 'onExited', 'onExiting', 'open', 'PaperProps', 'transition', 'transitionDuration']);
+
+
+  return _react2.default.createElement(
+    _Modal2.default,
+    (0, _extends3.default)({
+      className: (0, _classnames2.default)(classes.root, className),
+      BackdropProps: {
+        transitionDuration: transitionDuration
+      },
+      disableBackdropClick: disableBackdropClick,
+      disableEscapeKeyDown: disableEscapeKeyDown,
+      onBackdropClick: onBackdropClick,
+      onEscapeKeyDown: onEscapeKeyDown,
+      onClose: onClose,
+      open: open,
+      role: 'dialog'
+    }, other),
+    _react2.default.createElement(
+      TransitionProp,
+      {
+        appear: true,
+        'in': open,
+        timeout: transitionDuration,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: onExited
+      },
+      _react2.default.createElement(
+        _Paper2.default,
+        (0, _extends3.default)({
+          elevation: 24,
+          className: (0, _classnames2.default)(classes.paper, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['paperWidth' + (maxWidth ? (0, _helpers.capitalize)(maxWidth) : '')], maxWidth), (0, _defineProperty3.default)(_classNames, classes.paperFullScreen, fullScreen), (0, _defineProperty3.default)(_classNames, classes.paperFullWidth, fullWidth), _classNames))
+        }, PaperProps),
+        children
+      )
+    )
+  );
+}
+
+Dialog.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children: _propTypes2.default.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * If `true`, clicking the backdrop will not fire the `onClose` callback.
+   */
+  disableBackdropClick: _propTypes2.default.bool,
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   */
+  disableEscapeKeyDown: _propTypes2.default.bool,
+  /**
+   * If `true`, the dialog will be full-screen
+   */
+  fullScreen: _propTypes2.default.bool,
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   */
+  fullWidth: _propTypes2.default.bool,
+  /**
+   * Determine the max width of the dialog.
+   * The dialog width grows with the size of the screen, this property is useful
+   * on the desktop where you might need some coherent different width size across your
+   * application. Set to `false` to disable `maxWidth`.
+   */
+  maxWidth: _propTypes2.default.oneOf(['xs', 'sm', 'md', false]),
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick: _propTypes2.default.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onClose: _propTypes2.default.func,
+  /**
+   * Callback fired before the dialog enters.
+   */
+  onEnter: _propTypes2.default.func,
+  /**
+   * Callback fired when the dialog has entered.
+   */
+  onEntered: _propTypes2.default.func,
+  /**
+   * Callback fired when the dialog is entering.
+   */
+  onEntering: _propTypes2.default.func,
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableKeyboard` is false and the modal is in focus.
+   */
+  onEscapeKeyDown: _propTypes2.default.func,
+  /**
+   * Callback fired before the dialog exits.
+   */
+  onExit: _propTypes2.default.func,
+  /**
+   * Callback fired when the dialog has exited.
+   */
+  onExited: _propTypes2.default.func,
+  /**
+   * Callback fired when the dialog is exiting.
+   */
+  onExiting: _propTypes2.default.func,
+  /**
+   * If `true`, the Dialog is open.
+   */
+  open: _propTypes2.default.bool.isRequired,
+  /**
+   * Properties applied to the `Paper` element.
+   */
+  PaperProps: _propTypes2.default.object,
+  /**
+   * Transition component.
+   */
+  transition: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  transitionDuration: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({ enter: _propTypes2.default.number, exit: _propTypes2.default.number })])
+} : {};
+
+Dialog.defaultProps = {
+  fullScreen: false,
+  fullWidth: false,
+  disableBackdropClick: false,
+  disableEscapeKeyDown: false,
+  maxWidth: 'sm',
+  transition: _Fade2.default,
+  transitionDuration: { enter: _transitions.duration.enteringScreen, exit: _transitions.duration.leavingScreen }
+};
+
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiDialog' })(Dialog);