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

package/es/HiMap/HiMap.js

@@ -0,0 +1,285 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '../styles';
+import HiButton from '../HiButton';
+import HiIconBuilder from '../utils/HiIconBuilder';
+import HiLoader from '../HiLoader';
+
+// The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
+export const styles = theme => ({
+    map: {
+        height: '100%',
+        overflow: 'hidden',
+        '& .leaflet-pane, & .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow, & .leaflet-tile-container, & .leaflet-pane > svg, & .leaflet-pane > canvas, & .leaflet-zoom-box, & .leaflet-image-layer, & .leaflet-layer': {
+            position: 'absolute',
+            left: 0,
+            top: 0
+        },
+        '& .leaflet-container': {
+            overflow: 'hidden',
+            height: '100%'
+        },
+        '& .leaflet-tile, & .leaflet-marker-icon, & .leaflet-marker-shadow': {
+            '-webkit-user-select': 'none',
+            '-moz-user-select': 'none',
+            userSelect: 'none',
+            '-webkit-user-drag': 'none'
+        },
+        '& .leaflet-control': {
+            display: 'none'
+        },
+        '& .map_marker': {
+            fill: theme.palette.business.primary.normal
+        }
+    },
+    controlButtons: {
+        position: 'absolute',
+        bottom: 16,
+        right: 16
+    },
+    centerIcon: {
+        fontSize: 14
+    },
+    centerButtonContainer: {
+        backgroundColor: theme.palette.business.primary.contrast,
+        borderRadius: 3,
+        padding: 3,
+        boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+        marginBottom: 4,
+        height: 32,
+        minHeight: 32,
+        width: 32,
+        minWidth: 32
+    },
+    centerButton: {
+        color: theme.palette.neutral.normal,
+        padding: '1px !important',
+        height: 26,
+        minHeight: 26,
+        width: 26,
+        minWidth: 26
+    },
+    zoomButtons: {
+        backgroundColor: theme.palette.global.background1,
+        borderRadius: 3,
+        padding: 3,
+        fontFamily: theme.typography.fontFamily,
+        boxShadow: '1px 1px 5px rgba(0, 0, 0, .16)',
+        color: theme.palette.neutral.normal,
+        '&>button:first-child': {
+            borderBottom: `1px solid ${theme.palette.neutral.normal}`
+        }
+    },
+    zoomButton: {
+        paddingTop: '0px !important',
+        paddingBottom: 0,
+        paddingRight: 6,
+        paddingLeft: 6,
+        minWidth: 0,
+        minHeight: 0,
+        borderRadius: 0,
+        display: 'block',
+        fontSize: 24,
+        fontWeight: 'bold',
+        lineHeight: '26px',
+        '&>span': {
+            width: 14
+        }
+    }
+});
+
+let L, Map, TileLayer, Marker, Popup;
+
+var _ref = React.createElement(TileLayer, { url: 'https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png' });
+
+var _ref2 = React.createElement(HiLoader, { loading: true });
+
+class HiMap extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            lat: 0,
+            lng: 0,
+            notFound: false,
+            loaded: false,
+            zoom: 16
+        };
+
+        this.xhr = null;
+        this.handleClickZoomIn = this.handleClickZoomIn.bind(this);
+        this.handleScrollZoom = this.handleScrollZoom.bind(this);
+        this.handleClickZoomOut = this.handleClickZoomOut.bind(this);
+        this.handleCenter = this.handleCenter.bind(this);
+    }
+
+    // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
+    componentDidMount() {
+        this.findCoords();
+        L = require('leaflet');
+        Map = require('react-leaflet').Map;
+        Popup = require('react-leaflet').Popup;
+        Marker = require('react-leaflet').Marker;
+        TileLayer = require('react-leaflet').TileLayer;
+    }
+
+    // Avoids a warning when cleanup() is called at the end of the test by stopping the async call.
+    componentWillUnmount() {
+        this.xhr.abort();
+    }
+
+    handleScrollZoom(event) {
+        this.setState({ zoom: event.zoom });
+    }
+
+    handleClickZoomIn() {
+        this.setState(prevState => {
+            return { zoom: prevState.zoom + 1 };
+        });
+    }
+
+    handleClickZoomOut() {
+        this.setState(prevState => {
+            return { zoom: prevState.zoom - 1 };
+        });
+    }
+
+    handleCenter() {
+        // trick to center the map.
+        this.setState(prevState => {
+            return { lat: prevState.lat + 0.0000000001 };
+        });
+    }
+
+    // Call to the geocoding API.
+    findCoords() {
+        this.xhr = new XMLHttpRequest();
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState === XMLHttpRequest.DONE && this.xhr.status === 200) {
+                const response = JSON.parse(this.xhr.responseText);
+                if (response.length === 0) {
+                    this.setState({ notFound: true });
+                    this.props.onAddressNotFound();
+                } else {
+                    this.setState({
+                        lat: parseFloat(response[0].lat),
+                        lng: parseFloat(response[0].lon),
+                        notFound: false,
+                        loaded: true
+                    });
+                }
+            }
+        };
+        this.xhr.open('GET', `https://nominatim.openstreetmap.org/search?q=${this.props.address}&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`, true);
+        this.xhr.setRequestHeader('Content-type', 'application/json');
+        this.xhr.send();
+    }
+
+    render() {
+        const { zoom, lng, lat, notFound, loaded } = this.state;
+
+        const { translations, classes } = this.props;
+
+        const position = [lat, lng];
+
+        let element;
+
+        let myIcon;
+        if (notFound) {
+            element = translations.notFound;
+        } else if (loaded) {
+            myIcon = L.divIcon({
+                html: '<svg x="0px" y="0px" viewBox="0 0 365 560" enable-background="new 0 0 365 560" xml:space="preserve">\n' + '<path class="map_marker" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9   C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8   c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>\n' + '</svg>',
+                iconSize: [24, 36],
+                iconAnchor: [11, 36]
+            });
+            element = React.createElement(
+                Map,
+                {
+                    zoom: zoom,
+                    center: position,
+                    className: classes.map,
+                    onViewportChange: this.handleScrollZoom
+                },
+                _ref,
+                React.createElement(Marker, { position: position, icon: myIcon }),
+                React.createElement(
+                    'div',
+                    { className: classes.controlButtons },
+                    React.createElement(
+                        'div',
+                        { className: classes.centerButtonContainer },
+                        React.createElement(
+                            HiButton,
+                            { className: classes.centerButton, onClick: this.handleCenter },
+                            React.createElement(HiIconBuilder, {
+                                className: classes.centerIcon,
+                                icon: 'crosshairs_gps',
+                                size: 24
+                            })
+                        )
+                    ),
+                    React.createElement(
+                        'div',
+                        { className: classes.zoomButtons },
+                        React.createElement(
+                            HiButton,
+                            {
+                                onClick: this.handleClickZoomIn,
+                                className: classes.zoomButton
+                            },
+                            '+'
+                        ),
+                        React.createElement(
+                            HiButton,
+                            {
+                                onClick: this.handleClickZoomOut,
+                                className: classes.zoomButton
+                            },
+                            '-'
+                        )
+                    )
+                )
+            );
+        } else {
+            element = React.createElement(
+                'div',
+                { style: { top: '50%', left: '50%', position: 'absolute' } },
+                _ref2
+            );
+        }
+
+        return React.createElement(
+            'div',
+            { style: { height: '352px', width: '100%', position: 'relative' } },
+            element
+        );
+    }
+}
+
+HiMap.defaultProps = {
+    translations: {
+        notFound: 'Address not found'
+    }
+};
+HiMap.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The address to see in the Map component.
+     */
+    address: PropTypes.string.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * Function to tell the parent composant that the address was not found by the API.
+     */
+    onAddressNotFound: PropTypes.func,
+    /**
+     * Traductions
+     */
+    translations: PropTypes.object
+} : {};
+
+export default withStyles(styles, { name: 'HmuiHiMap' })(HiMap);

