@hipay/hipay-material-ui 1.0.0-beta.7 → 1.0.0-beta.9

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;

package/HiForm/HiFormControl.js

@@ -149,6 +149,21 @@ var HiFormControl = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiFormControl.__proto__ || (0, _getPrototypeOf2.default)(HiFormControl)).call(this, props));
 
+        _this.handleFocus = function (value) {
+            return function () {
+                _this.setState({ focused: value });
+                if (value === false && _this.state.hovered) {
+                    _this.setState({ hovered: false });
+                }
+            };
+        };
+
+        _this.handleHover = function (value) {
+            return function () {
+                _this.setState({ hovered: value });
+            };
+        };
+
         _this.state = {
             helperOpen: false,
             focused: false,
@@ -171,24 +186,9 @@ var HiFormControl = function (_React$PureComponent) {
                 event.preventDefault();
             }
         }
-    }, {
-        key: 'handleFocus',
-        value: function handleFocus(value) {
-            this.setState({ focused: value });
-            if (value === false && this.state.hovered) {
-                this.setState({ hovered: false });
-            }
-        }
-    }, {
-        key: 'handleHover',
-        value: function handleHover(value) {
-            this.setState({ hovered: value });
-        }
     }, {
         key: 'render',
         value: function render() {
-            var _this2 = this;
-
             var _props = this.props,
                 children = _props.children,
                 classes = _props.classes,
@@ -266,18 +266,10 @@ var HiFormControl = function (_React$PureComponent) {
                 _react2.default.createElement(
                     'div',
                     {
-                        onMouseEnter: function onMouseEnter() {
-                            return _this2.handleHover(true);
-                        },
-                        onMouseLeave: function onMouseLeave() {
-                            return _this2.handleHover(false);
-                        },
-                        onFocus: function onFocus() {
-                            return _this2.handleFocus(true);
-                        },
-                        onBlur: function onBlur() {
-                            return _this2.handleFocus(false);
-                        }
+                        onMouseEnter: this.handleHover(true),
+                        onMouseLeave: this.handleHover(false),
+                        onFocus: this.handleFocus(true),
+                        onBlur: this.handleFocus(false)
                     },
                     children
                 ),

package/HiForm/HiInput.js

@@ -107,7 +107,7 @@ var styles = exports.styles = function styles(theme) {
         focused: {},
         error: {
             border: '1px solid ' + theme.palette.negative.normal,
-            paddingLeft: 0,
+            paddingLeft: 8,
             borderRadius: 2
         },
         startAdornment: {

package/HiForm/HiSearchField.js

@@ -137,7 +137,7 @@ var HiSearchField = function (_React$Component) {
             if (typeof this.props.onSearch === 'undefined') {
                 this.props.callbackFilteredList(this.props.itemList);
             } else {
-                this.props.onSearch('');
+                this.props.onSearch(undefined, '');
             }
         }
     }, {

package/HiForm/index.js

@@ -67,4 +67,13 @@ Object.defineProperty(exports, 'HiSearchField', {
   }
 });
 
+var _HiAddressField = require('./HiAddressField');
+
+Object.defineProperty(exports, 'HiAddressField', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiAddressField).default;
+  }
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/HiPdfReader/HiPdfReader.js

@@ -0,0 +1,282 @@
+'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 _reactPdf = require('react-pdf');
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+var _ChevronRight = require('mdi-material-ui/ChevronRight');
+
+var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
+
+var _ChevronLeft = require('mdi-material-ui/ChevronLeft');
+
+var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
+
+var _Progress = require('material-ui/Progress');
+
+var _styles = require('../styles');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            position: 'relative'
+        },
+        pageNumber: {
+            position: 'absolute',
+            bottom: 16,
+            left: -24,
+            backgroundColor: '#FFFFFF',
+            borderRadius: 4,
+            paddingTop: 7,
+            paddingBottom: 7,
+            paddingRight: 8,
+            paddingLeft: 8,
+            fontSize: 15,
+            fontFamily: theme.typography.fontFamily,
+            boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+            color: '#737373'
+        },
+        pagesNavigation: {
+            position: 'absolute',
+            top: 16,
+            right: -30,
+            backgroundColor: '#FFFFFF',
+            borderRadius: 3,
+            paddingTop: 4,
+            paddingBottom: 4,
+            paddingRight: 3,
+            paddingLeft: 3,
+            fontFamily: theme.typography.fontFamily,
+            boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+            color: '#737373',
+            '&>button:first-child': {
+                marginRight: 6
+            }
+        },
+        navigationButton: {
+            padding: 0,
+            minWidth: 0,
+            minHeight: 0
+        }
+    };
+};
+
+// Constantes utilisées pour le redimentionnement du PDF (format mobile par exemple)
+var maxWindowWidth = 900;
+var maxPdfWidth = 600;
+
+var _ref3 = _react2.default.createElement(_Progress.CircularProgress, null);
+
+var _ref4 = _react2.default.createElement(_ChevronLeft2.default, null);
+
+var _ref5 = _react2.default.createElement(_ChevronRight2.default, null);
+
+var HiPdfReader = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiPdfReader, _React$PureComponent);
+
+    function HiPdfReader() {
+        var _ref;
+
+        var _temp, _this, _ret;
+
+        (0, _classCallCheck3.default)(this, HiPdfReader);
+
+        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 = HiPdfReader.__proto__ || (0, _getPrototypeOf2.default)(HiPdfReader)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+            numPages: null,
+            pageNumber: 1,
+            error: false,
+            width: 600
+        }, _this.handleLoadSuccess = function (_ref2) {
+            var numPages = _ref2.numPages;
+
+            _this.setState({ numPages: numPages, error: false });
+        }, _this.handleLoadError = function () {
+            _this.setState({ error: true });
+        }, _this.handleClickNextPage = function () {
+            _this.setState({ pageNumber: _this.state.pageNumber + 1 });
+        }, _this.handleClickPreviousPage = function () {
+            _this.setState({ pageNumber: _this.state.pageNumber - 1 });
+        }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+    }
+
+    (0, _createClass3.default)(HiPdfReader, [{
+        key: 'updateDimensions',
+
+
+        // Calculate & Update state of new dimensions
+        value: function updateDimensions() {
+            if (window.innerWidth < maxWindowWidth) {
+                var updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
+                this.setState({ width: updateWidth });
+            } else {
+                this.setState({ width: maxPdfWidth });
+            }
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.updateDimensions();
+            window.addEventListener('resize', this.updateDimensions.bind(this));
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            window.removeEventListener('resize', this.updateDimensions.bind(this));
+        }
+
+        // Fonction appelée une fois le pdf correctement chargé
+
+
+        // Fonction appelée en cas d'erreur de chargement du pdf
+
+
+        // Fonction appelée au clic du bouton pour visualiser la page suivante du pdf
+
+
+        // Fonction appelée au clic du bouton pour visualiser la page précédente du pdf
+
+    }, {
+        key: 'render',
+
+
+        // Render
+        value: function render() {
+            var _state = this.state,
+                pageNumber = _state.pageNumber,
+                numPages = _state.numPages,
+                error = _state.error;
+            var _props = this.props,
+                classes = _props.classes,
+                file = _props.file,
+                displayPagination = _props.displayPagination,
+                displayNavigationButtons = _props.displayNavigationButtons,
+                props = (0, _objectWithoutProperties3.default)(_props, ['classes', 'file', 'displayPagination', 'displayNavigationButtons']);
+
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.root },
+                _react2.default.createElement(
+                    _reactPdf.Document,
+                    (0, _extends3.default)({
+                        className: classes.style,
+                        file: file,
+                        onLoadSuccess: this.handleLoadSuccess,
+                        onLoadError: this.handleLoadError,
+                        loading: _ref3
+                    }, props),
+                    _react2.default.createElement(_reactPdf.Page, {
+                        pageNumber: pageNumber,
+                        renderAnnotations: false,
+                        renderTextLayer: false,
+                        width: this.state.width
+                    })
+                ),
+                !error && numPages > 1 && displayPagination && _react2.default.createElement(
+                    'span',
+                    { className: classes.pageNumber },
+                    'Page ',
+                    pageNumber,
+                    ' sur ',
+                    numPages
+                ),
+                !error && numPages > 1 && displayNavigationButtons && _react2.default.createElement(
+                    'span',
+                    { className: classes.pagesNavigation },
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            onClick: this.handleClickPreviousPage,
+                            disabled: pageNumber === 1,
+                            className: classes.navigationButton
+                        },
+                        _ref4
+                    ),
+                    _react2.default.createElement(
+                        _HiButton2.default,
+                        {
+                            onClick: this.handleClickNextPage,
+                            disabled: pageNumber === numPages,
+                            className: classes.navigationButton
+                        },
+                        _ref5
+                    )
+                )
+            );
+        }
+    }]);
+    return HiPdfReader;
+}(_react2.default.PureComponent);
+
+HiPdfReader.defaultProps = {
+    displayPagination: true,
+    displayNavigationButtons: true
+};
+HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Chemin vers le fichier PDF
+     */
+    file: _propTypes2.default.string.isRequired,
+    /**
+     * On affiche la pagination si le PDF contient plusieurs pages
+     */
+    displayPagination: _propTypes2.default.bool,
+    /**
+     * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
+     */
+    displayNavigationButtons: _propTypes2.default.bool
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiPdfReader', index: 51 })(HiPdfReader);

package/HiPdfReader/index.js

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

package/HiPins/HiPins.js

@@ -42,7 +42,6 @@ var styles = exports.styles = function styles(theme) {
             textAlign: 'center',
             borderRadius: '45px',
             verticalAlign: 'middle',
-            margin: 0.5 * theme.spacing.unit,
             fontSize: 11,
             fontWeight: theme.typography.fontWeightMedium,
             fontFamily: theme.typography.fontFamily

package/HiSelect/HiSuggestSelect.js

@@ -138,6 +138,8 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         items[0].focus();
                     }
                 }, 1);
+            } else if (event.key === 'Escape') {
+                _this.setState({ options: [] });
             }
         };