@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
63 lines (62 loc) • 2.92 kB
JavaScript
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 };
};