1 | import * as React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import clsx from 'clsx';
|
4 | import CheckCircle from '../internal/svg-icons/CheckCircle';
|
5 | import Warning from '../internal/svg-icons/Warning';
|
6 | import withStyles from '../styles/withStyles';
|
7 | import SvgIcon from '../SvgIcon';
|
8 | export const styles = theme => ({
|
9 |
|
10 | root: {
|
11 | display: 'block',
|
12 | color: theme.palette.text.disabled,
|
13 | '&$completed': {
|
14 | color: theme.palette.primary.main
|
15 | },
|
16 | '&$active': {
|
17 | color: theme.palette.primary.main
|
18 | },
|
19 | '&$error': {
|
20 | color: theme.palette.error.main
|
21 | }
|
22 | },
|
23 |
|
24 |
|
25 | text: {
|
26 | fill: theme.palette.primary.contrastText,
|
27 | fontSize: theme.typography.caption.fontSize,
|
28 | fontFamily: theme.typography.fontFamily
|
29 | },
|
30 |
|
31 |
|
32 | active: {},
|
33 |
|
34 |
|
35 | completed: {},
|
36 |
|
37 |
|
38 | error: {}
|
39 | });
|
40 |
|
41 | var _ref = React.createElement("circle", {
|
42 | cx: "12",
|
43 | cy: "12",
|
44 | r: "12"
|
45 | });
|
46 |
|
47 | const StepIcon = React.forwardRef(function StepIcon(props, ref) {
|
48 | const {
|
49 | completed = false,
|
50 | icon,
|
51 | active = false,
|
52 | error = false,
|
53 | classes
|
54 | } = props;
|
55 |
|
56 | if (typeof icon === 'number' || typeof icon === 'string') {
|
57 | const className = clsx(classes.root, active && classes.active, error && classes.error, completed && classes.completed);
|
58 |
|
59 | if (error) {
|
60 | return React.createElement(Warning, {
|
61 | className: className,
|
62 | ref: ref
|
63 | });
|
64 | }
|
65 |
|
66 | if (completed) {
|
67 | return React.createElement(CheckCircle, {
|
68 | className: className,
|
69 | ref: ref
|
70 | });
|
71 | }
|
72 |
|
73 | return React.createElement(SvgIcon, {
|
74 | className: className,
|
75 | ref: ref
|
76 | }, _ref, React.createElement("text", {
|
77 | className: classes.text,
|
78 | x: "12",
|
79 | y: "16",
|
80 | textAnchor: "middle"
|
81 | }, icon));
|
82 | }
|
83 |
|
84 | return icon;
|
85 | });
|
86 | process.env.NODE_ENV !== "production" ? StepIcon.propTypes = {
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | |
93 |
|
94 |
|
95 | active: PropTypes.bool,
|
96 |
|
97 | |
98 |
|
99 |
|
100 |
|
101 | classes: PropTypes.object,
|
102 |
|
103 | |
104 |
|
105 |
|
106 | completed: PropTypes.bool,
|
107 |
|
108 | |
109 |
|
110 |
|
111 | error: PropTypes.bool,
|
112 |
|
113 | |
114 |
|
115 |
|
116 | icon: PropTypes.node
|
117 | } : void 0;
|
118 | export default withStyles(styles, {
|
119 | name: 'MuiStepIcon'
|
120 | })(StepIcon); |
\ | No newline at end of file |