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

package/HiBreadcrumb/HiStep.js

@@ -1,123 +1,180 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-exports.styles = undefined;
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _react = _interopRequireDefault(require("react"));
 
-var _extends3 = _interopRequireDefault(_extends2);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+var _styles = require("../styles");
 
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = require('react');
+var _HiStepConnector = _interopRequireDefault(require("./HiStepConnector"));
 
-var _react2 = _interopRequireDefault(_react);
+var _HiStepContent = _interopRequireDefault(require("./HiStepContent"));
 
-var _propTypes = require('prop-types');
+var styles = function styles() {
+  return {
+    lastStep: {
+      marginBottom: 40
+    }
+  };
+};
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+exports.styles = styles;
 
-var _classnames = require('classnames');
+var HiStep =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStep, _React$PureComponent);
 
-var _classnames2 = _interopRequireDefault(_classnames);
+  function HiStep() {
+    var _getPrototypeOf2;
 
-var _styles = require('../styles');
+    var _this;
 
-var _HiStepConnector = require('./HiStepConnector');
+    (0, _classCallCheck2.default)(this, HiStep);
 
-var _HiStepConnector2 = _interopRequireDefault(_HiStepConnector);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiStep)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {},
-        horizontal: {
-            paddingLeft: theme.spacing.unit,
-            paddingRight: theme.spacing.unit,
-            '&:first-child': {
-                paddingLeft: 0
-            },
-            '&:last-child': {
-                paddingRight: 0
-            }
-        },
-        vertical: {}
+    _this.focus = function () {
+      return _this.ref.focus;
     };
-};
 
-function HiStep(props) {
-    var active = props.active,
-        children = props.children,
-        classes = props.classes,
-        classNameProp = props.className,
-        index = props.index,
-        isLast = props.isLast,
-        orientation = props.orientation,
-        validConnector = props.validConnector,
-        other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'classes', 'className', 'index', 'isLast', 'orientation', 'validConnector']);
-
-
-    var className = (0, _classnames2.default)(classes.root, classes[orientation], classNameProp);
-
-    return _react2.default.createElement(
-        'div',
-        (0, _extends3.default)({ className: className }, other),
-        _react2.default.Children.map(children, function (child) {
-            return _react2.default.cloneElement(child, (0, _extends3.default)({
-                active: active,
-                icon: index + 1,
-                orientation: orientation
-            }, child.props));
-        }),
-        !isLast && _react2.default.createElement(_HiStepConnector2.default, { orientation: 'vertical', validConnector: validConnector })
-    );
-}
+    _this.handleRef = function (component) {
+      _this.ref = component;
+    };
 
-HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Sets the step as active. Is passed to child components.
-     */
-    active: _propTypes2.default.bool,
-    /**
-     * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
-     */
-    children: _propTypes2.default.node,
-    /**
-     * @ignore
-     */
-    classes: _propTypes2.default.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string,
-    /**
-     * @ignore
-     * Used internally for numbering.
-     */
-    index: _propTypes2.default.number,
-    /**
-     * @ignore
-     * Used to know which step is the last, to not put a HiStepConnector
-     */
-    isLast: _propTypes2.default.bool,
-    /**
-     * @ignore
-     */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']),
-    /**
-     * @ignore
-     */
-    validConnector: _propTypes2.default.bool
-} : {};
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiStep, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          index = _this$props.index,
+          isLast = _this$props.isLast,
+          onClick = _this$props.onClick,
+          steps = _this$props.steps,
+          type = _this$props.type,
+          validConnector = _this$props.validConnector;
+      return _react.default.createElement("div", {
+        role: "button",
+        tabIndex: index,
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.lastStep, isLast && type !== 'back')),
+        onClick: onClick,
+        onKeyDown: onClick
+      }, _react.default.Children.map(children, function (child) {
+        return _react.default.cloneElement(child, (0, _extends2.default)({
+          active: active
+        }, child.props));
+      }), !isLast && _react.default.createElement(_HiStepConnector.default, {
+        validConnector: validConnector,
+        type: type,
+        steps: steps,
+        active: active,
+        content: content
+      }), content && active && isLast && type === 'front-light' && _react.default.createElement(_HiStepContent.default, {
+        content: content,
+        isLast: true
+      }));
+    }
+  }]);
+  return HiStep;
+}(_react.default.PureComponent);
 
 HiStep.defaultProps = {
-    active: false,
-    validConnector: false
+  active: false,
+  content: _react.default.createElement("span", null),
+  isLast: false,
+  steps: [],
+  type: 'back',
+  validConnector: false
 };
