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

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/HiFormControl.js

@@ -87,6 +87,17 @@ class HiFormControl extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        this.handleFocus = value => () => {
+            this.setState({ focused: value });
+            if (value === false && this.state.hovered) {
+                this.setState({ hovered: false });
+            }
+        };
+
+        this.handleHover = value => () => {
+            this.setState({ hovered: value });
+        };
+
         this.state = {
             helperOpen: false,
             focused: false,
@@ -105,17 +116,6 @@ class HiFormControl extends React.PureComponent {
         }
     }
 
-    handleFocus(value) {
-        this.setState({ focused: value });
-        if (value === false && this.state.hovered) {
-            this.setState({ hovered: false });
-        }
-    }
-
-    handleHover(value) {
-        this.setState({ hovered: value });
-    }
-
     render() {
         const _props = this.props,
               {
@@ -195,10 +195,10 @@ class HiFormControl extends React.PureComponent {
             React.createElement(
                 'div',
                 {
-                    onMouseEnter: () => this.handleHover(true),
-                    onMouseLeave: () => this.handleHover(false),
-                    onFocus: () => this.handleFocus(true),
-                    onBlur: () => this.handleFocus(false)
+                    onMouseEnter: this.handleHover(true),
+                    onMouseLeave: this.handleHover(false),
+                    onFocus: this.handleFocus(true),
+                    onBlur: this.handleFocus(false)
                 },
                 children
             ),

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/HiSearchField.js

@@ -85,7 +85,7 @@ class HiSearchField extends React.Component {
         if (typeof this.props.onSearch === 'undefined') {
             this.props.callbackFilteredList(this.props.itemList);
         } else {
-            this.props.onSearch('');
+            this.props.onSearch(undefined, '');
         }
     }
 

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';

package/es/HiPdfReader/HiPdfReader.js

@@ -0,0 +1,198 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Document, Page } from 'react-pdf';
+import HiButton from '../HiButton';
+import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
+import ChevronLeftIcon from 'mdi-material-ui/ChevronLeft';
+import { CircularProgress } from 'material-ui/Progress';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    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)
+const maxWindowWidth = 900;
+const maxPdfWidth = 600;
+
+var _ref = React.createElement(CircularProgress, null);
+
+var _ref2 = React.createElement(ChevronLeftIcon, null);
+
+var _ref3 = React.createElement(ChevronRightIcon, null);
+
+class HiPdfReader extends React.PureComponent {
+    constructor(...args) {
+        var _temp;
+
+        return _temp = super(...args), this.state = {
+            numPages: null,
+            pageNumber: 1,
+            error: false,
+            width: 600
+        }, this.handleLoadSuccess = ({ numPages }) => {
+            this.setState({ numPages, error: false });
+        }, this.handleLoadError = () => {
+            this.setState({ error: true });
+        }, this.handleClickNextPage = () => {
+            this.setState({ pageNumber: this.state.pageNumber + 1 });
+        }, this.handleClickPreviousPage = () => {
+            this.setState({ pageNumber: this.state.pageNumber - 1 });
+        }, _temp;
+    }
+
+    // Calculate & Update state of new dimensions
+    updateDimensions() {
+        if (window.innerWidth < maxWindowWidth) {
+            let updateWidth = Math.round(window.innerWidth * 100 / maxWindowWidth / 100 * maxPdfWidth);
+            this.setState({ width: updateWidth });
+        } else {
+            this.setState({ width: maxPdfWidth });
+        }
+    }
+
+    componentDidMount() {
+        this.updateDimensions();
+        window.addEventListener('resize', this.updateDimensions.bind(this));
+    }
+
+    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
+
+
+    // Render
+    render() {
+        const { pageNumber, numPages, error } = this.state;
+        const _props = this.props,
+              { classes, file, displayPagination, displayNavigationButtons } = _props,
+              props = _objectWithoutProperties(_props, ['classes', 'file', 'displayPagination', 'displayNavigationButtons']);
+
+        return React.createElement(
+            'div',
+            { className: classes.root },
+            React.createElement(
+                Document,
+                _extends({
+                    className: classes.style,
+                    file: file,
+                    onLoadSuccess: this.handleLoadSuccess,
+                    onLoadError: this.handleLoadError,
+                    loading: _ref
+                }, props),
+                React.createElement(Page, {
+                    pageNumber: pageNumber,
+                    renderAnnotations: false,
+                    renderTextLayer: false,
+                    width: this.state.width
+                })
+            ),
+            !error && numPages > 1 && displayPagination && React.createElement(
+                'span',
+                { className: classes.pageNumber },
+                'Page ',
+                pageNumber,
+                ' sur ',
+                numPages
+            ),
+            !error && numPages > 1 && displayNavigationButtons && React.createElement(
+                'span',
+                { className: classes.pagesNavigation },
+                React.createElement(
+                    HiButton,
+                    {
+                        onClick: this.handleClickPreviousPage,
+                        disabled: pageNumber === 1,
+                        className: classes.navigationButton
+                    },
+                    _ref2
+                ),
+                React.createElement(
+                    HiButton,
+                    {
+                        onClick: this.handleClickNextPage,
+                        disabled: pageNumber === numPages,
+                        className: classes.navigationButton
+                    },
+                    _ref3
+                )
+            )
+        );
+    }
+}
+
+HiPdfReader.defaultProps = {
+    displayPagination: true,
+    displayNavigationButtons: true
+};
+HiPdfReader.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Chemin vers le fichier PDF
+     */
+    file: PropTypes.string.isRequired,
+    /**
+     * On affiche la pagination si le PDF contient plusieurs pages
+     */
+    displayPagination: PropTypes.bool,
+    /**
+     * On affiche les boutons de navigation entre les pages si le PDF contient plusieurs pages
+     */
+    displayNavigationButtons: PropTypes.bool
+} : {};
+export default withStyles(styles, { name: 'HmuiHiPdfReader', index: 51 })(HiPdfReader);

