1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import * as React from 'react';
|
3 | import clsx from 'clsx';
|
4 | import withStyles from '../styles/withStyles';
|
5 |
|
6 | const styles = theme => ({
|
7 | thumb: {
|
8 | '&$open': {
|
9 | '& $offset': {
|
10 | transform: 'scale(1) translateY(-10px)'
|
11 | }
|
12 | }
|
13 | },
|
14 | open: {},
|
15 | offset: _extends({
|
16 | zIndex: 1
|
17 | }, theme.typography.body2, {
|
18 | fontSize: theme.typography.pxToRem(12),
|
19 | lineHeight: 1.2,
|
20 | transition: theme.transitions.create(['transform'], {
|
21 | duration: theme.transitions.duration.shortest
|
22 | }),
|
23 | top: -34,
|
24 | transformOrigin: 'bottom center',
|
25 | transform: 'scale(0)',
|
26 | position: 'absolute'
|
27 | }),
|
28 | circle: {
|
29 | display: 'flex',
|
30 | alignItems: 'center',
|
31 | justifyContent: 'center',
|
32 | width: 32,
|
33 | height: 32,
|
34 | borderRadius: '50% 50% 50% 0',
|
35 | backgroundColor: 'currentColor',
|
36 | transform: 'rotate(-45deg)'
|
37 | },
|
38 | label: {
|
39 | color: theme.palette.primary.contrastText,
|
40 | transform: 'rotate(45deg)'
|
41 | }
|
42 | });
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 | function ValueLabel(props) {
|
49 | const {
|
50 | children,
|
51 | classes,
|
52 | className,
|
53 | open,
|
54 | value,
|
55 | valueLabelDisplay
|
56 | } = props;
|
57 |
|
58 | if (valueLabelDisplay === 'off') {
|
59 | return children;
|
60 | }
|
61 |
|
62 | return React.cloneElement(children, {
|
63 | className: clsx(children.props.className, (open || valueLabelDisplay === 'on') && classes.open, classes.thumb)
|
64 | }, React.createElement("span", {
|
65 | className: clsx(classes.offset, className)
|
66 | }, React.createElement("span", {
|
67 | className: classes.circle
|
68 | }, React.createElement("span", {
|
69 | className: classes.label
|
70 | }, value))));
|
71 | }
|
72 |
|
73 | export default withStyles(styles, {
|
74 | name: 'PrivateValueLabel'
|
75 | })(ValueLabel); |
\ | No newline at end of file |