normalise imports and sync components

eea · Nov 3, 2021 · ce3dc70 · ce3dc70
1 parent 5417a84
commit ce3dc70
Show file tree

Hide file tree

Showing 53 changed files with 1,711 additions and 841 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -8,7 +8,7 @@ import {
   GET_CHART_DATA_FROM_VISUALIZATION,
   GET_NAVSITEMAP,
   SET_CURRENT_VERSION,
-} from '@eeacms/volto-forests-theme/constants/ActionTypes';
+} from "@eeacms/volto-forests-theme/constants/ActionTypes";
 
 export function setCurrentVersion(payload) {
   return {
@@ -21,7 +21,7 @@ export function getFrontpageSlides() {
   return {
     type: GET_FRONTPAGESLIDES,
     request: {
-      op: 'get',
+      op: "get",
       path: `/frontpage_slides?fullobjects`,
     },
   };
@@ -31,7 +31,7 @@ export function getDefaultHeaderImage() {
   return {
     type: GET_DEFAULT_HEADER_IMAGE,
     request: {
-      op: 'get',
+      op: "get",
       path: `/default_header_image?fullobjects`,
     },
   };
@@ -41,7 +41,7 @@ export function getLocalnavigation(folder) {
   return {
     type: GET_LOCALNAVIGATION,
     request: {
-      op: 'get',
+      op: "get",
       path: `${folder}/@localnavigation`,
     },
   };
@@ -75,7 +75,7 @@ export function getParentFolderData(url) {
   return {
     type: GET_PARENT_FOLDER_DATA,
     request: {
-      op: 'get',
+      op: "get",
       path: `/${url}?fullobjects`,
     },
   };
@@ -95,7 +95,7 @@ export function getChartDataFromVisualization(path) {
   return {
     type: GET_CHART_DATA_FROM_VISUALIZATION,
     request: {
-      op: 'get',
+      op: "get",
       path,
     },
   };
@@ -106,7 +106,7 @@ export function getNavSiteMap(url, depth) {
   return {
     type: GET_NAVSITEMAP,
     request: {
-      op: 'get',
+      op: "get",
       path: `${url}/@navigation?expand.navigation.depth=${depth || 3}`,
     },
   };

diff --git a/src/components/index.js b/src/components/index.js
@@ -8,4 +8,4 @@
  *   Footer,
  * };
  */
-export CountryView from './theme/CountryView/CountryView';
+export CountryView from "@eeacms/volto-forests-theme/components/theme/CountryView/CountryView";
diff --git a/src/components/manage/Blocks/NavigationBlock/Edit.jsx b/src/components/manage/Blocks/NavigationBlock/Edit.jsx
@@ -16,6 +16,10 @@ const getSchema = (props) => {
       title: 'Classname',
       type: 'text',
     },
+    fixedTabs: {
+      title: 'Fixed navigation',
+      type: 'boolean',
+    },
     navFromParent: {
       title: 'Show navigation from parent',
       type: 'boolean',

diff --git a/src/components/manage/Blocks/NavigationBlock/View.jsx b/src/components/manage/Blocks/NavigationBlock/View.jsx
@@ -13,6 +13,11 @@ import {
   setQueryParam,
 } from '@eeacms/volto-datablocks/actions';
 import { useEffect } from 'react';
+import './styles.css';
+import cookie from 'react-cookie';
+import { Icon } from '@plone/volto/components';
+import downIcon from '@plone/volto/icons/down-key.svg';
+import closeIcon from '@plone/volto/icons/clear.svg';
 
 const View = ({ content, ...props }) => {
   const { data } = props;
@@ -21,12 +26,16 @@ const View = ({ content, ...props }) => {
   });
   const [navigationItems, setNavigationItems] = useState([]);
   const [pages, setPages] = useState([]);
+  const [isMobile, setIsMobile] = useState(false);
+  const [expand, setExpand] = useState(false);
+
+  const isLoggedIn = cookie.load('auth_token');
+
   const parent =
     data?.navFromParent?.value && props.properties?.parent
       ? getBasePath(props.properties?.parent?.['@id'])
       : data.parent?.value;
   const history = useHistory();
-
   useEffect(() => {
     const pagesProperties = data.pages?.value
       ? data.pages?.value?.properties || {}
@@ -35,12 +44,41 @@ const View = ({ content, ...props }) => {
       Object.keys(pagesProperties).map((page) => pagesProperties[page]) || [];
     setPages(newPages);
     setNavigationItems([...(props.navigation?.items || []), ...newPages]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    const width = window && window.innerWidth ? window.innerWidth : '';
+    if (width && width <= 600) {
+      setIsMobile(true);
+    }
+    if (width && width > 600) {
+      setIsMobile(false);
+    }
   }, [props.navigation, data.pages?.value]);
 
+  const isFixed = props.fixedTabs;
+
+  const getActiveItemName = () => {
+    const activeItem = navigationItems.filter(
+      (i) => getBasePath(i.url) === props.pathname,
+    );
+    const name = activeItem && activeItem[0] ? activeItem[0].title : '';
+
+    return name;
+  };
+
+  const handleNavigate = (url) => {
+    setExpand(false);
+    if (props.mode !== 'edit' && url !== history.location.pathname) {
+      history.push(`${url}${props.query}`);
+    }
+  };
+
   if (navigationItems.length < 2 && props.mode !== 'edit') return null;
   return (props.navigation?.items?.length && parent) || pages.length ? (
-    <div className="tabs-view-menu">
+    <div
+      className={`tabs-view-menu modern-tabs ${isFixed ? '' : 'sticky-tabs'} ${
+        !isFixed && isLoggedIn ? 'mobile-authenticated-sticky' : ''
+      }`}
+    >
       <Menu
         widths={
           navigationItems.length ||
@@ -51,51 +89,133 @@ const View = ({ content, ...props }) => {
           props.data.className?.value ? props.data.className.value : ''
         }
       >
-        {navigationItems.map((item, index) => {
-          const url = getBasePath(item.url);
-          const name = item.title;
-          if (
-            props.navigation?.items?.filter(
-              (navItem) => navItem.title === item.title,
-            ).length
-          ) {
-            if (isActive(url, props.pathname) && url !== state.activeItem) {
-              setState({
-                ...state,
-                activeItem: url,
-              });
-            } else if (
-              !isActive(url, props.pathname) &&
-              url === state.activeItem
+        {isMobile ? (
+          <React.Fragment>
+            {expand ? (
+              <div style={{ position: 'relative' }}>
+                {navigationItems.map((item, index) => {
+                  const url = getBasePath(item.url);
+                  const name = item.title;
+                  if (
+                    props.navigation?.items?.filter(
+                      (navItem) => navItem.title === item.title,
+                    ).length
+                  ) {
+                    if (
+                      isActive(url, props.pathname) &&
+                      url !== state.activeItem
+                    ) {
+                      setState({
+                        ...state,
+                        activeItem: url,
+                      });
+                    } else if (
+                      !isActive(url, props.pathname) &&
+                      url === state.activeItem
+                    ) {
+                      setState({
+                        ...state,
+                        activeItem: '',
+                      });
+                    }
+                  }
+
+                  return (
+                    <div style={{ position: 'relative' }}>
+                      <Menu.Item
+                        className={cx(
+                          index > 0 ? 'sibling-on-left' : '',
+                          index < navigationItems.length - 1
+                            ? 'sibling-on-right'
+                            : '',
+                          'nav-tab-item',
+                        )}
+                        name={name}
+                        key={url}
+                        active={
+                          state.activeItem
+                            ? state.activeItem === url
+                            : !url
+                            ? isActive(url, props.pathname)
+                            : false
+                        }
+                        onClick={() => handleNavigate(url)}
+                      ></Menu.Item>
+                      {isActive(url, props.pathname) && (
+                        <Icon
+                          className="mobile-nav-icon"
+                          name={closeIcon}
+                          size="30px"
+                          onClick={() => setExpand(false)}
+                        />
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div style={{ position: 'relative' }}>
+                <Menu.Item
+                  className={'nav-tab-item active-nav-tab'}
+                  name={getActiveItemName()}
+                  active={true}
+                  onClick={() => setExpand(true)}
+                />
+                <Icon
+                  className="mobile-nav-icon"
+                  name={downIcon}
+                  size="35px"
+                  onClick={() => setExpand(true)}
+                />
+              </div>
+            )}
+          </React.Fragment>
+        ) : (
+          navigationItems.map((item, index) => {
+            const url = getBasePath(item.url);
+            const name = item.title;
+            if (
+              props.navigation?.items?.filter(
+                (navItem) => navItem.title === item.title,
+              ).length
             ) {
-              setState({
-                ...state,
-                activeItem: '',
-              });
+              if (isActive(url, props.pathname) && url !== state.activeItem) {
+                setState({
+                  ...state,
+                  activeItem: url,
+                });
+              } else if (
+                !isActive(url, props.pathname) &&
+                url === state.activeItem
+              ) {
+                setState({
+                  ...state,
+                  activeItem: '',
+                });
+              }
             }
-          }
 
-          return (
-            <Menu.Item
-              className={cx(
-                index > 0 ? 'sibling-on-left' : '',
-                index < navigationItems.length - 1 ? 'sibling-on-right' : '',
-              )}
-              name={name}
-              key={url}
-              active={
-                state.activeItem
-                  ? state.activeItem === url
-                  : !url
-                  ? isActive(url, props.pathname)
-                  : false
-              }
-              onClick={() => {
-                history.push(`${url}${props.query}`);
-              }}
-            />
-          );
-        })}
+            return (
+              <Menu.Item
+                className={cx(
+                  index > 0 ? 'sibling-on-left' : '',
+                  index < navigationItems.length - 1 ? 'sibling-on-right' : '',
+                  'nav-tab-item',
+                )}
+                name={name}
+                key={url}
+                active={
+                  state.activeItem
+                    ? state.activeItem === url
+                    : !url
+                    ? isActive(url, props.pathname)
+                    : false
+                }
+                onClick={() => handleNavigate(url)}
+              />
+            );
+          })
+        )}
       </Menu>
     </div>
   ) : props.mode === 'edit' ? (
@@ -118,6 +238,7 @@ export default compose(
       discodata_resources: state.discodata_resources,
       navItems: state.navigation?.items,
       flags: state.flags,
+      fixedTabs: props.data?.fixedTabs?.value,
       navigation: props.properties?.parent
         ? getNavigationByParent(
             state.navigation?.items,

diff --git a/src/components/manage/Blocks/NavigationBlock/helpers.js b/src/components/manage/Blocks/NavigationBlock/helpers.js
@@ -1,9 +1,5 @@
-/* PLUGINS */
 import { isMatch } from 'lodash';
-/* ROOT */
-import config from '@plone/volto/registry';
-/* PLONE VOLTO */
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
 
 export const isActive = (url, pathname) => {
   return (
@@ -83,10 +79,5 @@ export function removeValue(arr) {
 }
 
 export function getBasePath(url) {
-  return (
-    url &&
-    getBaseUrl(url)
-      .replace(config.settings.apiPath, '')
-      .replace(config.settings.internalApiPath, '')
-  );
+  return url && flattenToAppURL(getBaseUrl(url));
 }