@hipay/hipay-material-ui 1.0.0-beta.19 → 1.0.0-beta.20

package/HiChip/HiChip.js

@@ -81,9 +81,12 @@ var styles = exports.styles = function styles(theme) {
             whiteSpace: 'nowrap',
             color: theme.palette.neutral.dark,
             overflow: 'hidden',
-            width: '100%',
             textOverflow: 'ellipsis'
         },
+        prefix: {
+            color: theme.palette.neutral.dark,
+            paddingRight: 4
+        },
         navigate: {
             // Remove grey highlight
             WebkitTapHighlightColor: 'transparent',
@@ -115,7 +118,8 @@ function HiChip(props) {
         img = props.img,
         onPrevious = props.onPrevious,
         onNext = props.onNext,
-        onDelete = props.onDelete;
+        onDelete = props.onDelete,
+        prefix = props.prefix;
 
 
     return _react2.default.createElement(
@@ -123,6 +127,12 @@ function HiChip(props) {
         {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
+        prefix && _react2.default.createElement(
+            'span',
+            { className: classes.prefix },
+            prefix,
+            ' : '
+        ),
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
         icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {

package/HiDatePicker/HiDateRangePicker.js

@@ -601,7 +601,7 @@ var HiDateRangePicker = function (_React$Component) {
 
             return _react2.default.createElement(
                 'div',
-                { className: classes.root },
+                { className: (0, _classnames2.default)(classes.root, classes.rangePickerContainer) },
                 _react2.default.createElement(
                     'div',
                     {

package/HiDatePicker/HiDateRangeSelector.js

@@ -86,9 +86,9 @@ function buildDateRangeOptionByKey(key, t, format) {
             break;
         case 'cd':
             label = t.today;
-            from = (0, _moment2.default)().subtract(1, 'day');
-            to = (0, _moment2.default)();
-            info = from.calendar() + ' ' + t.to_now;
+            from = (0, _moment2.default)().startOf('day');
+            to = (0, _moment2.default)().endOf('day');
+            info = '' + from.format(format);
             break;
         case 'pd':
             label = t.yesterday;
@@ -156,7 +156,8 @@ var styles = exports.styles = function styles(theme) {
     return {
         root: {
             maxWidth: 500,
-            marginLeft: -4
+            marginLeft: -4,
+            alignItems: 'flex-start'
         },
         dateSelect: {
             paddingTop: 1,

package/HiDatePicker/stylesheet.js

@@ -38,6 +38,10 @@ exports.default = function (theme) {
             top: -337,
             width: 'calc(100% - 4px)'
         },
+        rangePickerContainer: {
+            display: 'flex',
+            alignItems: 'flex-start'
+        },
         // The container element
         container: {
             width: '100%',

package/HiForm/HiAddressField.js

@@ -57,31 +57,26 @@ var HiAddressField = function (_React$Component) {
 
         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.displaySuggestions = function (predictions) {
+            // 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,
+                // on estime que la valeur de l'adresse est exacte,
+                // même sans clic sur une proposition
+                isExact = prediction.display_name === _this.value ? true : isExact;
+                // liste des types d'adresse : https://github.com/openstreetmap/Nominatim/blob/80df4d3b560f5b1fd550dcf8cdc09a992b69fee0/settings/partitionedtags.def
+                options.push({
+                    id: prediction.place_id,
+                    label: prediction.display_name,
+                    labelHighlight: prediction.display_name.replace(new RegExp(_this.value, 'gi'), '<strong>$&</strong>'),
+                    icon: ['amenity', 'building'].includes(prediction.category) ? 'domain' : 'map_marker',
+                    type: 'icon',
+                    key: prediction.id
+                });
+            }, _this);
+            _this.setState({ options: options, isExact: isExact });
         };
 
         _this.state = {
@@ -96,17 +91,7 @@ var HiAddressField = function (_React$Component) {
         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();
@@ -118,25 +103,23 @@ var HiAddressField = function (_React$Component) {
     }, {
         key: 'handleSearch',
         value: function handleSearch(event) {
+            var _this2 = this;
+
             // 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');
-                }
+                var xhr = new XMLHttpRequest();
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        var response = JSON.parse(xhr.responseText);
+                        _this2.displaySuggestions(response, 'OK');
+                    }
+                };
+                xhr.open('GET', 'https://nominatim.openstreetmap.org/search?q=' + event.target.value + '&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1', true);
+                xhr.setRequestHeader('Content-type', 'application/json');
+                xhr.send();
             }
             this.props.onSearch(event);
             // Mise à jour du texte dans l'input

package/HiForm/HiInput.js

@@ -122,7 +122,6 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.neutral.light
         },
         rightIcon: {
-            margin: '0 8px',
             width: 18,
             height: 39,
             color: theme.palette.neutral.normal
@@ -135,7 +134,7 @@ var styles = exports.styles = function styles(theme) {
         },
         rightIconError: {
             // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
-            marginRight: 10
+            marginRight: '-1px'
         },
         input: (0, _extends3.default)({}, theme.typography.body1, {
             fontWeight: theme.typography.fontWeightRegular,
@@ -247,7 +246,6 @@ var HiInput = function (_React$PureComponent) {
                 if (this.props.onFocus) {
                     this.props.onFocus(event);
                 }
-                this.inputElement.focus();
             }
         }
     }, {
@@ -329,6 +327,8 @@ var HiInput = function (_React$PureComponent) {
 
                 leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: startAdornment,
+                    size: 36,
+                    style: { padding: '8px' },
                     onClick: this.props.onLeftIconClick,
                     className: (0, _classnames2.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.startAdornmentFocus, focused), (0, _defineProperty3.default)(_classNames2, classes.startAdornmentDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
                 });
@@ -341,7 +341,7 @@ var HiInput = function (_React$PureComponent) {
                     onClick: this.handleReset,
                     onBlur: this.handleBlur
                 },
-                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+                _react2.default.createElement(_HiIconBuilder2.default, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
             );
 
             var endAdornment = endAdornmentProps;
@@ -350,6 +350,8 @@ var HiInput = function (_React$PureComponent) {
 
                 endAdornment = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: endAdornmentProps,
+                    size: 36,
+                    style: { padding: '8px' },
                     onClick: this.props.onRightIconClick,
                     className: (0, _classnames2.default)(classes.rightIcon, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.rightIconFocus, focused), (0, _defineProperty3.default)(_classNames3, classes.rightIconDisabled, disabled), (0, _defineProperty3.default)(_classNames3, classes.rightIconError, error), (0, _defineProperty3.default)(_classNames3, classes.iconPointer, this.props.onRightIconClick), _classNames3))
                 });
@@ -380,9 +382,12 @@ var HiInput = function (_React$PureComponent) {
                     startAdornment: leftIcon,
                     endAdornment: _react2.default.createElement(
                         'div',
-                        { className: classes.endAdornment, ref: function ref(el) {
+                        {
+                            className: classes.endAdornment,
+                            ref: function ref(el) {
                                 return _this2.endAdornmentNode = el;
-                            } },
+                            }
+                        },
                         eraseIcon,
                         endAdornment
                     ),

package/HiForm/HiUpload.js

@@ -0,0 +1,280 @@
+'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 _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+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 _withStyles = require('../styles/withStyles');
+
+var _withStyles2 = _interopRequireDefault(_withStyles);
+
+var _withTheme = require('../styles/withTheme');
+
+var _withTheme2 = _interopRequireDefault(_withTheme);
+
+var _HiFormControl = require('./HiFormControl');
+
+var _HiFormControl2 = _interopRequireDefault(_HiFormControl);
+
+var _HiUploadField = require('./HiUploadField');
+
+var _HiUploadField2 = _interopRequireDefault(_HiUploadField);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent HiUploadField
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        flexContainer: {
+            display: '  flex',
+            alignItems: 'center'
+        },
+        statusIcon: {
+            color: theme.palette.text.icon,
+            marginRight: '8px',
+            padding: '24px',
+            borderRadius: '2px',
+            border: '1px solid ' + theme.palette.input.bottomLine,
+            backgroundColor: theme.palette.local.background2,
+            '&:not($empty)': {
+                border: '1px solid ' + theme.palette.middle.normal,
+                color: '' + theme.palette.middle.normal
+            },
+            '&$complete': {
+                border: '1px solid ' + theme.palette.positive.normal,
+                color: '' + theme.palette.positive.normal
+            },
+            '&$error': {
+                border: '1px solid ' + theme.palette.negative.normal,
+                color: '' + theme.palette.negative.normal
+            }
+        },
+        inputContainer: {
+            flex: '1'
+        },
+        empty: {},
+        complete: {},
+        error: {}
+    };
+};
+
+var HiUpload = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiUpload, _React$PureComponent);
+
+    function HiUpload(props) {
+        (0, _classCallCheck3.default)(this, HiUpload);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiUpload.__proto__ || (0, _getPrototypeOf2.default)(HiUpload)).call(this, props));
+
+        _this.state = {
+            params: new Array(_this.props.inputs.length)
+        };
+
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleClear = _this.handleClear.bind(_this);
+        _this.handleSeeFile = _this.handleSeeFile.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiUpload, [{
+        key: 'handleChange',
+        value: function handleChange(param, index) {
+            this.setState(function (prevState) {
+                var oldParams = [].concat((0, _toConsumableArray3.default)(prevState.params));
+                oldParams.splice(index, 1, param);
+                return {
+                    params: oldParams
+                };
+            });
+        }
+    }, {
+        key: 'handleClear',
+        value: function handleClear(index) {
+            this.setState(function (prevState) {
+                var oldParams = [].concat((0, _toConsumableArray3.default)(prevState.params));
+                oldParams.splice(index, 1, undefined);
+                return {
+                    params: oldParams
+                };
+            });
+        }
+    }, {
+        key: 'handleSeeFile',
+        value: function handleSeeFile(file) {
+            this.props.onSeeFile(file);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _classNames,
+                _this2 = this;
+
+            var _props = this.props,
+                inputs = _props.inputs,
+                className = _props.className,
+                classes = _props.classes,
+                label = _props.label,
+                helperIcon = _props.helperIcon,
+                helperText = _props.helperText,
+                others = (0, _objectWithoutProperties3.default)(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
+            var params = this.state.params;
+
+
+            var complete = true;
+            var empty = true;
+            var error = false;
+            var errorText = '';
+
+            for (var i = 0, len = params.length; i < len; i += 1) {
+                var param = params[i];
+                if (param !== undefined) {
+                    complete = param.value === null || param.error ? false : complete;
+                    empty = param.value !== null && !param.error ? false : empty;
+                    error = param.error || error;
+                    errorText = errorText || param.errorMessage;
+                } else {
+                    complete = false;
+                }
+            }
+
+            var statusClass = (0, _classnames2.default)(classes.statusIcon, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.empty, empty), (0, _defineProperty3.default)(_classNames, classes.complete, complete), (0, _defineProperty3.default)(_classNames, classes.error, error), _classNames));
+
+            var icon = void 0;
+
+            if (error) {
+                icon = 'alert';
+            } else if (complete) {
+                icon = 'check_circle';
+            } else {
+                icon = 'upload';
+            }
+
+            return _react2.default.createElement(
+                _HiFormControl2.default,
+                {
+                    label: label,
+                    className: className,
+                    errorText: errorText,
+                    error: error,
+                    helperIcon: helperIcon,
+                    helperText: helperText
+                },
+                _react2.default.createElement(
+                    'div',
+                    { className: classes.flexContainer },
+                    _react2.default.createElement(_HiIconBuilder2.default, { className: statusClass, size: 80, icon: icon }),
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.inputContainer },
+                        inputs.map(function (item, index) {
+                            return _react2.default.createElement(_HiUploadField2.default, (0, _extends3.default)({
+                                maxSize: item.maxSize,
+                                acceptedTypes: item.acceptedTypes,
+                                placeholder: item.placeholder,
+                                value: params[index] ? params[index].value : null,
+                                error: params[index] ? params[index].error : null,
+                                errorMessage: params[index] ? params[index].errorMessage : null,
+                                onSeeFile: _this2.handleSeeFile,
+                                onClear: _this2.handleClear,
+                                onChange: _this2.handleChange,
+                                index: index,
+                                key: item.id
+                            }, others));
+                        })
+                    )
+                )
+            );
+        }
+    }]);
+    return HiUpload;
+}(_react2.default.PureComponent);
+
+HiUpload.defaultProps = {
+    helperText: '',
+    helperIcon: false
+};
+HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: _propTypes2.default.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: _propTypes2.default.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: _propTypes2.default.string,
+    /**
+     * Array containing each of the inputs the component has to show (represented by an object).
+     */
+    inputs: _propTypes2.default.array.isRequired,
+    /**
+     * The label of the global input.
+     */
+    label: _propTypes2.default.string,
+    /**
+     * The method given to see the file.
+     */
+    onSeeFile: _propTypes2.default.func
+} : {};
+exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);