@hipay/hipay-material-ui 3.5.0 → 3.5.1

package/src/HiLoader/HiLoader.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import PropagateLoader from 'react-spinners/PropagateLoader';
-import { withStyles } from '@material-ui/core/styles';
-
-function HiLoader(props) {
-    const { className, color, size, theme, style } = props;
-
-    return (
-        <div
-            id="hi-loader"
-            className={className}
-            style={{ ...style, display: 'block', width: 1, height: 12 }}
-        >
-            <PropagateLoader size={size} color={theme.palette[color].main} />
-        </div>
-    );
-}
-
-HiLoader.propTypes = {
-    /**
-     * Surcharge les classes du composant
-     */
-    className: PropTypes.string,
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     */
-    color: PropTypes.oneOf(['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral']),
-    /**
-     * Size of component
-     */
-    size: PropTypes.number,
-    /**
-     * @ignore
-     */
-    theme: PropTypes.object.isRequired,
-};
-
-HiLoader.defaultProps = {
-    size: 12,
-    color: 'primary',
-};
-
-export default withStyles({}, { hiComponent: true, withTheme: true, name: 'HmuiHiLoader' })(
-    HiLoader,
-);

package/src/HiLoader/HiLoader.md

@@ -1,21 +0,0 @@
-HiLoader example:
-
-```js
-import React from 'react';
-import HiLoader from './HiLoader';
-
-function HiLoaders(props) {
-    return (
-        <div style={{marginLeft: 70}}>
-            <HiLoader style={{margin: 16}} />
-            <HiLoader style={{margin: 16}} color="secondary" />
-            <HiLoader style={{margin: 16}} color="positive" />
-            <HiLoader style={{margin: 16}} color="negative" />
-            <HiLoader style={{margin: 16}} color="middle" />
-            <HiLoader style={{margin: 16}} color="neutral" />
-            <HiLoader style={{margin: 16}} size={16} />
-        </div>
-    );
-}
-;<HiLoaders/>
-```

package/src/HiLoader/HiLoader.test.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createShallow } from '../test-utils';
-import HiLoader from './HiLoader';
-
-describe('<HiLoader />', () => {
-    let shallow;
-
-    before(() => {
-        shallow = createShallow({ dive: true });
-    });
-
-    it('renders a functional hour & minute ListPicker', () => {
-        const wrapper = shallow(<HiLoader loading />);
-
-        assert.strictEqual(wrapper.name(), 'div', 'should render a div');
-    });
-});

package/src/HiLoader/index.js

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

package/src/HiMap/HiMap.js

