@hipay/hipay-material-ui 1.0.0-beta.6 → 1.0.0-beta.8

package/HiAlertModal/HiAlertModal.js

@@ -0,0 +1,247 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    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');
+
+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 _Dialog = require('material-ui/Dialog');
+
+var _Dialog2 = _interopRequireDefault(_Dialog);
+
+var _styles = require('../styles');
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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)'
+        }
+    };
+};
+
+/**
+ * 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);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiAlertModal.__proto__ || (0, _getPrototypeOf2.default)(HiAlertModal)).call(this, props));
+
+        _this.handleClickCancel = function () {
+            if (_this.props.onCancelClick) {
+                _this.props.onCancelClick();
+            }
+        };
+
+        _this.handleClickSubmit = function () {
+            if (_this.props.onSubmitClick) {
+                _this.props.onSubmitClick();
+            }
+        };
+
+        _this.handleOnClose = function () {
+            if (_this.props.onClose) {
+                _this.props.onClose();
+            }
+        };
+
+        _this.handleOnClose = _this.handleOnClose.bind(_this);
+        _this.handleClickCancel = _this.handleClickCancel.bind(_this);
+        _this.handleClickSubmit = _this.handleClickSubmit.bind(_this);
+        return _this;
+    }
+
+    // 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
+                    )
+                )
+            );
+        }
+    }]);
+    return HiAlertModal;
+}(_react2.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
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiAlertModal' })(HiAlertModal);

package/HiAlertModal/index.js

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

package/HiBreadcrumb/HiBreadcrumb.js

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+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 _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styles = require('../styles');
+
+var _HiStepper = require('./HiStepper');
+
+var _HiStepper2 = _interopRequireDefault(_HiStepper);
+
+var _HiStepLabel = require('./HiStepLabel');
+
+var _HiStepLabel2 = _interopRequireDefault(_HiStepLabel);
+
+var _HiStep = require('./HiStep');
+
+var _HiStep2 = _interopRequireDefault(_HiStep);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        label: (0, _extends3.default)({
+            display: 'inline-block',
+            marginLeft: 12,
+            fontWeight: theme.typography.fontWeightRegular,
+            color: theme.palette.neutral.normal
+        }, theme.typography.body3),
+        active: {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    };
+};
+
+var HiBreadcrumb = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiBreadcrumb, _React$PureComponent);
+
+    function HiBreadcrumb() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        (0, _classCallCheck3.default)(this, HiBreadcrumb);
+
+        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 = HiBreadcrumb.__proto__ || (0, _getPrototypeOf2.default)(HiBreadcrumb)).call.apply(_ref, [this].concat(args))), _this), _this.handleStep = function (idx) {
+            return function () {
+                _this.props.handleStep(idx);
+            };
+        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    }
+
+    (0, _createClass3.default)(HiBreadcrumb, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                activeStep = _props.activeStep,
+                steps = _props.steps;
+
+
+            return _react2.default.createElement(
+                _HiStepper2.default,
+                { activeStep: activeStep },
+                _react2.default.createElement(
+                    'div',
+                    null,
+                    steps.map(function (step, index) {
+                        var validConnector = step.status === 'validated' && index < steps.length - 1 && steps[index + 1].status === 'validated';
+                        return _react2.default.createElement(
+                            _HiStep2.default,
+                            {
+                                key: step.id,
+                                onClick: _this2.handleStep(index),
+                                isLast: index === steps.length - 1,
+                                validConnector: validConnector
+                            },
+                            _react2.default.createElement(
+                                _HiStepLabel2.default,
+                                {
+                                    active: activeStep === index,
+                                    status: step.status,
+                                    notificationNumber: step.notificationNumber
+                                },
+                                step.label
+                            )
+                        );
+                    })
+                )
+            );
+        }
+    }]);
+    return HiBreadcrumb;
+}(_react2.default.PureComponent);
+
+HiBreadcrumb.defaultProps = {
+    activeStep: 0
+};
+HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: _propTypes2.default.number,
+    steps: _propTypes2.default.array.isRequired,
+    handleStep: _propTypes2.default.func
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiBreadcrumb' })(HiBreadcrumb);

package/HiBreadcrumb/HiStep.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    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 _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 _styles = require('../styles');
+
+var _HiStepConnector = require('./HiStepConnector');
+
+var _HiStepConnector2 = _interopRequireDefault(_HiStepConnector);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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: {}
+    };
+};
+
+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 })
+    );
+}
+
+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
+} : {};
+
+HiStep.defaultProps = {
+    active: false,
+    validConnector: false
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiStep' })(HiStep);

package/HiBreadcrumb/HiStepConnector.js

@@ -0,0 +1,142 @@
+'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 _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]
+        }
+    };
+};
+
+/**
+ * @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']);
+
+
+            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));
+
+            return _react2.default.createElement(
+                'div',
+                (0, _extends3.default)({ className: className }, other),
+                _react2.default.createElement('span', { className: lineClassName })
+            );
+        }
+    }]);
+    return HiStepConnector;
+}(_react2.default.PureComponent);
+
+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'])
+} : {};
+
+HiStepConnector.defaultProps = {
+    orientation: 'vertical'
+};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'MuiHiStepConnector' })(HiStepConnector);