@workday/canvas-kit-react/dist/es6/tabs/lib/TabsList.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { commonColors } from '@workday/canvas-kit-react/tokens';
import { composeHooks, createSubcomponent, createElemPropsHook, useModalityType, styled, filterOutProps, } from '@workday/canvas-kit-react/common';
import { Flex } from '@workday/canvas-kit-react/layout';
import { useOverflowListMeasure, useListRenderItems, useListResetCursorOnBlur, } from '@workday/canvas-kit-react/collection';
import { useTabsModel } from './useTabsModel';
export const useTabsList = composeHooks(createElemPropsHook(useTabsModel)(() => {
    const modality = useModalityType();
    return {
        role: 'tablist',
        overflowX: modality === 'touch' ? 'auto' : undefined,
    };
}), useOverflowListMeasure, useListResetCursorOnBlur);
const StyledStack = styled(Flex, {
    shouldForwardProp: filterOutProps(['maskImage']),
})(({ maskImage }) => ({
    maskImage: maskImage,
}));
export const TabsList = createSubcomponent('div')({
    displayName: 'Tabs.List',
    modelHook: useTabsModel,
    elemPropsHook: useTabsList,
})(({ children, overflowButton, ...elemProps }, Element, model) => {
    const modality = useModalityType();
    const touchStates = useTouchDirection();
    return (React.createElement(StyledStack, { as: Element, position: "relative", borderBottom: `1px solid ${commonColors.divider}`, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
            ? `linear-gradient(${touchStates.direction === 'left' ? 'to left' : 'to right'}, white 80%, transparent)`
            : undefined, ...elemProps },
        useListRenderItems(model, children),
        overflowButton));
});
export const useTouchDirection = () => {
    const [isDragging, setIsDragging] = React.useState(false);
    const [touchDir, setTouchDirection] = React.useState('right');
    React.useEffect(() => {
        let prevXPos = window.pageXOffset;
        const handleTouchMove = function (e) {
            const currXPos = e.touches[0].clientX;
            setIsDragging(true);
            if (currXPos > prevXPos) {
                setTouchDirection('left');
            }
            else if (currXPos < prevXPos) {
                setTouchDirection('right');
            }
            prevXPos = currXPos;
            e.preventDefault();
        };
        const handleDragEnd = function () {
            setIsDragging(false);
        };
        window.addEventListener('touchmove', handleTouchMove);
        window.addEventListener('touchstart', handleDragEnd);
        window.addEventListener('touchend', handleDragEnd);
        return () => {
            window.removeEventListener('touchmove', handleTouchMove);
            window.removeEventListener('touchstart', handleDragEnd);
            window.removeEventListener('touchend', handleDragEnd);
        };
    }, []);
    return { direction: touchDir, isDragging: isDragging };
};