@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -70,9 +70,11 @@ const CustomOverlayLayout = (_ref) => {
         [classes.right]: side === 'to'
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { className: paperClass, onBlur: paperProps.onBlur, onFocus: paperProps.onFocus },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -34,13 +34,17 @@ class MonthPickerOverlay extends React.Component {
               { value, translations } = _props,
               props = _objectWithoutProperties(_props, ['value', 'translations']);
 
+        let now = new Date();
+        let currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
+
         return React.createElement(
             CustomOverlayLayout,
             _extends({ headerElement: translations.month }, props),
             React.createElement(ListPicker, {
                 itemList: this.months,
                 onItemClick: this.handleMonthClick,
-                selectedItem: value ? value.getMonth() : null
+                selectedItem: currentMonth,
+                type: 'month'
             })
         );
     }

package/es/HiDatePicker/Overlays/Overlay.js

@@ -1,3 +1,5 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 //  weak
 
 import React from 'react';
@@ -9,10 +11,15 @@ import withStyles from '../../styles/withStyles';
 
 export const styles = () => ({
     paper: {
-        position: 'absolute',
         width: '100%',
         zIndex: 10
     },
+    absolute: {
+        position: 'absolute'
+    },
+    relative: {
+        position: 'relative'
+    },
     left: {
         width: '200%',
         left: 0
@@ -26,15 +33,22 @@ export const styles = () => ({
     }
 });
 
-const Overlay = ({ classes, children, side }) => {
+const Overlay = (_ref) => {
+    let { classes, children, side, staticPosition } = _ref,
+        props = _objectWithoutProperties(_ref, ['classes', 'children', 'side', 'staticPosition']);
+
     const paperClass = classNames(classes.paper, {
         [classes.left]: side === 'from',
-        [classes.right]: side === 'to'
+        [classes.right]: side === 'to',
+        [classes.absolute]: staticPosition !== true,
+        [classes.relative]: staticPosition === true
     });
 
+    let paperProps = _extends({}, props);
+
     return React.createElement(
         Paper,
-        { className: paperClass },
+        { onBlur: paperProps.onBlur, onFocus: paperProps.onFocus, className: paperClass },
         React.createElement(
             'div',
             { className: classes.overlay },

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -54,7 +54,8 @@ class YearPickerOverlay extends React.Component {
             React.createElement(ListPicker, {
                 itemList: this.years,
                 onItemClick: this.handleYearClick,
-                selectedItem: value ? value.getFullYear() : null
+                selectedItem: value ? value.getFullYear() : null,
+                type: 'year'
             })
         );
     }

package/es/HiDatePicker/stylesheet.js

@@ -19,6 +19,17 @@ export default (theme => ({
         width: 'calc(50% - 4px)',
         marginLeft: 4
     },
+    absolute: {
+        position: 'absolute'
+    },
+    dayPickerMargin: {
+        top: -337,
+        width: 'calc(100% - 4px)'
+    },
+    rangePickerContainer: {
+        display: 'flex',
+        alignItems: 'flex-start'
+    },
     // The container element
     container: {
         width: '100%',

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

@@ -0,0 +1,170 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent ExpansionPanel
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
+import Typography from 'material-ui/Typography';
+import MenuDownIcon from 'mdi-material-ui/MenuDown';
+import { withStyles } from '../styles';
+
+export const styles = theme => ({
+    heading: {
+        fontSize: 20,
+        lineHeight: '24px',
+        fontWeight: theme.typography.fontWeightLight
+    },
+    secondaryHeading: {
+        fontSize: 11,
+        color: '#737373',
+        textAlign: 'right',
+        lineHeight: '24px',
+        fontWeight: theme.typography.fontWeightRegular,
+        verticalAlign: 'middle',
+        '&>svg': {
+            fontSize: 18,
+            marginLeft: 3,
+            marginBottom: -5
+        }
+    },
+    column: {
+        flexBasis: '100%'
+    },
+    panelSummary: {
+        '&>div:first-child': {
+            margin: '12px 0',
+            '&>div:last-child': {
+                paddingRight: 8
+            }
+        },
+        '&>div:last-child': {
+            width: 16,
+            height: 16
+        }
+    },
+    panelSummaryExpanded: {
+        borderBottom: '1px solid #E3E6E7',
+        minHeight: 0
+    },
+    expandMoreIcon: {
+        margin: 0,
+        fontSize: 18,
+        width: 20
+    },
+    panel: {
+        boxShadow: 'none',
+        border: 'none'
+    },
+    panelDetails: {
+        padding: '8px 24px 8px'
+    },
+    disabledPanel: {
+        backgroundColor: '#ffffff',
+        opacity: 1
+    },
+    expandIconExpanded: {
+        transform: 'translateY(-50%) rotate(-90deg)'
+    }
+});
+
+class HiExpansionPanel extends React.PureComponent {
+
+    render() {
+        const _props = this.props,
+              {
+            disabled,
+            heading,
+            secondaryHeading,
+            secondaryHeadingDisabled,
+            secondaryHeadingIcon,
+            children,
+            classes
+        } = _props,
+              props = _objectWithoutProperties(_props, ['disabled', 'heading', 'secondaryHeading', 'secondaryHeadingDisabled', 'secondaryHeadingIcon', 'children', 'classes']);
+
+        const effectiveDisabled = disabled || !children;
+
+        return React.createElement(
+            ExpansionPanel,
+            _extends({
+                disabled: effectiveDisabled,
+                classes: { root: classes.panel, disabled: classes.disabledPanel }
+            }, props),
+            React.createElement(
+                ExpansionPanelSummary,
+                {
+                    classes: {
+                        root: classes.panelSummary,
+                        disabled: classes.disabledPanel,
+                        expanded: classes.panelSummaryExpanded,
+                        expandIconExpanded: classes.expandIconExpanded
+                    },
+                    expandIcon: React.createElement(MenuDownIcon, { classes: { root: classes.expandMoreIcon } })
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.heading } },
+                        heading
+                    )
+                ),
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { classes: { root: classes.secondaryHeading } },
+                        !effectiveDisabled ? secondaryHeading : secondaryHeadingDisabled,
+                        secondaryHeadingIcon
+                    )
+                )
+            ),
+            !!children && React.createElement(
+                ExpansionPanelDetails,
+                { classes: { root: classes.panelDetails } },
+                children
+            )
+        );
+    }
+}
+
+HiExpansionPanel.defaultProps = {
+    disabled: false,
+    secondaryHeading: '',
+    secondaryHeadingIcon: '',
+    secondaryHeadingDisabled: 'PAS ENCORE COMPLETE'
+};
+HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Contenu du panel
+     */
+    children: PropTypes.any,
+    /**
+     * Surcharge les classes du composant
+     */
+    classes: PropTypes.object,
+    /**
+     * Désactivé
+     */
+    disabled: PropTypes.bool,
+    /**
+     * Titre principal du panel
+     */
+    heading: PropTypes.string.isRequired,
+    /**
+     * Titre secondaire du panel
+     */
+    secondaryHeading: PropTypes.string,
+    /**
+     * Titre secondaire si désactivé
+     */
+    secondaryHeadingDisabled: PropTypes.string,
+    /**
+     * Icone dans le titre secondaire du panel
+     */
+    secondaryHeadingIcon: PropTypes.any
+} : {};
+export default withStyles(styles, { name: 'HmuiHiExpansionPanel' })(HiExpansionPanel);

package/es/HiExpansionPanel/index.js

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

package/es/HiForm/HiAddressField.js

@@ -0,0 +1,127 @@
+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.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 = {
+            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);
+    }
+
+    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) {
+            // À 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;
+            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
+        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;