1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _typeof from "@babel/runtime/helpers/esm/typeof";
|
4 | import _extends from "@babel/runtime/helpers/esm/extends";
|
5 | import * as React from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
|
8 | import { deepmerge } from '@mui/utils';
|
9 | import styled from '../styles/styled';
|
10 | import useThemeProps from '../styles/useThemeProps';
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | import { jsx as _jsx } from "react/jsx-runtime";
|
20 |
|
21 | function joinChildren(children, separator) {
|
22 | var childrenArray = React.Children.toArray(children).filter(Boolean);
|
23 | return childrenArray.reduce(function (output, child, index) {
|
24 | output.push(child);
|
25 |
|
26 | if (index < childrenArray.length - 1) {
|
27 | output.push( React.cloneElement(separator, {
|
28 | key: "separator-".concat(index)
|
29 | }));
|
30 | }
|
31 |
|
32 | return output;
|
33 | }, []);
|
34 | }
|
35 |
|
36 | var getSideFromDirection = function getSideFromDirection(direction) {
|
37 | return {
|
38 | row: 'Left',
|
39 | 'row-reverse': 'Right',
|
40 | column: 'Top',
|
41 | 'column-reverse': 'Bottom'
|
42 | }[direction];
|
43 | };
|
44 |
|
45 | export var style = function style(_ref) {
|
46 | var ownerState = _ref.ownerState,
|
47 | theme = _ref.theme;
|
48 |
|
49 | var styles = _extends({
|
50 | display: 'flex',
|
51 | flexDirection: 'column'
|
52 | }, handleBreakpoints({
|
53 | theme: theme
|
54 | }, resolveBreakpointValues({
|
55 | values: ownerState.direction,
|
56 | breakpoints: theme.breakpoints.values
|
57 | }), function (propValue) {
|
58 | return {
|
59 | flexDirection: propValue
|
60 | };
|
61 | }));
|
62 |
|
63 | if (ownerState.spacing) {
|
64 | var transformer = createUnarySpacing(theme);
|
65 | var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
|
66 | if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
|
67 | acc[breakpoint] = true;
|
68 | }
|
69 |
|
70 | return acc;
|
71 | }, {});
|
72 | var directionValues = resolveBreakpointValues({
|
73 | values: ownerState.direction,
|
74 | base: base
|
75 | });
|
76 | var spacingValues = resolveBreakpointValues({
|
77 | values: ownerState.spacing,
|
78 | base: base
|
79 | });
|
80 |
|
81 | if (_typeof(directionValues) === 'object') {
|
82 | Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
|
83 | var directionValue = directionValues[breakpoint];
|
84 |
|
85 | if (!directionValue) {
|
86 | var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
|
87 | directionValues[breakpoint] = previousDirectionValue;
|
88 | }
|
89 | });
|
90 | }
|
91 |
|
92 | var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
|
93 | return {
|
94 | '& > :not(style) + :not(style)': _defineProperty({
|
95 | margin: 0
|
96 | }, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
|
97 | };
|
98 | };
|
99 |
|
100 | styles = deepmerge(styles, handleBreakpoints({
|
101 | theme: theme
|
102 | }, spacingValues, styleFromPropValue));
|
103 | }
|
104 |
|
105 | styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
|
106 | return styles;
|
107 | };
|
108 | var StackRoot = styled('div', {
|
109 | name: 'MuiStack',
|
110 | slot: 'Root',
|
111 | overridesResolver: function overridesResolver(props, styles) {
|
112 | return [styles.root];
|
113 | }
|
114 | })(style);
|
115 | var Stack = React.forwardRef(function Stack(inProps, ref) {
|
116 | var themeProps = useThemeProps({
|
117 | props: inProps,
|
118 | name: 'MuiStack'
|
119 | });
|
120 | var props = extendSxProp(themeProps);
|
121 |
|
122 | var _props$component = props.component,
|
123 | component = _props$component === void 0 ? 'div' : _props$component,
|
124 | _props$direction = props.direction,
|
125 | direction = _props$direction === void 0 ? 'column' : _props$direction,
|
126 | _props$spacing = props.spacing,
|
127 | spacing = _props$spacing === void 0 ? 0 : _props$spacing,
|
128 | divider = props.divider,
|
129 | children = props.children,
|
130 | other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children"]);
|
131 |
|
132 | var ownerState = {
|
133 | direction: direction,
|
134 | spacing: spacing
|
135 | };
|
136 | return _jsx(StackRoot, _extends({
|
137 | as: component,
|
138 | ownerState: ownerState,
|
139 | ref: ref
|
140 | }, other, {
|
141 | children: divider ? joinChildren(children, divider) : children
|
142 | }));
|
143 | });
|
144 | process.env.NODE_ENV !== "production" ? Stack.propTypes
|
145 |
|
146 | = {
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | |
153 |
|
154 |
|
155 | children: PropTypes.node,
|
156 |
|
157 | |
158 |
|
159 |
|
160 |
|
161 | component: PropTypes.elementType,
|
162 |
|
163 | |
164 |
|
165 |
|
166 |
|
167 |
|
168 | direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
169 |
|
170 | |
171 |
|
172 |
|
173 | divider: PropTypes.node,
|
174 |
|
175 | |
176 |
|
177 |
|
178 |
|
179 | spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
180 |
|
181 | |
182 |
|
183 |
|
184 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
185 | } : void 0;
|
186 | export default Stack; |
\ | No newline at end of file |