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 5 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
52 changes: 19 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 = (event) => {
nreese marked this conversation as resolved.
Show resolved Hide resolved
const minZoom = Math.max(MIN_ZOOM, parseInt(event[0], 10));
props.updateMinZoom(props.layerId, minZoom);
const maxZoom = Math.min(MAX_ZOOM, parseInt(event[1], 10));
props.updateMaxZoom(props.layerId, maxZoom);
};

const onAlphaChange = (alpha) => {
Expand Down Expand Up @@ -81,34 +82,19 @@ 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.minMaxZoomLabel', {
defaultMessage: 'Min and max zoom'
thomasneirynck marked this conversation as resolved.
Show resolved Hide resolved
})}
>
<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}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down
49 changes: 12 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,41 @@ 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}
/>
</EuiFormRow>
</EuiFlexItem>
Expand Down