package/es/HiPdfReader/index.js

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

package/es/HiPins/HiPins.js

@@ -15,7 +15,6 @@ export const 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/es/HiSelect/HiSuggestSelect.js

@@ -77,6 +77,8 @@ class HiSuggestSelect extends React.PureComponent {
                         items[0].focus();
                     }
                 }, 1);
+            } else if (event.key === 'Escape') {
+                this.setState({ options: [] });
             }
         };
 

package/es/HiSelectableList/HiSelectableListItem.js

@@ -14,7 +14,8 @@ import HiColoredLabel from '../HiColoredLabel';
 export const styles = theme => ({
     listItem: {
         padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular
+        fontWeight: theme.typography.fontWeightRegular,
+        maxHeight: 40
     },
     listItemTitle: {
         padding: `${9}px 0px`,
@@ -105,6 +106,11 @@ export const styles = theme => ({
             color: '#000000'
         }
     },
+    labelHighlightColored: {
+        '&>strong': {
+            fontWeight: theme.typography.fontWeightMedium
+        }
+    },
     primaryHighlight: {
         fontWeight: theme.typography.fontWeightMedium,
         color: theme.palette.business.primary.normal,
@@ -152,8 +158,7 @@ class HiSelectableListItem extends React.Component {
                 case 'image':
                     let img = '';
                     if (typeof item.img !== 'undefined') {
-
-                        img = React.createElement('img', { src: item.img, className: classes.imgListItem });
+                        img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
                     }
 
                     return React.createElement(
@@ -186,13 +191,7 @@ class HiSelectableListItem extends React.Component {
                     return React.createElement(
                         'div',
                         { className: itemTextClass, 'data-id': item.id },
-                        item.labelHighlight && React.createElement('span', {
-                            className: classes.labelHighlight,
-                            dangerouslySetInnerHTML: {
-                                __html: escapeHTML(item.labelHighlight)
-                            }
-                        }),
-                        !item.labelHighlight && this.getItemLabel(item),
+                        this.getItemLabel(item),
                         React.createElement(
                             'span',
                             { className: classes.listItemSecondaryText },
@@ -216,8 +215,20 @@ class HiSelectableListItem extends React.Component {
     }
 
     getItemLabel(item) {
-        if (item.color) {
+        const { classes } = this.props;
+        if (!item.labelHighlight && item.color && this.props.selected) {
             return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
+        } else if (item.labelHighlight) {
+            const mLabel = React.createElement('span', {
+                className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
+                dangerouslySetInnerHTML: {
+                    __html: escapeHTML(item.labelHighlight)
+                }
+            });
+            if (item.color && this.props.selected) {
+                return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
+            }
+            return mLabel;
         }
         return item.label;
     }