+HiStep.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Sets the step as active. Is passed to child components.
+   */
+  active: _propTypes.default.bool,
+
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Surcharge des classes
+   */
+  classes: _propTypes.default.object,
+
+  /**
+   * The content to be displayed in the case of front-light breadcrumb
+   */
+  content: _propTypes.default.node,
+
+  /**
+   * Index de l'étape
+   */
+  index: _propTypes.default.number.isRequired,
+
+  /**
+   * @ignore
+   * Used to know which step is the last, to not put a HiStepConnector
+   */
+  isLast: _propTypes.default.bool,
+
+  /**
+   * Callback on step container click
+   */
+  onClick: _propTypes.default.func,
+
+  /**
+   * The collection of steps of the breadcrumb.
+   */
+  steps: _propTypes.default.array,
+
+  /**
+   * @ignore
+   */
+  type: _propTypes.default.oneOf(['back', 'front-light', 'front-dark']),
+
+  /**
+   * @ignore
+   */
+  validConnector: _propTypes.default.bool
+} : {};
+
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'MuiHiStep'
+})(HiStep);
 
-exports.default = (0, _styles.withStyles)(styles, { name: 'MuiStep' })(HiStep);
+exports.default = _default;

package/HiBreadcrumb/HiStepConnector.js

@@ -1,142 +1,203 @@
-'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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
-var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+exports.default = exports.styles = void 0;
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _inherits2 = require('babel-runtime/helpers/inherits');
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _react = _interopRequireDefault(require("react"));
 
