FrontPastel/node_modules/@mui/system/esm/Unstable_Grid/gridGenerator.js

224 lines
6.9 KiB
JavaScript
Raw Normal View History

2024-04-17 13:55:11 +00:00
import _extends from "@babel/runtime/helpers/esm/extends";
import { traverseBreakpoints } from './traverseBreakpoints';
function appendLevel(level) {
if (!level) {
return '';
}
return `Level${level}`;
}
function isNestedContainer(ownerState) {
return ownerState.unstable_level > 0 && ownerState.container;
}
function createGetSelfSpacing(ownerState) {
return function getSelfSpacing(axis) {
return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
};
}
function createGetParentSpacing(ownerState) {
return function getParentSpacing(axis) {
if (ownerState.unstable_level === 0) {
return `var(--Grid-${axis}Spacing)`;
}
return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
};
}
function getParentColumns(ownerState) {
if (ownerState.unstable_level === 0) {
return `var(--Grid-columns)`;
}
return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
}
export const generateGridSizeStyles = ({
theme,
ownerState
}) => {
const getSelfSpacing = createGetSelfSpacing(ownerState);
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
let style = {};
if (value === true) {
style = {
flexBasis: 0,
flexGrow: 1,
maxWidth: '100%'
};
}
if (value === 'auto') {
style = {
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 0,
maxWidth: 'none',
width: 'auto'
};
}
if (typeof value === 'number') {
style = {
flexGrow: 0,
flexBasis: 'auto',
width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
};
}
appendStyle(styles, style);
});
return styles;
};
export const generateGridOffsetStyles = ({
theme,
ownerState
}) => {
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
let style = {};
if (value === 'auto') {
style = {
marginLeft: 'auto'
};
}
if (typeof value === 'number') {
style = {
marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
};
}
appendStyle(styles, style);
});
return styles;
};
export const generateGridColumnsStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = isNestedContainer(ownerState) ? {
[`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
} : {
'--Grid-columns': 12
};
traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
appendStyle(styles, {
[`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
});
});
return styles;
};
export const generateGridRowSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const getParentSpacing = createGetParentSpacing(ownerState);
const styles = isNestedContainer(ownerState) ? {
// Set the default spacing as its parent spacing.
// It will be overridden if spacing props are provided
[`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
} : {};
traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
var _theme$spacing;
appendStyle(styles, {
[`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
});
});
return styles;
};
export const generateGridColumnSpacingStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const getParentSpacing = createGetParentSpacing(ownerState);
const styles = isNestedContainer(ownerState) ? {
// Set the default spacing as its parent spacing.
// It will be overridden if spacing props are provided
[`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
} : {};
traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
var _theme$spacing2;
appendStyle(styles, {
[`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
});
});
return styles;
};
export const generateGridDirectionStyles = ({
theme,
ownerState
}) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
appendStyle(styles, {
flexDirection: value
});
});
return styles;
};
export const generateGridStyles = ({
ownerState
}) => {
const getSelfSpacing = createGetSelfSpacing(ownerState);
const getParentSpacing = createGetParentSpacing(ownerState);
return _extends({
minWidth: 0,
boxSizing: 'border-box'
}, ownerState.container && _extends({
display: 'flex',
flexWrap: 'wrap'
}, ownerState.wrap && ownerState.wrap !== 'wrap' && {
flexWrap: ownerState.wrap
}, {
margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
}, ownerState.disableEqualOverflow && {
margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
}), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
}, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
}));
};
export const generateSizeClassNames = gridSize => {
const classNames = [];
Object.entries(gridSize).forEach(([key, value]) => {
if (value !== false && value !== undefined) {
classNames.push(`grid-${key}-${String(value)}`);
}
});
return classNames;
};
export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
function isValidSpacing(val) {
if (val === undefined) {
return false;
}
return typeof val === 'string' && !Number.isNaN(Number(val)) || typeof val === 'number' && val > 0;
}
if (isValidSpacing(spacing)) {
return [`spacing-${smallestBreakpoint}-${String(spacing)}`];
}
if (typeof spacing === 'object' && !Array.isArray(spacing)) {
const classNames = [];
Object.entries(spacing).forEach(([key, value]) => {
if (isValidSpacing(value)) {
classNames.push(`spacing-${key}-${String(value)}`);
}
});
return classNames;
}
return [];
};
export const generateDirectionClasses = direction => {
if (direction === undefined) {
return [];
}
if (typeof direction === 'object') {
return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
}
return [`direction-xs-${String(direction)}`];
};