Skip to content

Commit

Permalink
remove some dupe
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasneirynck
thomasneirynck committed Jan 13, 2020
1 parent f431bb5 commit 87fac2c
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 140 deletions.
83 changes: 83 additions & 0 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import _ from 'lodash';
import React from 'react';
import { removeRow, getColorInput, getDeleteButton, getColorStopRow } from './color_stops_utils';

export const ColorStops = ({
onChange,
colorStops,
isStopsInvalid,
sanitizeStopInput,
getStopError,
renderStopInput,
addNewRow,
canDeleteStop,
}) => {
function getStopInput(stop, index) {
const onStopChange = e => {
const newColorStops = _.cloneDeep(colorStops);
const newValue = sanitizeStopInput(e.target.value);
newColorStops[index].stop = newValue;
onChange({
colorStops: newColorStops,
isInvalid: isStopsInvalid(newColorStops),
});
};

const error = getStopError(stop, index);
return {
stopError: error,
stopInput: renderStopInput(stop, onStopChange, index),
};
}

const rows = colorStops.map((colorStop, index) => {
const onColorChange = color => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].color = color;
onChange({
colorStops: newColorStops,
isInvalid: isStopsInvalid(newColorStops),
});
};

const { stopError, stopInput } = getStopInput(colorStop.stop, index);
const { colorError, colorInput } = getColorInput(colorStops, onColorChange, colorStop.color);
const errors = [];
if (stopError) {
errors.push(stopError);
}
if (colorError) {
errors.push(colorError);
}

const onAdd = () => {
const newColorStops = addNewRow(colorStops, index);
onChange({
colorStops: newColorStops,
isInvalid: isStopsInvalid(newColorStops),
});
};

let deleteButton;
if (canDeleteStop(colorStops, index)) {
const onRemove = () => {
const newColorStops = removeRow(colorStops, index);
onChange({
colorStops: newColorStops,
isInvalid: isStopsInvalid(newColorStops),
});
};
deleteButton = getDeleteButton(onRemove);
}

return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
});

return <div>{rows}</div>;
};
115 changes: 51 additions & 64 deletions ...gacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { EuiFieldText } from '@elastic/eui';
import {
addCategoricalRow,
removeRow,
getColorInput,
getDeleteButton,
getColorStopRow,
DEFAULT_CUSTOM_COLOR,
DEFAULT_NEXT_COLOR,
} from './color_stops_utils';
import { addCategoricalRow, DEFAULT_CUSTOM_COLOR, DEFAULT_NEXT_COLOR } from './color_stops_utils';
import { i18n } from '@kbn/i18n';
import { ColorStops } from './color_stops';

export const ColorStopsCategorical = ({
colorStops = [
Expand All @@ -26,77 +19,71 @@ export const ColorStopsCategorical = ({
],
onChange,
}) => {
function getStopInput(stop, index) {
const onStopChange = e => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].stop = e.target.value;
onChange({
colorStops: newColorStops,
isInvalid: false,
});
};
const sanitizeStopInput = value => {
return value;
};

const getStopError = () => {
return null;
};

const renderStopInput = (stop, onStopChange, index) => {
let stopInput;
if (index === 0) {
stopInput = (
<EuiFieldText
aria-label="Default stop"
aria-label={i18n.translate(
'xpack.maps.styles.colorStops.categoricalStop.defaultCategoryAriaLabel',
{
defaultMessage: 'Default stop',
}
)}
value={stop}
placeholder={'Default'}
placeholder={i18n.translate(
'xpack.maps.styles.colorStops.categoricalStop.defaultCategoryPlaceholder',
{
defaultMessage: 'Default',
}
)}
disabled
onChange={onStopChange}
compressed
/>
);
} else {
stopInput = (
<EuiFieldText aria-label="Category" value={stop} onChange={onStopChange} compressed />
<EuiFieldText
aria-label={i18n.translate(
'xpack.maps.styles.colorStops.categoricalStop.categoryAriaLabel',
{
defaultMessage: 'Category',
}
)}
value={stop}
onChange={onStopChange}
compressed
/>
);
}
return stopInput;
};

return {
stopInput: stopInput,
};
}

const rows = colorStops.map((colorStop, index) => {
const onColorChange = color => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].color = color;
onChange({
colorStops: newColorStops,
isInvalid: false,
});
};

const { stopInput } = getStopInput(colorStop.stop, index);
const { colorError, colorInput } = getColorInput(colorStops, onColorChange, colorStop.color);
const errors = colorError ? [colorError] : [];

const onAdd = () => {
const newColorStops = addCategoricalRow(colorStops, index);
onChange({
colorStops: newColorStops,
isInvalid: false,
});
};

let deleteButton;
if (colorStops.length > 2) {
const onRemove = () => {
const newColorStops = removeRow(colorStops, index);
onChange({
colorStops: newColorStops,
isInvalid: false,
});
};
deleteButton = getDeleteButton(onRemove);
}

return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
});
const canDeleteStop = (colorStops, index) => {
return colorStops.length > 2 && index !== 0;
};