@@ -1,268 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import HiButton from '../HiButton';
-import HiIcon from '../HiIcon';
-import HiLoader from '../HiLoader';
-import L from 'leaflet';
-import { Map, TileLayer, Marker } from 'react-leaflet';
-
-const apiUrl = 'https://nominatim.openstreetmap.org/search?q=';
-
-// 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',
-        // eslint-disable-next-line max-len
-        '& .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.primary.light,
-        },
-    },
-    controlButtons: {
-        position: 'absolute',
-        bottom: 16,
-        right: 16,
-    },
-    centerIcon: {
-        fontSize: 14,
-    },
-    centerButtonContainer: {
-        backgroundColor: theme.palette.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}`,
-        },
-    },
-    centerButton: {
-        color: theme.palette.neutral.normal,
-        padding: '1px !important',
-        height: 26,
-        minHeight: 26,
-        width: 26,
-        minWidth: 26,
-    },
-    zoomButtons: {
-        backgroundColor: theme.palette.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,
-        },
-    },
-});
-
-
-class HiMap extends React.PureComponent {
-    static defaultProps = {
-        translations: {
-            notFound: 'Address not found',
-        },
-    };
-
-    mounted = false;
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            lat: 0,
-            lng: 0,
-            notFound: false,
-            loaded: false,
-            zoom: 16,
-        };
-
-        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.mounted = true;
-        this.findCoords();
-    }
-
-    componentWillUnmount() {
-        this.mounted = false;
-    }
-
-    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 () {
-        fetch(`${apiUrl}${this.props.address}&format=jsonv2&limit=5&bounded=1&dedupe=1&namedetails=1`)
-            .then(result => result.json())
-            .then(response => {
-                if (this.mounted) {
-                    if (response.length !== 0) {
-                        this.setState({
-                            lat: parseFloat(response[0].lat),
-                            lng: parseFloat(response[0].lon),
-                            notFound: false,
-                            loaded: true,
-                        });
-                    } else {
-                        this.setState({ notFound: true });
-                        this.props.onAddressNotFound();
-                    }
-                }
-            });
-    }
-
-    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;
-
-        if (loaded && L && Map) {
-            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 = (
-                <Map
-                    zoom={zoom}
-                    center={position}
-                    className={classes.map}
-                    onViewportChange={this.handleScrollZoom}
-                >
-                    <TileLayer url="http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png" />
-                    <Marker position={position} icon={myIcon} />
-                    <div className={classes.controlButtons}>
-                        <div className={classes.centerButtonContainer}>
-                            <HiButton className={classes.centerButton} onClick={this.handleCenter}>
-                                <HiIcon
-                                    className={classes.centerIcon}
-                                    icon={'my_location'}
-                                    size={24}
-                                />
-                            </HiButton>
-                        </div>
-                        <div className={classes.zoomButtons}>
-                            <HiButton
-                                onClick={this.handleClickZoomIn}
-                                className={classes.zoomButton}
-                            >
-                                +
-                            </HiButton>
-                            <HiButton
-                                onClick={this.handleClickZoomOut}
-                                className={classes.zoomButton}
-                            >
-                                -
-                            </HiButton>
-                        </div>
-                    </div>
-                </Map>
-            );
-        } else {
-            element = (
-                <div style={{ top: '50%', left: '50%', position: 'absolute' }}>
-                    <HiLoader loading />
-                </div>
-            );
-        }
-
-        return (
-            <div style={{ height: '352px', width: '100%', position: 'relative' }}>{element}</div>
-        );
-    }
-}
-
-HiMap.propTypes = {
-    /**
-     * 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/src/HiMap/HiMap.md

@@ -1,31 +0,0 @@
-HiMap example:
-
-```js
-import React from 'react';
-import HiMap from './HiMap';
-import HiMapExpand from './HiMapExpand';
-
-const HiMaps = () => (
-    <div style={{width: '100%'}}>
-        <HiMap address={'94 Rue de Villiers, 92300 Levallois-Perret'} />
-        <HiMapExpand
-            address={'21 rue de Cornulier, 44000 Nantes'}
-            countryFlagPath={'/static/hmu/images/countries/fr.svg'}
-        />
-        <HiMapExpand
-            address={'21 rue de Cornulier, 44000 Nantes'}
-            countryFlagPath={'/static/hmu/images/countries/fr.svg'}
-            hideLabel={true}
-        />
-        <HiMapExpand
-            address={'xx totototo'}
-            countryFlagPath={'/static/hmu/images/countries/fr.svg'}
-            translations={{
-                label: 'Address',
-                notFound: 'Address not found',
-            }}
-        />
-    </div>
-)
-;<HiMaps/>
-```

package/src/HiMap/HiMap.test.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import { createMount } from '../test-utils';
-import HiMap from './HiMap';
-
-require('isomorphic-fetch'); // pour la méthode fetch()
-
-describe('<HiMap />', () => {
-    let mount;
-
-    before(() => {
-        global.HTMLImageElement = () => {};
-        global.HTMLVideoElement = () => {};
-        mount = createMount();
-    });
-
-    after(() => {
-        mount.cleanUp();
-    });
-
-    it('renders a HiMap', () => {
-        const wrapper = mount(<HiMap address={'21 rue de Cornulier, 44000 Nantes'} />, {
-            lifecycleExperimental: true,
-        });
-        assert.strictEqual(wrapper.find(HiMap).length, 1, 'render HiMap');
-    });
-});

package/src/HiMap/HiMapExpand.js

@@ -1,178 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import { withStyles } from '@material-ui/core/styles';
-import HiMap from './HiMap';
-import HiIcon from '../HiIcon/HiIcon';
-
-const styles = theme => ({
-    column: {
-        flexBasis: '33.33%',
-    },
-    root: {
-        flexGrow: 1,
-        boxShadow: 'none',
-    },
-    imgListItem: {
-        width: 24,
-        height: 'auto',
-        marginRight: 8,
-        verticalAlign: 'middle',
-    },
-    expandMoreIcon: {},
-    disabledIcon: {
-        color: theme.palette.action.disabled,
-    },
-    panelSummaryExpanded: {
-        minHeight: 0,
-    },
-    panelSummary: {
-        '&>div:first-child': {
-            margin: '12px 0',
-        },
-    },
-    expanded: {
-        '& $expandMoreIcon': {
-            transform: 'translateY(-50%) rotate(0) !important',
-            color: theme.palette.primary.light,
-        },
-        minHeight: '0 !important',
-    },
-    heading: {
-        ...theme.typography.b1,
-        margin: 0,
-        fontSize: 15,
-        lineHeight: '24px',
-    },
-    secondaryHeading: {
-        ...theme.typography.b3,
-        margin: 0,
-        fontSize: 15,
-        lineHeight: '24px',
-        float: 'left',
-        '&>svg': {
-            fontSize: 18,
-            marginLeft: 3,
-            marginBottom: -5,
-        },
-    },
-});
-
-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(prevState => ({ expanded: !prevState.addressNotFound && !prevState.expanded }));
-    }
-
-    handleAddressNotFound() {
-        this.setState({ addressNotFound: true });
-    }
-
-    render() {
-        const { classes, address, countryFlagPath, hideLabel, translations } = this.props;
-
-        const { addressNotFound, expanded } = this.state;
-
-        const flag = countryFlagPath ? (
-            <img src={countryFlagPath} className={classes.imgListItem} alt={'country flag'} />
-        ) : (
-            ''
-        );
-
-        return (
-            <ExpansionPanel
-                className={classes.root}
-                defaultExpanded={false}
-                expanded={expanded}
-                onChange={this.handleExpand}
-            >
-                <ExpansionPanelSummary
-                    classes={{
-                        root: classes.panelSummary,
-                        expanded: classes.expanded,
-                        expandIcon: classes.expandMoreIcon,
-                    }}
-                    expandIcon={
-                        <HiIcon
-                            icon={'place'}
-                            style={{ position: 'relative', top: 2, marginRight: 5 }}
-                            className={classNames({
-                                [classes.disabledIcon]: addressNotFound,
-                            })}
-                            title={addressNotFound ? translations.notFound : ''}
-                        />
-                    }
-                >
-                    <React.Fragment>
-                        {hideLabel || (
-                            <div className={classes.column}>
-                                <p className={classes.secondaryHeading}>
-                                    {translations.label}
-                                </p>
-                            </div>
-                        )}
-                        <div>
-                            <p className={classes.heading}>
-                                {flag}
-                                {address}
-                            </p>
-                        </div>
-                    </React.Fragment>
-                </ExpansionPanelSummary>
-                <ExpansionPanelDetails style={{ padding: 0 }}>
-                    <HiMap
-                        address={address}
-                        onAddressNotFound={this.handleAddressNotFound}
-                    />
-                </ExpansionPanelDetails>
-            </ExpansionPanel>
-        );
-    }
-}
-
-HiMapExpand.propTypes = {
-    /**
-     * 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,
-    /**
-     * Don't display label
-     */
-    hideLabel: PropTypes.bool,
-    /**
-     * Translations object, see used keys in defaultProps
-     */
-    translations: PropTypes.object,
-};
-
-HiMapExpand.defaultProps = {
-    countryFlagPath: '',
-    hideLabel: false,
-    translations: {
-        label: 'Adresse',
-        notFound: 'Adresse inconnue',
-    },
-};
-
-export default withStyles(styles, { name: 'HmuiHiMapExpand' })(HiMapExpand);

package/src/HiMap/HiMapExpand.test.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { assert } from 'chai';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import { createShallow } from '../test-utils';
-import HiMap from './HiMap';
-import HiMapExpand from './HiMapExpand';
-
-describe('<HiMapExpand />', async () => {
-    let shallow;
-    const flagPath = '/static/images/countries/fr.svg';
-
-    before(() => {
-        global.HTMLImageElement = () => {};
-        global.HTMLVideoElement = () => {};
-        shallow = createShallow({ dive: true });
-    });
-
-    it('renders an ExpansionPanel containing a HiMap', () => {
-        const wrapper = shallow(<HiMapExpand address={'21 rue de Cornulier 44000 Nantes'} />);
-        assert.strictEqual(wrapper.type(), ExpansionPanel, 'should render an ExpansionPanel');
-        assert.strictEqual(wrapper.find(HiMap).length, 1, 'should contain a HiMap');
-    });
-
-    it('should show an image of the flag and the address', () => {
-        const address = '21 Rue de Cornulier, 44000 Nantes';
-        const wrapper = shallow(
-            <HiMapExpand address={address} countryFlagPath={flagPath} />,
-        );
-        assert.strictEqual(
-            wrapper
-                .find(ExpansionPanelSummary)
-                .find('div')
-                .at(1)
-                .find('p')
-                .render()
-                .text(),
-            address,
-            'should show the address passed in props',
-        );
-        assert.strictEqual(
-            wrapper
-                .find(ExpansionPanelSummary)
-                .find('div')
-                .at(1)
-                .find('img').length,
-            1,
-            'should render an img with the flag',
-        );
-    });
-});

package/src/HiMap/index.js

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