@woosmap/ui 3.106.0 → 3.107.0

package/package.json

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

package/src/components/Demo/DistanceDemo.js

@@ -37,6 +37,12 @@ const units = [
     { value: 'metric', label: 'Metric' },
     { value: 'imperial', label: 'Imperial' },
 ];
+
+const methods = [
+    { value: 'distance', label: 'Shortest' },
+    { value: 'time', label: 'Fastest' },
+];
+
 export default class DistanceDemo extends Component {
     constructor(props) {
         super(props);
@@ -60,6 +66,7 @@ export default class DistanceDemo extends Component {
             originLocation: this.defaultOrigin.location,
             destinationLocation: this.defaultDestination.location,
             unit: units[0],
+            method: methods[0],
             travelMode: travelModes[0],
             language: (defaultLang || languages[1]).value,
             alternatives: false,
@@ -161,12 +168,14 @@ export default class DistanceDemo extends Component {
             })
             .catch((error) => {
                 const errorResult = error?.data?.error_message ?? 'Unhandled error';
-                this.setState({ error: errorResult });
+                if (this.mounted) {
+                    this.setState({ error: errorResult });
+                }
             });
     };
 
     getRequestparams = () => {
-        const { language, originLocation, destinationLocation, unit, travelMode, alternatives } = this.state;
+        const { language, originLocation, destinationLocation, unit, method, travelMode, alternatives } = this.state;
 
         return {
             key: Constants.woosmapKey,
@@ -174,6 +183,7 @@ export default class DistanceDemo extends Component {
             destination: `${destinationLocation.lat},${destinationLocation.lng}`,
             language,
             units: unit.value,
+            method: method.value,
             mode: travelMode.value,
             alternatives,
         };
@@ -264,7 +274,7 @@ export default class DistanceDemo extends Component {
     };
 
     renderFooterFilters = () => {
-        const { unit, travelMode, language, alternatives } = this.state;
+        const { unit, method, travelMode, language, alternatives } = this.state;
 
         const filterTravelMode = {
             key: 'travelmode',
@@ -304,7 +314,26 @@ export default class DistanceDemo extends Component {
             ),
         };
 
+        const filterMethod = {
+            key: 'method',
+            component: (
+                <ButtonGroup isLight>
+                    {methods.map((item) => (
+                        <Button
+                            type="group"
+                            size="small"
+                            key={item.value}
+                            label={item.label}
+                            active={item === method}
+                            onClick={() => this.setState({ method: item }, this.requestDistance)}
+                        />
+                    ))}
+                </ButtonGroup>
+            ),
+        };
+
         const filterLanguage = {
+            key: 'language',
             label: tr('Language'),
             component: (
                 <ButtonGroup className="language" isLight>
@@ -326,6 +355,7 @@ export default class DistanceDemo extends Component {
         };
 
         const filterAlternatives = {
+            key: 'alternatives',
             label: '',
             component: (
                 <Input
@@ -339,7 +369,7 @@ export default class DistanceDemo extends Component {
             ),
         };
 
-        return [filterAlternatives, filterTravelMode, filterUnit, filterLanguage];
+        return [filterAlternatives, filterTravelMode, filterMethod, filterLanguage, filterUnit];
     };
 
     render() {

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

@@ -23,6 +23,13 @@ it('test metrics button', () => {
     expect(screen.getByText('units=imperial&\\')).toBeVisible();
 });
 
+it('test method button', () => {
+    render(<DistanceDemo />);
+    expect(screen.getByText('method=distance&\\')).toBeVisible();
+    fireEvent.click(screen.getByLabelText('Fastest'));
+    expect(screen.getByText('method=time&\\')).toBeVisible();
+});
+
 it('test language button', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('language=gb&\\')).toBeVisible();
@@ -33,11 +40,11 @@ it('test language button', () => {
 it('test alternative route checkbox', () => {
     render(<DistanceDemo />);
     expect(screen.getByText('alternatives=false"')).toBeVisible();
-    // eslint-disable-next-line prefer-destructuring
-    const checkbox = screen.getByText('Alternative routes').parentElement.querySelectorAll('input')[0];
+    const [checkbox] = screen.getByText('Alternative routes').parentElement.querySelectorAll('input');
     fireEvent.click(checkbox);
     expect(screen.getByText('alternatives=true"')).toBeVisible();
 });
+
 it('catches 200 with error', async () => {
     const backup = axios.create;
     axios.create = () => ({

package/src/components/Demo/SkeletonDemo.js

@@ -147,16 +147,12 @@ export default class SkeletonDemo extends Component {
         if (!footerFilters || footerFilters.length === 0) {
             return null;
         }
-        return (
-            <>
-                {footerFilters.map((filter) => (
-                    <div className="demo__input-container" key={filter.label || filter.key}>
-                        {filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
-                        {filter.component}
-                    </div>
-                ))}
-            </>
-        );
+        return footerFilters.map((filter) => (
+            <div className="demo__input-container" key={filter.label || filter.key}>
+                {filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
+                {filter.component}
+            </div>
+        ));
     };
 
     render() {