@woosmap/ui 4.116.0 → 4.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.116.0",
+  "version": "4.117.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Demo/LocalitiesDemo.js

@@ -4,10 +4,10 @@ import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Demo from './SkeletonDemo';
-import Input from '../Input/Input';
 import Select from '../Select/Select';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
+import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
 import CountrySelect, { countriesOptions } from '../Select/CountrySelect';
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
@@ -50,9 +50,9 @@ export default class LocalitiesDemo extends Component {
             localities: null,
             selectedLocality: null,
             error: null,
-            input: 'Milan',
             localitiesTypes: [],
             countries: [],
+            showDetails: false,
             language: (defaultLang || languages[1]).value,
         };
         this.types = types.map((item) => ({
@@ -64,7 +64,9 @@ export default class LocalitiesDemo extends Component {
         this.marker = null;
         this.viewport = null;
         this.requestUrl = 'https://api.woosmap.com/localities/autocomplete/';
+        this.requestUrlDetail = 'https://api.woosmap.com/localities/details/';
         this.demoRef = React.createRef();
+        this.inputRef = React.createRef();
         this.overlay = null;
     }
 
@@ -76,50 +78,44 @@ export default class LocalitiesDemo extends Component {
         this.mounted = false;
     }
 
-    requestLocalities = () => {
-        axios
-            .get(this.requestUrl, {
-                params: this.getRequestparams(),
-            })
-            .then((response) => {
-                if (this.mounted) {
-                    const selectedLocality = response.data.localities.length > 0 ? response.data.localities[0] : null;
-                    this.setState(
-                        {
-                            localities: response.data,
-                            error: null,
-                        },
-                        () => this.selectLocality(selectedLocality)
-                    );
-                }
-            })
-            .catch((error) => {
-                const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
-                this.setState({ error: errorResult });
-            });
-    };
+    typesContainsAddress = (localitiesTypes) => localitiesTypes.find((item) => item.value === 'address');
 
     getRequestparams = () => {
-        const { input, language, localitiesTypes, countries } = this.state;
-        return {
-            key: Constants.woosmapKey,
-            input,
-            language,
-            types: localitiesTypes.map((item) => item.value).join('|'),
-            components: countries.map((item) => `country:${item.value}`).join('|'),
-        };
+        const { selectedLocality, language } = this.state;
+        return { public_id: selectedLocality?.public_id, key: Constants.woosmapKey, language };
     };
 
-    typesContainsAddress = (localitiesTypes) => localitiesTypes.find((item) => item.value === 'address');
-
     selectLocality = (locality) => {
-        this.setState({ selectedLocality: locality }, this.displayOnMap);
+        this.setState({ selectedLocality: locality }, () => {
+            if (locality) {
+                axios
+                    .get(this.requestUrlDetail, {
+                        params: this.getRequestparams(),
+                    })
+                    .then((response) => {
+                        if (this.mounted) {
+                            this.setState(
+                                {
+                                    selectedLocality: response.data.result,
+                                    showDetails: true,
+                                    localities: response.data,
+                                },
+                                this.displayOnMap
+                            );
+                        }
+                    })
+                    .catch((error) => {
+                        const errorResult = (error && error.response && error.response.data) || 'Unhandled error';
+                        this.setState({ error: errorResult });
+                    });
+            }
+        });
     };
 
     displayOnMap = () => {
         const { selectedLocality } = this.state;
 
-        if (this.map && selectedLocality?.location) {
+        if (this.map && selectedLocality?.geometry?.location) {
             if (this.marker) {
                 this.marker.setMap(null);
                 this.marker = null;
@@ -132,18 +128,27 @@ export default class LocalitiesDemo extends Component {
 
             this.marker = new window.woosmap.map.Marker({
                 icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
-                position: selectedLocality.location,
+                position: selectedLocality.geometry.location,
                 map: this.map,
             });
 
-            if (selectedLocality.viewpoint) {
-                this.overlay = new WoosmapMapBoundingBox(selectedLocality.viewpoint.bounds);
+            if (selectedLocality.geometry.viewport) {
+                const vp = selectedLocality.geometry.viewport;
+                const bounds = {
+                    north: vp.northeast.lat,
+                    south: vp.southwest.lat,
+                    east: vp.northeast.lng,
+                    west: vp.southwest.lng,
+                };
+                this.overlay = new WoosmapMapBoundingBox(bounds);
                 this.overlay.setMap(this.map);
 
-                this.map.fitBounds(selectedLocality.viewpoint.bounds, { top: 70, bottom: 70, left: 70, right: 70 });
+                this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
             } else {
-                this.map.setCenter(selectedLocality.location);
-                this.map.setZoom(10);
+                this.map.setCenter(selectedLocality.geometry.location);
+                if (selectedLocality.type === 'address') {
+                    this.map.setZoom(10);
+                }
             }
         }
     };
@@ -168,28 +173,75 @@ export default class LocalitiesDemo extends Component {
         return <div dangerouslySetInnerHTML={{ __html: description }} />;
     };
 
-    renderAutocompleteList = () => {
-        const { localities } = this.state;
-        if (!localities || localities.localities.length === 0) {
+    renderResult = () => {
+        const { selectedLocality } = this.state;
+        if (!selectedLocality) {
             return <div className="demo__empty">{tr('No locality found')}</div>;
         }
-        const result = localities.localities.map((locality) => {
-            const { selectedLocality } = this.state;
-            return (
-                <li key={locality.public_id}>
-                    <button
-                        type="button"
-                        className={cl('btn', 'btn--link', {
-                            selected: selectedLocality === locality,
-                        })}
-                        onClick={() => this.selectLocality(locality)}
-                    >
-                        {this.getHighlightedLocalityDesc(locality)}
-                    </button>
-                </li>
-            );
-        });
-        return <ul>{result}</ul>;
+
+        return (
+            <>
+                {selectedLocality.public_id && (
+                    <p className="demo--localities__result-line">
+                        <span className="demo--localities__result-line__type">Public id:</span>
+                        <span className="demo--localities__result-line__info">{selectedLocality.public_id}</span>
+                    </p>
+                )}
+                {selectedLocality.formatted_address && (
+                    <p className="demo--localities__result-line">
+                        <span className="demo--localities__result-line__type">Description:</span>
+                        <span className="demo--localities__result-line__info">
+                            {selectedLocality.formatted_address}
+                        </span>
+                    </p>
+                )}
+                {selectedLocality.types && selectedLocality.types[0] && (
+                    <p className="demo--localities__result-line">
+                        <span className="demo--localities__result-line__type">Type:</span>
+                        <span className="demo--localities__result-line__info">
+                            {selectedLocality.types[0].replace('_', ' ')}
+                        </span>
+                    </p>
+                )}
+                {selectedLocality.geometry?.accuracy && (
+                    <p className="demo--localities__result-line">
+                        <span className="demo--localities__result-line__type">Location type:</span>
+                        <span className="demo--localities__result-line__info">
+                            {selectedLocality.geometry?.accuracy.replace('_', ' ').toLowerCase()}
+                        </span>
+                    </p>
+                )}
+                {selectedLocality.geometry?.location && (
+                    <p className="demo--localities__result-line two-lines">
+                        <div className="two-lines--line">
+                            <span className="demo--localities__result-line__type">Latitude:</span>
+                            <span className="demo--localities__result-line__info">
+                                {selectedLocality.geometry.location.lat.toString()}
+                            </span>
+                        </div>
+                        <div className="two-lines--line">
+                            <span className="demo--localities__result-line__type">Longitude:</span>
+                            <span className="demo--localities__result-line__info">
+                                {selectedLocality.geometry.location.lng.toString()}
+                            </span>
+                        </div>
+                    </p>
+                )}
+                {selectedLocality.address_components && (
+                    <div className="demo--localities__result-section">
+                        <div className="demo--localities__result">Address components</div>
+                        {selectedLocality.address_components.map((comp) => (
+                            <div className="demo--localities__result-line">
+                                <span className="demo--localities__result-line__type">{comp.types[0]}:</span>
+                                <span className="demo--localities__result-line__info">
+                                    {Array.isArray(comp.long_name) ? comp.long_name.join(', ') : comp.long_name}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </>
+        );
     };
 
     displayMap = () => {
@@ -200,26 +252,32 @@ export default class LocalitiesDemo extends Component {
         if (window.woosmap && window.woosmap.map && this.demoRef.current) {
             window.woosmap.map.config.setApiKey(Constants.woosmapKey);
             this.map = createWoosmapMap(this.demoRef.current.getMap());
-            this.requestLocalities();
         } else {
             this.timeoutMap = setTimeout(this.displayMap, 300);
         }
     };
 
     renderHeaderFilters = () => {
-        const { input } = this.state;
         const { usecaseFilter } = this.props;
+        const { language, localitiesTypes, countries } = this.state;
         const inputFilter = {
             label: tr('Type in '),
             component: (
-                <Input
-                    value={input}
-                    autocomplete={false}
-                    placeholder={tr('Type a locality name...')}
-                    onChange={(e) => this.setState({ input: e.target.value }, this.requestLocalities)}
+                <LocalitiesAutocomplete
+                    ref={this.inputRef}
+                    woosmapKey={Constants.woosmapKey}
+                    inputChangeCb={() => this.setState({ showDetails: false })}
+                    placeholder={tr('Type in a locality name...')}
+                    defaultLocality={this.defaultOrigin}
+                    language={language}
+                    responseCb={(localities) => this.setState({ localities })}
+                    components={countries.map((item) => `country:${item.value}`).join('|')}
+                    types={localitiesTypes.map((item) => item.value).join('|')}
+                    callback={this.selectLocality}
                 />
             ),
         };
+
         return [usecaseFilter, inputFilter];
     };
 
@@ -237,27 +295,24 @@ export default class LocalitiesDemo extends Component {
             label: tr('Filter by'),
             component: (
                 <>
-                    <CountrySelect
-                        isMulti
-                        placeholder={tr('Country')}
-                        filter={['fr', 'gb', 'sp', 'it', 'de', 'nl']}
-                        onChange={(items) => this.setState({ countries: items }, this.requestLocalities)}
-                        value={countries}
-                    />
                     <Select
-                        placeholder={tr('Point of interest')}
+                        placeholder={tr('Type of location')}
                         options={this.types}
                         isMulti
                         onChange={(items) =>
-                            this.setState(
-                                {
-                                    localitiesTypes: items,
-                                    countries: this.typesContainsAddress(items) ? defaultCountry : countries,
-                                },
-                                this.requestLocalities
-                            )
+                            this.setState({
+                                localitiesTypes: items,
+                                countries: this.typesContainsAddress(items) ? defaultCountry : countries,
+                            })
                         }
                     />
+                    <CountrySelect
+                        isMulti
+                        placeholder={tr('Country')}
+                        filter={['fr', 'gb', 'sp', 'it', 'de', 'nl']}
+                        onChange={(items) => this.setState({ countries: items })}
+                        value={countries}
+                    />
                 </>
             ),
         };
@@ -272,7 +327,7 @@ export default class LocalitiesDemo extends Component {
                             key={item.value}
                             active={language === item.value}
                             onClick={() => {
-                                this.setState({ language: item.value }, this.requestLocalities);
+                                this.setState({ language: item.value });
                             }}
                         >
                             <span className={cl('flag', `flag-${item.value}`)} title={item.label} />
@@ -285,7 +340,7 @@ export default class LocalitiesDemo extends Component {
     };
 
     render() {
-        const { localities, error } = this.state;
+        const { localities, error, showDetails } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
         return (
             <Demo
@@ -296,12 +351,12 @@ export default class LocalitiesDemo extends Component {
                 className="demo--localities"
                 footerFilters={this.renderFooterFilters()}
                 headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
+                request={showDetails ? this.requestUrlDetail : this.requestUrl}
                 noheader={noheader}
-                params={this.getRequestparams()}
+                params={showDetails ? this.getRequestparams() : this.inputRef?.current?.getAutocompleteRequestparams()}
                 referer="http://localhost/"
                 response={error || localities}
-                result={this.renderAutocompleteList()}
+                result={this.renderResult()}
                 withMap
                 ref={this.demoRef}
             />

package/src/components/Demo/skeletondemo.styl

@@ -293,25 +293,57 @@
                     max-height 49rem
                 .demo--localities--fr &
                     max-height 33rem
+    &--localities--uk
+    &--localities--fr
     &--address
     &--localitiesaddress
         &__formcontainer
+            mbib(1.4)
             position relative
-            
-    &--address
-        &__formcontainer
             .input
                 &__label
+                    font-weight 600
                     margin-bottom .4rem
                 &__line
                     margin-bottom 1rem
-    &--localities--uk
-    &--localities--fr
-        &__formcontainer
-            mbib(1.6)
-            position relative
-            .input__label
-                font-weight 600
+    &--search
+        .demo__results__content
+            li
+                list-style disc inside
+    &--localities
+        .demo
+            &__results__content
+                padding 0
+            &__empty
+                padding $demoPadding
+        &__result-line
+            padding 1.4rem $demoPadding 0 $demoPadding
+            display flex
+            align-items center
+            flex-shrink 0
+            flex-wrap wrap
+            &:not(.two-lines)
+                mbi(.6)
+            &__type
+                white-space nowrap
+            &__info
+                font-weight 700
+            &.two-lines
+                .two-lines--line
+                    mbi(.6)
+        &__result
+            margin-bottom 1rem
+            color $dark50
+            font-size 1rem
+            text-transform uppercase
+            letter-spacing .1rem
+            &-section
+                margin-top $demoPadding
+                padding $demoPadding
+                background-color $dark2
+                .demo--localities__result-line
+                    padding 0
+                    margin-bottom .6rem
     .overlay
         position absolute
         top 0

package/src/components/Woosmap/LocalitiesAutocomplete.js

@@ -16,6 +16,7 @@ export default class LocalitiesAutocomplete extends Component {
                   }
                 : null,
             menuIsOpen: false,
+            input: '',
         };
         this.apiUrl = 'https://api.woosmap.com/localities/autocomplete';
     }
@@ -27,6 +28,33 @@ export default class LocalitiesAutocomplete extends Component {
         };
     };
 
+    getAutocompleteRequestparams = () => {
+        const { language, components, types } = this.props;
+        const { input } = this.state;
+        const { woosmapKey } = this.props;
+        const inputValue = input;
+        const params = {
+            key: woosmapKey,
+            input: inputValue,
+            language,
+        };
+        if (components) {
+            params.components = components;
+        }
+        if (types) {
+            params.types = types;
+        }
+        return params;
+    };
+
+    onInputChange = (value) => {
+        const { inputChangeCb } = this.props;
+
+        if (inputChangeCb) {
+            inputChangeCb(value);
+        }
+    };
+
     onChange = (selected) => {
         const { callback } = this.props;
         const { localities } = this.state;
@@ -47,36 +75,30 @@ export default class LocalitiesAutocomplete extends Component {
     };
 
     loadLocalities = (newValue, callback) => {
-        this.setState({ menuIsOpen: true });
-        const { language, components, types } = this.props;
-        const { woosmapKey } = this.props;
-        const inputValue = newValue;
-        const params = {
-            key: woosmapKey,
-            input: inputValue,
-            language,
+        const xhr = () => {
+            const params = this.getAutocompleteRequestparams(newValue);
+            axios
+                .get(this.apiUrl, {
+                    params,
+                })
+                .then((response) => {
+                    const result = response.data.localities.map((item) => ({
+                        value: item.public_id,
+                        label: item.description,
+                    }));
+                    this.setState({ localities: response.data.localities }, () => {
+                        const { responseCb } = this.props;
+                        if (responseCb) {
+                            responseCb(response.data.localities);
+                        }
+                    });
+                    callback(result);
+                })
+                .catch(() => {
+                    // do nothing
+                });
         };
-        if (components) {
-            params.components = components;
-        }
-        if (types) {
-            params.types = types;
-        }
-        axios
-            .get(this.apiUrl, {
-                params,
-            })
-            .then((response) => {
-                const result = response.data.localities.map((item) => ({
-                    value: item.public_id,
-                    label: item.description,
-                }));
-                this.setState({ localities: response.data.localities });
-                callback(result);
-            })
-            .catch(() => {
-                // do nothing
-            });
+        this.setState({ menuIsOpen: true, input: newValue }, xhr);
     };
 
     render() {
@@ -89,6 +111,7 @@ export default class LocalitiesAutocomplete extends Component {
                 isClearable
                 loadOptions={this.loadLocalities}
                 onChange={this.onChange}
+                onInputChange={this.onInputChange}
                 placeholder={placeholder}
                 onBlur={() => this.setState({ menuIsOpen: false })}
                 menuIsOpen={menuIsOpen}
@@ -105,6 +128,8 @@ LocalitiesAutocomplete.defaultProps = {
     components: null,
     types: null,
     inputRef: null,
+    inputChangeCb: null,
+    responseCb: null,
 };
 LocalitiesAutocomplete.propTypes = {
     woosmapKey: PropTypes.string.isRequired,
@@ -115,4 +140,6 @@ LocalitiesAutocomplete.propTypes = {
     language: PropTypes.string,
     callback: PropTypes.func.isRequired,
     defaultLocality: PropTypes.object,
+    inputChangeCb: PropTypes.func,
+    responseCb: PropTypes.func,
 };

package/src/components/Demo/LocalitiesDemo.test.js

@@ -1,70 +0,0 @@
-/* eslint-disable prefer-destructuring */
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import LocalitiesDemo from './LocalitiesDemo';
-
-it('renders a LocalitiesDemo', () => {
-    const { container } = render(<LocalitiesDemo />);
-    expect(container.firstChild).toHaveClass('demo');
-});
-
-it('test Type in', () => {
-    const { container } = render(<LocalitiesDemo />);
-    const input = container.querySelectorAll('input')[0];
-    fireEvent.focus(input);
-    fireEvent.change(input, { target: { value: 'Paris' } });
-    expect(screen.getByText('input=Paris&\\')).toBeVisible();
-});
-
-it('test Filter by', () => {
-    const { container } = render(<LocalitiesDemo />);
-    const input = container.querySelectorAll('input')[1];
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.click(screen.getByText('France'));
-    expect(screen.getByText('components=country:fr"')).toBeVisible();
-});
-
-it('test language button', () => {
-    render(<LocalitiesDemo />);
-    expect(screen.getByText('language=gb&\\')).toBeVisible();
-    fireEvent.click(screen.getByTitle('Italian'));
-    expect(screen.getByText('language=it&\\')).toBeVisible();
-});
-
-it('test point of interest list', () => {
-    const { container } = render(<LocalitiesDemo />);
-    const input = container.querySelectorAll('input')[2];
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.click(screen.getByText('Airports'));
-    expect(screen.getByText('types=airport&\\')).toBeVisible();
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.click(screen.getByText('Postal codes'));
-    expect(screen.getByText('types=airport|postal_code&\\')).toBeVisible();
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.click(screen.getByText('Address'));
-    expect(screen.getByText('types=airport|postal_code|address&\\')).toBeVisible();
-});
-
-it('test locality not found', () => {
-    const { container } = render(<LocalitiesDemo />);
-    const input = container.querySelectorAll('input')[0];
-    fireEvent.focus(input);
-    fireEvent.change(input, { target: { value: 'kjiuhlihijo' } });
-    expect(screen.getByText('input=kjiuhlihijo&\\')).toBeVisible();
-    expect(screen.getByText('No locality found')).toBeVisible();
-});
-it('test type address selected then only all countries to be selected by default', () => {
-    const { container } = render(<LocalitiesDemo />);
-    const input = container.querySelectorAll('input')[2];
-    fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
-    fireEvent.click(screen.getByText('Address'));
-    expect(screen.getByText('types=address&\\')).toBeVisible();
-    expect(screen.getByText('components=country:fr|country:de|country:it|country:nl|country:gb"')).toBeVisible();
-});