Files F101444149

TabScrollButton.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Mon, Feb 10, 13:13

TabScrollButton.js
View Options

	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	import _extends from "@babel/runtime/helpers/esm/extends";
	var _KeyboardArrowLeft, _KeyboardArrowRight;
	const _excluded = ["className", "direction", "orientation", "disabled"];
	/* eslint-disable jsx-a11y/aria-role */
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import clsx from 'clsx';
	import { unstable_composeClasses as composeClasses } from '@mui/base';
	import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
	import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
	import ButtonBase from '../ButtonBase';
	import useTheme from '../styles/useTheme';
	import useThemeProps from '../styles/useThemeProps';
	import styled from '../styles/styled';
	import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
	import { jsx as _jsx } from "react/jsx-runtime";
	const useUtilityClasses = ownerState => {
	const {
	classes,
	orientation,
	disabled
	} = ownerState;
	const slots = {
	root: ['root', orientation, disabled && 'disabled']
	};
	return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
	};
	const TabScrollButtonRoot = styled(ButtonBase, {
	name: 'MuiTabScrollButton',
	slot: 'Root',
	overridesResolver: (props, styles) => {
	const {
	ownerState
	} = props;
	return [styles.root, ownerState.orientation && styles[ownerState.orientation]];
	}
	})(({
	ownerState
	}) => _extends({
	width: 40,
	flexShrink: 0,
	opacity: 0.8,
	[`&.${tabScrollButtonClasses.disabled}`]: {
	opacity: 0
	}
	}, ownerState.orientation === 'vertical' && {
	width: '100%',
	height: 40,
	'& svg': {
	transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
	}
	}));
	const TabScrollButton = /#__PURE__/React.forwardRef(function TabScrollButton(inProps, ref) {
	const props = useThemeProps({
	props: inProps,
	name: 'MuiTabScrollButton'
	});
	const {
	className,
	direction
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const theme = useTheme();
	const isRtl = theme.direction === 'rtl';
	const ownerState = _extends({
	isRtl
	}, props);
	const classes = useUtilityClasses(ownerState);
	return /#__PURE__/_jsx(TabScrollButtonRoot, _extends({
	component: "div",
	className: clsx(classes.root, className),
	ref: ref,
	role: null,
	ownerState: ownerState,
	tabIndex: null
	}, other, {
	children: direction === 'left' ? _KeyboardArrowLeft \|\| (_KeyboardArrowLeft = /#__PURE__/_jsx(KeyboardArrowLeft, {
	fontSize: "small"
	})) : _KeyboardArrowRight \|\| (_KeyboardArrowRight = /#__PURE__/_jsx(KeyboardArrowRight, {
	fontSize: "small"
	}))
	}));
	});
	process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
	// ----------------------------- Warning --------------------------------
	// \| These PropTypes are generated from the TypeScript type definitions \|
	// \| To update them edit the d.ts file and run "yarn proptypes" \|
	// ----------------------------------------------------------------------
	/**
	* The content of the component.
	*/
	children: PropTypes.node,
	/**
	* Override or extend the styles applied to the component.
	*/
	classes: PropTypes.object,
	/**
	* @ignore
	*/
	className: PropTypes.string,
	/**
	* The direction the button should indicate.
	*/
	direction: PropTypes.oneOf(['left', 'right']).isRequired,
	/**
	* If `true`, the component is disabled.
	*/
	disabled: PropTypes.bool,
	/**
	* The component orientation (layout flow direction).
	*/
	orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
	/**
	* The system prop that allows defining system overrides as well as additional CSS styles.
	*/
	sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
	} : void 0;
	export default TabScrollButton;

Event Timeline