@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
147 lines (146 loc) • 6.19 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GridChartsPanelCustomize = GridChartsPanelCustomize;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _styles = require("@mui/material/styles");
var _internals = require("@mui/x-data-grid-pro/internals");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _useGridChartIntegration = require("../../../hooks/utils/useGridChartIntegration");
var _Collapsible = require("../../collapsible/Collapsible");
var _CollapsibleTrigger = require("../../collapsible/CollapsibleTrigger");
var _CollapsiblePanel = require("../../collapsible/CollapsiblePanel");
var _useGridChartsIntegration = require("../../../hooks/features/chartsIntegration/useGridChartsIntegration");
var _jsxRuntime = require("react/jsx-runtime");
const GridChartsPanelCustomizeRoot = (0, _styles.styled)(_xDataGridPro.GridShadowScrollArea)({
height: '100%'
});
const GridChartsPanelCustomizeSection = (0, _styles.styled)(_Collapsible.Collapsible, {
name: 'MuiDataGrid',
slot: 'ChartsPanelCustomizeSection'
})({
margin: _internals.vars.spacing(0.5, 1)
});
const GridChartsPanelCustomizePanel = (0, _styles.styled)(_CollapsiblePanel.CollapsiblePanel, {
name: 'MuiDataGrid',
slot: 'chartsPanelSection'
})({
display: 'flex',
flexDirection: 'column',
padding: _internals.vars.spacing(2, 1.5),
gap: _internals.vars.spacing(3)
});
const GridChartsPanelCustomizePanelTitle = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelCustomizePanelTitle'
})({
font: _internals.vars.typography.font.body,
fontWeight: _internals.vars.typography.fontWeight.medium
});
function GridChartsPanelCustomize(props) {
const {
activeChartId,
sections
} = props;
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const {
chartStateLookup,
setChartState
} = (0, _useGridChartIntegration.useGridChartsIntegrationContext)();
const {
type: chartType,
configuration,
dimensions,
values
} = chartStateLookup[activeChartId] ?? _useGridChartsIntegration.EMPTY_CHART_INTEGRATION_CONTEXT_STATE;
const handleChange = (field, value) => {
setChartState(activeChartId, (0, _extends2.default)({}, configuration, {
configuration: (0, _extends2.default)({}, configuration, {
[field]: value
})
}));
};
if (chartType === '') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridOverlay, {
children: apiRef.current.getLocaleText('chartsChartNotSelected')
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelCustomizeRoot, {
children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelCustomizeSection, {
initiallyOpen: index === 0,
ownerState: rootProps,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CollapsibleTrigger.CollapsibleTrigger, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelCustomizePanelTitle, {
ownerState: rootProps,
children: section.label
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelCustomizePanel, {
ownerState: rootProps,
children: Object.entries(section.controls).map(([key, optRaw]) => {
const opt = optRaw;
const context = {
configuration,
dimensions,
values
};
const isHidden = opt.isHidden?.(context) ?? false;
if (isHidden) {
return null;
}
const isDisabled = opt.isDisabled?.(context) ?? false;
if (opt.type === 'boolean') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSwitch, (0, _extends2.default)({
checked: Boolean(configuration[key] ?? opt.default),
onChange: event => handleChange(key, event.target.checked),
size: "small",
label: opt.label,
disabled: isDisabled
}, rootProps.slotProps?.baseSwitch), key);
}
if (opt.type === 'select') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
fullWidth: true,
size: "small",
label: opt.label,
value: configuration[key] ?? opt.default,
onChange: event => handleChange(key, event.target.value),
disabled: isDisabled,
slotProps: {
htmlInput: (0, _extends2.default)({}, opt.htmlAttributes)
}
}, rootProps.slotProps?.baseSelect, {
children: (opt.options || []).map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, {
value: option.value,
native: false,
children: option.content
}, option.value))
}), key);
}
// string or number
return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
"aria-label": opt.label,
placeholder: opt.label,
label: opt.label,
type: opt.type === 'number' ? 'number' : 'text',
size: "small",
fullWidth: true,
disabled: isDisabled,
slotProps: {
htmlInput: (0, _extends2.default)({}, opt.htmlAttributes)
}
}, rootProps.slotProps?.baseTextField, {
value: (configuration[key] ?? opt.default ?? '').toString(),
onChange: event => handleChange(key, opt.type === 'number' ? Number(event.target.value) : event.target.value)
}), key);
})
})]
}, section.id))
});
}