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

package/HiAlertModal/HiAlertModal.js

@@ -1,247 +1,222 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
-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');
+exports.default = exports.styles = void 0;
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _react = require('react');
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _react2 = _interopRequireDefault(_react);
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require('prop-types');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
-var _Dialog = require('material-ui/Dialog');
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
 
-var _Dialog2 = _interopRequireDefault(_Dialog);
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
 
-var _styles = require('../styles');
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
 
-var _HiButton = require('../HiButton');
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
 
-var _HiButton2 = _interopRequireDefault(_HiButton);
+var _styles = require("../styles");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiButton = _interopRequireDefault(require("../HiButton"));
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        classContent: {
-            fontSize: 14,
-            lineHeight: '24px',
-            color: '#484848'
-        },
-        classPaper: {
-            maxWidth: 300
-        },
-        classCancelButton: {
-            float: 'right'
-        },
-        classTitle: {
-            fontSize: 20,
-            fontFamily: theme.typography.fontFamily,
-            fontWeight: theme.typography.fontWeightLight,
-            lineHeight: '24px'
-        },
-        classAction: {
-            display: 'inline-block'
-        },
-        classDialogRoot: {
-            backgroundColor: 'rgba(0, 0, 0, 0.28)'
-        }
-    };
+// @inheritedComponent Dialog
+var styles = function styles(theme) {
+  return {
+    classContent: {
+      fontSize: 14,
+      lineHeight: '24px',
+      color: '#484848'
+    },
+    classPaper: {
+      maxWidth: 300
+    },
+    classCancelButton: {
+      float: 'right'
+    },
+    classTitle: {
+      fontSize: 20,
+      fontFamily: theme.typography.fontFamily,
+      fontWeight: theme.typography.fontWeightLight,
+      lineHeight: '24px'
+    },
+    classAction: {
+      display: 'inline-block'
+    },
+    classDialogRoot: {
+      backgroundColor: 'rgba(0, 0, 0, 0.28)'
+    }
+  };
 };
-
 /**
  * Pop up d'alert
  */
-// @inheritedComponent Dialog
 
-var HiAlertModal = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiAlertModal, _React$PureComponent);
 
-    function HiAlertModal(props) {
-        (0, _classCallCheck3.default)(this, HiAlertModal);
+exports.styles = styles;
+
+var HiAlertModal =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiAlertModal, _React$PureComponent);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiAlertModal.__proto__ || (0, _getPrototypeOf2.default)(HiAlertModal)).call(this, props));
+  function HiAlertModal(props) {
+    var _this;
 
-        _this.handleClickCancel = function () {
-            if (_this.props.onCancelClick) {
-                _this.props.onCancelClick();
-            }
-        };
+    (0, _classCallCheck2.default)(this, HiAlertModal);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAlertModal).call(this, props));
 
-        _this.handleClickSubmit = function () {
-            if (_this.props.onSubmitClick) {
-                _this.props.onSubmitClick();
-            }
-        };
+    _this.handleClickCancel = function () {
+      if (_this.props.onCancelClick) {
+        _this.props.onCancelClick();
+      }
+    };
 
-        _this.handleOnClose = function () {
-            if (_this.props.onClose) {
-                _this.props.onClose();
-            }
-        };
+    _this.handleClickSubmit = function () {
+      if (_this.props.onSubmitClick) {
+        _this.props.onSubmitClick();
+      }
+    };
 
-        _this.handleOnClose = _this.handleOnClose.bind(_this);
-        _this.handleClickCancel = _this.handleClickCancel.bind(_this);
-        _this.handleClickSubmit = _this.handleClickSubmit.bind(_this);
-        return _this;
-    }
+    _this.handleOnClose = function () {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+    };
 