return <div>{rows}</div>;
return (
<ColorStops
onChange={onChange}
colorStops={colorStops}
isStopsInvalid={() => false}
sanitizeStopInput={sanitizeStopInput}
getStopError={getStopError}
renderStopInput={renderStopInput}
canDeleteStop={canDeleteStop}
addNewRow={addCategoricalRow}
/>
);
};

ColorStopsCategorical.propTypes = {
Expand Down
113 changes: 37 additions & 76 deletions ...k/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_ordinal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,29 @@
* you may not use this file except in compliance with the Elastic License.
*/

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { ColorStops } from './color_stops';
import { EuiFieldNumber } from '@elastic/eui';
import {
addOrdinalRow,
removeRow,
getColorInput,
isOrdinalStopInvalid,
isOrdinalStopsInvalid,
getDeleteButton,
getColorStopRow,
DEFAULT_CUSTOM_COLOR,
} from './color_stops_utils';
import { i18n } from '@kbn/i18n';

const DEFAULT_COLOR = '#FF0000';

export const ColorStopsOrdinal = ({
colorStops = [{ stop: 0, color: DEFAULT_COLOR }],
colorStops = [{ stop: 0, color: DEFAULT_CUSTOM_COLOR }],
onChange,
}) => {
function getStopInput(stop, index) {
const onStopChange = e => {
const newColorStops = _.cloneDeep(colorStops);
const sanitizedValue = parseFloat(e.target.value);
newColorStops[index].stop = isNaN(sanitizedValue) ? '' : sanitizedValue;
onChange({
colorStops: newColorStops,
isInvalid: isOrdinalStopsInvalid(newColorStops),
});
};
const sanitizeStopInput = value => {
const sanitizedValue = parseFloat(value);
return isNaN(sanitizedValue) ? '' : sanitizedValue;
};

const getStopError = (stop, index) => {
let error;
if (isOrdinalStopInvalid(stop)) {
error = i18n.translate('xpack.maps.styles.colorStops.ordinalStop.numberWarningLabel', {
Expand All @@ -50,67 +40,38 @@ export const ColorStopsOrdinal = ({
}
);
}
return error;
};

return {
stopError: error,
stopInput: (
<EuiFieldNumber
aria-label={i18n.translate('xpack.maps.styles.colorStops.ordinalStop.stopLabel', {
defaultMessage: 'Stop',
})}
value={stop}
onChange={onStopChange}
compressed
/>
),
};
}

const rows = colorStops.map((colorStop, index) => {
const onColorChange = color => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].color = color;
onChange({
colorStops: newColorStops,
isInvalid: isOrdinalStopsInvalid(newColorStops),
});
};

const { stopError, stopInput } = getStopInput(colorStop.stop, index);
const { colorError, colorInput } = getColorInput(colorStops, onColorChange, colorStop.color);
const errors = [];
if (stopError) {
errors.push(stopError);
}
if (colorError) {
errors.push(colorError);
}

const onAdd = () => {
const newColorStops = addOrdinalRow(colorStops, index);

onChange({
colorStops: newColorStops,
isInvalid: isOrdinalStopsInvalid(newColorStops),
});
};

let deleteButton;
if (colorStops.length > 1) {
const onRemove = () => {
const newColorStops = removeRow(colorStops, index);
onChange({
colorStops: newColorStops,
isInvalid: isOrdinalStopsInvalid(newColorStops),
});
};
deleteButton = getDeleteButton(onRemove);
}
const renderStopInput = (stop, onStopChange) => {
return (
<EuiFieldNumber
aria-label={i18n.translate('xpack.maps.styles.colorStops.ordinalStop.stopLabel', {
defaultMessage: 'Stop',
})}
value={stop}
onChange={onStopChange}
compressed
/>
);
};

return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
});
const canDeleteStop = colorStops => {
return colorStops.length > 1;
};

return <div>{rows}</div>;
return (
<ColorStops
onChange={onChange}
colorStops={colorStops}
isStopsInvalid={isOrdinalStopsInvalid}
sanitizeStopInput={sanitizeStopInput}
getStopError={getStopError}
renderStopInput={renderStopInput}
canDeleteStop={canDeleteStop}
addNewRow={addOrdinalRow}
/>
);
};

ColorStopsOrdinal.propTypes = {
Expand Down

0 comments on commit 87fac2c

Please sign in to comment.