1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import clsx from 'clsx';
|
6 | import capitalize from '../utils/capitalize';
|
7 | import withStyles from '../styles/withStyles';
|
8 | import { elementTypeAcceptingRef } from '@material-ui/utils';
|
9 | import useIsFocusVisible from '../utils/useIsFocusVisible';
|
10 | import useForkRef from '../utils/useForkRef';
|
11 | import Typography from '../Typography';
|
12 | export const styles = {
|
13 |
|
14 | root: {},
|
15 |
|
16 |
|
17 | underlineNone: {
|
18 | textDecoration: 'none'
|
19 | },
|
20 |
|
21 |
|
22 | underlineHover: {
|
23 | textDecoration: 'none',
|
24 | '&:hover': {
|
25 | textDecoration: 'underline'
|
26 | }
|
27 | },
|
28 |
|
29 |
|
30 | underlineAlways: {
|
31 | textDecoration: 'underline'
|
32 | },
|
33 |
|
34 |
|
35 |
|
36 | button: {
|
37 | position: 'relative',
|
38 | WebkitTapHighlightColor: 'transparent',
|
39 | backgroundColor: 'transparent',
|
40 |
|
41 |
|
42 | outline: 0,
|
43 | border: 0,
|
44 | margin: 0,
|
45 |
|
46 | borderRadius: 0,
|
47 | padding: 0,
|
48 |
|
49 | cursor: 'pointer',
|
50 | userSelect: 'none',
|
51 | verticalAlign: 'middle',
|
52 | '-moz-appearance': 'none',
|
53 |
|
54 | '-webkit-appearance': 'none',
|
55 |
|
56 | '&::-moz-focus-inner': {
|
57 | borderStyle: 'none'
|
58 |
|
59 | },
|
60 | '&$focusVisible': {
|
61 | outline: 'auto'
|
62 | }
|
63 | },
|
64 |
|
65 |
|
66 | focusVisible: {}
|
67 | };
|
68 | const Link = React.forwardRef(function Link(props, ref) {
|
69 | const {
|
70 | classes,
|
71 | className,
|
72 | color = 'primary',
|
73 | component = 'a',
|
74 | onBlur,
|
75 | onFocus,
|
76 | TypographyClasses,
|
77 | underline = 'hover',
|
78 | variant = 'inherit'
|
79 | } = props,
|
80 | other = _objectWithoutPropertiesLoose(props, ["classes", "className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
|
81 |
|
82 | const {
|
83 | isFocusVisible,
|
84 | onBlurVisible,
|
85 | ref: focusVisibleRef
|
86 | } = useIsFocusVisible();
|
87 | const [focusVisible, setFocusVisible] = React.useState(false);
|
88 | const handlerRef = useForkRef(ref, focusVisibleRef);
|
89 |
|
90 | const handleBlur = event => {
|
91 | if (focusVisible) {
|
92 | onBlurVisible();
|
93 | setFocusVisible(false);
|
94 | }
|
95 |
|
96 | if (onBlur) {
|
97 | onBlur(event);
|
98 | }
|
99 | };
|
100 |
|
101 | const handleFocus = event => {
|
102 | if (isFocusVisible(event)) {
|
103 | setFocusVisible(true);
|
104 | }
|
105 |
|
106 | if (onFocus) {
|
107 | onFocus(event);
|
108 | }
|
109 | };
|
110 |
|
111 | return React.createElement(Typography, _extends({
|
112 | className: clsx(classes.root, classes[`underline${capitalize(underline)}`], className, focusVisible && classes.focusVisible, component === 'button' && classes.button),
|
113 | classes: TypographyClasses,
|
114 | color: color,
|
115 | component: component,
|
116 | onBlur: handleBlur,
|
117 | onFocus: handleFocus,
|
118 | ref: handlerRef,
|
119 | variant: variant
|
120 | }, other));
|
121 | });
|
122 | process.env.NODE_ENV !== "production" ? Link.propTypes = {
|
123 | |
124 |
|
125 |
|
126 | children: PropTypes.node.isRequired,
|
127 |
|
128 | |
129 |
|
130 |
|
131 |
|
132 | classes: PropTypes.object.isRequired,
|
133 |
|
134 | |
135 |
|
136 |
|
137 | className: PropTypes.string,
|
138 |
|
139 | |
140 |
|
141 |
|
142 | color: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
|
143 |
|
144 | |
145 |
|
146 |
|
147 |
|
148 | component: elementTypeAcceptingRef,
|
149 |
|
150 | |
151 |
|
152 |
|
153 | onBlur: PropTypes.func,
|
154 |
|
155 | |
156 |
|
157 |
|
158 | onFocus: PropTypes.func,
|
159 |
|
160 | |
161 |
|
162 |
|
163 | TypographyClasses: PropTypes.object,
|
164 |
|
165 | |
166 |
|
167 |
|
168 | underline: PropTypes.oneOf(['none', 'hover', 'always']),
|
169 |
|
170 | |
171 |
|
172 |
|
173 | variant: PropTypes.string
|
174 | } : void 0;
|
175 | export default withStyles(styles, {
|
176 | name: 'MuiLink'
|
177 | })(Link); |
\ | No newline at end of file |