@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/components/Tabs/Tabs.tsx

@@ -1,264 +0,0 @@
-import {
-  Box,
-  chakra,
-  Tab,
-  TabList,
-  TabPanels,
-  TabPanel,
-  Tabs as ChakraTabs,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import * as React from "react";
-
-import Button from "../Button/Button";
-import Icon from "../Icons/Icon";
-import useCarouselStyles from "../../hooks/useCarouselStyles";
-import useWindowSize from "../../hooks/useWindowSize";
-
-// Internal interface used for rendering `Tabs` tab and panel
-// elements, either from data or from children.
-interface TabPanelProps {
-  tabs: React.ReactNode[] | React.ReactNode;
-  panels: React.ReactNode[] | React.ReactNode;
-}
-// The general shape of the data object for each Tab.
-export interface TabsDataProps {
-  label: string;
-  content: string | React.ReactNode;
-}
-
-export interface TabsProps {
-  /** The index of the tab to display for controlled situations. */
-  defaultIndex?: number;
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** The callback function invoked on every tab change event. */
-  onChange?: (index: number) => any;
-  /** Array of data to display */
-  tabsData?: TabsDataProps[];
-  /** Render a hash in the url for each tab. Only available when data is
-   * passed through the `data` props. */
-  useHash?: boolean;
-}
-
-/**
- * An internal function used to update the hash in the URL.
- * This function is only used when `useHash` is `true`.
- */
-const onClickHash = (tabHash: string) => {
-  window.location.hash = tabHash;
-};
-
-/**
- * This returns an object with `Tab` and `TabPanel` components to rendered in
- * `TabList` and `TabPanels` components respectively.
- */
-const getElementsFromData = (
-  data: TabsDataProps[],
-  useHash: boolean
-): TabPanelProps => {
-  const tabs: React.ReactNode[] = [];
-  const panels: React.ReactNode[] = [];
-
-  if (!data?.length) {
-    return { tabs: [], panels: [] };
-  }
-
-  if (data?.length > 6) {
-    console.warn(
-      "NYPL Reservoir Tabs: it is recommended to use no more than six tabs. If " +
-        "more than six tabs are needed, consider other navigational patterns."
-    );
-  }
-  data.forEach((tab, index) => {
-    let tempPanel;
-    // For URL hash enabled tabs, we need to add a custom `onClick` to handle the URL hash.
-    const tempTab = (
-      <Tab
-        fontSize={["0", null, "1"]}
-        key={index}
-        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : undefined}
-      >
-        {tab.label}
-      </Tab>
-    );
-    if (typeof tab.content === "string") {
-      tempPanel = (
-        <TabPanel
-          dangerouslySetInnerHTML={{ __html: tab.content }}
-          key={index}
-        />
-      );
-    } else {
-      tempPanel = <TabPanel key={index}>{tab.content}</TabPanel>;
-    }
-
-    tabs.push(tempTab);
-    panels.push(tempPanel);
-  });
-
-  return {
-    tabs: [<TabList key="list">{tabs}</TabList>],
-    panels: [<TabPanels key="panels">{panels}</TabPanels>],
-  };
-};
-
-/**
- * This returns an object with `TabList` and `TabPanels` components to help format
- * the DOM when building up the `Tabs` component using child component.
- */
-const getElementsFromChildren = (children): TabPanelProps => {
-  const tabs: React.ReactNode[] = [];
-  const panels: React.ReactNode[] = [];
-
-  if (!children?.length) {
-    return { tabs: [], panels: [] };
-  }
-
-  children.forEach((child: JSX.Element) => {
-    if (child.type === TabList || child.props.mdxType === "TabList") {
-      tabs.push(child);
-
-      const childTabs = React.Children.count(child.props.children);
-      if (childTabs > 6) {
-        console.warn(
-          "NYPL Reservoir Tabs: It is recommended to use no more than six tabs. " +
-            "If more than six tabs are needed, consider other navigational patterns."
-        );
-      }
-    }
-
-    if (child.type === TabPanels || child.props.mdxType === "TabPanels") {
-      panels.push(child);
-    }
-  });
-
-  return { tabs, panels };
-};
-
-/**
- * Renders Chakra's `Tab` component with specific variants, props,
- * and controlled styling.
- */
-export const Tabs = chakra((props: React.PropsWithChildren<TabsProps>) => {
-  const {
-    children,
-    defaultIndex = 0,
-    id,
-    onChange,
-    tabsData,
-    useHash = false,
-    ...rest
-  } = props;
-  const styles = useMultiStyleConfig("Tabs", {});
-  // Just an estimate of the tab width for the mobile carousel.
-  const initTabWidth = 65;
-  // An estimate for the tab width for larger device widths.
-  const mediumTabWidth = 40;
-  const [tabWidth, setTabWidth] = React.useState(initTabWidth);
-  const windowDimensions = useWindowSize();
-  const { tabs, panels }: any = tabsData
-    ? getElementsFromData(tabsData, useHash)
-    : getElementsFromChildren(children);
-
-  if (tabs.length === 0 || panels.length === 0) {
-    console.warn(
-      "NYPL Reservoir Tabs: Pass data in the `contentData` props or as children."
-    );
-  }
-
-  // `tabs` is an array for the children component approach but an object for
-  // the `tabsData` prop approach. We need to get the right props key value
-  // to set the carousel's length.
-  const tabProps = tabs[0] ? tabs[0]?.props : (tabs as any).props;
-  const { prevSlide, nextSlide, carouselStyle, goToStart } = useCarouselStyles(
-    tabProps?.children?.length,
-    tabWidth
-  );
-  React.useEffect(() => {
-    if (windowDimensions.width > 320) {
-      setTabWidth(mediumTabWidth);
-    } else {
-      setTabWidth(initTabWidth);
-    }
-    // If we are on larger viewports, reset the carousel so all tabs display.
-    if (windowDimensions.width > 600) {
-      goToStart();
-    }
-  }, [goToStart, windowDimensions.width]);
-  const previousButton = (
-    <Button
-      aria-label="Previous"
-      id={`tabs-previous-${id}`}
-      onClick={prevSlide}
-      __css={{
-        ...styles.buttonArrows,
-        left: "0",
-      }}
-    >
-      <Icon
-        iconRotation="rotate90"
-        id={`tabs-previous-icon-${id}`}
-        name="arrow"
-        size="small"
-      />
-    </Button>
-  );
-  const nextButton = (
-    <Button
-      aria-label="Next"
-      id={`tabs-next-${id}`}
-      onClick={nextSlide}
-      __css={{
-        ...styles.buttonArrows,
-        right: "0",
-      }}
-    >
-      <Icon
-        iconRotation="rotate270"
-        id={`tabs-next-icon-${id}`}
-        name="arrow"
-        size="small"
-      />
-    </Button>
-  );
-
-  if (children && tabsData?.length) {
-    console.warn(
-      "NYPL Reservoir Tabs: Only pass children or data in the `contentData` " +
-        "prop. Do not pass both."
-    );
-  }
-
-  return (
-    <ChakraTabs
-      defaultIndex={defaultIndex}
-      id={id}
-      // The following lazy loads each panel whenever it is needed.
-      isLazy
-      onChange={onChange}
-      variant="enclosed"
-      {...rest}
-    >
-      <Box
-        __css={styles.tablistWrapper}
-        sx={{
-          "&::-webkit-scrollbar": {
-            display: "none",
-          },
-        }}
-      >
-        {previousButton}
-        <Box __css={styles.carouselParent}>
-          <Box {...carouselStyle}>{tabs}</Box>
-        </Box>
-        {nextButton}
-      </Box>
-      {panels}
-    </ChakraTabs>
-  );
-});
-
-// Tabs is also exported above so the props can display in Storybook.
-export { TabList, Tab, TabPanels, TabPanel };
-export default Tabs;