@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.4

package/es/HiForm/HiUploadField.js

@@ -1,368 +0,0 @@
-import _extends from 'babel-runtime/helpers/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import withStyles from '../styles/withStyles';
-import HiIconBuilder from '../utils/HiIconBuilder';
-
-export const styles = theme => ({
-    root: _extends({
-        position: 'relative'
-    }, theme.typography.body1, {
-        borderBottom: `1px solid ${theme.palette.input.bottomLine}`,
-        paddingLeft: 8,
-        backgroundColor: theme.palette.local.background2,
-        height: 40,
-        display: 'inline-flex',
-        justifyContent: 'flex-start',
-        '&$focused, &$dragOver': {
-            backgroundColor: theme.palette.global.background1
-        },
-        width: '100%',
-        // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-        '&:not($error)': {
-            marginTop: 1
-        }
-    }),
-    underline: {
-        '&:before': {
-            left: 0,
-            bottom: 0,
-            // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-            content: '""',
-            height: 1,
-            position: 'absolute',
-            right: 0,
-            transition: theme.transitions.create('background-color', {
-                duration: theme.transitions.duration.shorter,
-                easing: theme.transitions.easing.ease
-            }),
-            pointerEvents: 'none' // Transparent to the hover style.
-        },
-        '&:hover:not($disabled):before': {
-            backgroundColor: theme.palette.input.bottomLine,
-            height: 2
-        },
-        '&$disabled:before': {
-            background: 'transparent',
-            backgroundImage: `linear-gradient(to right, ${theme.palette.input.bottomLine} 33%, transparent 0%)`,
-            backgroundPosition: 'left top',
-            backgroundRepeat: 'repeat-x',
-            backgroundSize: '5px 1px'
-        }
-    },
-    inkbar: {
-        '&:not($disabled)': {
-            '&:not($error):after': {
-                backgroundColor: theme.palette.business.primary.normal,
-                left: 0,
-                bottom: 0,
-                // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-                content: '""',
-                height: 1,
-                position: 'absolute',
-                right: 0,
-                transform: 'scaleX(0)',
-                transition: theme.transitions.create('transform', {
-                    duration: theme.transitions.duration.shorter,
-                    easing: theme.transitions.easing.easeOut
-                }),
-                pointerEvents: 'none' // Transparent to the hover style.
-            },
-            '&:hover:after': {
-                transform: 'scaleX(1)'
-            },
-            '&$dragOver:after': {
-                transform: 'scaleX(1)'
-            },
-            '&$focused:after': {
-                transform: 'scaleX(1)'
-            },
-            '&$error': {
-                borderBottom: `1px solid ${theme.palette.negative.normal}`
-            }
-        }
-    },
-    disabled: {
-        color: `${theme.palette.action.disabled}`,
-        '&:before': {
-            display: 'none'
-        }
-    },
-    focused: {
-        backgroundColor: theme.palette.background3
-    },
-    error: {},
-    label: _extends({}, theme.typography.body1, {
-        fontWeight: theme.typography.fontWeightRegular,
-        caretColor: theme.palette.business.primary.normal,
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        padding: `${theme.spacing.unit - 2}px 0 ${theme.spacing.unit - 1}px`,
-        height: 39,
-        display: 'inline-flex',
-        width: '100%',
-        '&$empty': {
-            opacity: 0.42
-        }
-    }),
-    empty: {},
-    dragOver: {},
-    droppable: {},
-    endAdornment: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    icon: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        right: 0,
-        padding: '8px',
-        color: `${theme.palette.text.icon}`,
-        transition: theme.transitions.create(['opacity', 'transform'], {
-            duration: theme.transitions.duration.shorter
-        }),
-        '&:hover': {
-            color: 'inherit'
-        }
-    }
-});
-
-class HiUploadField extends React.PureComponent {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            errorMessage: '',
-            dragOver: false,
-            droppable: false
-        };
-        this.uploadFieldRef;
-        this.handleChange = this.handleChange.bind(this);
-        this.handleClear = this.handleClear.bind(this);
-        this.handleSeeFile = this.handleSeeFile.bind(this);
-        this.handleDrop = this.handleDrop.bind(this);
-        this.handleDragEnter = this.handleDragEnter.bind(this);
-        this.handleDragLeave = this.handleDragLeave.bind(this);
-    }
-
-    // When component mounts, we add eventListeners to handle the file drag and drop
-    componentDidMount() {
-        this.uploadFieldRef.addEventListener('dragenter', this.handleDragEnter, false);
-        this.uploadFieldRef.addEventListener('dragleave', this.handleDragLeave, false);
-        this.uploadFieldRef.addEventListener('dragover', event => {
-            event.preventDefault();
-        }, false);
-        this.uploadFieldRef.addEventListener('drop', this.handleDrop, false);
-    }
-
-    componentWillUnmount() {
-        this.uploadFieldRef.removeEventListener('dragenter', this.handleDragEnter, false);
-        this.uploadFieldRef.removeEventListener('dragleave', this.handleDragLeave, false);
-        this.uploadFieldRef.removeEventListener('dragover', event => {
-            event.preventDefault();
-        }, false);
-        this.uploadFieldRef.removeEventListener('drop', this.handleDrop, false);
-    }
-
-    // Action when files are dropped on the field
-    handleDrop(event) {
-        if (event.target === this.uploadFieldRef) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.state.droppable) {
-                const param = this.handleFile(event.dataTransfer.files);
-                this.setState({ dragOver: false });
-                this.props.onChange(param, this.props.index);
-            } else {
-                this.setState({
-                    errorMessage: this.props.translations.errorDropMultiple,
-                    error: false,
-                    dragOver: false
-                });
-            }
-        }
-    }
-
-    // Action when files are dragged over the field.
-    handleDragEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.target === this.uploadFieldRef) {
-            if (event.dataTransfer.items.length !== 1) {
-                event.dataTransfer.dropEffect = 'none';
-                this.props.onChange({
-                    errorMessage: this.props.translations.errorDragEnter,
-                    error: true,
-                    value: null
-                }, this.props.index);
-                this.setState({ dragOver: true });
-            } else {
-                this.setState({ droppable: true, dragOver: true });
-            }
-        }
-    }
-
-    // Action when files are not dragged over the field anymore.
-    handleDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (event.target === this.uploadFieldRef && event.relatedTarget.parentElement !== this.uploadFieldRef) {
-            this.props.onChange({ errorMessage: '', error: false, value: null }, this.props.index);
-            this.setState({ droppable: false, dragOver: false });
-        }
-    }
-
-    handleChange(event) {
-        const param = this.handleFile(event.target.files);
-        this.props.onChange(param, this.props.index);
-    }
-
-    handleClear() {
-        this.props.onClear(this.props.index);
-    }
-
-    handleSeeFile() {
-        this.props.onSeeFile(this.props.value);
-    }
-
-    // Handles the file wether it is selected via the input or dropped on it.
-    handleFile(files) {
-        let error = false;
-        let errorMessage = '';
-        let file = null;
-        if (files.length === 1) {
-            file = files[0];
-            errorMessage = '';
-            if (file.size > this.props.maxSize) {
-                errorMessage += this.props.translations.errorSize.replace('maxSize', this.props.maxSize / 1000000);
-                error = true;
-            }
-            if (this.props.acceptedTypes.length !== 0 && this.props.acceptedTypes.indexOf(file.type) === -1) {
-                errorMessage += this.props.translations.errorType;
-                error = true;
-            }
-        } else {
-            errorMessage = this.props.translations.errorDropMultiple;
-        }
-        return { errorMessage, error, value: file };
-    }
-
-    render() {
-        const { placeholder, classes, disabled, focused, value, error } = this.props;
-
-        const { dragOver, errorMessage, droppable } = this.state;
-
-        // On utilise classNames pour variabiliser les styles et merger les classes appliquées
-        const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
-            [classes.disabled]: disabled,
-            [classes.focused]: focused,
-            [classes.error]: error && !focused,
-            [classes.dragOver]: dragOver,
-            [classes.droppable]: droppable
-        });
-
-        return React.createElement(
-            'div',
-            { className: rootClass },
-            React.createElement(
-                'label',
-                {
-                    className: classNames(classes.label, { [classes.empty]: value === null }),
-                    ref: label => this.uploadFieldRef = label
-                },
-                value ? value.name : error && errorMessage || placeholder,
-                React.createElement('input', { type: 'file', hidden: true, onChange: this.handleChange })
-            ),
-            value === null || React.createElement(
-                'div',
-                { className: classes.endAdornment },
-                React.createElement(HiIconBuilder, {
-                    icon: 'eye',
-                    size: 36,
-                    className: classes.icon,
-                    onClick: this.handleSeeFile
-                }),
-                React.createElement(HiIconBuilder, {
-                    icon: 'delete',
-                    size: 36,
-                    className: classes.icon,
-                    onClick: this.handleClear
-                })
-            )
-        );
-    }
-}
-
-HiUploadField.defaultProps = {
-    placeholder: 'Choose a file',
-    disabled: false,
-    focused: false,
-    acceptedTypes: [],
-    maxSize: 10000000,
-    error: false,
-    value: null,
-    translations: {
-        errorSize: "Votre fichier est trop lourd. Nous acceptons jusqu'à maxSizeMo",
-        errorDropMultiple: 'Veuillez insérer un et un seul fichier',
-        errorType: "Ce type de fichier n'est pas accepté",
-        errorDragEnter: 'Contenu non correct'
-    }
-};
-HiUploadField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Defines what kind of file types the input accepts. If empty, no restrictions about the file type.
-     */
-    acceptedTypes: PropTypes.array,
-    /**
-     * Useful to extend the style applied to components.
-     */
-    classes: PropTypes.object,
-    /**
-     * Is the field disabled.
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Is there an error with the file selected.
-     */
-    error: PropTypes.bool,
-    /**
-     * Is the field focused.
-     */
-    focused: PropTypes.bool,
-    /**
-     * The index of the input.
-     */
-    index: PropTypes.number,
-    /**
-     * Defines what size the file must not exceed (in bytes).
-     */
-    maxSize: PropTypes.number,
-    /**
-     * The change handler.
-     */
-    onChange: PropTypes.func,
-    /**
-     * The handler to clear the field.
-     */
-    onClear: PropTypes.func,
-    /**
-     * The handler to see the file.
-     */
-    onSeeFile: PropTypes.func,
-    /**
-     * The placeholder for the field.
-     */
-    placeholder: PropTypes.string,
-    /**
-     * The translations of the error messages.
-     */
-    translations: PropTypes.object,
-    /**
-     * The file value for the field.
-     */
-    value: PropTypes.object
-} : {};
-export default withStyles(styles, { name: 'HmuiHiUploadField' })(HiUploadField);

package/es/HiMap/HiMap.js

@@ -1,285 +0,0 @@
-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);