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

package/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,146 @@
+'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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _HiDot = require('./HiDot');
+
+var _HiDot2 = _interopRequireDefault(_HiDot);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        dotStepper: {
+            width: '100%',
+            maxWidth: 200,
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'nowrap',
+            justifyContent: 'center',
+            alignItems: 'center'
+        }
+    };
+};
+
+var HiDotsStepper = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiDotsStepper, _React$PureComponent);
+
+    function HiDotsStepper() {
+        (0, _classCallCheck3.default)(this, HiDotsStepper);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiDotsStepper.__proto__ || (0, _getPrototypeOf2.default)(HiDotsStepper)).call(this));
+
+        _this.handleClick = function (activeStep) {
+            return function () {
+                _this.props.onChange(activeStep);
+            };
+        };
+
+        _this.handleNavigation = function (activeStep) {
+            return function (e) {
+                var nextStep = activeStep;
+                var steps = _this.props.steps;
+
+
+                if (e.key === 'ArrowLeft') nextStep -= 1;
+                if (e.key === 'ArrowRight') nextStep += 1;
+
+                nextStep = (nextStep + steps.length) % steps.length;
+
+                // Permet la navigation d'un Dot au suivant / précédent
+                document.querySelector('div[tabIndex="' + nextStep + '"]').focus();
+
+                _this.props.onChange(nextStep);
+            };
+        };
+
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleNavigation = _this.handleNavigation.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiDotsStepper, [{
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                activeStep = _props.activeStep,
+                steps = _props.steps;
+
+
+            var listDots = steps.map(function (step, idx) {
+                var id = step.id,
+                    status = step.status;
+
+                return _react2.default.createElement(
+                    'div',
+                    {
+                        key: id,
+                        tabIndex: id,
+                        className: classes.dotContainer,
+                        role: 'navigation',
+                        onKeyDown: _this2.handleNavigation(idx)
+                    },
+                    _react2.default.createElement(_HiDot2.default, {
+                        status: status,
+                        active: idx === activeStep,
+                        onClick: _this2.handleClick(idx)
+                    })
+                );
+            });
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.dotStepper },
+                listDots
+            );
+        }
+    }]);
+    return HiDotsStepper;
+}(_react2.default.PureComponent);
+
+HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: _propTypes2.default.number.isRequired,
+    classes: _propTypes2.default.object,
+    className: _propTypes2.default.string,
+    onChange: _propTypes2.default.func,
+    steps: _propTypes2.default.array.isRequired
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiHiDotsStepper' })(HiDotsStepper);

package/HiDotsStepper/index.js

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

package/HiExpansionPanel/HiExpansionPanel.js

