iobroker.vis-2
Version:
Next generation graphical user interface for ioBroker.
386 lines (385 loc) • 13.1 kB
JavaScript
import { p as __mf_14, d as __mf_0, e as __mf_15, f as __mf_9, __tla as __tla_0 } from "./iobroker_vis__loadShare__react__loadShare__.js-Bo2lxMHB.js";
import { __tla as __tla_1 } from "./iobroker_vis__loadShare__prop_mf_2_types__loadShare__.js-OoAqYupB.js";
import { c as clsx, __tla as __tla_2 } from "./clsx-XqGtd7JN.js";
import { j as jsxRuntimeExports, __tla as __tla_3 } from "./jsx-runtime-DgDbgMDY.js";
import { f as useTheme, e as extendSxProp, i as isMuiElement, c as useThemeProps, __tla as __tla_4 } from "./useMediaQuery-D88JRmB1.js";
import { y as createStyled, c as composeClasses, g as generateUtilityClass, k as createTheme, __tla as __tla_5 } from "./createStyled-BvULSPVR.js";
let generateSizeClassNames, generateSpacingClassNames, createGrid, generateDirectionClasses, styled, traverseBreakpoints;
let __tla = Promise.all([
(() => {
try {
return __tla_0;
} catch {
}
})(),
(() => {
try {
return __tla_1;
} catch {
}
})(),
(() => {
try {
return __tla_2;
} catch {
}
})(),
(() => {
try {
return __tla_3;
} catch {
}
})(),
(() => {
try {
return __tla_4;
} catch {
}
})(),
(() => {
try {
return __tla_5;
} catch {
}
})()
]).then(async () => {
styled = createStyled();
const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter((key) => responsiveKeys.includes(key));
traverseBreakpoints = (breakpoints, responsive, iterator) => {
const smallestBreakpoint = breakpoints.keys[0];
if (Array.isArray(responsive)) {
responsive.forEach((breakpointValue, index) => {
iterator((responsiveStyles, style) => {
if (index <= breakpoints.keys.length - 1) {
if (index === 0) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
}
}
}, breakpointValue);
});
} else if (responsive && typeof responsive === "object") {
const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
keys.forEach((key) => {
if (breakpoints.keys.includes(key)) {
const breakpointValue = responsive[key];
if (breakpointValue !== void 0) {
iterator((responsiveStyles, style) => {
if (smallestBreakpoint === key) {
Object.assign(responsiveStyles, style);
} else {
responsiveStyles[breakpoints.up(key)] = style;
}
}, breakpointValue);
}
}
});
} else if (typeof responsive === "number" || typeof responsive === "string") {
iterator((responsiveStyles, style) => {
Object.assign(responsiveStyles, style);
}, responsive);
}
};
function getSelfSpacingVar(axis) {
return `--Grid-${axis}Spacing`;
}
function getParentSpacingVar(axis) {
return `--Grid-parent-${axis}Spacing`;
}
const selfColumnsVar = "--Grid-columns";
const parentColumnsVar = "--Grid-parent-columns";
const generateGridSizeStyles = ({ theme, ownerState }) => {
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
let style = {};
if (value === "grow") {
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} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar("column")}) / var(${parentColumnsVar})))`
};
}
appendStyle(styles, style);
});
return styles;
};
const generateGridOffsetStyles = ({ theme, ownerState }) => {
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
let style = {};
if (value === "auto") {
style = {
marginLeft: "auto"
};
}
if (typeof value === "number") {
style = {
marginLeft: value === 0 ? "0px" : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar("column")}) * ${value} / var(${parentColumnsVar}))`
};
}
appendStyle(styles, style);
});
return styles;
};
const generateGridColumnsStyles = ({ theme, ownerState }) => {
if (!ownerState.container) {
return {};
}
const styles = {
[selfColumnsVar]: 12
};
traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
const columns = value ?? 12;
appendStyle(styles, {
[selfColumnsVar]: columns,
"> *": {
[parentColumnsVar]: columns
}
});
});
return styles;
};
const generateGridRowSpacingStyles = ({ theme, ownerState }) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
var _a;
const spacing = typeof value === "string" ? value : (_a = theme.spacing) == null ? void 0 : _a.call(theme, value);
appendStyle(styles, {
[getSelfSpacingVar("row")]: spacing,
"> *": {
[getParentSpacingVar("row")]: spacing
}
});
});
return styles;
};
const generateGridColumnSpacingStyles = ({ theme, ownerState }) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
var _a;
const spacing = typeof value === "string" ? value : (_a = theme.spacing) == null ? void 0 : _a.call(theme, value);
appendStyle(styles, {
[getSelfSpacingVar("column")]: spacing,
"> *": {
[getParentSpacingVar("column")]: spacing
}
});
});
return styles;
};
const generateGridDirectionStyles = ({ theme, ownerState }) => {
if (!ownerState.container) {
return {};
}
const styles = {};
traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
appendStyle(styles, {
flexDirection: value
});
});
return styles;
};
const generateGridStyles = ({ ownerState }) => {
return {
minWidth: 0,
boxSizing: "border-box",
...ownerState.container && {
display: "flex",
flexWrap: "wrap",
...ownerState.wrap && ownerState.wrap !== "wrap" && {
flexWrap: ownerState.wrap
},
gap: `var(${getSelfSpacingVar("row")}) var(${getSelfSpacingVar("column")})`
}
};
};
generateSizeClassNames = (size) => {
const classNames = [];
Object.entries(size).forEach(([key, value]) => {
if (value !== false && value !== void 0) {
classNames.push(`grid-${key}-${String(value)}`);
}
});
return classNames;
};
generateSpacingClassNames = (spacing, smallestBreakpoint = "xs") => {
function isValidSpacing(val) {
if (val === void 0) {
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 [];
};
generateDirectionClasses = (direction) => {
if (direction === void 0) {
return [];
}
if (typeof direction === "object") {
return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
}
return [
`direction-xs-${String(direction)}`
];
};
function deleteLegacyGridProps(props, breakpoints) {
if (props.item !== void 0) {
delete props.item;
}
if (props.zeroMinWidth !== void 0) {
delete props.zeroMinWidth;
}
breakpoints.keys.forEach((breakpoint) => {
if (props[breakpoint] !== void 0) {
delete props[breakpoint];
}
});
}
const defaultTheme = createTheme();
const defaultCreateStyledComponent = styled("div", {
name: "MuiGrid",
slot: "Root",
overridesResolver: (props, styles) => styles.root
});
function useThemePropsDefault(props) {
return useThemeProps({
props,
name: "MuiGrid",
defaultTheme
});
}
createGrid = function(options = {}) {
const { createStyledComponent = defaultCreateStyledComponent, useThemeProps: useThemeProps2 = useThemePropsDefault, useTheme: useTheme$1 = useTheme, componentName = "MuiGrid" } = options;
const useUtilityClasses = (ownerState, theme) => {
const { container, direction, spacing, wrap, size } = ownerState;
const slots = {
root: [
"root",
container && "container",
wrap !== "wrap" && `wrap-xs-${String(wrap)}`,
...generateDirectionClasses(direction),
...generateSizeClassNames(size),
...container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []
]
};
return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
};
function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
const parsedProp = {};
if (propValue === null) {
return parsedProp;
}
if (Array.isArray(propValue)) {
propValue.forEach((value, index) => {
if (value !== null && shouldUseValue(value) && breakpoints.keys[index]) {
parsedProp[breakpoints.keys[index]] = value;
}
});
} else if (typeof propValue === "object") {
Object.keys(propValue).forEach((key) => {
const value = propValue[key];
if (value !== null && value !== void 0 && shouldUseValue(value)) {
parsedProp[key] = value;
}
});
} else {
parsedProp[breakpoints.keys[0]] = propValue;
}
return parsedProp;
}
const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
const Grid = __mf_14(function Grid2(inProps, ref) {
const theme = useTheme$1();
const themeProps = useThemeProps2(inProps);
const props = extendSxProp(themeProps);
deleteLegacyGridProps(props, theme.breakpoints);
const { className, children, columns: columnsProp = 12, container = false, component = "div", direction = "row", wrap = "wrap", size: sizeProp = {}, offset: offsetProp = {}, spacing: spacingProp = 0, rowSpacing: rowSpacingProp = spacingProp, columnSpacing: columnSpacingProp = spacingProp, unstable_level: level = 0, ...other } = props;
const size = parseResponsiveProp(sizeProp, theme.breakpoints, (val) => val !== false);
const offset = parseResponsiveProp(offsetProp, theme.breakpoints);
const columns = inProps.columns ?? (level ? void 0 : columnsProp);
const spacing = inProps.spacing ?? (level ? void 0 : spacingProp);
const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (level ? void 0 : rowSpacingProp);
const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (level ? void 0 : columnSpacingProp);
const ownerState = {
...props,
level,
columns,
container,
direction,
wrap,
spacing,
rowSpacing,
columnSpacing,
size,
offset
};
const classes = useUtilityClasses(ownerState, theme);
return jsxRuntimeExports.jsx(GridRoot, {
ref,
as: component,
ownerState,
className: clsx(classes.root, className),
...other,
children: __mf_0.map(children, (child) => {
var _a;
if (__mf_15(child) && isMuiElement(child, [
"Grid"
]) && container && child.props.container) {
return __mf_9(child, {
unstable_level: ((_a = child.props) == null ? void 0 : _a.unstable_level) ?? level + 1
});
}
return child;
})
});
});
Grid.muiName = "Grid";
return Grid;
};
});
export {
__tla,
generateSizeClassNames as a,
generateSpacingClassNames as b,
createGrid as c,
generateDirectionClasses as g,
styled as s,
traverseBreakpoints as t
};