-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
/
StepConnector.js
110 lines (105 loc) · 3.14 KB
/
StepConnector.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import withStyles from '../styles/withStyles';
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
flex: '1 1 auto',
},
/* Styles applied to the root element if `orientation="horizontal"`. */
horizontal: {},
/* Styles applied to the root element if `orientation="vertical"`. */
vertical: {
marginLeft: 12, // half icon
padding: '0 0 8px',
},
/* Styles applied to the root element if `alternativeLabel={true}`. */
alternativeLabel: {
position: 'absolute',
top: 8 + 4,
left: 'calc(-50% + 20px)',
right: 'calc(50% + 20px)',
},
/* Pseudo-class applied to the root element if `active={true}`. */
active: {},
/* Pseudo-class applied to the root element if `completed={true}`. */
completed: {},
/* Pseudo-class applied to the root element if `disabled={true}`. */
disabled: {},
/* Styles applied to the line element. */
line: {
display: 'block',
borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
},
/* Styles applied to the root element if `orientation="horizontal"`. */
lineHorizontal: {
borderTopStyle: 'solid',
borderTopWidth: 1,
},
/* Styles applied to the root element if `orientation="vertical"`. */
lineVertical: {
borderLeftStyle: 'solid',
borderLeftWidth: 1,
minHeight: 24,
},
});
const StepConnector = React.forwardRef(function StepConnector(props, ref) {
const {
// eslint-disable-next-line react/prop-types
active,
// eslint-disable-next-line react/prop-types
alternativeLabel = false,
classes,
className,
// eslint-disable-next-line react/prop-types
completed,
// eslint-disable-next-line react/prop-types
disabled,
// eslint-disable-next-line react/prop-types
index,
// eslint-disable-next-line react/prop-types
orientation = 'horizontal',
...other
} = props;
return (
<div
className={clsx(
classes.root,
classes[orientation],
{
[classes.alternativeLabel]: alternativeLabel,
[classes.active]: active,
[classes.completed]: completed,
[classes.disabled]: disabled,
},
className,
)}
ref={ref}
{...other}
>
<span
className={clsx(classes.line, {
[classes.lineHorizontal]: orientation === 'horizontal',
[classes.lineVertical]: orientation === 'vertical',
})}
/>
</div>
);
});
StepConnector.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the d.ts file and run "yarn proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
};
export default withStyles(styles, { name: 'MuiStepConnector' })(StepConnector);