@woosmap/ui 3.106.0 → 3.109.0

package/package.json

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

package/src/components/Card/SimpleCard.js

@@ -7,8 +7,19 @@ import { tr } from '../utils/locale';
 
 class SimpleCard extends Component {
     render() {
-        const { title, subtitle, className, testId, children, isSelected, isActive, isDisabled, isFavorite, ...rest } =
-            this.props;
+        const {
+            title,
+            subtitle,
+            className,
+            testId,
+            children,
+            isSelected,
+            isActive,
+            isDisabled,
+            isFavorite,
+            isInline,
+            ...rest
+        } = this.props;
         return (
             <div
                 className={cl(
@@ -16,6 +27,7 @@ class SimpleCard extends Component {
                     { active: isActive },
                     { disabled: isDisabled },
                     { 'simplecard--selected': isSelected },
+                    { inline: isInline },
                     className
                 )}
                 data-testid={testId}
@@ -59,6 +71,7 @@ SimpleCard.defaultProps = {
     isActive: false,
     isDisabled: false,
     isFavorite: false,
+    isInline: false,
 };
 
 SimpleCard.propTypes = {
@@ -71,6 +84,7 @@ SimpleCard.propTypes = {
     className: PropTypes.string,
     testId: PropTypes.string,
     isFavorite: PropTypes.bool,
+    isInline: PropTypes.bool,
 };
 
 export default SimpleCard;

package/src/components/Card/SimpleCard.styl

@@ -7,6 +7,9 @@
 	padding 1.6rem
 	border .1rem solid $secondary20
 	cursor pointer
+	&.inline
+		flex-direction row
+		align-items center
 	&:hover
 		box-shadow 0 0 .6rem $secondary20
 		border .1rem solid $secondary60
@@ -29,9 +32,18 @@
 	&__title
 		font-weight 600
 		margin-bottom .2rem
+		.inline &
+			ellipsis()
+			order 1
+			margin-right 1.2rem
+			margin-bottom 0
 	&__subtitle
 		font-size $fontSizeSmall
 		color $secondary60
+		.inline &
+			order 3
+			margin-left auto
+			white-space nowrap
 	&__content
 		margin-top auto
 		padding-top 1rem
@@ -43,6 +55,14 @@
 		right 1rem
 		top 1.3rem
 		fill $favorite
+		.inline &
+			sq(1.8)
+			position unset
+			top unset
+			right unset
+			order 2
+			flex-shrink 0
+			margin-right 1.2rem
 	.tooltip
 		position relative
 		$mr = -.2rem

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() {