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

package/HiTable/HeaderCell.js

@@ -226,8 +226,7 @@ var HeaderCell = function (_React$PureComponent) {
                 filterSource = _props.filterSource,
                 view = _props.view,
                 dense = _props.dense,
-                _props$width = _props.width,
-                width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
+                width = _props.width,
                 fixedColumnWidth = _props.fixedColumnWidth,
                 _props$align = _props.align,
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
@@ -243,7 +242,7 @@ var HeaderCell = function (_React$PureComponent) {
             var offset = selectable ? dense ? 32 : 40 : padding;
 
             // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-            var _width = width + offset + padding;
+            var _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
             // N'affiche pas le tri si il est désactivé.
             var _sorted = sortable && sorted;
             // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
@@ -275,6 +274,8 @@ var HeaderCell = function (_React$PureComponent) {
                 cellStyle.maxWidth = _width;
                 cellStyle.minWidth = _width;
                 cellStyle.width = _width;
+            } else if (width) {
+                cellStyle.width = width;
             }
 
             return _react2.default.createElement(
@@ -446,7 +447,7 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.number,
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */

package/HiTable/HiTableFooter.js

@@ -52,7 +52,8 @@ var styles = exports.styles = function styles(theme) {
         },
         tfootCell: {
             borderTop: '1px solid',
-            borderTopColor: theme.palette.line.stepper
+            borderTopColor: theme.palette.line.stepper,
+            padding: 0
         },
         patchDiv: {
             position: 'relative',

package/HiTopBar/HiTopBar.js

@@ -285,7 +285,8 @@ var HiTopBar = function (_React$Component) {
                 _AppBar2.default,
                 {
                     classes: { root: classes.root, colorPrimary: colorPrimaryClass },
-                    position: this.props.position
+                    position: this.props.position,
+                    id: 'top-bar'
                 },
                 _react2.default.createElement(
                     _Hidden2.default,
@@ -304,7 +305,7 @@ var HiTopBar = function (_React$Component) {
                                 { className: classes.toolbar },
                                 _react2.default.createElement(
                                     'div',
-                                    { ref: refButtons },
+                                    { ref: refButtons, id: 'menu-button-container' },
                                     searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
@@ -335,7 +336,7 @@ var HiTopBar = function (_React$Component) {
                                 ),
                                 _react2.default.createElement(
                                     'div',
-                                    { className: classes.flex },
+                                    { id: 'quick-search-input', className: classes.flex },
                                     searchInput
                                 ),
                                 notificationButton,
@@ -347,7 +348,8 @@ var HiTopBar = function (_React$Component) {
                                         classes: {
                                             label: classes.accountSelectorButtonLabel
                                         },
-                                        onClick: this.props.onClickAccountSelector
+                                        onClick: this.props.onClickAccountSelector,
+                                        id: 'account-selector-button'
                                     },
                                     accountSelectorContent
                                 ),

package/es/HiChip/HiChip.js

@@ -50,9 +50,12 @@ export const 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',
@@ -75,7 +78,7 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, img, onPrevious, onNext, onDelete } = props;
+    const { label, classes, icon, img, onPrevious, onNext, onDelete, prefix } = props;
 
     return React.createElement(
         'div',
@@ -86,6 +89,12 @@ function HiChip(props) {
                 [classes.deletable]: onDelete
             })
         },
+        prefix && React.createElement(
+            'span',
+            { className: classes.prefix },
+            prefix,
+            ' : '
+        ),
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
         icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && React.createElement(HiIconBuilder, {

package/es/HiDatePicker/HiDateRangePicker.js

@@ -452,7 +452,7 @@ class HiDateRangePicker extends React.Component {
 
         return React.createElement(
             'div',
-            { className: classes.root },
+            { className: classNames(classes.root, classes.rangePickerContainer) },
             React.createElement(
                 'div',
                 {

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -28,9 +28,9 @@ export function buildDateRangeOptionByKey(key, t, format) {
             break;
         case 'cd':
             label = t.today;
-            from = moment().subtract(1, 'day');
-            to = moment();
-            info = `${from.calendar()} ${t.to_now}`;
+            from = moment().startOf('day');
+            to = moment().endOf('day');
+            info = `${from.format(format)}`;
             break;
         case 'pd':
             label = t.yesterday;
@@ -97,7 +97,8 @@ export function buildDateRangeOptionByKey(key, t, format) {
 export const styles = theme => ({
     root: {
         maxWidth: 500,
-        marginLeft: -4
+        marginLeft: -4,
+        alignItems: 'flex-start'
     },
     dateSelect: {
         paddingTop: 1,

package/es/HiDatePicker/stylesheet.js

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

package/es/HiForm/HiAddressField.js

@@ -12,31 +12,27 @@ import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
 class HiAddressField extends React.Component {
     constructor(props) {
         super(props);
-        this.autocompleteService = null;
 
-        this.displaySuggestions = (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
-                const options = [];
-                let isExact = false;
-                predictions.forEach(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, isExact });
-            }
+        this.displaySuggestions = predictions => {
+            // Sinon je mets à jour les options du champ avec les prédictions de GMaps
+            const options = [];
+            let isExact = false;
+            predictions.forEach(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, isExact });
         };
 
         this.state = {
@@ -50,13 +46,6 @@ class HiAddressField extends React.Component {
         this.displaySuggestions = this.displaySuggestions.bind(this);
     }
 
-    /**
-     * Au chargement du composant, je définis mon service autocomplete GMaps
-     */
-    componentDidMount() {
-        this.autocompleteService = new google.maps.places.AutocompleteService();
-    }
-
     handleReset() {
         this.props.onReset();
         this.setState({
@@ -68,23 +57,19 @@ class HiAddressField extends React.Component {
     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']
-            const types = [];
-            // Liste des codes ISO Alpha-2 des pays où il faut rechercher (ex : ['fr', 'us'])
-            const 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,
-                    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');
-            }
+            const xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === XMLHttpRequest.DONE) {
+                    const response = JSON.parse(xhr.responseText);
+                    this.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/es/HiForm/HiInput.js

@@ -65,7 +65,6 @@ export const styles = theme => ({
         color: theme.palette.neutral.light
     },
     rightIcon: {
-        margin: '0 8px',
         width: 18,
         height: 39,
         color: theme.palette.neutral.normal
@@ -78,7 +77,7 @@ export const 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: _extends({}, theme.typography.body1, {
         fontWeight: theme.typography.fontWeightRegular,
@@ -179,7 +178,6 @@ class HiInput extends React.PureComponent {
             if (this.props.onFocus) {
                 this.props.onFocus(event);
             }
-            this.inputElement.focus();
         }
     }
 
@@ -256,6 +254,8 @@ class HiInput extends React.PureComponent {
         if (startAdornment) {
             leftIcon = React.createElement(HiIconBuilder, {
                 icon: startAdornment,
+                size: 36,
+                style: { padding: '8px' },
                 onClick: this.props.onLeftIconClick,
                 className: classNames(classes.startAdornment, {
                     [classes.startAdornmentFocus]: focused,
@@ -272,13 +272,15 @@ class HiInput extends React.PureComponent {
                 onClick: this.handleReset,
                 onBlur: this.handleBlur
             },
-            React.createElement(HiIconBuilder, { icon: 'close', size: 18, color: theme.palette.neutral.normal })
+            React.createElement(HiIconBuilder, { icon: 'close', size: 36, color: theme.palette.neutral.normal, style: { padding: '8px' } })
         );
 
         let endAdornment = endAdornmentProps;
         if (typeof endAdornmentProps === 'string' && endAdornmentProps !== '') {
             endAdornment = React.createElement(HiIconBuilder, {
                 icon: endAdornmentProps,
+                size: 36,
+                style: { padding: '8px' },
                 onClick: this.props.onRightIconClick,
                 className: classNames(classes.rightIcon, {
                     [classes.rightIconFocus]: focused,
@@ -314,7 +316,10 @@ class HiInput extends React.PureComponent {
                 startAdornment: leftIcon,
                 endAdornment: React.createElement(
                     'div',
-                    { className: classes.endAdornment, ref: el => this.endAdornmentNode = el },
+                    {
+                        className: classes.endAdornment,
+                        ref: el => this.endAdornmentNode = el
+                    },
                     eraseIcon,
                     endAdornment
                 ),

package/es/HiForm/HiUpload.js

@@ -0,0 +1,194 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent HiUploadField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+import withTheme from '../styles/withTheme';
+import HiFormControl from './HiFormControl';
+import HiUploadField from './HiUploadField';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+export const styles = theme => ({
+    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: {}
+});
+
+class HiUpload extends React.PureComponent {
+
+    constructor(props) {
+        super(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);
+    }
+
+    handleChange(param, index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, param);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleClear(index) {
+        this.setState(prevState => {
+            const oldParams = [...prevState.params];
+            oldParams.splice(index, 1, undefined);
+            return {
+                params: oldParams
+            };
+        });
+    }
+
+    handleSeeFile(file) {
+        this.props.onSeeFile(file);
+    }
+
+    render() {
+        const _props = this.props,
+              { inputs, className, classes, label, helperIcon, helperText } = _props,
+              others = _objectWithoutProperties(_props, ['inputs', 'className', 'classes', 'label', 'helperIcon', 'helperText']);
+
+        const { params } = this.state;
+
+        let complete = true;
+        let empty = true;
+        let error = false;
+        let errorText = '';
+
+        for (let i = 0, len = params.length; i < len; i += 1) {
+            const 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;
+            }
+        }
+
+        const statusClass = classNames(classes.statusIcon, {
+            [classes.empty]: empty,
+            [classes.complete]: complete,
+            [classes.error]: error
+        });
+
+        let icon;
+
+        if (error) {
+            icon = 'alert';
+        } else if (complete) {
+            icon = 'check_circle';
+        } else {
+            icon = 'upload';
+        }
+
+        return React.createElement(
+            HiFormControl,
+            {
+                label: label,
+                className: className,
+                errorText: errorText,
+                error: error,
+                helperIcon: helperIcon,
+                helperText: helperText
+            },
+            React.createElement(
+                'div',
+                { className: classes.flexContainer },
+                React.createElement(HiIconBuilder, { className: statusClass, size: 80, icon: icon }),
+                React.createElement(
+                    'div',
+                    { className: classes.inputContainer },
+                    inputs.map((item, index) => React.createElement(HiUploadField, _extends({
+                        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: this.handleSeeFile,
+                        onClear: this.handleClear,
+                        onChange: this.handleChange,
+                        index: index,
+                        key: item.id
+                    }, others)))
+                )
+            )
+        );
+    }
+}
+
+HiUpload.defaultProps = {
+    helperText: '',
+    helperIcon: false
+};
+HiUpload.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object,
+    /**
+     * Classes CSS appliquées.
+     */
+    className: PropTypes.string,
+    /**
+     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+     */
+    helperIcon: PropTypes.bool,
+    /**
+     * Texte de l'aide
+     */
+    helperText: PropTypes.string,
+    /**
+     * Array containing each of the inputs the component has to show (represented by an object).
+     */
+    inputs: PropTypes.array.isRequired,
+    /**
+     * The label of the global input.
+     */
+    label: PropTypes.string,
+    /**
+     * The method given to see the file.
+     */
+    onSeeFile: PropTypes.func
+} : {};
+export default withStyles(styles, { name: 'HmuiHiUpload', withTheme: true })(HiUpload);