@@ -0,0 +1,231 @@
+'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 _ExpansionPanel = require('material-ui/ExpansionPanel');
+
+var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
+
+var _Typography = require('material-ui/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _MenuDown = require('mdi-material-ui/MenuDown');
+
+var _MenuDown2 = _interopRequireDefault(_MenuDown);
+
+var _styles = require('../styles');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent ExpansionPanel
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        heading: {
+            fontSize: 20,
+            lineHeight: '24px',
+            fontWeight: theme.typography.fontWeightLight
+        },
+        secondaryHeading: {
+            fontSize: 11,
+            color: '#737373',
+            textAlign: 'right',
+            lineHeight: '24px',
+            fontWeight: theme.typography.fontWeightRegular,
+            verticalAlign: 'middle',
+            '&>svg': {
+                fontSize: 18,
+                marginLeft: 3,
+                marginBottom: -5
+            }
+        },
+        column: {
+            flexBasis: '100%'
+        },
+        panelSummary: {
+            '&>div:first-child': {
+                margin: '12px 0',
+                '&>div:last-child': {
+                    paddingRight: 8
+                }
+            },
+            '&>div:last-child': {
+                width: 16,
+                height: 16
+            }
+        },
+        panelSummaryExpanded: {
+            borderBottom: '1px solid #E3E6E7',
+            minHeight: 0
+        },
+        expandMoreIcon: {
+            margin: 0,
+            fontSize: 18,
+            width: 20
+        },
+        panel: {
+            boxShadow: 'none',
+            border: 'none'
+        },
+        panelDetails: {
+            padding: '8px 24px 8px'
+        },
+        disabledPanel: {
+            backgroundColor: '#ffffff',
+            opacity: 1
+        },
+        expandIconExpanded: {
+            transform: 'translateY(-50%) rotate(-90deg)'
+        }
+    };
+};
+
+var HiExpansionPanel = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiExpansionPanel, _React$PureComponent);
+
+    function HiExpansionPanel() {
+        (0, _classCallCheck3.default)(this, HiExpansionPanel);
+        return (0, _possibleConstructorReturn3.default)(this, (HiExpansionPanel.__proto__ || (0, _getPrototypeOf2.default)(HiExpansionPanel)).apply(this, arguments));
+    }
+
+    (0, _createClass3.default)(HiExpansionPanel, [{
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                disabled = _props.disabled,
+                heading = _props.heading,
+                secondaryHeading = _props.secondaryHeading,
+                secondaryHeadingDisabled = _props.secondaryHeadingDisabled,
+                secondaryHeadingIcon = _props.secondaryHeadingIcon,
+                children = _props.children,
+                classes = _props.classes,
+                props = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
+
+
+            var effectiveDisabled = disabled || !children;
+
+            return _react2.default.createElement(
+                _ExpansionPanel2.default,
+                (0, _extends3.default)({
+                    disabled: effectiveDisabled,
+                    classes: { root: classes.panel, disabled: classes.disabledPanel }
+                }, props),
+                _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelSummary,
+                    {
+                        classes: {
+                            root: classes.panelSummary,
+                            disabled: classes.disabledPanel,
+                            expanded: classes.panelSummaryExpanded,
+                            expandIconExpanded: classes.expandIconExpanded
+                        },
+                        expandIcon: _react2.default.createElement(_MenuDown2.default, { classes: { root: classes.expandMoreIcon } })
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.column },
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { classes: { root: classes.heading } },
+                            heading
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.column },
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { classes: { root: classes.secondaryHeading } },
+                            !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
+                            secondaryHeadingIcon
+                        )
+                    )
+                ),
+                !!children && _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelDetails,
+                    { classes: { root: classes.panelDetails } },
+                    children
+                )
+            );
+        }
+    }]);
+    return HiExpansionPanel;
+}(_react2.default.PureComponent);
+
+HiExpansionPanel.defaultProps = {
+    disabled: false,
+    secondaryHeading: '',
+    secondaryHeadingIcon: '',
+    secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+};
+HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du panel
+     */
+    children: _propTypes2.default.any,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Désactivé
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Titre principal du panel
+     */
+    heading: _propTypes2.default.string.isRequired,
+    /**
+     * Titre secondaire du panel
+     */
+    secondaryHeading: _propTypes2.default.string,
+    /**
+     * Titre secondaire si désactivé
+     */
+    secondaryHeadingDisabled: _propTypes2.default.string,
+    /**
+     * Icone dans le titre secondaire du panel
+     */
+    secondaryHeadingIcon: _propTypes2.default.any
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);

package/HiExpansionPanel/index.js

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

package/HiForm/HiAddressField.js

