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

package/HiTable/HiTableBody.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -43,6 +47,10 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _Table = require('material-ui/Table');
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -61,12 +69,6 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
-var _HiTableHead = require('./HiTableHead');
-
-var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
-
-var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,12 +77,14 @@ var styles = exports.styles = function styles(theme) {
     return {
         tbody: {
             position: 'relative',
-            display: 'block' /* seperates the tbody from the header */
-            , width: '100%',
+            width: '100%',
             overflowX: 'hidden',
             overflowY: 'auto',
             zIndex: 11
         },
+        tbodyFixedWidth: {
+            display: 'block' /* seperates the tbody from the header */
+        },
         tbodyRows: {
             backgroundColor: theme.palette.background3
         },
@@ -282,7 +286,8 @@ var HiTableBody = function (_React$Component) {
                 groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
-                loading = _props.loading;
+                loading = _props.loading,
+                fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
                 openedDetailsRowIdList = _state.openedDetailsRowIdList;
@@ -380,7 +385,8 @@ var HiTableBody = function (_React$Component) {
                     row: row,
                     sticky: sticky,
                     tabId: tabId,
-                    view: view
+                    view: view,
+                    fixedColumnWidth: fixedColumnWidth
                 });
 
                 if (hasChildren && openedParentRowId === row.rowId) {
@@ -409,7 +415,8 @@ var HiTableBody = function (_React$Component) {
                             view: view,
                             dense: dense,
                             sticky: sticky,
-                            isDetail: true
+                            isDetail: true,
+                            fixedColumnWidth: fixedColumnWidth
                         };
 
                         tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -417,11 +424,13 @@ var HiTableBody = function (_React$Component) {
                 }
             });
 
+            var tBodyClasses = (0, _classnames2.default)(classes.tbody, (0, _defineProperty3.default)({}, classes.tbodyFixedWidth, fixedColumnWidth));
+
             return _react2.default.createElement(
                 _Table.TableBody,
                 {
                     id: tabId + '-body',
-                    className: classes.tbody,
+                    className: tBodyClasses,
                     style: (0, _extends3.default)({
                         height: height
                     }, loading && {
@@ -476,6 +485,11 @@ HiTableBody.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Hauteur du tableau (px)
      */

package/HiTable/HiTableHead.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -43,6 +47,10 @@ var _reactProptypeConditionalRequire = require('react-proptype-conditional-requi
 
 var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _Table = require('material-ui/Table');
 
 var _PlusCircle = require('mdi-material-ui/PlusCircle');
@@ -79,11 +87,13 @@ var styles = exports.styles = function styles(theme) {
     return {
         thead: {
             position: 'relative',
-            display: 'block' /*seperates the header from the body allowing it to be positioned*/
-            , width: '100%',
+            width: '100%',
             overflow: 'visible',
             zIndex: 12
         },
+        theadFixedWidth: {
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+        },
         theadRow: {
             backgroundColor: theme.palette.background3,
             zIndex: 12
@@ -226,7 +236,8 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 hovered = _state.hovered,
                 openedOrderColumns = _state.openedOrderColumns,
@@ -234,7 +245,7 @@ var HiTableHead = function (_React$Component) {
 
 
             var headerProps = (0, _extends3.default)({
-                className: classes.thead
+                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -301,7 +312,8 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId)
+                                lookedUp: lookupColumns.includes(column.colId),
+                                fixedColumnWidth: fixedColumnWidth
                             });
                         }
                     }),
@@ -411,6 +423,11 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/es/HiDotsStepper/HiDot.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import withStyles from '../styles/withStyles';
+import ButtonBase from '../ButtonBase';
+
+export const styles = theme => ({
+    dot: {
+        backgroundColor: theme.palette.dot.neutral,
+        borderRadius: '100%',
+        width: 12,
+        height: 12,
+        '&:hover': {
+            transform: 'scale(1.2)'
+        },
+        marginLeft: 12
+    },
+    dotActive: {
+        marginTop: 4,
+        marginLeft: 4,
+        '&:hover': {
+            transform: 'scale(1)'
+        }
+    },
+    dotValidated: {
+        backgroundColor: theme.palette.status[116]
+    },
+    dotRefused: {
+        backgroundColor: theme.palette.error.main
+    },
+    dotAround: {
+        backgroundColor: 'transparent',
+        borderRadius: '100%',
+        width: 24,
+        height: 24,
+        marginLeft: 6,
+        border: '2px solid ' + theme.palette.dot.neutral,
+        '&:hover': {
+            transform: 'scale(1.2)'
+        }
+    },
+    dotAroundValidated: {
+        border: '2px solid ' + theme.palette.status[116]
+    },
+    dotAroundRefused: {
+        border: '2px solid ' + theme.palette.error.main
+    }
+});
+
+class HiDot extends React.PureComponent {
+
+    render() {
+        const { active, status, classes, onClick } = this.props;
+
+        const dotAroundClass = classnames(classes.dotAround, {
+            [classes.dotAroundValidated]: status === 'validated',
+            [classes.dotAroundRefused]: status === 'refused'
+        });
+
+        const dotClassName = classnames(classes.dot, {
+            [classes.dotActive]: active,
+            [classes.dotRefused]: status === 'refused',
+            [classes.dotValidated]: status === 'validated'
+        });
+
+        return React.createElement(
+            ButtonBase,
+            { disableRipple: true, role: 'button', onClick: onClick },
+            active ? React.createElement(
+                'div',
+                { className: dotAroundClass },
+                React.createElement('div', { className: dotClassName })
+            ) : React.createElement('div', { className: dotClassName })
+        );
+    }
+}
+
+HiDot.defaultProps = {
+    active: false,
+    status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+    active: PropTypes.bool,
+    classes: PropTypes.object,
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    status: PropTypes.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+export default withStyles(styles, { name: 'MuiHiDot' })(HiDot);

package/es/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '../styles/withStyles';
+import HiDot from './HiDot';
+
+export const styles = theme => ({
+    dotStepper: {
+        width: '100%',
+        maxWidth: 200,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});
+
+class HiDotsStepper extends React.PureComponent {
+
+    constructor() {
+        super();
+
+        this.handleClick = activeStep => () => {
+            this.props.onChange(activeStep);
+        };
+
+        this.handleNavigation = activeStep => e => {
+            let nextStep = activeStep;
+            const { steps } = this.props;
+
+            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);
+    }
+
+    render() {
+        const { classes, activeStep, steps } = this.props;
+
+        const listDots = steps.map((step, idx) => {
+            const { id, status } = step;
+            return React.createElement(
+                'div',
+                {
+                    key: id,
+                    tabIndex: id,
+                    className: classes.dotContainer,
+                    role: 'navigation',
+                    onKeyDown: this.handleNavigation(idx)
+                },
+                React.createElement(HiDot, {
+                    status: status,
+                    active: idx === activeStep,
+                    onClick: this.handleClick(idx)
+                })
+            );
+        });
+
+        return React.createElement(
+            'div',
+            { className: classes.dotStepper },
+            listDots
+        );
+    }
+}
+
+HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+    activeStep: PropTypes.number.isRequired,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    steps: PropTypes.array.isRequired
+} : {};
+export default withStyles(styles, { name: 'MuiHiDotsStepper' })(HiDotsStepper);

package/es/HiDotsStepper/index.js

@@ -0,0 +1 @@
+export { default } from './HiDotsStepper';

package/es/HiForm/HiAddressField.js

@@ -0,0 +1,142 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+// @inheritedComponent HiSuggestSelectField
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import HiSuggestSelectField from '../HiSelect/HiSuggestSelectField';
+
+/**
+ * Champs input adresse pour formulaire
+ */
+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.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);
+    }
+
+    /**
+     * 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({
+            options: [],
+            isExact: false
+        });
+    }
+
+    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');
+            }
+        }
+        this.props.onSearch(event);
+        // Mise à jour du texte dans l'input
+        this.setState(_extends({}, !event.target.value && {
+            options: []
+        }));
+    }
+
+    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);
+    }
+
+    render() {
+        const _props = this.props,
+              { exactOnly, onSearch, onReset, onSelect } = _props,
+              otherProps = _objectWithoutProperties(_props, ['exactOnly', 'onSearch', 'onReset', 'onSelect']);
+        const { options, isExact } = this.state;
+
+        // On met le champ en erreur si une adresse exacte est éxigée
+        // et si l'adresse courante n'est pas complète
+        const showError = exactOnly && !isExact;
+
+        return React.createElement(HiSuggestSelectField, _extends({
+            options: options,
+            onSearch: this.handleSearch,
+            onReset: this.handleReset,
+            onSelect: this.handleSelect,
+            isExact: isExact,
+            error: showError
+        }, otherProps));
+    }
+}
+
+HiAddressField.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Est-ce qu'on n'accepte que les adresses trouvées par GMaps
+     */
+    exactOnly: PropTypes.bool,
+    /**
+     *  Callback function called to empty the field.
+     */
+    onReset: PropTypes.func,
+    /**
+     *  Callback function called when we write in the input.
+     */
+    onSearch: PropTypes.func,
+    /**
+     *  Callback function called when a suggestion is selected.
+     */
+    onSelect: PropTypes.func
+} : {};
+
+export default HiAddressField;

package/es/HiForm/HiInput.js

@@ -50,7 +50,7 @@ export const styles = theme => ({
     focused: {},
     error: {
         border: `1px solid ${theme.palette.negative.normal}`,
-        paddingLeft: 0,
+        paddingLeft: 8,
         borderRadius: 2
     },
     startAdornment: {

package/es/HiForm/index.js

@@ -4,4 +4,5 @@ export { default as HiFormLabel } from './HiFormLabel';
 export { default as HiInput } from './HiInput';
 export { default as HiPasswordField } from './HiPasswordField';
 export { default as HiTextField } from './HiTextField';
-export { default as HiSearchField } from './HiSearchField';
+export { default as HiSearchField } from './HiSearchField';
+export { default as HiAddressField } from './HiAddressField';