[Vis: Default editor] Fix validation for bounds margin (#48216)
* Fix validation for bounds margin * Update custom_extents_options.tsx * Rename isValid property * Revert boundsMargin type
This commit is contained in:
parent
d9d8398fb1
commit
17464f8612
|
@ -29,7 +29,7 @@ interface ValidationWrapperProps<T> extends VisOptionsProps<T> {
|
|||
}
|
||||
|
||||
interface Item {
|
||||
valid: boolean;
|
||||
isValid: boolean;
|
||||
}
|
||||
|
||||
function ValidationWrapper<T = unknown>({
|
||||
|
@ -37,20 +37,17 @@ function ValidationWrapper<T = unknown>({
|
|||
...rest
|
||||
}: ValidationWrapperProps<T>) {
|
||||
const [panelState, setPanelState] = useState({} as { [key: string]: Item });
|
||||
const isPanelValid = Object.values(panelState).every(item => item.valid);
|
||||
const isPanelValid = Object.values(panelState).every(item => item.isValid);
|
||||
const { setValidity } = rest;
|
||||
|
||||
const setValidityHandler = useCallback(
|
||||
(paramName: string, isValid: boolean) => {
|
||||
setPanelState({
|
||||
...panelState,
|
||||
[paramName]: {
|
||||
valid: isValid,
|
||||
},
|
||||
});
|
||||
},
|
||||
[panelState]
|
||||
);
|
||||
const setValidityHandler = useCallback((paramName: string, isValid: boolean) => {
|
||||
setPanelState(state => ({
|
||||
...state,
|
||||
[paramName]: {
|
||||
isValid,
|
||||
},
|
||||
}));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setValidity(isPanelValid);
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { shallow, mount } from 'enzyme';
|
||||
import { CustomExtentsOptions, CustomExtentsOptionsProps } from './custom_extents_options';
|
||||
import { YExtents } from './y_extents';
|
||||
import { valueAxis } from './mocks';
|
||||
|
@ -55,23 +55,27 @@ describe('CustomExtentsOptions component', () => {
|
|||
|
||||
describe('boundsMargin', () => {
|
||||
it('should set validity as true when value is positive', () => {
|
||||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, 5);
|
||||
defaultProps.axis.scale.boundsMargin = 5;
|
||||
mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
|
||||
});
|
||||
|
||||
it('should set validity as true when value is empty', () => {
|
||||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, '');
|
||||
const comp = mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.setProps({
|
||||
axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: undefined } },
|
||||
});
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
|
||||
});
|
||||
|
||||
it('should set validity as false when value is negative', () => {
|
||||
defaultProps.axis.scale.defaultYExtents = true;
|
||||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.find({ paramName: BOUNDS_MARGIN }).prop('setValue')(BOUNDS_MARGIN, -1);
|
||||
const comp = mount(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.setProps({
|
||||
axis: { ...valueAxis, scale: { ...valueAxis.scale, boundsMargin: -1 } },
|
||||
});
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, false);
|
||||
});
|
||||
|
@ -103,7 +107,6 @@ describe('CustomExtentsOptions component', () => {
|
|||
const comp = shallow(<CustomExtentsOptions {...defaultProps} />);
|
||||
comp.find({ paramName: DEFAULT_Y_EXTENTS }).prop('setValue')(DEFAULT_Y_EXTENTS, false);
|
||||
|
||||
expect(setMultipleValidity).toBeCalledWith(BOUNDS_MARGIN, true);
|
||||
const newScale = {
|
||||
...defaultProps.axis.scale,
|
||||
boundsMargin: undefined,
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { ValueAxis } from '../../../types';
|
||||
|
@ -38,21 +38,18 @@ function CustomExtentsOptions({
|
|||
setValueAxis,
|
||||
setValueAxisScale,
|
||||
}: CustomExtentsOptionsProps) {
|
||||
const [isBoundsMarginValid, setIsBoundsMarginValid] = useState(true);
|
||||
const invalidBoundsMarginMessage = i18n.translate(
|
||||
'kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBounds.minNeededBoundsMargin',
|
||||
{ defaultMessage: 'Bounds margin must be greater than or equal to 0.' }
|
||||
);
|
||||
|
||||
const setBoundsMargin = useCallback(
|
||||
(paramName: 'boundsMargin', value: number | '') => {
|
||||
const isValid = value === '' ? true : value >= 0;
|
||||
setIsBoundsMarginValid(isValid);
|
||||
setMultipleValidity('boundsMargin', isValid);
|
||||
const isBoundsMarginValid =
|
||||
!axis.scale.defaultYExtents || !axis.scale.boundsMargin || axis.scale.boundsMargin >= 0;
|
||||
|
||||
setValueAxisScale(paramName, value);
|
||||
},
|
||||
[setMultipleValidity, setValueAxisScale]
|
||||
const setBoundsMargin = useCallback(
|
||||
(paramName: 'boundsMargin', value: number | '') =>
|
||||
setValueAxisScale(paramName, value === '' ? undefined : value),
|
||||
[setValueAxisScale]
|
||||
);
|
||||
|
||||
const onDefaultYExtentsChange = useCallback(
|
||||
|
@ -60,7 +57,6 @@ function CustomExtentsOptions({
|
|||
const scale = { ...axis.scale, [paramName]: value };
|
||||
if (!scale.defaultYExtents) {
|
||||
delete scale.boundsMargin;
|
||||
setMultipleValidity('boundsMargin', true);
|
||||
}
|
||||
setValueAxis('scale', scale);
|
||||
},
|
||||
|
@ -79,6 +75,12 @@ function CustomExtentsOptions({
|
|||
[setValueAxis, axis.scale]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setMultipleValidity('boundsMargin', isBoundsMarginValid);
|
||||
|
||||
return () => setMultipleValidity('boundsMargin', true);
|
||||
}, [isBoundsMarginValid, setMultipleValidity]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SwitchOption
|
||||
|
|
|
@ -80,7 +80,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
|
|||
setMultipleValidity('yExtents', isValid);
|
||||
|
||||
return () => setMultipleValidity('yExtents', true);
|
||||
}, [isValid]);
|
||||
}, [isValid, setMultipleValidity]);
|
||||
|
||||
return (
|
||||
<EuiFormRow error={errors} isInvalid={!!errors.length} fullWidth compressed>
|
||||
|
|
Loading…
Reference in a new issue