package/es/HiMap/HiMapExpand.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ExpansionPanel, { ExpansionPanelSummary, ExpansionPanelDetails } from 'material-ui/ExpansionPanel';
+import Typography from 'material-ui/Typography';
+import { withStyles } from '../styles';
+import HiMap from '../HiMap';
+import HiIconBuilder from '../utils/HiIconBuilder';
+
+const styles = theme => ({
+    column: {
+        flexBasis: '33.33%'
+    },
+    root: {
+        flexGrow: 1,
+        boxShadow: 'none'
+    },
+    imgListItem: {
+        width: 24,
+        height: 'auto',
+        marginRight: 8,
+        verticalAlign: 'middle'
+    },
+    expandMoreIcon: {
+        margin: 0,
+        fontSize: 18,
+        width: 20
+    },
+    disabledIcon: {
+        color: theme.palette.action.disabled
+    },
+    panelSummaryExpanded: {
+        minHeight: 0
+    },
+    expandIconExpanded: {
+        transform: 'translateY(-50%) rotate(0)',
+        color: theme.palette.business.primary.light
+    },
+    panelSummary: {
+        '&>div:first-child': {
+            margin: '12px 0'
+        }
+    }
+});
+
+class HiMapExpand extends React.PureComponent {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            addressNotFound: false,
+            expanded: false
+        };
+        this.handleAddressNotFound = this.handleAddressNotFound.bind(this);
+        this.handleExpand = this.handleExpand.bind(this);
+    }
+
+    handleExpand() {
+        this.setState({ expanded: !this.state.addressNotFound && !this.state.expanded });
+    }
+
+    handleAddressNotFound() {
+        this.setState({ addressNotFound: true });
+    }
+
+    render() {
+        const { classes, address, countryFlagPath } = this.props;
+
+        const { addressNotFound, expanded } = this.state;
+
+        const flag = countryFlagPath ? React.createElement('img', { src: countryFlagPath, className: classes.imgListItem, alt: 'country flag' }) : '';
+
+        return React.createElement(
+            ExpansionPanel,
+            {
+                className: classes.root,
+                defaultExpanded: false,
+                expanded: expanded,
+                onChange: this.handleExpand
+            },
+            React.createElement(
+                ExpansionPanelSummary,
+                {
+                    classes: {
+                        root: classes.panelSummary,
+                        expanded: classes.panelSummaryExpanded,
+                        expandIconExpanded: classes.expandIconExpanded
+                    },
+                    expandIcon: React.createElement(HiIconBuilder, {
+                        icon: 'map_marker',
+                        style: { position: 'relative', top: 2, marginRight: 5 },
+                        className: classNames({
+                            root: classes.expandMoreIcon,
+                            [classes.disabledIcon]: addressNotFound
+                        })
+                    })
+                },
+                React.createElement(
+                    'div',
+                    { className: classes.column },
+                    React.createElement(
+                        Typography,
+                        { className: classes.heading },
+                        'Adresse'
+                    )
+                ),
+                React.createElement(
+                    'div',
+                    null,
+                    React.createElement(
+                        Typography,
+                        { className: classes.secondaryHeading },
+                        flag,
+                        address
+                    )
+                )
+            ),
+            React.createElement(
+                ExpansionPanelDetails,
+                { style: { padding: 0 } },
+                React.createElement(HiMap, { address: address, onAddressNotFound: this.handleAddressNotFound })
+            )
+        );
+    }
+}
+
+HiMapExpand.defaultProps = {
+    countryFlagPath: ''
+};
+HiMapExpand.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The address to see in the Map component.
+     */
+    address: PropTypes.string.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: PropTypes.object.isRequired,
+    /**
+     * The path to the country flag image.
+     */
+    countryFlagPath: PropTypes.string
+} : {};
+
+export default withStyles(styles, { name: 'HmuiHiMapExpand' })(HiMapExpand);

package/es/HiMap/index.js

@@ -0,0 +1,2 @@
+export { default } from './HiMap';
+export { default as HiMapExpand } from './HiMapExpand';

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