@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/HiLoader/HiLoader.js

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,18 @@
+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

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

package/src/HiMap/HiMap.js

@@ -0,0 +1,268 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,178 @@
+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

@@ -0,0 +1,51 @@
+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

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