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