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

package/HiMap/HiMap.js

@@ -0,0 +1,367 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styles = require('../styles');
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+var _HiLoader = require('../HiLoader');
+
+var _HiLoader2 = _interopRequireDefault(_HiLoader);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// The original CSS can be found here : https://unpkg.com/leaflet@1.3.1/dist/leaflet.css
+var styles = exports.styles = function styles(theme) {
+    return {
+        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
+            }
+        }
+    };
+};
+
+var L = void 0,
+    Map = void 0,
+    TileLayer = void 0,
+    Marker = void 0,
+    Popup = void 0;
+
+var _ref = _react2.default.createElement(TileLayer, { url: 'https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png' });
+
+var _ref2 = _react2.default.createElement(_HiLoader2.default, { loading: true });
+
+var HiMap = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiMap, _React$PureComponent);
+
+    function HiMap(props) {
+        (0, _classCallCheck3.default)(this, HiMap);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiMap.__proto__ || (0, _getPrototypeOf2.default)(HiMap)).call(this, 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);
+        return _this;
+    }
+
+    // Loads the libraries once the component mounted to avoid error caused by server-cli rendering.
+
+
+    (0, _createClass3.default)(HiMap, [{
+        key: 'componentDidMount',
+        value: function 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.
+
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this.xhr.abort();
+        }
+    }, {
+        key: 'handleScrollZoom',
+        value: function handleScrollZoom(event) {
+            this.setState({ zoom: event.zoom });
+        }
+    }, {
+        key: 'handleClickZoomIn',
+        value: function handleClickZoomIn() {
+            this.setState(function (prevState) {
+                return { zoom: prevState.zoom + 1 };
+            });
+        }
+    }, {
+        key: 'handleClickZoomOut',
+        value: function handleClickZoomOut() {
+            this.setState(function (prevState) {
+                return { zoom: prevState.zoom - 1 };
+            });
+        }
+    }, {
+        key: 'handleCenter',
+        value: function handleCenter() {
+            // trick to center the map.
+            this.setState(function (prevState) {
+                return { lat: prevState.lat + 0.0000000001 };
+            });
+        }
+
+        // Call to the geocoding API.
+
+    }, {
+        key: 'findCoords',
+        value: function findCoords() {
+            var _this2 = this;
+
+            this.xhr = new XMLHttpRequest();
+            this.xhr.onreadystatechange = function () {
+                if (_this2.xhr.readyState === XMLHttpRequest.DONE && _this2.xhr.status === 200) {
+                    var response = JSON.parse(_this2.xhr.responseText);
+                    if (response.length === 0) {
+                        _this2.setState({ notFound: true });
+                        _this2.props.onAddressNotFound();
+                    } else {
+                        _this2.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();
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _state = this.state,
+                zoom = _state.zoom,
+                lng = _state.lng,
+                lat = _state.lat,
+                notFound = _state.notFound,
+                loaded = _state.loaded;
+            var _props = this.props,
+                translations = _props.translations,
+                classes = _props.classes;
+
+
+            var position = [lat, lng];
+
+            var element = void 0;
+
+            var myIcon = void 0;
+            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 = _react2.default.createElement(
+                    Map,
+                    {
+                        zoom: zoom,
+                        center: position,
+                        className: classes.map,
+                        onViewportChange: this.handleScrollZoom
+                    },
+                    _ref,
+                    _react2.default.createElement(Marker, { position: position, icon: myIcon }),
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.controlButtons },
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.centerButtonContainer },
+                            _react2.default.createElement(
+                                _HiButton2.default,
+                                { className: classes.centerButton, onClick: this.handleCenter },
+                                _react2.default.createElement(_HiIconBuilder2.default, {
+                                    className: classes.centerIcon,
+                                    icon: 'crosshairs_gps',
+                                    size: 24
+                                })
+                            )
+                        ),
+                        _react2.default.createElement(
+                            'div',
+                            { className: classes.zoomButtons },
+                            _react2.default.createElement(
+                                _HiButton2.default,
+                                {
+                                    onClick: this.handleClickZoomIn,
+                                    className: classes.zoomButton
+                                },
+                                '+'
+                            ),
+                            _react2.default.createElement(
+                                _HiButton2.default,
+                                {
+                                    onClick: this.handleClickZoomOut,
+                                    className: classes.zoomButton
+                                },
+                                '-'
+                            )
+                        )
+                    )
+                );
+            } else {
+                element = _react2.default.createElement(
+                    'div',
+                    { style: { top: '50%', left: '50%', position: 'absolute' } },
+                    _ref2
+                );
+            }
+
+            return _react2.default.createElement(
+                'div',
+                { style: { height: '352px', width: '100%', position: 'relative' } },
+                element
+            );
+        }
+    }]);
+    return HiMap;
+}(_react2.default.PureComponent);
+
+HiMap.defaultProps = {
+    translations: {
+        notFound: 'Address not found'
+    }
+};
+
+
+HiMap.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The address to see in the Map component.
+     */
+    address: _propTypes2.default.string.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * Function to tell the parent composant that the address was not found by the API.
+     */
+    onAddressNotFound: _propTypes2.default.func,
+    /**
+     * Traductions
+     */
+    translations: _propTypes2.default.object
+} : {};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiMap' })(HiMap);

