1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import ButtonBase from '../ButtonBase';
|
8 | import capitalize from '../utils/capitalize';
|
9 | import unsupportedProp from '../utils/unsupportedProp';
|
10 | export const styles = theme => ({
|
11 |
|
12 | root: _extends({}, theme.typography.button, {
|
13 | maxWidth: 264,
|
14 | minWidth: 72,
|
15 | position: 'relative',
|
16 | boxSizing: 'border-box',
|
17 | minHeight: 48,
|
18 | flexShrink: 0,
|
19 | padding: '6px 12px',
|
20 | [theme.breakpoints.up('sm')]: {
|
21 | padding: '6px 24px'
|
22 | },
|
23 | overflow: 'hidden',
|
24 | whiteSpace: 'normal',
|
25 | textAlign: 'center',
|
26 | [theme.breakpoints.up('sm')]: {
|
27 | minWidth: 160
|
28 | }
|
29 | }),
|
30 |
|
31 |
|
32 | labelIcon: {
|
33 | minHeight: 72,
|
34 | paddingTop: 9,
|
35 | '& $wrapper > *:first-child': {
|
36 | marginBottom: 6
|
37 | }
|
38 | },
|
39 |
|
40 |
|
41 | textColorInherit: {
|
42 | color: 'inherit',
|
43 | opacity: 0.7,
|
44 | '&$selected': {
|
45 | opacity: 1
|
46 | },
|
47 | '&$disabled': {
|
48 | opacity: 0.5
|
49 | }
|
50 | },
|
51 |
|
52 |
|
53 | textColorPrimary: {
|
54 | color: theme.palette.text.secondary,
|
55 | '&$selected': {
|
56 | color: theme.palette.primary.main
|
57 | },
|
58 | '&$disabled': {
|
59 | color: theme.palette.text.disabled
|
60 | }
|
61 | },
|
62 |
|
63 |
|
64 | textColorSecondary: {
|
65 | color: theme.palette.text.secondary,
|
66 | '&$selected': {
|
67 | color: theme.palette.secondary.main
|
68 | },
|
69 | '&$disabled': {
|
70 | color: theme.palette.text.disabled
|
71 | }
|
72 | },
|
73 |
|
74 |
|
75 | selected: {},
|
76 |
|
77 |
|
78 | disabled: {},
|
79 |
|
80 |
|
81 | fullWidth: {
|
82 | flexShrink: 1,
|
83 | flexGrow: 1,
|
84 | flexBasis: 0,
|
85 | maxWidth: 'none'
|
86 | },
|
87 |
|
88 |
|
89 | wrapped: {
|
90 | fontSize: theme.typography.pxToRem(12),
|
91 | lineHeight: 1.5
|
92 | },
|
93 |
|
94 |
|
95 | wrapper: {
|
96 | display: 'inline-flex',
|
97 | alignItems: 'center',
|
98 | justifyContent: 'center',
|
99 | width: '100%',
|
100 | flexDirection: 'column'
|
101 | }
|
102 | });
|
103 | const Tab = React.forwardRef(function Tab(props, ref) {
|
104 | const {
|
105 | classes,
|
106 | className,
|
107 | disabled = false,
|
108 | disableFocusRipple = false,
|
109 | fullWidth,
|
110 | icon,
|
111 | indicator,
|
112 | label,
|
113 | onChange,
|
114 | onClick,
|
115 | onFocus,
|
116 | selected,
|
117 | selectionFollowsFocus,
|
118 | textColor = 'inherit',
|
119 | value,
|
120 | wrapped = false
|
121 | } = props,
|
122 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "disabled", "disableFocusRipple", "fullWidth", "icon", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"]);
|
123 |
|
124 | const handleClick = event => {
|
125 | if (onChange) {
|
126 | onChange(event, value);
|
127 | }
|
128 |
|
129 | if (onClick) {
|
130 | onClick(event);
|
131 | }
|
132 | };
|
133 |
|
134 | const handleFocus = event => {
|
135 | if (selectionFollowsFocus && !selected && onChange) {
|
136 | onChange(event, value);
|
137 | }
|
138 |
|
139 | if (onFocus) {
|
140 | onFocus(event);
|
141 | }
|
142 | };
|
143 |
|
144 | return React.createElement(ButtonBase, _extends({
|
145 | focusRipple: !disableFocusRipple,
|
146 | className: clsx(classes.root, classes[`textColor${capitalize(textColor)}`], className, disabled && classes.disabled, selected && classes.selected, label && icon && classes.labelIcon, fullWidth && classes.fullWidth, wrapped && classes.wrapped),
|
147 | ref: ref,
|
148 | role: "tab",
|
149 | "aria-selected": selected,
|
150 | disabled: disabled,
|
151 | onClick: handleClick,
|
152 | onFocus: handleFocus,
|
153 | tabIndex: selected ? 0 : -1
|
154 | }, other), React.createElement("span", {
|
155 | className: classes.wrapper
|
156 | }, icon, label), indicator);
|
157 | });
|
158 | process.env.NODE_ENV !== "production" ? Tab.propTypes = {
|
159 | |
160 |
|
161 |
|
162 |
|
163 | children: unsupportedProp,
|
164 |
|
165 | |
166 |
|
167 |
|
168 |
|
169 | classes: PropTypes.object.isRequired,
|
170 |
|
171 | |
172 |
|
173 |
|
174 | className: PropTypes.string,
|
175 |
|
176 | |
177 |
|
178 |
|
179 | disabled: PropTypes.bool,
|
180 |
|
181 | |
182 |
|
183 |
|
184 | disableFocusRipple: PropTypes.bool,
|
185 |
|
186 | |
187 |
|
188 |
|
189 | disableRipple: PropTypes.bool,
|
190 |
|
191 | |
192 |
|
193 |
|
194 | fullWidth: PropTypes.bool,
|
195 |
|
196 | |
197 |
|
198 |
|
199 | icon: PropTypes.node,
|
200 |
|
201 | |
202 |
|
203 |
|
204 |
|
205 |
|
206 | indicator: PropTypes.node,
|
207 |
|
208 | |
209 |
|
210 |
|
211 | label: PropTypes.node,
|
212 |
|
213 | |
214 |
|
215 |
|
216 | onChange: PropTypes.func,
|
217 |
|
218 | |
219 |
|
220 |
|
221 | onClick: PropTypes.func,
|
222 |
|
223 | |
224 |
|
225 |
|
226 | onFocus: PropTypes.func,
|
227 |
|
228 | |
229 |
|
230 |
|
231 | selected: PropTypes.bool,
|
232 |
|
233 | |
234 |
|
235 |
|
236 | selectionFollowsFocus: PropTypes.bool,
|
237 |
|
238 | |
239 |
|
240 |
|
241 | textColor: PropTypes.oneOf(['secondary', 'primary', 'inherit']),
|
242 |
|
243 | |
244 |
|
245 |
|
246 | value: PropTypes.any,
|
247 |
|
248 | |
249 |
|
250 |
|
251 |
|
252 | wrapped: PropTypes.bool
|
253 | } : void 0;
|
254 | export default withStyles(styles, {
|
255 | name: 'MuiTab'
|
256 | })(Tab); |
\ | No newline at end of file |