UNPKG

4.06 kBJavaScriptView Raw
1import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2import _extends from "@babel/runtime/helpers/esm/extends";
3
4var _KeyboardArrowLeft, _KeyboardArrowRight;
5
6const _excluded = ["className", "direction", "orientation", "disabled"];
7
8/* eslint-disable jsx-a11y/aria-role */
9import * as React from 'react';
10import PropTypes from 'prop-types';
11import clsx from 'clsx';
12import { unstable_composeClasses as composeClasses } from '@mui/base';
13import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
14import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
15import ButtonBase from '../ButtonBase';
16import useTheme from '../styles/useTheme';
17import useThemeProps from '../styles/useThemeProps';
18import styled from '../styles/styled';
19import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
20import { jsx as _jsx } from "react/jsx-runtime";
21
22const useUtilityClasses = ownerState => {
23 const {
24 classes,
25 orientation,
26 disabled
27 } = ownerState;
28 const slots = {
29 root: ['root', orientation, disabled && 'disabled']
30 };
31 return composeClasses(slots, getTabScrollButtonUtilityClass, classes);
32};
33
34const TabScrollButtonRoot = styled(ButtonBase, {
35 name: 'MuiTabScrollButton',
36 slot: 'Root',
37 overridesResolver: (props, styles) => {
38 const {
39 ownerState
40 } = props;
41 return [styles.root, ownerState.orientation && styles[ownerState.orientation]];
42 }
43})(({
44 ownerState
45}) => _extends({
46 width: 40,
47 flexShrink: 0,
48 opacity: 0.8,
49 [`&.${tabScrollButtonClasses.disabled}`]: {
50 opacity: 0
51 }
52}, ownerState.orientation === 'vertical' && {
53 width: '100%',
54 height: 40,
55 '& svg': {
56 transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
57 }
58}));
59const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
60 const props = useThemeProps({
61 props: inProps,
62 name: 'MuiTabScrollButton'
63 });
64
65 const {
66 className,
67 direction
68 } = props,
69 other = _objectWithoutPropertiesLoose(props, _excluded);
70
71 const theme = useTheme();
72 const isRtl = theme.direction === 'rtl';
73
74 const ownerState = _extends({
75 isRtl
76 }, props);
77
78 const classes = useUtilityClasses(ownerState);
79 return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
80 component: "div",
81 className: clsx(classes.root, className),
82 ref: ref,
83 role: null,
84 ownerState: ownerState,
85 tabIndex: null
86 }, other, {
87 children: direction === 'left' ? _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {
88 fontSize: "small"
89 })) : _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {
90 fontSize: "small"
91 }))
92 }));
93});
94process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes
95/* remove-proptypes */
96= {
97 // ----------------------------- Warning --------------------------------
98 // | These PropTypes are generated from the TypeScript type definitions |
99 // | To update them edit the d.ts file and run "yarn proptypes" |
100 // ----------------------------------------------------------------------
101
102 /**
103 * The content of the component.
104 */
105 children: PropTypes.node,
106
107 /**
108 * Override or extend the styles applied to the component.
109 */
110 classes: PropTypes.object,
111
112 /**
113 * @ignore
114 */
115 className: PropTypes.string,
116
117 /**
118 * The direction the button should indicate.
119 */
120 direction: PropTypes.oneOf(['left', 'right']).isRequired,
121
122 /**
123 * If `true`, the component is disabled.
124 */
125 disabled: PropTypes.bool,
126
127 /**
128 * The component orientation (layout flow direction).
129 */
130 orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
131
132 /**
133 * The system prop that allows defining system overrides as well as additional CSS styles.
134 */
135 sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
136} : void 0;
137export default TabScrollButton;
\No newline at end of file