@@ -0,0 +1,204 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+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 _HiSuggestSelectField = require('../HiSelect/HiSuggestSelectField');
+
+var _HiSuggestSelectField2 = _interopRequireDefault(_HiSuggestSelectField);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Champs input adresse pour formulaire
+ */
+var HiAddressField = function (_React$Component) {
+    (0, _inherits3.default)(HiAddressField, _React$Component);
+
+    function HiAddressField(props) {
+        (0, _classCallCheck3.default)(this, HiAddressField);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiAddressField.__proto__ || (0, _getPrototypeOf2.default)(HiAddressField)).call(this, props));
+
+        _this.autocompleteService = null;
+
+        _this.displaySuggestions = function (predictions, status) {
+            if (status !== 'OK') {
+                // Si l'API renvoie un statut différent de 'OK'
+                // (par exemple ZERO_RESULTS), pas de prédictions
+            } else {
+                // Sinon je mets à jour les options du champ avec les prédictions de GMaps
+                var options = [];
+                var isExact = false;
+                predictions.forEach(function (prediction) {
+                    // Si le texte saisi est identique à une des propositions de GMaps,
+                    // on estime que la valeur de l'adresse est exacte,
+                    // même sans clic sur une proposition
+                    isExact = prediction.description === _this.value ? true : isExact;
+                    options.push({
+                        id: prediction.id,
+                        label: prediction.description,
+                        labelHighlight: prediction.description.replace(new RegExp(_this.value, 'gi'), '<strong>$&</strong>'),
+                        icon: prediction.types.indexOf('establishment') >= 0 ? 'domain' : 'map_marker',
+                        type: 'icon'
+                    });
+                }, _this);
+                _this.setState({ options: options, isExact: isExact });
+            }
+        };
+
+        _this.state = {
+            options: [],
+            isExact: false
+        };
+
+        _this.handleSearch = _this.handleSearch.bind(_this);
+        _this.handleSelect = _this.handleSelect.bind(_this);
+        _this.handleReset = _this.handleReset.bind(_this);
+        _this.displaySuggestions = _this.displaySuggestions.bind(_this);
+        return _this;
+    }
+
+    /**
+     * Au chargement du composant, je définis mon service autocomplete GMaps
+     */
+
+
+    (0, _createClass3.default)(HiAddressField, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.autocompleteService = new google.maps.places.AutocompleteService();
+        }
+    }, {
+        key: 'handleReset',
+        value: function handleReset() {
+            this.props.onReset();
+            this.setState({
+                options: [],
+                isExact: false
+            });
+        }
+    }, {
+        key: 'handleSearch',
+        value: function handleSearch(event) {
+            // Je vérifie que le champ n'est pas vide car l'API lève une exception en cas d'input vide
+            if (event.target.value) {
+                // Liste des types à rechercher. Voir https://developers.google.com/places/web-service/autocomplete?hl=fr#place_types (ex : ['establishement', 'address']
+                var types = [];
+                // Liste des codes ISO Alpha-2 des pays où il faut rechercher (ex : ['fr', 'us'])
+                var countries = [];
+                // À chaque changement, la méthode getPlacesPredictions appelle la méthode
+                // displaySuggestions en lui fournissant un tableau de 5 prédictions
+                this.value = event.target.value;
+                if (this.autocompleteService) {
+                    this.autocompleteService.getPlacePredictions({
+                        input: event.target.value,
+                        types: types,
+                        componentRestrictions: { country: countries }
+                    }, this.displaySuggestions);
+                } else {
+                    // Dans le cas où le service ne peut pas se charger (mode test par exemple).
+                    this.displaySuggestions([], 'EMPTY_RESULT');
+                }
+            }
+            this.props.onSearch(event);
+            // Mise à jour du texte dans l'input
+            this.setState((0, _extends3.default)({}, !event.target.value && {
+                options: []
+            }));
+        }
+    }, {
+        key: 'handleSelect',
+        value: function handleSelect(event, value) {
+            // Mise à jour de la valeur du champ + la valeur de l'adresse est exacte
+            this.setState({ options: [], isExact: true });
+            this.props.onSelect(event, value.label);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                exactOnly = _props.exactOnly,
+                onSearch = _props.onSearch,
+                onReset = _props.onReset,
+                onSelect = _props.onSelect,
+                otherProps = (0, _objectWithoutProperties3.default)(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
+            var _state = this.state,
+                options = _state.options,
+                isExact = _state.isExact;
+
+            // On met le champ en erreur si une adresse exacte est éxigée
+            // et si l'adresse courante n'est pas complète
+
+            var showError = exactOnly && !isExact;
+
+            return _react2.default.createElement(_HiSuggestSelectField2.default, (0, _extends3.default)({
+                options: options,
+                onSearch: this.handleSearch,
+                onReset: this.handleReset,
+                onSelect: this.handleSelect,
+                isExact: isExact,
+                error: showError
+            }, otherProps));
+        }
+    }]);
+    return HiAddressField;
+}(_react2.default.Component); // @inheritedComponent HiSuggestSelectField
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+     */
+    exactOnly: _propTypes2.default.bool,
+    /**
+     *  Callback function called to empty the field.
+     */
+    onReset: _propTypes2.default.func,
+    /**
+     *  Callback function called when we write in the input.
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     *  Callback function called when a suggestion is selected.
+     */
+    onSelect: _propTypes2.default.func
+} : {};
+
+exports.default = HiAddressField;