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 withStyles from '../styles/withStyles';
|
7 | import useTheme from '../styles/useTheme';
|
8 | import capitalize from '../utils/capitalize';
|
9 | export const styles = theme => {
|
10 | return {
|
11 |
|
12 | root: {
|
13 | position: 'absolute',
|
14 | bottom: 0,
|
15 | right: 0,
|
16 | top: -5,
|
17 | left: 0,
|
18 | margin: 0,
|
19 | padding: '0 8px',
|
20 | pointerEvents: 'none',
|
21 | borderRadius: 'inherit',
|
22 | borderStyle: 'solid',
|
23 | borderWidth: 1,
|
24 | overflow: 'hidden'
|
25 | },
|
26 |
|
27 |
|
28 | legend: {
|
29 | textAlign: 'left',
|
30 | padding: 0,
|
31 | lineHeight: '11px',
|
32 |
|
33 | transition: theme.transitions.create('width', {
|
34 | duration: 150,
|
35 | easing: theme.transitions.easing.easeOut
|
36 | })
|
37 | },
|
38 |
|
39 |
|
40 | legendLabelled: {
|
41 | display: 'block',
|
42 | width: 'auto',
|
43 | textAlign: 'left',
|
44 | padding: 0,
|
45 | height: 11,
|
46 |
|
47 | fontSize: '0.75em',
|
48 | visibility: 'hidden',
|
49 | maxWidth: 0.01,
|
50 | transition: theme.transitions.create('max-width', {
|
51 | duration: 50,
|
52 | easing: theme.transitions.easing.easeOut
|
53 | }),
|
54 | '& > span': {
|
55 | paddingLeft: 5,
|
56 | paddingRight: 5,
|
57 | display: 'inline-block'
|
58 | }
|
59 | },
|
60 |
|
61 |
|
62 | legendNotched: {
|
63 | maxWidth: 1000,
|
64 | transition: theme.transitions.create('max-width', {
|
65 | duration: 100,
|
66 | easing: theme.transitions.easing.easeOut,
|
67 | delay: 50
|
68 | })
|
69 | }
|
70 | };
|
71 | };
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
|
77 | const {
|
78 | classes,
|
79 | className,
|
80 | label,
|
81 | labelWidth: labelWidthProp,
|
82 | notched,
|
83 | style
|
84 | } = props,
|
85 | other = _objectWithoutPropertiesLoose(props, ["children", "classes", "className", "label", "labelWidth", "notched", "style"]);
|
86 |
|
87 | const theme = useTheme();
|
88 | const align = theme.direction === 'rtl' ? 'right' : 'left';
|
89 |
|
90 | if (label !== undefined) {
|
91 | return React.createElement("fieldset", _extends({
|
92 | "aria-hidden": true,
|
93 | className: clsx(classes.root, className),
|
94 | ref: ref,
|
95 | style: style
|
96 | }, other), React.createElement("legend", {
|
97 | className: clsx(classes.legendLabelled, notched && classes.legendNotched)
|
98 | }, label ? React.createElement("span", null, label) : React.createElement("span", {
|
99 | dangerouslySetInnerHTML: {
|
100 | __html: '​'
|
101 | }
|
102 | })));
|
103 | }
|
104 |
|
105 | const labelWidth = labelWidthProp > 0 ? labelWidthProp * 0.75 + 8 : 0.01;
|
106 | return React.createElement("fieldset", _extends({
|
107 | "aria-hidden": true,
|
108 | style: _extends({
|
109 | [`padding${capitalize(align)}`]: 8
|
110 | }, style),
|
111 | className: clsx(classes.root, className),
|
112 | ref: ref
|
113 | }, other), React.createElement("legend", {
|
114 | className: classes.legend,
|
115 | style: {
|
116 |
|
117 |
|
118 |
|
119 | width: notched ? labelWidth : 0.01
|
120 | }
|
121 | }, React.createElement("span", {
|
122 | dangerouslySetInnerHTML: {
|
123 | __html: '​'
|
124 | }
|
125 | })));
|
126 | });
|
127 | process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
|
128 | |
129 |
|
130 |
|
131 | children: PropTypes.node,
|
132 |
|
133 | |
134 |
|
135 |
|
136 |
|
137 | classes: PropTypes.object,
|
138 |
|
139 | |
140 |
|
141 |
|
142 | className: PropTypes.string,
|
143 |
|
144 | |
145 |
|
146 |
|
147 | label: PropTypes.node,
|
148 |
|
149 | |
150 |
|
151 |
|
152 | labelWidth: PropTypes.number.isRequired,
|
153 |
|
154 | |
155 |
|
156 |
|
157 | notched: PropTypes.bool.isRequired,
|
158 |
|
159 | |
160 |
|
161 |
|
162 | style: PropTypes.object
|
163 | } : void 0;
|
164 | export default withStyles(styles, {
|
165 | name: 'PrivateNotchedOutline'
|
166 | })(NotchedOutline); |
\ | No newline at end of file |