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 Paper from '../Paper';
|
8 | import StepConnector from '../StepConnector';
|
9 | export const styles = {
|
10 |
|
11 | root: {
|
12 | display: 'flex',
|
13 | padding: 24
|
14 | },
|
15 |
|
16 |
|
17 | horizontal: {
|
18 | flexDirection: 'row',
|
19 | alignItems: 'center'
|
20 | },
|
21 |
|
22 |
|
23 | vertical: {
|
24 | flexDirection: 'column'
|
25 | },
|
26 |
|
27 |
|
28 | alternativeLabel: {
|
29 | alignItems: 'flex-start'
|
30 | }
|
31 | };
|
32 | const defaultConnector = React.createElement(StepConnector, null);
|
33 | const Stepper = React.forwardRef(function Stepper(props, ref) {
|
34 | const {
|
35 | activeStep = 0,
|
36 | alternativeLabel = false,
|
37 | children,
|
38 | classes,
|
39 | className,
|
40 | connector: connectorProp = defaultConnector,
|
41 | nonLinear = false,
|
42 | orientation = 'horizontal'
|
43 | } = props,
|
44 | other = _objectWithoutPropertiesLoose(props, ["activeStep", "alternativeLabel", "children", "classes", "className", "connector", "nonLinear", "orientation"]);
|
45 |
|
46 | const connector = React.isValidElement(connectorProp) ? React.cloneElement(connectorProp, {
|
47 | orientation
|
48 | }) : null;
|
49 | const childrenArray = React.Children.toArray(children);
|
50 | const steps = childrenArray.map((step, index) => {
|
51 | const state = {
|
52 | index,
|
53 | active: false,
|
54 | completed: false,
|
55 | disabled: false
|
56 | };
|
57 |
|
58 | if (activeStep === index) {
|
59 | state.active = true;
|
60 | } else if (!nonLinear && activeStep > index) {
|
61 | state.completed = true;
|
62 | } else if (!nonLinear && activeStep < index) {
|
63 | state.disabled = true;
|
64 | }
|
65 |
|
66 | return React.cloneElement(step, _extends({
|
67 | alternativeLabel,
|
68 | connector,
|
69 | last: index + 1 === childrenArray.length,
|
70 | orientation
|
71 | }, state, step.props));
|
72 | });
|
73 | return React.createElement(Paper, _extends({
|
74 | square: true,
|
75 | elevation: 0,
|
76 | className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel),
|
77 | ref: ref
|
78 | }, other), steps);
|
79 | });
|
80 | process.env.NODE_ENV !== "production" ? Stepper.propTypes = {
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | |
87 |
|
88 |
|
89 |
|
90 | activeStep: PropTypes.number,
|
91 |
|
92 | |
93 |
|
94 |
|
95 |
|
96 | alternativeLabel: PropTypes.bool,
|
97 |
|
98 | |
99 |
|
100 |
|
101 | children: PropTypes.node,
|
102 |
|
103 | |
104 |
|
105 |
|
106 |
|
107 | classes: PropTypes.object,
|
108 |
|
109 | |
110 |
|
111 |
|
112 | className: PropTypes.string,
|
113 |
|
114 | |
115 |
|
116 |
|
117 | connector: PropTypes.element,
|
118 |
|
119 | |
120 |
|
121 |
|
122 | nonLinear: PropTypes.bool,
|
123 |
|
124 | |
125 |
|
126 |
|
127 | orientation: PropTypes.oneOf(['horizontal', 'vertical'])
|
128 | } : void 0;
|
129 | export default withStyles(styles, {
|
130 | name: 'MuiStepper'
|
131 | })(Stepper); |
\ | No newline at end of file |