package/HiMap/HiMapExpand.js

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _ExpansionPanel = require('material-ui/ExpansionPanel');
+
+var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
+
+var _Typography = require('material-ui/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _styles = require('../styles');
+
+var _HiMap = require('../HiMap');
+
+var _HiMap2 = _interopRequireDefault(_HiMap);
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(theme) {
+    return {
+        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'
+            }
+        }
+    };
+};
+
+var HiMapExpand = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiMapExpand, _React$PureComponent);
+
+    function HiMapExpand(props) {
+        (0, _classCallCheck3.default)(this, HiMapExpand);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiMapExpand.__proto__ || (0, _getPrototypeOf2.default)(HiMapExpand)).call(this, props));
+
+        _this.state = {
+            addressNotFound: false,
+            expanded: false
+        };
+        _this.handleAddressNotFound = _this.handleAddressNotFound.bind(_this);
+        _this.handleExpand = _this.handleExpand.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiMapExpand, [{
+        key: 'handleExpand',
+        value: function handleExpand() {
+            this.setState({ expanded: !this.state.addressNotFound && !this.state.expanded });
+        }
+    }, {
+        key: 'handleAddressNotFound',
+        value: function handleAddressNotFound() {
+            this.setState({ addressNotFound: true });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props,
+                classes = _props.classes,
+                address = _props.address,
+                countryFlagPath = _props.countryFlagPath;
+            var _state = this.state,
+                addressNotFound = _state.addressNotFound,
+                expanded = _state.expanded;
+
+
+            var flag = countryFlagPath ? _react2.default.createElement('img', { src: countryFlagPath, className: classes.imgListItem, alt: 'country flag' }) : '';
+
+            return _react2.default.createElement(
+                _ExpansionPanel2.default,
+                {
+                    className: classes.root,
+                    defaultExpanded: false,
+                    expanded: expanded,
+                    onChange: this.handleExpand
+                },
+                _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelSummary,
+                    {
+                        classes: {
+                            root: classes.panelSummary,
+                            expanded: classes.panelSummaryExpanded,
+                            expandIconExpanded: classes.expandIconExpanded
+                        },
+                        expandIcon: _react2.default.createElement(_HiIconBuilder2.default, {
+                            icon: 'map_marker',
+                            style: { position: 'relative', top: 2, marginRight: 5 },
+                            className: (0, _classnames2.default)((0, _defineProperty3.default)({
+                                root: classes.expandMoreIcon
+                            }, classes.disabledIcon, addressNotFound))
+                        })
+                    },
+                    _react2.default.createElement(
+                        'div',
+                        { className: classes.column },
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { className: classes.heading },
+                            'Adresse'
+                        )
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        null,
+                        _react2.default.createElement(
+                            _Typography2.default,
+                            { className: classes.secondaryHeading },
+                            flag,
+                            address
+                        )
+                    )
+                ),
+                _react2.default.createElement(
+                    _ExpansionPanel.ExpansionPanelDetails,
+                    { style: { padding: 0 } },
+                    _react2.default.createElement(_HiMap2.default, { address: address, onAddressNotFound: this.handleAddressNotFound })
+                )
+            );
+        }
+    }]);
+    return HiMapExpand;
+}(_react2.default.PureComponent);
+
+HiMapExpand.defaultProps = {
+    countryFlagPath: ''
+};
+
+
+HiMapExpand.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * The address to see in the Map component.
+     */
+    address: _propTypes2.default.string.isRequired,
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object.isRequired,
+    /**
+     * The path to the country flag image.
+     */
+    countryFlagPath: _propTypes2.default.string
+} : {};
+
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiMapExpand' })(HiMapExpand);

package/HiMap/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _HiMap = require('./HiMap');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiMap).default;
+  }
+});
+
+var _HiMapExpand = require('./HiMapExpand');
+
+Object.defineProperty(exports, 'HiMapExpand', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HiMapExpand).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }