@scality/core-ui 0.115.0

package/src/lib/components/tabsv2/Tabsv2.component.tsx

@@ -0,0 +1,247 @@
+// @ts-nocheck
+import React, { createContext, useEffect, useState, useCallback } from 'react';
+import { Element, ChildrenArray } from 'react';
+import {
+  TabBar,
+  ScrollableContainer,
+  TabContent,
+  TabItem,
+  TabsContainer,
+  TabsScroller,
+} from './StyledTabs';
+import {
+  useHistory,
+  useLocation,
+  useRouteMatch,
+  matchPath,
+  Route,
+} from 'react-router-dom';
+import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
+import { ScrollButton } from './ScrollButton';
+import { Tab } from './Tab';
+import { TabProps, Query } from './Tab';
+import { useScrollingTabs } from './useScrollingTabs';
+import { ButtonIcon } from '../buttonv2/Buttonv2.component';
+import styled from 'styled-components';
+
+type TabsProps = {
+  activeTabColor?: string;
+  activeTabSeparator?: string;
+  tabLineColor?: string;
+  inactiveTabColor?: string;
+  tabContentColor?: string;
+  separatorColor?: string;
+  tabHoverColor?: string;
+  children: ChildrenArray<Element<typeof Tab>>;
+  className?: string;
+};
+export const TabsContext = createContext<boolean>(false);
+
+const TabIcon = styled(ButtonIcon)`
+  color: ${(props) => props.theme.textSecondary};
+`;
+
+function Tabs({
+  activeTabColor,
+  activeTabSeparator,
+  tabLineColor,
+  inactiveTabColor,
+  tabContentColor,
+  separatorColor,
+  tabHoverColor,
+  children,
+  className,
+  ...rest
+}: TabsProps) {
+  const location = useLocation();
+  const history = useHistory();
+  const { url } = useRouteMatch();
+  const [selectedTabIndex, setSelectedTabIndex] = useState<
+    number | null | undefined
+  >(null);
+  const queryURL = new URLSearchParams(location.search);
+  const filteredTabsChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Tab,
+  );
+
+  const matchQuery = useCallback(
+    (query: Query): boolean => {
+      for (const key of Object.keys(query)) {
+        // To support the case of {tab:null}
+        if (queryURL.get(key) === null && !query[key]) {
+          return true;
+        }
+
+        if (!(queryURL.has(key) && queryURL.get(key) === query[key]))
+          return false;
+      }
+
+      return true;
+    },
+    [queryURL],
+  );
+
+  const serialize = (query?: Query): string => {
+    if (!query) {
+      return '';
+    } else {
+      const o = Object.fromEntries(
+        Object.entries(query).filter(([_, v]) => v != null),
+      );
+      //$FlowFixMe
+      return '?' + new URLSearchParams(o).toString();
+    }
+  };
+
+  const getPushHistoryPath = (path: string, query?: Query): string => {
+    if (path.startsWith('/')) {
+      return `${path}${serialize(query)}`;
+    }
+    return `${url}/${path}${serialize(query)}`;
+  };
+
+  useEffect(() => {
+    let hasSelectedTab = false;
+    filteredTabsChildren.forEach((child, index) => {
+      const isSelected =
+        !!matchPath(location.pathname, {
+          path: child.props.path.startsWith('/')
+            ? child.props.path
+            : url + '/' + child.props.path,
+          exact: child.props.exact,
+          strict: child.props.strict,
+          sensitive: child.props.sensitive,
+        }) && (child.props.query ? matchQuery(child.props.query) : true);
+
+      if (isSelected) {
+        setSelectedTabIndex(index);
+        hasSelectedTab = true;
+      }
+    });
+    if (!hasSelectedTab) setSelectedTabIndex(null);
+  }, [location.pathname, filteredTabsChildren, matchQuery]);
+  const {
+    scrollButtonEndRef,
+    scrollButtonStartRef,
+    tabsListRef,
+    tabsRef,
+    handleStartScrollClick,
+    handleEndScrollClick,
+    handleTabsScroll,
+    handleKeyDown,
+    displayScroll,
+  } = useScrollingTabs(selectedTabIndex);
+  const tabItems = filteredTabsChildren.map((child, index) => {
+    const {
+      path,
+      query,
+      label,
+      textBadge,
+      children,
+      icon,
+      ...childRest
+    }: TabProps = child.props;
+    const isSelected = selectedTabIndex === index;
+    return (
+      <TabItem
+        className={`sc-tabs-item ${isSelected ? 'selected' : ''}`}
+        key={index}
+        role="tab"
+        onClick={() => history.push(getPushHistoryPath(path, query))}
+        selected={isSelected}
+        tabHoverColor={tabHoverColor}
+        inactiveTabColor={inactiveTabColor}
+        activeTabColor={activeTabColor}
+        activeTabSeparator={activeTabSeparator}
+        tabIndex={isSelected ? 0 : -1}
+        onKeyDown={(event) => {
+          if (
+            event.key === ' ' ||
+            event.key === 'Enter' ||
+            event.key === 'Spacebar'
+          ) {
+            event.preventDefault();
+            history.push(getPushHistoryPath(path, query));
+          }
+        }}
+        {...childRest}
+      >
+        {icon && <TabIcon label={label}>{icon}</TabIcon>}
+        {isSelected ? (
+          <BasicText className="sc-tabs-item-title">{label}</BasicText>
+        ) : (
+          <SecondaryText className="sc-tabs-item-title">{label}</SecondaryText>
+        )}
+        {textBadge && (
+          <EmphaseText className="sc-tabs-item-icon">{textBadge}</EmphaseText>
+        )}
+      </TabItem>
+    );
+  });
+  return (
+    <TabsContext.Provider value={true}>
+      <TabsContainer
+        className={['sc-tabs', className].join(' ')}
+        tabLineColor={tabLineColor}
+        separatorColor={separatorColor}
+        {...rest}
+      >
+        <ScrollableContainer>
+          {displayScroll.start && (
+            <ScrollButton
+              ref={scrollButtonStartRef}
+              direction="left"
+              onClick={handleStartScrollClick}
+            />
+          )}
+          <TabsScroller ref={tabsRef} onScroll={handleTabsScroll}>
+            <TabBar
+              onKeyDown={handleKeyDown}
+              ref={tabsListRef}
+              className="sc-tabs-bar"
+              role="tablist"
+            >
+              {tabItems}
+            </TabBar>
+          </TabsScroller>
+          {displayScroll.end && (
+            <ScrollButton
+              ref={scrollButtonEndRef}
+              direction="right"
+              onClick={handleEndScrollClick}
+            />
+          )}
+        </ScrollableContainer>
+        <TabContent
+          className="sc-tabs-item-content"
+          tabContentColor={tabContentColor}
+        >
+          {filteredTabsChildren.map((tab: Element<typeof Tab>, index) => (
+            <Route
+              exact={tab.props.exact}
+              sensitive={tab.props.sensitive}
+              strict={tab.props.strict}
+              key={index}
+              path={
+                tab.props.path.startsWith('/')
+                  ? tab.props.path
+                  : url + '/' + tab.props.path
+              }
+            >
+              {!tab.props.query ||
+              (tab.props.query && matchQuery(tab.props.query)) ? (
+                tab.props.children
+              ) : (
+                <></>
+              )}
+            </Route>
+          ))}
+        </TabContent>
+      </TabsContainer>
+    </TabsContext.Provider>
+  );
+}
+
+Tabs.Tab = Tab;
+// re-export Tab
+export { Tabs, Tab };

package/src/lib/components/tabsv2/useScrollingTabs.ts

@@ -0,0 +1,335 @@
+/*
+The Tabs component uses a lot of the code from Material-UI Scrollable Tabs to have the same behavior as it.
+Here is the license of material-ui:
+
+The MIT License (MIT)
+
+Copyright (c) 2014 Call-Em-All
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+function easeInOutSin(time: number): number {
+  return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;
+}
+
+function animate(property: string, element: any, to: number): () => void {
+  const duration = 1000; // standard
+
+  let start: number | null = null;
+  const from = element[property];
+  let cancelled = false;
+
+  const cancel = () => {
+    cancelled = true;
+  };
+
+  const step = (timestamp: number) => {
+    if (cancelled) {
+      return;
+    }
+
+    if (start === null) {
+      start = timestamp;
+    }
+
+    const time = Math.min(1, (timestamp - start) / duration);
+    element[property] = easeInOutSin(time) * (to - from) + from;
+
+    if (time >= 1) {
+      return;
+    }
+
+    requestAnimationFrame(step);
+  };
+
+  if (from === to) {
+    return cancel;
+  }
+
+  requestAnimationFrame(step);
+  return cancel;
+}
+
+const nextItem = (
+  list: Element,
+  item: Element | null | undefined,
+): Node | null | undefined => {
+  if (list === item) {
+    return list.firstChild;
+  }
+
+  if (item && item.nextElementSibling) {
+    return item.nextElementSibling;
+  }
+
+  return list.firstChild;
+};
+
+const previousItem = (
+  list: Element,
+  item: Element | null | undefined,
+): Node | null | undefined => {
+  if (list === item) {
+    return list.lastChild;
+  }
+
+  if (item && item.previousElementSibling) {
+    return item.previousElementSibling;
+  }
+
+  return list.lastChild;
+};
+
+const moveFocus = (
+  list: Element,
+  currentFocus: Element | null | undefined,
+  traversalFunction: (
+    arg0: Element,
+    arg1: Element | null | undefined,
+  ) => Node | null | undefined,
+) => {
+  let wrappedOnce = false;
+  let nextFocus = traversalFunction(list, currentFocus) as any;
+
+  while (nextFocus) {
+    // Prevent infinite loop.
+    if (nextFocus === list.firstChild) {
+      if (wrappedOnce) {
+        return;
+      }
+
+      wrappedOnce = true;
+    }
+
+    if (!nextFocus.hasAttribute('tabindex')) {
+      // Move to the next element.
+      nextFocus = traversalFunction(list, nextFocus) as any;
+    } else {
+      nextFocus.focus();
+      return;
+    }
+  }
+};
+
+const useScrollingTabs = (selectedTabIndex: number | null | undefined) => {
+  const [displayScroll, setDisplayScroll] = useState({
+    start: false,
+    end: false,
+  });
+  const scrollButtonEndRef = useRef<HTMLDivElement | null | undefined>(null);
+  const scrollButtonStartRef = useRef<HTMLDivElement | null | undefined>(null);
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const tabsRef = useRef<any>(null);
+
+  const scroll = (scrollValue: number) => {
+    animate('scrollLeft', tabsRef.current, scrollValue);
+  };
+
+  const moveTabsScroll = (delta) => {
+    let scrollValue = tabsRef.current.scrollLeft;
+    scrollValue += delta;
+    scroll(scrollValue);
+  };
+
+  const getScrollSize = (isStart = false) => {
+    if (!tabsListRef.current) return 0;
+    const fullContainerSize = tabsListRef.current.clientWidth;
+    const containerSize = tabsRef.current.clientWidth;
+    let totalSize = 0;
+    const children = Array.from(tabsListRef.current.children);
+
+    for (let i = 0; i < children.length; i += 1) {
+      const tab = children[i];
+
+      if (totalSize + tab.clientWidth > containerSize) {
+        break;
+      }
+
+      totalSize += tab.clientWidth;
+    }
+
+    const cornerChild = isStart ? children[0] : children[children.length - 1];
+
+    if (
+      totalSize +
+        tabsRef.current.scrollLeft +
+        containerSize +
+        cornerChild.clientWidth >
+      fullContainerSize
+    ) {
+      totalSize += cornerChild.clientWidth;
+    }
+
+    return totalSize;
+  };
+
+  const handleStartScrollClick = () => {
+    moveTabsScroll(-1 * getScrollSize(true));
+  };
+
+  const handleEndScrollClick = () => {
+    moveTabsScroll(getScrollSize(false));
+  };
+
+  const getTabsMeta = useCallback(() => {
+    const tabsNode = tabsRef.current;
+    let tabsMeta;
+
+    if (tabsNode) {
+      const rect = tabsNode.getBoundingClientRect();
+      tabsMeta = {
+        scrollLeft: tabsNode.scrollLeft,
+        left: rect.left,
+        right: rect.right,
+      };
+    }
+
+    let selectedTabMeta;
+
+    if (tabsNode && tabsListRef.current && selectedTabIndex) {
+      const children = tabsListRef.current.children;
+
+      if (children.length > 0) {
+        const tab = children[selectedTabIndex];
+        selectedTabMeta = tab ? tab.getBoundingClientRect() : null;
+      }
+    }
+
+    return {
+      tabsMeta,
+      selectedTabMeta,
+    };
+  }, [selectedTabIndex]);
+  const scrollSelectedIntoView = useCallback(
+    () => {
+      const { tabsMeta, selectedTabMeta } = getTabsMeta();
+      if (!selectedTabMeta || !tabsMeta) return;
+
+      if (selectedTabMeta.left < tabsMeta.left) {
+        // left side of button is out of view
+        const nextScrollStart =
+          tabsMeta.scrollLeft + (selectedTabMeta.left - tabsMeta.left);
+        scroll(nextScrollStart);
+      } else if (selectedTabMeta.right > tabsMeta.right) {
+        // right side of button is out of view
+        let nextScrollStart =
+          tabsMeta.scrollLeft + (selectedTabMeta.right - tabsMeta.right);
+
+        if (
+          scrollButtonEndRef.current &&
+          ((displayScroll.start && !displayScroll.end) ||
+            (!displayScroll.start && displayScroll.end))
+        ) {
+          nextScrollStart +=
+            scrollButtonEndRef.current.getBoundingClientRect().width;
+        }
+
+        scroll(nextScrollStart);
+      }
+    }, // we do not want to re-trigger this function if display.start / display.end are modified
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getTabsMeta],
+  );
+  const updateScrollButtonState = useCallback(() => {
+    if (tabsRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
+      let showStartScroll = scrollLeft > 1;
+      let showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+
+      if (
+        showStartScroll !== displayScroll.start ||
+        showEndScroll !== displayScroll.end
+      ) {
+        setDisplayScroll({
+          start: showStartScroll,
+          end: showEndScroll,
+        });
+      }
+    }
+  }, [displayScroll.end, displayScroll.start]);
+  useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonState);
+    };
+  }, [updateScrollButtonState]);
+  const handleTabsScroll = useMemo(
+    () => () => updateScrollButtonState(),
+    [updateScrollButtonState],
+  );
+  useEffect(() => {
+    updateScrollButtonState();
+  });
+  // scroll to selected tab on first render
+  useEffect(() => {
+    scrollSelectedIntoView();
+  }, [scrollSelectedIntoView, selectedTabIndex]);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const list = tabsListRef.current;
+    const ownerDocument = (list && list.ownerDocument) || document;
+    const currentFocus = ownerDocument.activeElement;
+    const role = currentFocus?.getAttribute('role');
+
+    if (role !== 'tab' || !list) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        moveFocus(list, currentFocus, previousItem);
+        break;
+
+      case 'ArrowRight':
+        event.preventDefault();
+        moveFocus(list, currentFocus, nextItem);
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        moveFocus(list, null, nextItem);
+        break;
+
+      case 'End':
+        event.preventDefault();
+        moveFocus(list, null, previousItem);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return {
+    scrollButtonStartRef,
+    scrollButtonEndRef,
+    tabsRef,
+    tabsListRef,
+    handleKeyDown,
+    handleTabsScroll,
+    handleStartScrollClick,
+    handleEndScrollClick,
+    displayScroll,
+  };
+};
+
+export { useScrollingTabs };