UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

63 lines (62 loc) 2.92 kB
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 }; };