@lunit/oui 2.2.5 → 2.2.6
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { v4 as uuidV4 } from 'uuid';
|
|
4
|
+
import { find as _find } from 'lodash';
|
|
4
5
|
import { Container } from './Preview.styled';
|
|
5
6
|
import { Box } from '@mui/material';
|
|
6
7
|
import { ToggleControl } from '../ToggleControl';
|
|
@@ -15,6 +16,11 @@ import { Threshold } from '../Threshold';
|
|
|
15
16
|
import { Histogram } from '../Histogram';
|
|
16
17
|
const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
|
|
17
18
|
const [controls, setControls] = useState(visualizationControls);
|
|
19
|
+
const thresholdItem = _find(analysisSummary, { componentType: 'threshold' });
|
|
20
|
+
const [selectedThresholdItem, setSelectedThresholdItem] = useState(thresholdItem?.options?.[0]?.title?.toString());
|
|
21
|
+
const [selectedThresholdValue, setSelectedThresholdValue] = useState(thresholdItem?.options?.[0]?.value);
|
|
22
|
+
const [selectedThresholdOptionValue, setSelectedThresholdOptionValue] = useState(thresholdItem?.options?.[0]?.value);
|
|
23
|
+
const [isThresholdPresetSelected, setIsThresholdPresetSelected] = useState(thresholdItem?.options?.[0]?.isPreset);
|
|
18
24
|
return (_jsxs(Container, { children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: visualizationControls.map((item, index) => {
|
|
19
25
|
if (item.componentType === 'toggleGroup') {
|
|
20
26
|
item.onChange = (event) => {
|
|
@@ -55,6 +61,13 @@ const Preview = ({ visualizationControls = [], analysisSummary = [] }) => {
|
|
|
55
61
|
});
|
|
56
62
|
}
|
|
57
63
|
return (_jsxs(Box, { children: [item.componentType === 'toggle' && (_jsx(ToggleControl, { ...item }, uuidV4())), item.componentType === 'toggleGroup' && (_jsx(ToggleControlGroup, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4()))] }, uuidV4()));
|
|
58
|
-
}) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) =>
|
|
64
|
+
}) }), _jsx(HorizonDivider, { componentType: "divider" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' }, children: [_jsx(FreeText, { componentType: "freeText", size: "medium-bold", content: "Analysis Summary" }), analysisSummary.map((item) => {
|
|
65
|
+
return (_jsxs(Box, { children: [item.componentType === 'accordion' && (_jsx(Accordion, { ...item }, uuidV4())), item.componentType === 'analysisBar' && (_jsx(AnalysisBar, { ...item }, uuidV4())), item.componentType === 'statistic' && (_jsx(Statistic, { ...item }, uuidV4())), item.componentType === 'score' && (_jsx(Score, { ...item }, uuidV4())), item.componentType === 'freeText' && (_jsx(FreeText, { ...item }, uuidV4())), item.componentType === 'threshold' && (_jsx(Threshold, { ...item, selectedItem: selectedThresholdItem, selectedValue: selectedThresholdValue, selectedOptionValue: selectedThresholdOptionValue, isPresetSelected: !!isThresholdPresetSelected, onChangeDropdown: (event) => {
|
|
66
|
+
setSelectedThresholdItem(event.target.value);
|
|
67
|
+
setSelectedThresholdValue(_find(thresholdItem?.options, { title: event.target.value })?.value);
|
|
68
|
+
setSelectedThresholdOptionValue(_find(thresholdItem?.options, { title: event.target.value })?.value);
|
|
69
|
+
setIsThresholdPresetSelected(_find(thresholdItem?.options, { title: event.target.value })?.isPreset);
|
|
70
|
+
}, onClickUpdateConfiguration: () => { } }, uuidV4())), item.componentType === 'histogram' && (_jsx(Histogram, { ...item }, uuidV4()))] }, uuidV4()));
|
|
71
|
+
})] })] }));
|
|
59
72
|
};
|
|
60
73
|
export default Preview;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ThresholdProps } from './Threshold.types';
|
|
2
|
-
declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, selectedItem, selectedValue, selectedOptionValue, isPresetSelected, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Threshold;
|
|
@@ -10,23 +10,13 @@ import { Button, Dropdown, DropdownItem } from '../../components';
|
|
|
10
10
|
import { HorizonDivider } from '../HorizonDivider';
|
|
11
11
|
import { FreeText } from '../FreeText';
|
|
12
12
|
import { getPresetValue, getSliderMarks } from './Threshold.utils';
|
|
13
|
-
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
|
|
14
|
-
const [
|
|
15
|
-
const [selectedValue, setSelectedValue] = useState(options[0].value);
|
|
16
|
-
const [selectedOptionValue, setSelectedOptionValue] = useState(options[0].value);
|
|
17
|
-
const [isPresetSelected, setIsPresetSelected] = useState(options[0].isPreset);
|
|
13
|
+
const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells, statisticItems, options, description, controlStep = 1, isLoading = false, selectedItem, selectedValue, selectedOptionValue, isPresetSelected, onChangeDropdown, onSliderChangeCommitted, onClickUpdateConfiguration, }) => {
|
|
14
|
+
const [value, setValue] = useState(selectedValue || options[0].value);
|
|
18
15
|
const [isThresholdChanged, setIsThresholdChanged] = useState(false);
|
|
19
16
|
const presetValue = getPresetValue(options, selectedItem);
|
|
20
17
|
const marks = getSliderMarks(presetValue);
|
|
21
|
-
const handleChange = (event) => {
|
|
22
|
-
setSelectedItem(event.target.value);
|
|
23
|
-
setSelectedValue(options.find((option) => option.title === event.target.value)?.value);
|
|
24
|
-
setSelectedOptionValue(options.find((option) => option.title === event.target.value)?.value);
|
|
25
|
-
setIsPresetSelected(options.find((option) => option.title === event.target.value)?.isPreset || false);
|
|
26
|
-
onChangeDropdown(event);
|
|
27
|
-
};
|
|
28
18
|
const handleSliderChange = (event, value) => {
|
|
29
|
-
|
|
19
|
+
setValue(value);
|
|
30
20
|
setIsThresholdChanged(value !== selectedOptionValue);
|
|
31
21
|
};
|
|
32
22
|
const handleUpdateConfiguration = () => {
|
|
@@ -35,9 +25,9 @@ const Threshold = ({ componentType = 'threshold', title, totalScore, totalCells,
|
|
|
35
25
|
};
|
|
36
26
|
return (_jsxs(Container, { children: [_jsx(Score, { ...totalScore }), _jsx(Statistic, { ...totalCells }), statisticItems.map((item) => {
|
|
37
27
|
return (_jsx(Statistic, { ...item }, uuidV4()));
|
|
38
|
-
}), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: selectedItem, onChange:
|
|
28
|
+
}), _jsx(HorizonDivider, { componentType: "divider" }), _jsx(PresentationTypography, { size: "medium", children: title }), _jsx(Dropdown, { value: selectedItem, onChange: onChangeDropdown, sx: { width: '258px' }, children: options.map((option) => {
|
|
39
29
|
return (_jsx(DropdownItem, { value: option.title, children: option.title }, option.title));
|
|
40
|
-
}) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: isPresetSelected, step: controlStep, value:
|
|
30
|
+
}) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', paddingTop: '36px', gap: '6px' }, children: [_jsx(BaseSlider, { disabled: isPresetSelected, step: controlStep, value: value, valueLabelDisplay: "on", defaultThreshold: presetValue, marks: marks, onChange: handleSliderChange, onChangeCommitted: onSliderChangeCommitted }), !isPresetSelected && (_jsx(Button, { label: "Update Configuration", sx: {
|
|
41
31
|
width: '100%',
|
|
42
32
|
}, disabled: !isThresholdChanged || isLoading, onClick: handleUpdateConfiguration, loading: isLoading })), isPresetSelected && description?.preset && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.preset })), !isPresetSelected && description?.user && (_jsx(FreeText, { componentType: "freeText", size: "small-dimmed", content: description.user }))] })] }));
|
|
43
33
|
};
|
|
@@ -26,6 +26,10 @@ export interface ThresholdProps extends ThresholdSpec {
|
|
|
26
26
|
onChangeDropdown: (event: SelectChangeEvent) => void;
|
|
27
27
|
onSliderChangeCommitted: (event: Event | SyntheticEvent, value: number | number[]) => void;
|
|
28
28
|
onClickUpdateConfiguration: () => void;
|
|
29
|
+
selectedItem: string;
|
|
30
|
+
selectedValue: number;
|
|
31
|
+
selectedOptionValue: number;
|
|
32
|
+
isPresetSelected: boolean;
|
|
29
33
|
isLoading?: boolean;
|
|
30
34
|
}
|
|
31
35
|
export interface BaseSliderProps extends SliderProps {
|
package/package.json
CHANGED