Skip to content

Commit

Permalink
internationalize
Browse files Browse the repository at this point in the history 
test
  • Loading branch information
@thomasneirynck
thomasneirynck committed Jan 12, 2020
1 parent 5e8d6eb commit f431bb5
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 95 deletions.
55 changes: 22 additions & 33 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 @@ -8,15 +8,20 @@ import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import { EuiFormRow, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
import { addCategoricalRow, removeRow, getColorInput, getDeleteButton } from './color_stops_utils';

const DEFAULT_COLOR = '#FF0000';
const DEFAULT_NEXT_COLOR = '#00FF00';
import { EuiFieldText } from '@elastic/eui';
import {
addCategoricalRow,
removeRow,
getColorInput,
getDeleteButton,
getColorStopRow,
DEFAULT_CUSTOM_COLOR,
DEFAULT_NEXT_COLOR,
} from './color_stops_utils';

export const ColorStopsCategorical = ({
colorStops = [
{ stop: null, color: DEFAULT_COLOR }, //first stop is the "other" color
{ stop: null, color: DEFAULT_CUSTOM_COLOR }, //first stop is the "other" color
{ stop: '', color: DEFAULT_NEXT_COLOR },
],
onChange,
Expand Down Expand Up @@ -55,8 +60,17 @@ export const ColorStopsCategorical = ({
}

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, onChange, colorStop.color, index);
const { colorError, colorInput } = getColorInput(colorStops, onColorChange, colorStop.color);
const errors = colorError ? [colorError] : [];

const onAdd = () => {
Expand All @@ -79,32 +93,7 @@ export const ColorStopsCategorical = ({
deleteButton = getDeleteButton(onRemove);
}

return (
<EuiFormRow
key={index}
className="mapColorStop"
isInvalid={errors.length !== 0}
error={errors}
display="rowCompressed"
>
<div>
<EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
<EuiFlexItem>{stopInput}</EuiFlexItem>
<EuiFlexItem>{colorInput}</EuiFlexItem>
</EuiFlexGroup>
<div className="mapColorStop__icons">
{deleteButton}
<EuiButtonIcon
iconType="plusInCircle"
color="primary"
aria-label="Add"
title="Add"
onClick={onAdd}
/>
</div>
</div>
</EuiFormRow>
);
return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
});

return <div>{rows}</div>;
Expand Down
71 changes: 24 additions & 47 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 @@ -8,22 +8,17 @@ import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';

import {
EuiColorPicker,
EuiFormRow,
EuiFieldNumber,
EuiFlexGroup,
EuiFlexItem,
EuiButtonIcon,
} from '@elastic/eui';
import { EuiFieldNumber } from '@elastic/eui';
import {
addOrdinalRow,
removeRow,
isColorInvalid,
getColorInput,
isOrdinalStopInvalid,
isOrdinalStopsInvalid,
getDeleteButton,
getColorStopRow,
} from './color_stops_utils';
import { i18n } from '@kbn/i18n';

const DEFAULT_COLOR = '#FF0000';

Expand All @@ -44,20 +39,34 @@ export const ColorStopsOrdinal = ({

let error;
if (isOrdinalStopInvalid(stop)) {
error = 'Stop must be a number';
error = i18n.translate('xpack.maps.styles.colorStops.ordinalStop.numberWarningLabel', {
defaultMessage: 'Stop must be a number',
});
} else if (index !== 0 && colorStops[index - 1].stop >= stop) {
error = 'Stop must be greater than previous stop value';
error = i18n.translate(
'xpack.maps.styles.colorStops.ordinalStop.numberOrderingWarningLabel',
{
defaultMessage: 'Stop must be greater than previous stop value',
}
);
}

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

function getColorInput(color, index) {
const rows = colorStops.map((colorStop, index) => {
const onColorChange = color => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].color = color;
Expand All @@ -67,15 +76,8 @@ export const ColorStopsOrdinal = ({
});
};

return {
colorError: isColorInvalid(color) ? 'Color must provide a valid hex value' : undefined,
colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
};
}

const rows = colorStops.map((colorStop, index) => {
const { stopError, stopInput } = getStopInput(colorStop.stop, index);
const { colorError, colorInput } = getColorInput(colorStop.color, index);
const { colorError, colorInput } = getColorInput(colorStops, onColorChange, colorStop.color);
const errors = [];
if (stopError) {
errors.push(stopError);
Expand Down Expand Up @@ -105,32 +107,7 @@ export const ColorStopsOrdinal = ({
deleteButton = getDeleteButton(onRemove);
}

return (
<EuiFormRow
key={index}
className="mapColorStop"
isInvalid={errors.length !== 0}
error={errors}
display="rowCompressed"
>
<div>
<EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
<EuiFlexItem>{stopInput}</EuiFlexItem>
<EuiFlexItem>{colorInput}</EuiFlexItem>
</EuiFlexGroup>
<div className="mapColorStop__icons">
{deleteButton}
<EuiButtonIcon
iconType="plusInCircle"
color="primary"
aria-label="Add"
title="Add"
onClick={onAdd}
/>
</div>
</div>
</EuiFormRow>
);
return getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd });
});

return <div>{rows}</div>;
Expand Down
68 changes: 53 additions & 15 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,17 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiButtonIcon, EuiColorPicker, isValidHex } from '@elastic/eui';
import _ from 'lodash';
import {
EuiButtonIcon,
EuiColorPicker,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
isValidHex,
} from '@elastic/eui';
import React from 'react';
import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
import { i18n } from '@kbn/i18n';

export function removeRow(colorStops, index) {
if (colorStops.length === 1) {
Expand Down Expand Up @@ -53,29 +60,57 @@ export function getDeleteButton(onRemove) {
<EuiButtonIcon
iconType="trash"
color="danger"
aria-label="Delete"
title="Delete"
aria-label={i18n.translate('xpack.maps.styles.colorStops.deleteButtonAriaLabel', {
defaultMessage: 'Delete',
})}
title={i18n.translate('xpack.maps.styles.colorStops.deleteButtonLabel', {
defaultMessage: 'Delete',
})}
onClick={onRemove}
/>
);
}

export function getColorInput(colorStops, onChange, color, index) {
const onColorChange = color => {
const newColorStops = _.cloneDeep(colorStops);
newColorStops[index].color = color;
onChange({
colorStops: newColorStops,
isInvalid: false,
});
};

export function getColorInput(colorStops, onColorChange, color) {
return {
colorError: isColorInvalid(color) ? 'Color must provide a valid hex value' : undefined,
colorError: isColorInvalid(color)
? i18n.translate('xpack.maps.styles.colorStops.hexWarningLabel', {
defaultMessage: 'Color must provide a valid hex value',
})
: undefined,
colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
};
}

export function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
return (
<EuiFormRow
key={index}
className="mapColorStop"
isInvalid={errors.length !== 0}
error={errors}
display="rowCompressed"
>
<div>
<EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
<EuiFlexItem>{stopInput}</EuiFlexItem>
<EuiFlexItem>{colorInput}</EuiFlexItem>
</EuiFlexGroup>
<div className="mapColorStop__icons">
{deleteButton}
<EuiButtonIcon
iconType="plusInCircle"
color="primary"
aria-label="Add"
title="Add"
onClick={onAdd}
/>
</div>
</div>
</EuiFormRow>
);
}

export function isColorInvalid(color) {
return !isValidHex(color) || color === '';
}
Expand All @@ -96,3 +131,6 @@ export function isOrdinalStopsInvalid(colorStops) {
return isColorInvalid(colorStop.color) || isOrdinalStopInvalid(colorStop.stop) || isDescending;
});
}

export const DEFAULT_CUSTOM_COLOR = '#FF0000';
export const DEFAULT_NEXT_COLOR = '#00FF00';

0 comments on commit f431bb5

Please sign in to comment.