-    // Appelé au clic du bouton d'annulation
-
-
-    // Appelé au clic du bouton de soumission
-
-
-    // Appelé si clic en dehors de la pop up
-
-
-    (0, _createClass3.default)(HiAlertModal, [{
-        key: 'render',
-
-
-        // Render
-        value: function render() {
-            var _props = this.props,
-                labelSubmitButton = _props.labelSubmitButton,
-                labelCancelButton = _props.labelCancelButton,
-                content = _props.content,
-                title = _props.title,
-                positive = _props.positive,
-                negative = _props.negative,
-                open = _props.open,
-                onCancelClick = _props.onCancelClick,
-                onSubmitClick = _props.onSubmitClick,
-                classes = _props.classes,
-                props = (0, _objectWithoutProperties3.default)(_props, ['labelSubmitButton', 'labelCancelButton', 'content', 'title', 'positive', 'negative', 'open', 'onCancelClick', 'onSubmitClick', 'classes']);
-
-            return _react2.default.createElement(
-                _Dialog2.default,
-                (0, _extends3.default)({
-                    open: open,
-                    onClose: this.handleOnClose,
-                    classes: { paper: classes.classPaper, root: classes.classDialogRoot }
-                }, props),
-                _react2.default.createElement(
-                    _Dialog.DialogTitle,
-                    { disableTypography: true, classes: { root: classes.classTitle } },
-                    title
-                ),
-                _react2.default.createElement(
-                    _Dialog.DialogContent,
-                    null,
-                    _react2.default.createElement(
-                        _Dialog.DialogContentText,
-                        { classes: { root: classes.classContent } },
-                        content
-                    )
-                ),
-                _react2.default.createElement(
-                    _Dialog.DialogActions,
-                    { classes: { root: classes.classAction } },
-                    _react2.default.createElement(
-                        _HiButton2.default,
-                        {
-                            onClick: this.handleClickSubmit,
-                            positive: positive,
-                            negative: negative
-                        },
-                        labelSubmitButton
-                    ),
-                    _react2.default.createElement(
-                        _HiButton2.default,
-                        {
-                            classes: { root: classes.classCancelButton },
-                            onClick: this.handleClickCancel
-                        },
-                        labelCancelButton
-                    )
-                )
-            );
+    _this.handleOnClose = _this.handleOnClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClickCancel = _this.handleClickCancel.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleClickSubmit = _this.handleClickSubmit.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  } // Appelé au clic du bouton d'annulation
+
+
+  (0, _createClass2.default)(HiAlertModal, [{
+    key: "render",
+    // Render
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          labelCancelButton = _this$props.labelCancelButton,
+          labelSubmitButton = _this$props.labelSubmitButton,
+          onCancelClick = _this$props.onCancelClick,
+          onSubmitClick = _this$props.onSubmitClick,
+          open = _this$props.open,
+          submitColor = _this$props.submitColor,
+          title = _this$props.title,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "content", "labelCancelButton", "labelSubmitButton", "onCancelClick", "onSubmitClick", "open", "submitColor", "title"]);
+      return _react.default.createElement(_Dialog.default, (0, _extends2.default)({
+        open: open,
+        onClose: this.handleOnClose,
+        classes: {
+          paper: classes.classPaper,
+          root: classes.classDialogRoot
         }
-    }]);
-    return HiAlertModal;
-}(_react2.default.PureComponent);
+      }, props), _react.default.createElement(_DialogTitle.default, {
+        disableTypography: true,
+        classes: {
+          root: classes.classTitle
+        }
+      }, title), _react.default.createElement(_DialogContent.default, null, _react.default.createElement(_DialogContentText.default, {
+        classes: {
+          root: classes.classContent
+        }
+      }, content)), _react.default.createElement(_DialogActions.default, {
+        classes: {
+          root: classes.classAction
+        }
+      }, _react.default.createElement(_HiButton.default, {
+        onClick: this.handleClickSubmit,
+        color: submitColor
+      }, labelSubmitButton), _react.default.createElement(_HiButton.default, {
+        classes: {
+          root: classes.classCancelButton
+        },
+        onClick: this.handleClickCancel,
+        color: "neutral"
+      }, labelCancelButton)));
+    }
+  }]);
+  return HiAlertModal;
+}(_react.default.PureComponent);
 
-HiAlertModal.defaultProps = {
-    negative: false,
-    positive: false
-};
 HiAlertModal.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Surcharge les classes du composant
-     */
-    classes: _propTypes2.default.object,
-    /**
-     * Texte contenu dans la modal
-     */
-    content: _propTypes2.default.string,
-    /**
-     * Texte sur le bouton d'annulation
-     */
-    labelCancelButton: _propTypes2.default.string,
-    /**
-     * Texte sur le bouton de soumission
-     */
-    labelSubmitButton: _propTypes2.default.string,
-    /**
-     * Colore le bouton de soumission en rouge
-     */
-    negative: _propTypes2.default.bool,
-    /**
-     * Fonction de callback appelée au clic sur le bouton d'annulation
-     */
-    onCancelClick: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée au clic en dehors de la pop up
-     */
-    onClose: _propTypes2.default.func,
-    /**
-     * Fonction de callback appelée au clic sur le bouton de soumission
-     */
-    onSubmitClick: _propTypes2.default.func,
-    /**
-     * pop up ouverte ou pas
-     */
-    open: _propTypes2.default.bool.isRequired,
-    /**
-     * Colore le bouton de soumission en vert
-     */
-    positive: _propTypes2.default.bool,
-    /**
-     * Titre de la modal
-     */
-    title: _propTypes2.default.string
+  /**
+   * Surcharge les classes du composant
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Texte contenu dans la modal
+   */
+  content: _propTypes.default.string,
+
+  /**
+   * Texte sur le bouton d'annulation
+   */
+  labelCancelButton: _propTypes.default.string,
+
+  /**
+   * Texte sur le bouton de soumission
+   */
+  labelSubmitButton: _propTypes.default.string,
+
+  /**
+   * Fonction de callback appelée au clic sur le bouton d'annulation
+   */
+  onCancelClick: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée au clic en dehors de la pop up
+   */
+  onClose: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée au clic sur le bouton de soumission
+   */
+  onSubmitClick: _propTypes.default.func,
+
+  /**
+   * pop up ouverte ou pas
+   */
+  open: _propTypes.default.bool.isRequired,
+
+  /**
+   * The color of the submit button. It supports those theme colors that make sense for this component.
+   */
+  submitColor: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
+
+  /**
+   * Titre de la modal
+   */
+  title: _propTypes.default.string
 } : {};
-exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiAlertModal'
+})(HiAlertModal);
+
+exports.default = _default;

package/HiAlertModal/index.js

@@ -1,16 +1,15 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _HiAlertModal = require('./HiAlertModal');
-
-Object.defineProperty(exports, 'default', {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_HiAlertModal).default;
+    return _HiAlertModal.default;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _HiAlertModal = _interopRequireDefault(require("./HiAlertModal"));

package/HiAppBar/HiAppBar.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../styles");
+
+var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
+
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+// @inheritedComponent AppBar
+var styles = function styles(theme) {
+  return {
+    root: {},
+    bar: {
+      backgroundColor: theme.palette.background3,
+      color: theme.palette.text.secondary
+    },
+    flexDiv: {
+      flexGrow: 1
+    },
+    focused: {
+      backgroundColor: theme.palette.background2
+    },
+    iconButton: {},
+    collapseOverflow: {
+      overflow: 'inherit'
+    },
+    collapseButton: {
+      position: 'absolute',
+      right: 56,
+      marginTop: 8
+    }
+  };
+};
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiIcon.default, {
+  icon: "keyboard_arrow_up"
+});
+
+var _ref2 = _react.default.createElement(_HiIcon.default, {
+  icon: "keyboard_arrow_down"
+});
+
+var HiAppBar =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiAppBar, _React$Component);
+
+  function HiAppBar(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiAppBar);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiAppBar).call(this, props));
+    _this.state = {
+      collapsed: false
+    };
+    _this.handleCollapse = _this.handleCollapse.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiAppBar, [{
+    key: "handleCollapse",
+    value: function handleCollapse() {
+      if (this.props.onCollapse) {
+        this.props.onCollapse();
+        console.log('oncollapse');
+      } else {
+        this.setState(function (prevState) {
+          return {
+            collapsed: !prevState.collapsed
+          };
+        });
+        console.log('setState');
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          className = _this$props.className,
+          _this$props$collapsed = _this$props.collapsed,
+          collapsed = _this$props$collapsed === void 0 ? this.state.collapsed : _this$props$collapsed,
+          focused = _this$props.focused,
+          hideable = _this$props.hideable,
+          position = _this$props.position,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["children", "classes", "className", "collapsed", "focused", "hideable", "position"]);
+      return _react.default.createElement(_AppBar.default, (0, _extends2.default)({
+        className: (0, _classnames.default)(className, classes.bar, (0, _defineProperty2.default)({}, classes.focused, focused)),
+        classes: {
+          root: classes.root
+        },
+        elevation: 2,
+        position: position,
+        color: "default"
+      }, other), _react.default.createElement(_Collapse.default, {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.collapseOverflow, !hideable)),
+        in: !collapsed
+      }, _react.default.createElement("div", null, _react.default.createElement(_Toolbar.default, null, children, hideable && _react.default.createElement(_HiIconButton.default, {
+        onClick: this.handleCollapse,
+        color: "inherit",
+        className: classes.iconButton
+      }, _ref)))), hideable && collapsed && _react.default.createElement(_HiIconButton.default, {
+        onClick: this.handleCollapse,
+        color: "inherit",
+        className: classes.collapseButton
+      }, _ref2));
+    }
+  }]);
+  return HiAppBar;
+}(_react.default.Component);
+
+HiAppBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Surcharge des classes
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * Surcharge des classes
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Is collapsed
+   */
+  collapsed: _propTypes.default.bool,
+
+  /**
+   * If focused, change background color
+   */
+  focused: _propTypes.default.bool,
+
+  /**
+   * Could be hidden
+   */
+  hideable: _propTypes.default.bool,
+
+  /**
+   * Fonction de callback au click sur le bouton chevron
+   */
+  onCollapse: _propTypes.default.func,
+
+  /**
+   * Positionement de la topBar. The behavior of the different options is described
+   * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   */
+  position: _propTypes.default.oneOf(['fixed', 'absolute', 'sticky', 'static'])
+} : {};
+HiAppBar.defaultProps = {
+  focused: false,
+  hideable: false
+};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiAppBar'
+})(HiAppBar);
+
+exports.default = _default;

package/HiAppBar/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiAppBar.default;
+  }
+});
+
+var _HiAppBar = _interopRequireDefault(require("./HiAppBar"));