-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
StepContent.js
103 lines (91 loc) · 2.4 KB
/
StepContent.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
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TransitionComponent from '../internal/ExpandTransition';
import warning from 'warning';
function ExpandTransition(props) {
return <TransitionComponent {...props} />;
}
const getStyles = (props, context) => {
const styles = {
root: {
marginTop: -14,
marginLeft: 14 + 11, // padding + 1/2 icon
paddingLeft: 24 - 11 + 8,
paddingRight: 16,
overflow: 'hidden',
},
};
if (!props.last) {
styles.root.borderLeft = `1px solid ${context.muiTheme.stepper.connectorLineColor}`;
}
return styles;
};
class StepContent extends Component {
static propTypes = {
/**
* Expands the content
*/
active: PropTypes.bool,
/**
* Step content
*/
children: PropTypes.node,
/**
* @ignore
*/
completed: PropTypes.bool,
/**
* @ignore
*/
last: PropTypes.bool,
/**
* Override the inline-style of the root element.
*/
style: PropTypes.object,
/**
* ReactTransitionGroup component.
*/
transition: PropTypes.func,
/**
* Adjust the duration of the content expand transition. Passed as a prop to the transition component.
*/
transitionDuration: PropTypes.number,
};
static defaultProps = {
transition: ExpandTransition,
transitionDuration: 450,
};
static contextTypes = {
muiTheme: PropTypes.object.isRequired,
stepper: PropTypes.object,
};
render() {
const {
active,
children,
completed, // eslint-disable-line no-unused-vars
last, // eslint-disable-line no-unused-vars
style,
transition,
transitionDuration,
...other
} = this.props;
const {stepper, muiTheme: {prepareStyles}} = this.context;
if (stepper.orientation !== 'vertical') {
warning(false, 'Material-UI: <StepContent /> is only designed for use with the vertical stepper.');
return null;
}
const styles = getStyles(this.props, this.context);
const transitionProps = {
enterDelay: transitionDuration,
transitionDuration: transitionDuration,
open: active,
};
return (
<div style={prepareStyles(Object.assign(styles.root, style))} {...other}>
{React.createElement(transition, transitionProps, <div style={{overflow: 'hidden'}}>{children}</div>)}
</div>
);
}
}
export default StepContent;