@woosmap/ui 3.104.0 → 3.107.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.104.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() {

package/src/components/Panel/Panel.js

@@ -8,7 +8,7 @@ import withClickOutside from '../withClickOutside/withClickOutside';
 class Panel extends Component {
     constructor(props) {
         super(props);
-        this.state = { open: false };
+        this.state = { open: false, fakeValues: [] };
         this.clickOutsideRef = React.createRef();
     }
 
@@ -23,7 +23,25 @@ class Panel extends Component {
         this.close();
     };
 
+    setFakeValues = () => {
+        const { numberOfPlaceholderSections } = this.props;
+        this.setState({
+            fakeValues: Array(numberOfPlaceholderSections)
+                .fill(null)
+                .map((_, containerIndex) =>
+                    Array(2)
+                        .fill(null)
+                        .map((__, lineIndex) => ({
+                            width: Math.floor(Math.random() * (10 - 90) + 90),
+                            containerIndex,
+                            lineIndex,
+                        }))
+                ),
+        });
+    };
+
     open = () => {
+        this.setFakeValues();
         this.setState({ open: true });
     };
 
@@ -48,9 +66,30 @@ class Panel extends Component {
         }
     };
 
+    getPlaceholderSections = () => {
+        const { fakeValues } = this.state;
+        return (
+            <div className="panel__body__fake-content">
+                {fakeValues.map((section) => (
+                    <div className="panel__body__fake-content__section" key={`section-${section[0].containerIndex}`}>
+                        {section.map(({ width, containerIndex, lineIndex }) => (
+                            <div
+                                className="panel__fake-line"
+                                key={`section-${containerIndex}-${lineIndex}`}
+                                style={{ width: `${width}%` }}
+                            />
+                        ))}
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    getPlaceholderHeader = () => <span className="panel__header__fake-action" />;
+
     render() {
         const { open } = this.state;
-        const { children, position, header, disableCloseOutside, testId, ...rest } = this.props;
+        const { position, header, disableCloseOutside, loading, testId, children, ...rest } = this.props;
         return (
             <AnimatePresence>
                 {open && (
@@ -69,7 +108,10 @@ class Panel extends Component {
                         {...rest}
                     >
                         <div className="panel__header">
-                            {header && <div className="panel__header__content">{header}</div>}
+                            {loading
+                                ? this.getPlaceholderHeader()
+                                : header && <div className="panel__header__content">{header}</div>}
+
                             <div className="panel__header__action">
                                 <Button
                                     className={cl('panel__header__action__btn')}
@@ -80,7 +122,7 @@ class Panel extends Component {
                                 />
                             </div>
                         </div>
-                        <div className="panel__body">{children}</div>
+                        <div className="panel__body">{loading ? this.getPlaceholderSections() : children}</div>
                     </motion.div>
                 )}
             </AnimatePresence>
@@ -95,6 +137,8 @@ Panel.defaultProps = {
     header: null,
     disableCloseOutside: false,
     testId: 'panel',
+    loading: false,
+    numberOfPlaceholderSections: 6,
 };
 
 Panel.propTypes = {
@@ -105,6 +149,8 @@ Panel.propTypes = {
     children: PropTypes.node.isRequired,
     position: PropTypes.oneOf(['right', 'left']),
     header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    loading: PropTypes.bool,
+    numberOfPlaceholderSections: PropTypes.number,
 };
 
 export default withClickOutside(Panel, '.ignore-click-outside-panel');

package/src/components/Panel/Panel.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import Panel from './Panel';
 import Button from '../Button/Button';
 
@@ -10,11 +10,45 @@ const Story = {
 export default Story;
 
 const Template = () => {
-    const panelRef = React.createRef();
+    const [loading, setLoading] = useState(false);
+    const panelRef = useRef(null);
+    const loadingPanelRef = useRef(null);
+
+    const openLoadingPanel = () => {
+        setLoading(true);
+        loadingPanelRef.current.toggle();
+        setTimeout(() => setLoading(false), 3000);
+    };
+
+    const getHeader = () => <Button icon="settings" />;
+
     return (
         <div>
-            <Button onClick={() => panelRef.current.toggle()} label="Toggle panel" />
+            <div>
+                <Button onClick={() => panelRef.current.toggle()} label="Toggle panel" />
+            </div>
+            <div>
+                <Button onClick={openLoadingPanel} label="Toggle loading panel" />
+            </div>
             <Panel ref={panelRef}>My panel</Panel>
+            <Panel ref={loadingPanelRef} loading={loading} header={getHeader()}>
+                <div>
+                    <div>some info 1</div>
+                    <div>some sub info 1</div>
+                </div>
+                <div>
+                    <div>some info 2</div>
+                    <div>some sub info 2</div>
+                </div>
+                <div>
+                    <div>some info 3</div>
+                    <div>some sub info 3</div>
+                </div>
+                <div>
+                    <div>some info 3</div>
+                    <div>some sub info 3</div>
+                </div>
+            </Panel>
         </div>
     );
 };

package/src/components/Panel/Panel.styl

@@ -1,3 +1,8 @@
+@keyframes gradient
+	0%
+		background-position 80% 0%
+	100%
+		background-position -20% 0%
 .panel
 	position absolute
 	z-index 10
@@ -44,6 +49,13 @@
 			fullw()
 			display flex
 			align-items center
+		&__fake-action
+			sq()
+			br(50)
+			background $dark20
+			background linear-gradient(90deg, $dark20 20%, $dark30 30%, $dark20 40%)
+			background-size 400% 400%
+			animation gradient 1.4s ease-in-out infinite
 	&__body
 		fullh()
 		mbib(4)
@@ -88,6 +100,37 @@
 							top - .2rem
 							content "\2022"
 							color $secondary-medium60
+		&__fake-content
+			padding 2rem
+			width 100%
+			&__section
+				mbib(1)
+				width 100%
+				margin-bottom 4rem
+				&:first-child
+					.panel__fake-line
+						&:first-child
+							height 2rem
+							background $dark20
+							background linear-gradient(90deg, $dark20 20%, $dark30 30%, $dark20 40%)
+							background-size 400% 400%
+							animation gradient 1.4s ease-in-out infinite
+						&:last-child
+							height 1rem
+	&__fake-line
+		br(10)
+		background $dark6
+		background linear-gradient(90deg, $dark6 20%, $dark10 30%, $dark6 40%)
+		background-size 400% 400%
+		animation gradient 1.4s ease-in-out infinite
+		height 1rem
+		&:nth-child(even)
+			background $dark6
+			background linear-gradient(90deg, $dark10 20%, $dark20 30%, $dark10 40%)
+			background-size 400% 400%
+			animation gradient 1.4s ease-in-out infinite
+			height 1.2rem
+
 @media screen and (max-width 720px)
 	.panel
 		width 100%

package/src/components/Panel/Panel.test.js

@@ -35,3 +35,19 @@ it('is hidden after clicking close', () => {
         // nothink
     }
 });
+
+it('opens on placeholder if loading prop is passed down and with provided num of placeholder sections', () => {
+    const panelRef = React.createRef();
+    const { container } = render(
+        <Panel ref={panelRef} loading numberOfPlaceholderSections={4}>
+            content
+        </Panel>
+    );
+    act(() => {
+        panelRef.current.open();
+    });
+    expect(screen.queryByText('content')).not.toBeInTheDocument();
+    expect(container.querySelector('.panel__body__fake-content')).toBeInTheDocument();
+    expect(container.querySelectorAll('.panel__body__fake-content__section').length).toBe(4);
+    expect(container.querySelectorAll('.panel__fake-line').length).toBe(8);
+});