1 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | const _excluded = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { elementTypeAcceptingRef } from '@mui/utils';
|
8 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
9 | import capitalize from '../utils/capitalize';
|
10 | import styled from '../styles/styled';
|
11 | import useThemeProps from '../styles/useThemeProps';
|
12 | import useIsFocusVisible from '../utils/useIsFocusVisible';
|
13 | import useForkRef from '../utils/useForkRef';
|
14 | import Typography from '../Typography';
|
15 | import linkClasses, { getLinkUtilityClass } from './linkClasses';
|
16 | import getTextDecoration, { colorTransformations } from './getTextDecoration';
|
17 | import { jsx as _jsx } from "react/jsx-runtime";
|
18 |
|
19 | const useUtilityClasses = ownerState => {
|
20 | const {
|
21 | classes,
|
22 | component,
|
23 | focusVisible,
|
24 | underline
|
25 | } = ownerState;
|
26 | const slots = {
|
27 | root: ['root', `underline${capitalize(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
|
28 | };
|
29 | return composeClasses(slots, getLinkUtilityClass, classes);
|
30 | };
|
31 |
|
32 | const LinkRoot = styled(Typography, {
|
33 | name: 'MuiLink',
|
34 | slot: 'Root',
|
35 | overridesResolver: (props, styles) => {
|
36 | const {
|
37 | ownerState
|
38 | } = props;
|
39 | return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
|
40 | }
|
41 | })(({
|
42 | theme,
|
43 | ownerState
|
44 | }) => {
|
45 | return _extends({}, ownerState.underline === 'none' && {
|
46 | textDecoration: 'none'
|
47 | }, ownerState.underline === 'hover' && {
|
48 | textDecoration: 'none',
|
49 | '&:hover': {
|
50 | textDecoration: 'underline'
|
51 | }
|
52 | }, ownerState.underline === 'always' && _extends({
|
53 | textDecoration: 'underline'
|
54 | }, ownerState.color !== 'inherit' && {
|
55 | textDecorationColor: getTextDecoration({
|
56 | theme,
|
57 | ownerState
|
58 | })
|
59 | }, {
|
60 | '&:hover': {
|
61 | textDecorationColor: 'inherit'
|
62 | }
|
63 | }), ownerState.component === 'button' && {
|
64 | position: 'relative',
|
65 | WebkitTapHighlightColor: 'transparent',
|
66 | backgroundColor: 'transparent',
|
67 |
|
68 |
|
69 | outline: 0,
|
70 | border: 0,
|
71 | margin: 0,
|
72 |
|
73 | borderRadius: 0,
|
74 | padding: 0,
|
75 |
|
76 | cursor: 'pointer',
|
77 | userSelect: 'none',
|
78 | verticalAlign: 'middle',
|
79 | MozAppearance: 'none',
|
80 |
|
81 | WebkitAppearance: 'none',
|
82 |
|
83 | '&::-moz-focus-inner': {
|
84 | borderStyle: 'none'
|
85 |
|
86 | },
|
87 | [`&.${linkClasses.focusVisible}`]: {
|
88 | outline: 'auto'
|
89 | }
|
90 | });
|
91 | });
|
92 | const Link = React.forwardRef(function Link(inProps, ref) {
|
93 | const props = useThemeProps({
|
94 | props: inProps,
|
95 | name: 'MuiLink'
|
96 | });
|
97 |
|
98 | const {
|
99 | className,
|
100 | color = 'primary',
|
101 | component = 'a',
|
102 | onBlur,
|
103 | onFocus,
|
104 | TypographyClasses,
|
105 | underline = 'always',
|
106 | variant = 'inherit',
|
107 | sx
|
108 | } = props,
|
109 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
110 |
|
111 | const {
|
112 | isFocusVisibleRef,
|
113 | onBlur: handleBlurVisible,
|
114 | onFocus: handleFocusVisible,
|
115 | ref: focusVisibleRef
|
116 | } = useIsFocusVisible();
|
117 | const [focusVisible, setFocusVisible] = React.useState(false);
|
118 | const handlerRef = useForkRef(ref, focusVisibleRef);
|
119 |
|
120 | const handleBlur = event => {
|
121 | handleBlurVisible(event);
|
122 |
|
123 | if (isFocusVisibleRef.current === false) {
|
124 | setFocusVisible(false);
|
125 | }
|
126 |
|
127 | if (onBlur) {
|
128 | onBlur(event);
|
129 | }
|
130 | };
|
131 |
|
132 | const handleFocus = event => {
|
133 | handleFocusVisible(event);
|
134 |
|
135 | if (isFocusVisibleRef.current === true) {
|
136 | setFocusVisible(true);
|
137 | }
|
138 |
|
139 | if (onFocus) {
|
140 | onFocus(event);
|
141 | }
|
142 | };
|
143 |
|
144 | const ownerState = _extends({}, props, {
|
145 | color,
|
146 | component,
|
147 | focusVisible,
|
148 | underline,
|
149 | variant
|
150 | });
|
151 |
|
152 | const classes = useUtilityClasses(ownerState);
|
153 | return _jsx(LinkRoot, _extends({
|
154 | color: color,
|
155 | className: clsx(classes.root, className),
|
156 | classes: TypographyClasses,
|
157 | component: component,
|
158 | onBlur: handleBlur,
|
159 | onFocus: handleFocus,
|
160 | ref: handlerRef,
|
161 | ownerState: ownerState,
|
162 | variant: variant,
|
163 | sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
|
164 | color
|
165 | }] : []), ...(Array.isArray(sx) ? sx : [sx])]
|
166 | }, other));
|
167 | });
|
168 | process.env.NODE_ENV !== "production" ? Link.propTypes
|
169 |
|
170 | = {
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 | |
177 |
|
178 |
|
179 | children: PropTypes.node,
|
180 |
|
181 | |
182 |
|
183 |
|
184 | classes: PropTypes.object,
|
185 |
|
186 | |
187 |
|
188 |
|
189 | className: PropTypes.string,
|
190 |
|
191 | |
192 |
|
193 |
|
194 |
|
195 | color: PropTypes
|
196 |
|
197 | .any,
|
198 |
|
199 | |
200 |
|
201 |
|
202 |
|
203 | component: elementTypeAcceptingRef,
|
204 |
|
205 | |
206 |
|
207 |
|
208 | onBlur: PropTypes.func,
|
209 |
|
210 | |
211 |
|
212 |
|
213 | onFocus: PropTypes.func,
|
214 |
|
215 | |
216 |
|
217 |
|
218 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
219 |
|
220 | |
221 |
|
222 |
|
223 | TypographyClasses: PropTypes.object,
|
224 |
|
225 | |
226 |
|
227 |
|
228 |
|
229 | underline: PropTypes.oneOf(['always', 'hover', 'none']),
|
230 |
|
231 | |
232 |
|
233 |
|
234 |
|
235 | variant: PropTypes
|
236 |
|
237 | .oneOfType([PropTypes.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), PropTypes.string])
|
238 | } : void 0;
|
239 | export default Link; |
\ | No newline at end of file |