@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
90 lines (89 loc) • 4.22 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTouchDirection = exports.TabsList = exports.useTabsList = void 0;
const React = __importStar(require("react"));
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const collection_1 = require("@workday/canvas-kit-react/collection");
const useTabsModel_1 = require("./useTabsModel");
exports.useTabsList = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useTabsModel_1.useTabsModel)(() => {
const modality = (0, common_1.useModalityType)();
return {
role: 'tablist',
overflowX: modality === 'touch' ? 'auto' : undefined,
};
}), collection_1.useOverflowListMeasure, collection_1.useListResetCursorOnBlur);
const StyledStack = (0, common_1.styled)(layout_1.Flex, {
shouldForwardProp: (0, common_1.filterOutProps)(['maskImage']),
})(({ maskImage }) => ({
maskImage: maskImage,
}));
exports.TabsList = (0, common_1.createSubcomponent)('div')({
displayName: 'Tabs.List',
modelHook: useTabsModel_1.useTabsModel,
elemPropsHook: exports.useTabsList,
})(({ children, overflowButton, ...elemProps }, Element, model) => {
const modality = (0, common_1.useModalityType)();
const touchStates = (0, exports.useTouchDirection)();
return (React.createElement(StyledStack, { as: Element, position: "relative", borderBottom: `1px solid ${tokens_1.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 },
(0, collection_1.useListRenderItems)(model, children),
overflowButton));
});
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 };
};
exports.useTouchDirection = useTouchDirection;