UNPKG

5.44 kBJavaScriptView Raw
1import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2import _extends from "@babel/runtime/helpers/esm/extends";
3import * as React from 'react';
4import PropTypes from 'prop-types';
5import clsx from 'clsx';
6import { integerPropType } from '@mui/utils';
7import { unstable_composeClasses as composeClasses } from '@mui/base';
8import useThemeProps from '../styles/useThemeProps';
9import styled from '../styles/styled';
10import { getStepperUtilityClass } from './stepperClasses';
11import StepConnector from '../StepConnector';
12import StepperContext from './StepperContext';
13import { jsx as _jsx } from "react/jsx-runtime";
14
15var useUtilityClasses = function useUtilityClasses(ownerState) {
16 var orientation = ownerState.orientation,
17 alternativeLabel = ownerState.alternativeLabel,
18 classes = ownerState.classes;
19 var slots = {
20 root: ['root', orientation, alternativeLabel && 'alternativeLabel']
21 };
22 return composeClasses(slots, getStepperUtilityClass, classes);
23};
24
25var StepperRoot = styled('div', {
26 name: 'MuiStepper',
27 slot: 'Root',
28 overridesResolver: function overridesResolver(props, styles) {
29 var ownerState = props.ownerState;
30 return [styles.root, styles[ownerState.orientation], ownerState.alternativeLabel && styles.alternativeLabel];
31 }
32})(function (_ref) {
33 var ownerState = _ref.ownerState;
34 return _extends({
35 display: 'flex'
36 }, ownerState.orientation === 'horizontal' && {
37 flexDirection: 'row',
38 alignItems: 'center'
39 }, ownerState.orientation === 'vertical' && {
40 flexDirection: 'column'
41 }, ownerState.alternativeLabel && {
42 alignItems: 'flex-start'
43 });
44});
45
46var defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
47
48var Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
49 var props = useThemeProps({
50 props: inProps,
51 name: 'MuiStepper'
52 });
53
54 var _props$activeStep = props.activeStep,
55 activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,
56 _props$alternativeLab = props.alternativeLabel,
57 alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,
58 children = props.children,
59 className = props.className,
60 _props$connector = props.connector,
61 connector = _props$connector === void 0 ? defaultConnector : _props$connector,
62 _props$nonLinear = props.nonLinear,
63 nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,
64 _props$orientation = props.orientation,
65 orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
66 other = _objectWithoutProperties(props, ["activeStep", "alternativeLabel", "children", "className", "connector", "nonLinear", "orientation"]);
67
68 var ownerState = _extends({}, props, {
69 alternativeLabel: alternativeLabel,
70 orientation: orientation
71 });
72
73 var classes = useUtilityClasses(ownerState);
74 var childrenArray = React.Children.toArray(children).filter(Boolean);
75 var steps = childrenArray.map(function (step, index) {
76 return /*#__PURE__*/React.cloneElement(step, _extends({
77 index: index,
78 last: index + 1 === childrenArray.length
79 }, step.props));
80 });
81 var contextValue = React.useMemo(function () {
82 return {
83 activeStep: activeStep,
84 alternativeLabel: alternativeLabel,
85 connector: connector,
86 nonLinear: nonLinear,
87 orientation: orientation
88 };
89 }, [activeStep, alternativeLabel, connector, nonLinear, orientation]);
90 return /*#__PURE__*/_jsx(StepperContext.Provider, {
91 value: contextValue,
92 children: /*#__PURE__*/_jsx(StepperRoot, _extends({
93 ownerState: ownerState,
94 className: clsx(classes.root, className),
95 ref: ref
96 }, other, {
97 children: steps
98 }))
99 });
100});
101process.env.NODE_ENV !== "production" ? Stepper.propTypes
102/* remove-proptypes */
103= {
104 // ----------------------------- Warning --------------------------------
105 // | These PropTypes are generated from the TypeScript type definitions |
106 // | To update them edit the d.ts file and run "yarn proptypes" |
107 // ----------------------------------------------------------------------
108
109 /**
110 * Set the active step (zero based index).
111 * Set to -1 to disable all the steps.
112 * @default 0
113 */
114 activeStep: integerPropType,
115
116 /**
117 * If set to 'true' and orientation is horizontal,
118 * then the step label will be positioned under the icon.
119 * @default false
120 */
121 alternativeLabel: PropTypes.bool,
122
123 /**
124 * Two or more `<Step />` components.
125 */
126 children: PropTypes.node,
127
128 /**
129 * Override or extend the styles applied to the component.
130 */
131 classes: PropTypes.object,
132
133 /**
134 * @ignore
135 */
136 className: PropTypes.string,
137
138 /**
139 * An element to be placed between each step.
140 * @default <StepConnector />
141 */
142 connector: PropTypes.element,
143
144 /**
145 * If set the `Stepper` will not assist in controlling steps for linear flow.
146 * @default false
147 */
148 nonLinear: PropTypes.bool,
149
150 /**
151 * The component orientation (layout flow direction).
152 * @default 'horizontal'
153 */
154 orientation: PropTypes.oneOf(['horizontal', 'vertical']),
155
156 /**
157 * The system prop that allows defining system overrides as well as additional CSS styles.
158 */
159 sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
160} : void 0;
161export default Stepper;
\No newline at end of file