@rio-cloud/rio-uikit 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChartLabel.d.ts +2 -0
- package/ChartLabel.js +2 -0
- package/ComposedChart.d.ts +2 -0
- package/ComposedChart.js +2 -0
- package/GroupedItemList.d.ts +2 -0
- package/GroupedItemList.js +2 -0
- package/LicensePlate.d.ts +2 -0
- package/LicensePlate.js +2 -0
- package/ReferenceLine.d.ts +2 -0
- package/ReferenceLine.js +2 -0
- package/components/assetTree/TreeOptions.js +7 -3
- package/components/charts/Area.d.ts +5 -0
- package/components/charts/Area.js +1 -9
- package/components/charts/AreaChart.d.ts +2 -0
- package/components/charts/AreaChart.js +9 -6
- package/components/charts/BarChart.js +4 -4
- package/components/charts/ChartLabel.d.ts +5 -0
- package/components/charts/ChartLabel.js +2 -0
- package/components/charts/ComposedChart.d.ts +34 -0
- package/components/charts/ComposedChart.js +30 -0
- package/components/charts/Legend.d.ts +8 -10
- package/components/charts/Legend.js +3 -12
- package/components/charts/Line.d.ts +5 -0
- package/components/charts/Line.js +1 -9
- package/components/charts/LineChart.d.ts +2 -0
- package/components/charts/LineChart.js +8 -5
- package/components/charts/PieChart.js +5 -5
- package/components/charts/RadialBarChart.js +5 -5
- package/components/charts/ReferenceLine.d.ts +7 -0
- package/components/charts/ReferenceLine.js +2 -0
- package/components/dialog/Dialog.d.ts +12 -4
- package/components/dialog/SplitDialog.d.ts +3 -3
- package/components/groupedItemList/GroupedItemList.d.ts +79 -0
- package/components/groupedItemList/GroupedItemList.js +77 -0
- package/components/licensePlate/LicensePlate.d.ts +19 -0
- package/components/licensePlate/LicensePlate.js +14 -0
- package/components/selects/BaseSelectDropdown.d.ts +1 -0
- package/components/selects/BaseSelectDropdown.js +16 -14
- package/components/selects/Multiselect.d.ts +5 -0
- package/components/selects/Multiselect.js +2 -2
- package/components/selects/Select.d.ts +5 -0
- package/components/selects/Select.js +2 -2
- package/hooks/useKey.d.ts +7 -4
- package/hooks/useKey.js +36 -8
- package/lib/es/ChartLabel.d.ts +2 -0
- package/lib/es/ChartLabel.js +7 -0
- package/lib/es/ComposedChart.d.ts +2 -0
- package/lib/es/ComposedChart.js +7 -0
- package/lib/es/GroupedItemList.d.ts +2 -0
- package/lib/es/GroupedItemList.js +7 -0
- package/lib/es/LicensePlate.d.ts +2 -0
- package/lib/es/LicensePlate.js +7 -0
- package/lib/es/ReferenceLine.d.ts +2 -0
- package/lib/es/ReferenceLine.js +7 -0
- package/lib/es/components/assetTree/TreeOptions.js +7 -3
- package/lib/es/components/charts/Area.d.ts +5 -0
- package/lib/es/components/charts/Area.js +1 -9
- package/lib/es/components/charts/AreaChart.d.ts +2 -0
- package/lib/es/components/charts/AreaChart.js +7 -4
- package/lib/es/components/charts/BarChart.js +3 -3
- package/lib/es/components/charts/ChartLabel.d.ts +5 -0
- package/lib/es/components/charts/ChartLabel.js +4 -0
- package/lib/es/components/charts/ComposedChart.d.ts +34 -0
- package/lib/es/components/charts/ComposedChart.js +32 -0
- package/lib/es/components/charts/Legend.d.ts +8 -10
- package/lib/es/components/charts/Legend.js +5 -12
- package/lib/es/components/charts/Line.d.ts +5 -0
- package/lib/es/components/charts/Line.js +1 -9
- package/lib/es/components/charts/LineChart.d.ts +2 -0
- package/lib/es/components/charts/LineChart.js +7 -4
- package/lib/es/components/charts/PieChart.js +4 -4
- package/lib/es/components/charts/RadialBarChart.js +4 -4
- package/lib/es/components/charts/ReferenceLine.d.ts +7 -0
- package/lib/es/components/charts/ReferenceLine.js +4 -0
- package/lib/es/components/dialog/Dialog.d.ts +12 -4
- package/lib/es/components/dialog/SplitDialog.d.ts +3 -3
- package/lib/es/components/groupedItemList/GroupedItemList.d.ts +79 -0
- package/lib/es/components/groupedItemList/GroupedItemList.js +80 -0
- package/lib/es/components/licensePlate/LicensePlate.d.ts +19 -0
- package/lib/es/components/licensePlate/LicensePlate.js +16 -0
- package/lib/es/components/selects/BaseSelectDropdown.d.ts +1 -0
- package/lib/es/components/selects/BaseSelectDropdown.js +16 -14
- package/lib/es/components/selects/Multiselect.d.ts +5 -0
- package/lib/es/components/selects/Multiselect.js +2 -2
- package/lib/es/components/selects/Select.d.ts +5 -0
- package/lib/es/components/selects/Select.js +2 -2
- package/lib/es/hooks/useKey.d.ts +7 -4
- package/lib/es/hooks/useKey.js +35 -7
- package/lib/es/utils/colorScheme.js +10 -8
- package/lib/es/version.json +1 -1
- package/package.json +11 -11
- package/utils/colorScheme.js +10 -8
- package/version.json +1 -1
package/ChartLabel.d.ts
ADDED
package/ChartLabel.js
ADDED
package/ComposedChart.js
ADDED
package/LicensePlate.js
ADDED
package/ReferenceLine.js
ADDED
|
@@ -14,16 +14,20 @@ const TreeOptions = (props) => {
|
|
|
14
14
|
const customDropdown = _jsx("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
|
|
15
15
|
const dropdown = (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
|
|
16
16
|
if (treeOptionsTooltip) {
|
|
17
|
-
return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
|
|
17
|
+
return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
|
|
18
18
|
modifiers: [
|
|
19
19
|
{
|
|
20
20
|
name: 'offset',
|
|
21
21
|
options: {
|
|
22
|
-
offset: [
|
|
22
|
+
offset: [10, 5],
|
|
23
23
|
},
|
|
24
24
|
},
|
|
25
|
+
{
|
|
26
|
+
name: 'arrow',
|
|
27
|
+
options: {},
|
|
28
|
+
},
|
|
25
29
|
],
|
|
26
|
-
} }, { children: dropdown })));
|
|
30
|
+
} }, { children: _jsx("div", { children: dropdown }) })));
|
|
27
31
|
}
|
|
28
32
|
return dropdown;
|
|
29
33
|
};
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import type { AreaProps as RechartsAreaProps } from 'recharts';
|
|
3
3
|
export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
|
|
4
4
|
strokeColor?: string;
|
|
5
|
+
dataKey?: string;
|
|
6
|
+
unit?: string;
|
|
7
|
+
legendType?: string;
|
|
8
|
+
type?: string;
|
|
9
|
+
isAnimationActive?: boolean;
|
|
5
10
|
};
|
|
6
11
|
declare const Area: React.FC<AreaProps>;
|
|
7
12
|
export default Area;
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
const Area = () => null;
|
|
2
|
-
Area.defaultProps = {
|
|
3
|
-
dataKey: 'value',
|
|
4
|
-
unit: '',
|
|
5
|
-
strokeColor: 'color-coldplay-fountain',
|
|
6
|
-
legendType: 'square',
|
|
7
|
-
type: 'monotone',
|
|
8
|
-
isAnimationActive: true,
|
|
9
|
-
};
|
|
1
|
+
const Area = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
|
|
10
2
|
export default Area;
|
|
@@ -6,6 +6,7 @@ import { type LegendProps } from './Legend';
|
|
|
6
6
|
import type { AreaProps } from './Area';
|
|
7
7
|
import type { GridProps } from './ChartGrid';
|
|
8
8
|
import type { ResponsiveContainerProps } from './ResponsiveContainer';
|
|
9
|
+
import type { ReferenceLineProps } from './ReferenceLine';
|
|
9
10
|
type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
|
|
10
11
|
export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
|
|
11
12
|
width?: number;
|
|
@@ -15,6 +16,7 @@ export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'dat
|
|
|
15
16
|
dataKey?: string | number | ((obj: T) => any);
|
|
16
17
|
gradients?: React.ReactElement<AreaGradientProps>[];
|
|
17
18
|
areas: React.ReactElement<AreaProps>[];
|
|
19
|
+
referenceLines?: React.ReactElement<ReferenceLineProps>[];
|
|
18
20
|
xAxisOptions?: XAxisProps;
|
|
19
21
|
yAxisOptions?: YAxisProps;
|
|
20
22
|
gridOptions?: GridProps;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { createElement as _createElement } from "react";
|
|
4
4
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
5
5
|
import 'react';
|
|
6
|
-
import { AreaChart as RechartsAreaChart, Area as RechartsArea, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
6
|
+
import { AreaChart as RechartsAreaChart, Area as RechartsArea, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
7
7
|
import isObject from 'lodash/fp/isObject';
|
|
8
8
|
import { getColor, mapGridOptions } from './chartHelper';
|
|
9
9
|
import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from './AreaGradient';
|
|
10
10
|
import ChartTooltip from './ChartTooltip';
|
|
11
|
-
import
|
|
11
|
+
import { getLegendDefaultProps } from './Legend';
|
|
12
12
|
const AreaChart = (props) => {
|
|
13
|
-
const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
|
|
13
|
+
const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
|
|
14
14
|
const areasWithGradient = areas.map(area => {
|
|
15
15
|
const _a = area.props, { strokeColor } = _a, remainingAreaProps = __rest(_a, ["strokeColor"]);
|
|
16
16
|
const gradientId = area.key;
|
|
@@ -21,7 +21,10 @@ const AreaChart = (props) => {
|
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
23
|
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
24
|
-
const legendProps = isObject(legend) ? legend.props : {};
|
|
25
|
-
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(
|
|
24
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
25
|
+
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, Object.assign({ wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle }, legendProps)) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(referenceLine => {
|
|
26
|
+
const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
|
|
27
|
+
return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
|
|
28
|
+
}), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
|
|
26
29
|
};
|
|
27
30
|
export default AreaChart;
|
|
@@ -2,16 +2,16 @@ import { __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
4
4
|
import 'react';
|
|
5
|
-
import { BarChart as RechartsBarChart, Bar as RechartsBar, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
5
|
+
import { BarChart as RechartsBarChart, Bar as RechartsBar, Legend as RechartsLegend, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
6
6
|
import isFunction from 'lodash/fp/isFunction';
|
|
7
7
|
import isObject from 'lodash/fp/isObject';
|
|
8
8
|
import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from './chartHelper';
|
|
9
9
|
import ChartTooltip from './ChartTooltip';
|
|
10
|
-
import
|
|
10
|
+
import { getLegendDefaultProps } from './Legend';
|
|
11
11
|
const BarChart = (props) => {
|
|
12
12
|
const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
|
|
13
13
|
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
14
|
-
const legendProps = isObject(legend) ? legend.props : {};
|
|
14
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
15
15
|
let legendPayload;
|
|
16
16
|
if (useDataColors) {
|
|
17
17
|
legendPayload = data.map((entry, index) => {
|
|
@@ -19,7 +19,7 @@ const BarChart = (props) => {
|
|
|
19
19
|
return Object.assign(Object.assign({}, entry), { value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
-
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)),
|
|
22
|
+
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
|
|
23
23
|
const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
|
|
24
24
|
const cellColor = color && getColor(color);
|
|
25
25
|
return (_jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
|
|
3
|
+
import { ChartTooltipProps } from './ChartTooltip';
|
|
4
|
+
import { type LegendProps } from './Legend';
|
|
5
|
+
import type { LineProps } from './Line';
|
|
6
|
+
import type { BarProps } from './Bar';
|
|
7
|
+
import type { ReferenceLineProps } from './ReferenceLine';
|
|
8
|
+
import type { GridProps } from './ChartGrid';
|
|
9
|
+
import type { ResponsiveContainerProps } from './ResponsiveContainer';
|
|
10
|
+
import type { AreaProps } from './Area';
|
|
11
|
+
type RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;
|
|
12
|
+
export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {
|
|
13
|
+
width?: number;
|
|
14
|
+
height?: number;
|
|
15
|
+
data: T[];
|
|
16
|
+
dataUnit?: string;
|
|
17
|
+
dataKey?: string | number | ((obj: T) => any);
|
|
18
|
+
lines?: React.ReactElement<LineProps>[];
|
|
19
|
+
bars?: React.ReactElement<BarProps>[];
|
|
20
|
+
areas?: React.ReactElement<AreaProps>[];
|
|
21
|
+
referenceLines?: React.ReactElement<ReferenceLineProps>[];
|
|
22
|
+
xAxisOptions?: XAxisProps;
|
|
23
|
+
yAxisOptions?: YAxisProps;
|
|
24
|
+
gridOptions?: GridProps;
|
|
25
|
+
containerOptions?: ResponsiveContainerProps;
|
|
26
|
+
showXAxis?: boolean;
|
|
27
|
+
showYAxis?: boolean;
|
|
28
|
+
showGrid?: boolean;
|
|
29
|
+
legend?: React.ReactElement<LegendProps> | boolean;
|
|
30
|
+
tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
|
|
31
|
+
brush?: boolean;
|
|
32
|
+
};
|
|
33
|
+
declare const ComposedChart: <T extends object>(props: ComposedChartProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export default ComposedChart;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
// @ts-ignore-next-line importsNotUsedAsValues
|
|
5
|
+
import 'react';
|
|
6
|
+
import { ComposedChart as RechartsComposedChart, Line as RechartsLine, Bar as RechartsBar, Area as RechartsArea, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
7
|
+
import isObject from 'lodash/fp/isObject';
|
|
8
|
+
import { getColor, mapGridOptions } from './chartHelper';
|
|
9
|
+
import ChartTooltip from './ChartTooltip';
|
|
10
|
+
import { getLegendDefaultProps } from './Legend';
|
|
11
|
+
const ComposedChart = (props) => {
|
|
12
|
+
const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "bars", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
|
|
13
|
+
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
14
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
15
|
+
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsComposedChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), areas.map(area => {
|
|
16
|
+
const _a = area.props, { strokeColor, fill } = _a, remainingAreaProps = __rest(_a, ["strokeColor", "fill"]);
|
|
17
|
+
return (_createElement(RechartsArea, Object.assign({}, remainingAreaProps, { key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) })));
|
|
18
|
+
}), bars.map(bar => {
|
|
19
|
+
const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
|
|
20
|
+
const cellColor = color && getColor(color);
|
|
21
|
+
return _jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }), bar.key);
|
|
22
|
+
}), lines.map(line => {
|
|
23
|
+
const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
|
|
24
|
+
return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
|
|
25
|
+
}), referenceLines.map(referenceLine => {
|
|
26
|
+
const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
|
|
27
|
+
return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
|
|
28
|
+
}), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
|
|
29
|
+
};
|
|
30
|
+
export default ComposedChart;
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { LegendProps as RechartsLegendProps } from 'recharts';
|
|
2
2
|
import type { Formatter, Payload } from 'recharts/types/component/DefaultLegendContent';
|
|
3
3
|
export type LegendFormatter = Formatter;
|
|
4
4
|
export type LegendPayload = Payload;
|
|
5
5
|
export type LegendProps = Omit<RechartsLegendProps, 'ref' | 'formatter'> & {
|
|
6
6
|
formatter?: (value: any, entry: any, index: number) => void;
|
|
7
7
|
};
|
|
8
|
-
declare const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
align: string;
|
|
15
|
-
verticalAlign: string;
|
|
16
|
-
};
|
|
8
|
+
export declare const getLegendDefaultProps: () => {
|
|
9
|
+
iconType: string;
|
|
10
|
+
iconSize: number;
|
|
11
|
+
layout: string;
|
|
12
|
+
align: string;
|
|
13
|
+
verticalAlign: string;
|
|
17
14
|
};
|
|
15
|
+
declare const Legend: (props: LegendProps) => null;
|
|
18
16
|
export default Legend;
|
|
@@ -1,20 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
3
2
|
import 'react';
|
|
4
|
-
|
|
5
|
-
const Legend = (props) => {
|
|
6
|
-
const { verticalAlign, wrapperStyle } = props;
|
|
7
|
-
return (_jsx(RechartsLegend
|
|
8
|
-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
9
|
-
, Object.assign({
|
|
10
|
-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
|
11
|
-
formatter: props.formatter, wrapperStyle: verticalAlign === 'bottom' ? { bottom: 0 } : wrapperStyle }, props)));
|
|
12
|
-
};
|
|
13
|
-
Legend.defaultProps = {
|
|
3
|
+
export const getLegendDefaultProps = () => ({
|
|
14
4
|
iconType: 'circle',
|
|
15
5
|
iconSize: 12,
|
|
16
6
|
layout: 'vertical',
|
|
17
7
|
align: 'right',
|
|
18
8
|
verticalAlign: 'top',
|
|
19
|
-
};
|
|
9
|
+
});
|
|
10
|
+
const Legend = (props) => null;
|
|
20
11
|
export default Legend;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import type { LineProps as RechartsLineProps } from 'recharts';
|
|
3
3
|
export type LineProps = Omit<RechartsLineProps, 'ref'> & {
|
|
4
4
|
strokeColor?: string;
|
|
5
|
+
dataKey?: string;
|
|
6
|
+
unit?: string;
|
|
7
|
+
legendType?: string;
|
|
8
|
+
type?: string;
|
|
9
|
+
isAnimationActive?: boolean;
|
|
5
10
|
};
|
|
6
11
|
declare const Line: React.FC<LineProps>;
|
|
7
12
|
export default Line;
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
const Line = () => null;
|
|
2
|
-
Line.defaultProps = {
|
|
3
|
-
dataKey: 'value',
|
|
4
|
-
unit: '',
|
|
5
|
-
strokeColor: 'color-coldplay-fountain',
|
|
6
|
-
legendType: 'square',
|
|
7
|
-
type: 'monotone',
|
|
8
|
-
isAnimationActive: true,
|
|
9
|
-
};
|
|
1
|
+
const Line = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
|
|
10
2
|
export default Line;
|
|
@@ -3,6 +3,7 @@ import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from
|
|
|
3
3
|
import { ChartTooltipProps } from './ChartTooltip';
|
|
4
4
|
import { type LegendProps } from './Legend';
|
|
5
5
|
import type { LineProps } from './Line';
|
|
6
|
+
import type { ReferenceLineProps } from './ReferenceLine';
|
|
6
7
|
import type { GridProps } from './ChartGrid';
|
|
7
8
|
import type { ResponsiveContainerProps } from './ResponsiveContainer';
|
|
8
9
|
type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
|
|
@@ -13,6 +14,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
|
|
|
13
14
|
dataUnit?: string;
|
|
14
15
|
dataKey?: string | number | ((obj: T) => any);
|
|
15
16
|
lines: React.ReactElement<LineProps>[];
|
|
17
|
+
referenceLines?: React.ReactElement<ReferenceLineProps>[];
|
|
16
18
|
xAxisOptions?: XAxisProps;
|
|
17
19
|
yAxisOptions?: YAxisProps;
|
|
18
20
|
gridOptions?: GridProps;
|
|
@@ -3,18 +3,21 @@ import { createElement as _createElement } from "react";
|
|
|
3
3
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
4
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
5
5
|
import 'react';
|
|
6
|
-
import { LineChart as RechartsLineChart, Line as RechartsLine, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
6
|
+
import { LineChart as RechartsLineChart, Line as RechartsLine, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
|
|
7
7
|
import isObject from 'lodash/fp/isObject';
|
|
8
8
|
import { getColor, mapGridOptions } from './chartHelper';
|
|
9
9
|
import ChartTooltip from './ChartTooltip';
|
|
10
|
-
import
|
|
10
|
+
import { getLegendDefaultProps } from './Legend';
|
|
11
11
|
const LineChart = (props) => {
|
|
12
|
-
const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
|
|
12
|
+
const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
|
|
13
13
|
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
14
|
-
const legendProps = isObject(legend) ? legend.props : {};
|
|
15
|
-
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(
|
|
14
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
15
|
+
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), lines.map(line => {
|
|
16
16
|
const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
|
|
17
17
|
return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
|
|
18
|
+
}), referenceLines.map(referenceLine => {
|
|
19
|
+
const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
|
|
20
|
+
return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
|
|
18
21
|
}), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
|
|
19
22
|
};
|
|
20
23
|
export default LineChart;
|
|
@@ -2,11 +2,11 @@ import { __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
4
4
|
import 'react';
|
|
5
|
-
import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, } from 'recharts';
|
|
5
|
+
import { PieChart as RechartsPieChart, Legend as RechartsLegend, Pie, Cell, ResponsiveContainer, } from 'recharts';
|
|
6
6
|
import isFunction from 'lodash/fp/isFunction';
|
|
7
7
|
import isObject from 'lodash/fp/isObject';
|
|
8
8
|
import { getFromDefaultColors, getColor } from './chartHelper';
|
|
9
|
-
import
|
|
9
|
+
import { getLegendDefaultProps } from './Legend';
|
|
10
10
|
import ChartTooltip, { defaultFormatter } from './ChartTooltip';
|
|
11
11
|
const RADIAN = Math.PI / 180;
|
|
12
12
|
const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, outerRadius, value }) => {
|
|
@@ -16,13 +16,13 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
|
|
|
16
16
|
return (_jsx("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
|
|
17
17
|
};
|
|
18
18
|
const PieChart = (props) => {
|
|
19
|
-
const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(
|
|
19
|
+
const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
|
|
20
20
|
// biome-ignore lint/suspicious/noExplicitAny:
|
|
21
21
|
const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
|
|
22
22
|
const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
|
|
23
23
|
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
24
|
-
const legendProps = isObject(legend) ? legend.props : {};
|
|
25
|
-
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(
|
|
24
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
25
|
+
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel,
|
|
26
26
|
// cx={Math.max(outerRadius, width / 3)}
|
|
27
27
|
// cy={height / 2}
|
|
28
28
|
innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels }, pieOptions, { children: data.map((entry, index) => {
|
|
@@ -2,14 +2,14 @@ import { __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
// @ts-ignore-next-line importsNotUsedAsValues
|
|
4
4
|
import 'react';
|
|
5
|
-
import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
|
|
5
|
+
import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
|
|
6
6
|
import isFunction from 'lodash/fp/isFunction';
|
|
7
7
|
import isObject from 'lodash/fp/isObject';
|
|
8
8
|
import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chartHelper';
|
|
9
|
-
import
|
|
9
|
+
import { getLegendDefaultProps } from './Legend';
|
|
10
10
|
import ChartTooltip from './ChartTooltip';
|
|
11
11
|
const RadialBarChart = (props) => {
|
|
12
|
-
const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(
|
|
12
|
+
const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
|
|
13
13
|
const _a = textOptions || {}, { text, size = '500%', weight = 'normal', color = 'gray-darkest' } = _a, remainingTextOptions = __rest(_a, ["text", "size", "weight", "color"]);
|
|
14
14
|
const textStyle = {
|
|
15
15
|
fontSize: size,
|
|
@@ -17,10 +17,10 @@ const RadialBarChart = (props) => {
|
|
|
17
17
|
fill: color && getColor(color),
|
|
18
18
|
};
|
|
19
19
|
const tooltipProps = isObject(tooltip) ? tooltip.props : {};
|
|
20
|
-
const legendProps = isObject(legend) ? legend.props : {};
|
|
20
|
+
const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
|
|
21
21
|
return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
|
|
22
22
|
const cellColor = getColor(entry.color) || getFromDefaultColors(index);
|
|
23
23
|
return (_jsx(Cell, { fill: isFunction(color) ? color(entry, index) : cellColor }, `cell-${index}`));
|
|
24
|
-
}) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(
|
|
24
|
+
}) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
|
|
25
25
|
};
|
|
26
26
|
export default RadialBarChart;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
|
|
3
|
+
export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
|
|
4
|
+
stroke?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const Line: React.FC<ReferenceLineProps>;
|
|
7
|
+
export default Line;
|
|
@@ -3,6 +3,7 @@ export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullwidth'
|
|
|
3
3
|
export type BaseDialogProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Opens the dialog when set to `true`.
|
|
6
|
+
*
|
|
6
7
|
* @default false
|
|
7
8
|
*/
|
|
8
9
|
show: boolean;
|
|
@@ -16,6 +17,7 @@ export type BaseDialogProps = {
|
|
|
16
17
|
subtitle?: React.ReactNode;
|
|
17
18
|
/**
|
|
18
19
|
* Shows a close button when set to `true`.
|
|
20
|
+
*
|
|
19
21
|
* @default true
|
|
20
22
|
*/
|
|
21
23
|
showCloseButton?: boolean;
|
|
@@ -25,24 +27,29 @@ export type BaseDialogProps = {
|
|
|
25
27
|
onClose?: () => void;
|
|
26
28
|
/**
|
|
27
29
|
* Defined how large the dialog will be rendered.
|
|
28
|
-
*
|
|
30
|
+
*
|
|
31
|
+
* By default, the dialog has a medium size, and thus it can be omitted.
|
|
29
32
|
*
|
|
30
33
|
* Possible values are: `xs`, `sm`, `lg` `xl` `fullwidth` `fullheight` `fullscreen`
|
|
34
|
+
*
|
|
31
35
|
* @default 'md'
|
|
32
36
|
*/
|
|
33
37
|
bsSize?: DialogSize;
|
|
34
38
|
/**
|
|
35
39
|
* Enables or disabled closing the dialog via esc key.
|
|
40
|
+
*
|
|
36
41
|
* @default false
|
|
37
42
|
*/
|
|
38
43
|
disableEsc?: boolean;
|
|
39
44
|
/**
|
|
40
45
|
* Enables the modal body to overflow and use inline scrolling if needed.
|
|
46
|
+
*
|
|
41
47
|
* @default false
|
|
42
48
|
*/
|
|
43
49
|
useOverflow?: boolean;
|
|
44
50
|
/**
|
|
45
51
|
* Show Header and Footer Borders for the "xs" dialog
|
|
52
|
+
*
|
|
46
53
|
* @default false
|
|
47
54
|
*/
|
|
48
55
|
showXsDialogBorders?: boolean;
|
|
@@ -74,6 +81,7 @@ export type DialogProps = BaseDialogProps & {
|
|
|
74
81
|
headerButtons?: React.ReactNode;
|
|
75
82
|
/**
|
|
76
83
|
* Deprecate to align with other dialog callbacks.
|
|
84
|
+
*
|
|
77
85
|
* @deprecated please use `onClose`
|
|
78
86
|
*/
|
|
79
87
|
onHide?: VoidFunction;
|
|
@@ -82,9 +90,9 @@ export type DialogProps = BaseDialogProps & {
|
|
|
82
90
|
*/
|
|
83
91
|
onEsc?: VoidFunction;
|
|
84
92
|
/**
|
|
85
|
-
* A callback function to be executed before closing the dialog.
|
|
86
|
-
*
|
|
87
|
-
*
|
|
93
|
+
* A callback function to be executed before closing the dialog.
|
|
94
|
+
*
|
|
95
|
+
* If the function returns `false`, the dialog will not be closed
|
|
88
96
|
*/
|
|
89
97
|
onCloseValidation?: () => boolean;
|
|
90
98
|
};
|
|
@@ -26,9 +26,9 @@ export type SplitDialogProps = BaseDialogProps & {
|
|
|
26
26
|
*/
|
|
27
27
|
footerClassName?: string;
|
|
28
28
|
/**
|
|
29
|
-
* A callback function to be executed before closing the dialog.
|
|
30
|
-
*
|
|
31
|
-
*
|
|
29
|
+
* A callback function to be executed before closing the dialog.
|
|
30
|
+
*
|
|
31
|
+
* If the function returns `false`, the dialog will not be closed
|
|
32
32
|
*/
|
|
33
33
|
onCloseValidation?: () => boolean;
|
|
34
34
|
};
|