Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Maps] Use dual range component #32273

Merged
merged 11 commits into from
Mar 14, 2019
Merged

[Maps] Use dual range component #32273

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4f51719
use dual range zoom
thomasneirynck Mar 1, 2019
d6af07f
width/size slider
thomasneirynck Mar 1, 2019
25175b9
ensure only valid inputs
thomasneirynck Mar 1, 2019
44d5239
Merge branch 'master' into maps/use_dualrange
thomasneirynck Mar 13, 2019
dc5a93c
replace with validated range
thomasneirynck Mar 13, 2019
ab10914
improve language
thomasneirynck Mar 13, 2019
ba5e18e
dont allow empty values in any condition for slider
thomasneirynck Mar 13, 2019
302f44a
do not pass along wrapper props
thomasneirynck Mar 13, 2019
d01247e
fix snapshots
thomasneirynck Mar 13, 2019
780ec30
cleanup
thomasneirynck Mar 14, 2019
1814d22
remove cruft
thomasneirynck Mar 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions src/legacy/ui/public/validated_range/is_range_valid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ import { i18n } from '@kbn/i18n';
const LOWER_VALUE_INDEX = 0;
const UPPER_VALUE_INDEX = 1;

export function isRangeValid(value, min, max) {
export function isRangeValid(value, min, max, allowEmptyRange) {
allowEmptyRange = typeof allowEmptyRange === 'boolean' ? allowEmptyRange : true;//cannot use default props since that uses falsy check
let lowerValue = isNaN(value[LOWER_VALUE_INDEX]) ? '' : value[LOWER_VALUE_INDEX];
let upperValue = isNaN(value[UPPER_VALUE_INDEX]) ? '' : value[UPPER_VALUE_INDEX];

const isLowerValueValid = lowerValue !== '';
const isUpperValueValid = upperValue !== '';
const isLowerValueValid = lowerValue.toString() !== '';
const isUpperValueValid = upperValue.toString() !== '';
if (isLowerValueValid) {
lowerValue = parseFloat(lowerValue);
}
Expand All @@ -37,22 +38,23 @@ export function isRangeValid(value, min, max) {
let isValid = true;
let errorMessage = '';

if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
if (!allowEmptyRange && (!isLowerValueValid || !isUpperValueValid)) {
thomasneirynck marked this conversation as resolved.
Show resolved Hide resolved
isValid = false;
errorMessage = i18n.translate('common.ui.dualRangeControl.bothMustNotBeEmptyWhenNotAllowed', {
defaultMessage: 'Neither lower and upper values can be empty'
thomasneirynck marked this conversation as resolved.
Show resolved Hide resolved
});
} else if ((!isLowerValueValid && isUpperValueValid) || (isLowerValueValid && !isUpperValueValid)) {
isValid = false;
errorMessage = i18n.translate('common.ui.dualRangeControl.mustSetBothErrorMessage', {
defaultMessage: 'Both lower and upper values must be set'
});
}

if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
} else if ((isLowerValueValid && lowerValue < min) || (isUpperValueValid && upperValue > max)) {
isValid = false;
errorMessage = i18n.translate('common.ui.dualRangeControl.outsideOfRangeErrorMessage', {
defaultMessage: 'Values must be on or between {min} and {max}',
values: { min, max }
});
}

if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
} else if (isLowerValueValid && isUpperValueValid && upperValue < lowerValue) {
isValid = false;
errorMessage = i18n.translate('common.ui.dualRangeControl.upperValidErrorMessage', {
defaultMessage: 'Upper value must be greater or equal to lower value'
Expand Down
5 changes: 5 additions & 0 deletions src/legacy/ui/public/validated_range/is_range_valid.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ it('Should return true when lower and upper values are not set (empty range)', (
expect(isValid).toBe(true);
});

it('Should return false when lower and upper values are not set (empty range) and empty ranges are not allowed', () => {
const { isValid } = isRangeValid(['', ''], 1, 10, false);
expect(isValid).toBe(false);
});

it('Should return false when lower value is not set and upper value is set', () => {
const { isValid, errorMessage } = isRangeValid(['', 3], 1, 10);
expect(isValid).toBe(false);
Expand Down
22 changes: 17 additions & 5 deletions src/legacy/ui/public/validated_range/validated_dual_range.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
*/

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { isRangeValid } from './is_range_valid';

import {
Expand All @@ -35,20 +36,22 @@ export class ValidatedDualRange extends Component {
const { isValid, errorMessage } = isRangeValid(
nextProps.value,
nextProps.min,
nextProps.max);
nextProps.max,
nextProps.allowEmptyRange
);
return {
value: nextProps.value,
prevValue: nextProps.value,
isValid,
errorMessage,
errorMessage
};
}

return null;
}

onChange = (value) => {
const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max);
_onChange = (value) => {
const { isValid, errorMessage } = isRangeValid(value, this.props.min, this.props.max, this.props.allowEmptyRange);

this.setState({
value,
Expand All @@ -68,17 +71,26 @@ export class ValidatedDualRange extends Component {
...rest
} = this.props;


return (
<EuiFormRow
isInvalid={!this.state.isValid}
error={this.state.errorMessage ? [this.state.errorMessage] : []}
>
<EuiDualRange
value={this.state.value}
onChange={this.onChange}
onChange={this._onChange}
{...rest}
/>
</EuiFormRow>
);
}
}

ValidatedDualRange.propTypes = {
allowEmptyRange: PropTypes.bool,
};

ValidatedDualRange.defaultProps = {
allowEmptyRange: true
};
53 changes: 20 additions & 33 deletions x-pack/plugins/maps/public/components/layer_panel/settings_panel/settings_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,17 @@ import {
EuiPanel,
EuiFormRow,
EuiFieldText,
EuiRange,
EuiSpacer,
EuiCallOut,
EuiCallOut
} from '@elastic/eui';

import { ValidatedRange } from '../../../shared/components/validated_range';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { ValidatedDualRange } from 'ui/validated_range';
nreese marked this conversation as resolved.
Show resolved Hide resolved

const MIN_ZOOM = 0;
const MAX_ZOOM = 24;

export function SettingsPanel(props) {

Expand All @@ -28,14 +32,11 @@ export function SettingsPanel(props) {
props.updateLabel(props.layerId, label);
};

const onMinZoomChange = (event) => {
const zoom = parseInt(event.target.value, 10);
props.updateMinZoom(props.layerId, zoom);
};

const onMaxZoomChange = (event) => {
const zoom = parseInt(event.target.value, 10);
props.updateMaxZoom(props.layerId, zoom);
const onZoomChange = (value) => {
thomasneirynck marked this conversation as resolved.
Show resolved Hide resolved
const minZoom = Math.max(MIN_ZOOM, parseInt(value[0], 10));
props.updateMinZoom(props.layerId, minZoom);
const maxZoom = Math.min(MAX_ZOOM, parseInt(value[1], 10));
props.updateMaxZoom(props.layerId, maxZoom);
};

const onAlphaChange = (alpha) => {
Expand Down Expand Up @@ -81,34 +82,20 @@ export function SettingsPanel(props) {
>
<EuiFlexGroup>
<EuiFlexItem>

<EuiFormRow
label={i18n.translate('xpack.maps.layerPanel.settingsPanel.minZoomLabel', {
defaultMessage: 'Min zoom'
})}
>
<EuiRange
min={0}
max={24}
value={props.minZoom.toString()}
onChange={onMinZoomChange}
showInput
showRange
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={i18n.translate('xpack.maps.layerPanel.settingsPanel.maxZoomLabel', {
defaultMessage: 'Max zoom'
label={i18n.translate('xpack.maps.layerPanel.settingsPanel.visibleZoomLabel', {
defaultMessage: 'Visible zoom range'
})}
>
<EuiRange
min={0}
max={24}
value={props.maxZoom.toString()}
onChange={onMaxZoomChange}
<ValidatedDualRange
min={MIN_ZOOM}
max={MAX_ZOOM}
value={[props.minZoom, props.maxZoom]}
showInput
showRange
onChange={onZoomChange}
allowEmptyRange={false}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down
50 changes: 13 additions & 37 deletions ...ck/plugins/maps/public/shared/layers/styles/components/vector/size/size_range_selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,66 +9,42 @@ import PropTypes from 'prop-types';
import {
EuiFormRow,
EuiFlexGroup,
EuiFlexItem,
EuiFlexItem
} from '@elastic/eui';
import { ValidatedRange } from '../../../../../components/validated_range';
import { ValidatedDualRange } from 'ui/validated_range';
import { i18n } from '@kbn/i18n';
import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';


export function SizeRangeSelector({ minSize, maxSize, onChange }) {

const onSizeChange = (min, max) => {
const onSizeChange = ([min, max]) => {
onChange({
minSize: min,
maxSize: max
minSize: Math.max(DEFAULT_MIN_SIZE, parseInt(min, 10)),
maxSize: Math.min(DEFAULT_MAX_SIZE, parseInt(max, 10))
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice refactoring here. Clean.

};

const onMinSizeChange = (updatedMinSize) => {
onSizeChange(updatedMinSize, updatedMinSize > maxSize ? updatedMinSize : maxSize);
};

const onMaxSizeChange = (updatedMaxSize) => {
onSizeChange(updatedMaxSize < minSize ? updatedMaxSize : minSize, updatedMaxSize);
};

return (
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
label={
i18n.translate('xpack.maps.styles.vector.size.minLabel', {
defaultMessage: 'Min size'
})
}
compressed
>
<ValidatedRange
min={DEFAULT_MIN_SIZE}
max={DEFAULT_MAX_SIZE}
value={minSize}
onChange={onMinSizeChange}
showInput
showRange
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
label={
i18n.translate('xpack.maps.styles.vector.size.maxLabel', {
defaultMessage: 'Max size'
i18n.translate('xpack.maps.styles.vector.size.minMaxLabel', {
thomasneirynck marked this conversation as resolved.
Show resolved Hide resolved
defaultMessage: 'Min and max size'
})
}
compressed
>
<ValidatedRange
<ValidatedDualRange
min={DEFAULT_MIN_SIZE}
max={DEFAULT_MAX_SIZE}
value={maxSize}
onChange={onMaxSizeChange}
step={1}
value={[minSize, maxSize]}
showInput
showRange
onChange={onSizeChange}
allowEmptyRange={false}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down