-var _react = require('react');
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react2 = _interopRequireDefault(_react);
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _propTypes = require('prop-types');
+var _styles = require("../styles");
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _HiStepContent = _interopRequireDefault(require("./HiStepContent"));
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _styles = require('../styles');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var styles = exports.styles = function styles(theme) {
-    return {
-        root: {
-            flex: '1 1 auto'
-        },
-        vertical: {
-            marginLeft: 13, // half icon
-            padding: '0 0 ' + theme.spacing.unit + 'px'
-        },
-        line: {
-            display: 'block',
-            borderColor: theme.palette.grey[600]
-        },
-        lineHorizontal: {
-            borderTopStyle: 'solid',
-            borderTopWidth: 1
-        },
-        lineVertical: {
-            borderLeftStyle: 'solid',
-            borderLeftWidth: 2,
-            minHeight: theme.spacing.unit * 3,
-            height: 37
-        },
-        lineVerticalGreen: {
-            borderColor: theme.palette.status[116]
-        }
-    };
+var styles = function styles(theme) {
+  return {
+    root: {
+      display: 'flex',
+      flex: '1 1 auto',
+      marginLeft: 13,
+      // half icon
+      padding: "0 0 ".concat(theme.spacing.unit, "px")
+    },
+    line: {
+      display: 'block',
+      borderColor: theme.palette.grey[600],
+      borderLeftStyle: 'solid',
+      borderLeftWidth: 2,
+      minHeight: theme.spacing.unit * 3,
+      height: 40
+    },
+    greenLine: {
+      borderColor: theme.palette.positive.main
+    },
+    lightLine: {
+      borderColor: '#FFFFFF'
+    }
+  };
 };
-
 /**
  * @ignore - internal component.
  */
 
-var HiStepConnector = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiStepConnector, _React$PureComponent);
-
-    function HiStepConnector() {
-        (0, _classCallCheck3.default)(this, HiStepConnector);
-        return (0, _possibleConstructorReturn3.default)(this, (HiStepConnector.__proto__ || (0, _getPrototypeOf2.default)(HiStepConnector)).apply(this, arguments));
-    }
-
-    (0, _createClass3.default)(HiStepConnector, [{
-        key: 'render',
-        value: function render() {
-            var _classNames;
 
-            var _props = this.props,
-                classNameProp = _props.className,
-                classes = _props.classes,
-                orientation = _props.orientation,
-                validConnector = _props.validConnector,
-                other = (0, _objectWithoutProperties3.default)(_props, ['className', 'classes', 'orientation', 'validConnector']);
+exports.styles = styles;
 
+var HiStepConnector =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiStepConnector, _React$PureComponent);
 
-            var className = (0, _classnames2.default)(classes.root, classes[orientation], classNameProp);
-            var lineClassName = (0, _classnames2.default)(classes.line, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.lineHorizontal, orientation === 'horizontal'), (0, _defineProperty3.default)(_classNames, classes.lineVertical, orientation === 'vertical'), (0, _defineProperty3.default)(_classNames, classes.lineVerticalGreen, orientation === 'vertical' && validConnector), _classNames));
+  function HiStepConnector(props) {
+    var _this;
 
-            return _react2.default.createElement(
-                'div',
-                (0, _extends3.default)({ className: className }, other),
-                _react2.default.createElement('span', { className: lineClassName })
-            );
+    (0, _classCallCheck2.default)(this, HiStepConnector);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiStepConnector).call(this, props));
+    _this.state = {
+      height: 800
+    };
+    _this.updateWindowDimensions = _this.updateWindowDimensions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiStepConnector, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.updateWindowDimensions();
+      window.addEventListener('resize', this.updateWindowDimensions);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.updateWindowDimensions);
+    }
+  }, {
+    key: "updateWindowDimensions",
+    value: function updateWindowDimensions() {
+      this.setState({
+        height: window.innerHeight
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props = this.props,
+          active = _this$props.active,
+          classNameProp = _this$props.className,
+          classes = _this$props.classes,
+          content = _this$props.content,
+          steps = _this$props.steps,
+          type = _this$props.type,
+          validConnector = _this$props.validConnector,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["active", "className", "classes", "content", "steps", "type", "validConnector"]);
+      var height = this.state.height;
+      var className = (0, _classnames.default)(classes.root, classNameProp);
+      var lineClassName = (0, _classnames.default)(classes.line, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.greenLine, validConnector), (0, _defineProperty2.default)(_classNames, classes.lightLine, type === 'front-light'), _classNames));
+      var lineHeight = 40;
+
+      if (type !== 'back') {
+        // Pour un breadcrumb Front, la tige du connector de la step active doit s'allonger en fonction de la hauteur de la page et du nombre de steps
+        lineHeight = height - 226 - 58 * (steps.length - 1);
+
+        if (lineHeight < 202) {
+          lineHeight = 202;
         }
-    }]);
-    return HiStepConnector;
-}(_react2.default.PureComponent);
+      }
+
+      var heightStyle = {};
+
+      if (active) {
+        heightStyle = {
+          height: lineHeight
+        };
+      }
+
+      return _react.default.createElement("div", (0, _extends2.default)({
+        className: className
+      }, other), _react.default.createElement("span", {
+        className: lineClassName,
+        style: heightStyle
+      }), type === 'front-light' && active && content && _react.default.createElement(_HiStepContent.default, {
+        content: content
+      }));
+    }
+  }]);
+  return HiStepConnector;
+}(_react.default.PureComponent);
 
+HiStepConnector.defaultProps = {
+  active: false,
+  content: _react.default.createElement("span", null),
+  steps: [],
+  type: 'back',
+  validConnector: false
+};
 HiStepConnector.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Useful to extend the style applied to the component.
-     */
-    classes: _propTypes2.default.object.isRequired,
-    /**
-     * @ignore
-     */
-    className: _propTypes2.default.string,
-    /**
-     * @ignore
-     */
-    orientation: _propTypes2.default.oneOf(['horizontal', 'vertical'])
+  /**
+   * Used to know if the step it is connected to is active, and if so possibly adapt its height
+   */
+  active: _propTypes.default.bool,
+
+  /**
+   * Useful to extend the style applied to the component.
+   */
+  classes: _propTypes.default.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The content to be displayed in the case of front-light breadcrumb
+   */
+  content: _propTypes.default.node,
+
+  /**
+   * The collection of steps of the breadcrumb.
+   */
+  steps: _propTypes.default.array,
+
+  /**
+   * specifies which type of breadcrumb is used
+   */
+  type: _propTypes.default.oneOf(['back', 'front-dark', 'front-light']),
+
+  /**
+   * Specifies if the connector should be displayed in green or its default color
+   */
+  validConnector: _propTypes.default.bool
 } : {};
 
-HiStepConnector.defaultProps = {
-    orientation: 'vertical'
-};
+var _default = (0, _styles.withStyles)(styles, {
+  hiComponent: true,
+  name: 'MuiHiStepConnector'
+})(HiStepConnector);
 
-exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);
+exports.default = _default;