Skip to content

Commit d409bfa

Browse files
nreeseelasticmachine
nreese
and
elasticmachine
authored
[Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make synchronous (#54067) (#54569)
* [Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make synchronous * fix jest test * review feedback Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 807fcc2 commit d409bfa

File tree

13 files changed

+199
-573
lines changed

13 files changed

+199
-573
lines changed

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/__snapshots__/vector_icon.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js‎

Lines changed: 30 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,82 +4,51 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React, { Component } from 'react';
7+
import React from 'react';
88
import PropTypes from 'prop-types';
99

1010
import { CircleIcon } from './circle_icon';
1111
import { LineIcon } from './line_icon';
1212
import { PolygonIcon } from './polygon_icon';
1313
import { SymbolIcon } from './symbol_icon';
14-
import { VECTOR_STYLES } from '../../vector_style_defaults';
15-
16-
export class VectorIcon extends Component {
17-
state = {
18-
isInitialized: false,
19-
};
20-
21-
componentDidMount() {
22-
this._isMounted = true;
23-
this._init();
24-
}
25-
26-
componentWillUnmount() {
27-
this._isMounted = false;
28-
}
29-
30-
async _init() {
31-
const isPointsOnly = await this.props.loadIsPointsOnly();
32-
const isLinesOnly = await this.props.loadIsLinesOnly();
33-
if (this._isMounted) {
34-
this.setState({
35-
isInitialized: true,
36-
isPointsOnly,
37-
isLinesOnly,
38-
});
39-
}
40-
}
41-
42-
render() {
43-
if (!this.state.isInitialized) {
44-
return null;
45-
}
46-
47-
if (this.state.isLinesOnly) {
48-
const style = {
49-
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, true),
50-
strokeWidth: '4px',
51-
};
52-
return <LineIcon style={style} />;
53-
}
5414

15+
export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor, symbolId }) {
16+
if (isLinesOnly) {
5517
const style = {
56-
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, false),
57-
strokeWidth: '1px',
58-
fill: this.props.getColorForProperty(VECTOR_STYLES.FILL_COLOR, false),
18+
stroke: strokeColor,
19+
strokeWidth: '4px',
5920
};
21+
return <LineIcon style={style} />;
22+
}
6023

61-
if (!this.state.isPointsOnly) {
62-
return <PolygonIcon style={style} />;
63-
}
24+
const style = {
25+
stroke: strokeColor,
26+
strokeWidth: '1px',
27+
fill: fillColor,
28+
};
6429

65-
if (!this.props.symbolId) {
66-
return <CircleIcon style={style} />;
67-
}
30+
if (!isPointsOnly) {
31+
return <PolygonIcon style={style} />;
32+
}
6833

69-
return (
70-
<SymbolIcon
71-
symbolId={this.props.symbolId}
72-
fill={style.fill}
73-
stroke={style.stroke}
74-
strokeWidth={style.strokeWidth}
75-
/>
76-
);
34+
if (!symbolId) {
35+
return <CircleIcon style={style} />;
7736
}
37+
38+
return (
39+
<SymbolIcon
40+
symbolId={symbolId}
41+
fill={style.fill}
42+
stroke={style.stroke}
43+
strokeWidth={style.strokeWidth}
44+
/>
45+
);
7846
}
7947

8048
VectorIcon.propTypes = {
81-
getColorForProperty: PropTypes.func.isRequired,
49+
fillColor: PropTypes.string,
50+
isPointsOnly: PropTypes.bool.isRequired,
51+
isLinesOnly: PropTypes.bool.isRequired,
52+
strokeColor: PropTypes.string.isRequired,
8253
symbolId: PropTypes.string,
83-
loadIsPointsOnly: PropTypes.func.isRequired,
84-
loadIsLinesOnly: PropTypes.func.isRequired,
8554
};

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js‎

Lines changed: 32 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,113 +8,51 @@ import React from 'react';
88
import { shallow } from 'enzyme';
99

1010
import { VectorIcon } from './vector_icon';
11-
import { VectorStyle } from '../../vector_style';
12-
import { extractColorFromStyleProperty } from './extract_color_from_style_property';
13-
import { VECTOR_STYLES } from '../../vector_style_defaults';
1411

15-
let isPointsOnly = false;
16-
let isLinesOnly = false;
17-
const styles = {
18-
fillColor: {
19-
type: VectorStyle.STYLE_TYPE.STATIC,
20-
options: {
21-
color: '#ff0000',
22-
},
23-
},
24-
lineColor: {
25-
type: VectorStyle.STYLE_TYPE.DYNAMIC,
26-
options: {
27-
color: 'Blues',
28-
field: {
29-
name: 'prop1',
30-
},
31-
},
32-
},
33-
};
34-
35-
const defaultProps = {
36-
getColorForProperty: (styleProperty, isLinesOnly) => {
37-
if (isLinesOnly) {
38-
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'grey');
39-
}
40-
41-
if (styleProperty === VECTOR_STYLES.LINE_COLOR) {
42-
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'none');
43-
} else if (styleProperty === VECTOR_STYLES.FILL_COLOR) {
44-
return extractColorFromStyleProperty(styles[VECTOR_STYLES.FILL_COLOR], 'grey');
45-
} else {
46-
//unexpected
47-
console.error('Cannot return color for properties other then line or fill color');
48-
}
49-
},
50-
51-
loadIsPointsOnly: () => {
52-
return isPointsOnly;
53-
},
54-
loadIsLinesOnly: () => {
55-
return isLinesOnly;
56-
},
57-
};
58-
59-
function configureIsLinesOnly() {
60-
isLinesOnly = true;
61-
isPointsOnly = false;
62-
}
63-
64-
function configureIsPointsOnly() {
65-
isLinesOnly = false;
66-
isPointsOnly = true;
67-
}
68-
69-
function configureNotLineOrPointOnly() {
70-
isLinesOnly = false;
71-
isPointsOnly = false;
72-
}
73-
74-
test('Renders PolygonIcon with correct styles when not line only or not point only', async () => {
75-
configureNotLineOrPointOnly();
76-
const component = shallow(<VectorIcon {...defaultProps} />);
77-
78-
// Ensure all promises resolve
79-
await new Promise(resolve => process.nextTick(resolve));
80-
// Ensure the state changes are reflected
81-
component.update();
12+
test('Renders PolygonIcon', () => {
13+
const component = shallow(
14+
<VectorIcon
15+
fillColor="#ff0000"
16+
isPointsOnly={false}
17+
isLinesOnly={false}
18+
strokeColor="rgb(106,173,213)"
19+
/>
20+
);
8221

8322
expect(component).toMatchSnapshot();
8423
});
8524

86-
test('Renders LineIcon with correct styles when isLineOnly', async () => {
87-
configureIsLinesOnly();
88-
const component = shallow(<VectorIcon {...defaultProps} />);
89-
90-
// Ensure all promises resolve
91-
await new Promise(resolve => process.nextTick(resolve));
92-
// Ensure the state changes are reflected
93-
component.update();
25+
test('Renders LineIcon', () => {
26+
const component = shallow(
27+
<VectorIcon isPointsOnly={false} isLinesOnly={true} strokeColor="rgb(106,173,213)" />
28+
);
9429

9530
expect(component).toMatchSnapshot();
9631
});
9732

98-
test('Renders CircleIcon with correct styles when isPointOnly', async () => {
99-
configureIsPointsOnly();
100-
const component = shallow(<VectorIcon {...defaultProps} />);
101-
102-
// Ensure all promises resolve
103-
await new Promise(resolve => process.nextTick(resolve));
104-
// Ensure the state changes are reflected
105-
component.update();
33+
test('Renders CircleIcon', () => {
34+
const component = shallow(
35+
<VectorIcon
36+
fillColor="#ff0000"
37+
isPointsOnly={true}
38+
isLinesOnly={false}
39+
strokeColor="rgb(106,173,213)"
40+
/>
41+
);
10642

10743
expect(component).toMatchSnapshot();
10844
});
10945

110-
test('Renders SymbolIcon with correct styles when isPointOnly and symbolId provided', async () => {
111-
configureIsPointsOnly();
112-
const component = shallow(<VectorIcon {...defaultProps} symbolId="airfield-15" />);
113-
114-
// Ensure all promises resolve
115-
await new Promise(resolve => process.nextTick(resolve));
116-
// Ensure the state changes are reflected
117-
component.update();
46+
test('Renders SymbolIcon', () => {
47+
const component = shallow(
48+
<VectorIcon
49+
fillColor="#ff0000"
50+
isPointsOnly={true}
51+
isLinesOnly={false}
52+
strokeColor="rgb(106,173,213)"
53+
symbolId="airfield-15"
54+
/>
55+
);
11856

11957
expect(component).toMatchSnapshot();
12058
});

‎x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js‎

Lines changed: 14 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,18 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import _ from 'lodash';
8-
import React, { Component, Fragment } from 'react';
9-
10-
export class VectorStyleLegend extends Component {
11-
state = {
12-
styles: [],
13-
};
14-
15-
componentDidMount() {
16-
this._isMounted = true;
17-
this._prevStyleDescriptors = undefined;
18-
this._loadRows();
19-
}
20-
21-
componentDidUpdate() {
22-
this._loadRows();
23-
}
24-
25-
componentWillUnmount() {
26-
this._isMounted = false;
27-
}
28-
29-
_loadRows = _.debounce(async () => {
30-
const styles = await this.props.getLegendDetailStyleProperties();
31-
const styleDescriptorPromises = styles.map(async style => {
32-
return {
33-
type: style.getStyleName(),
34-
options: style.getOptions(),
35-
fieldMeta: style.getFieldMeta(),
36-
label: await style.getField().getLabel(),
37-
};
38-
});
39-
40-
const styleDescriptors = await Promise.all(styleDescriptorPromises);
41-
if (this._isMounted && !_.isEqual(styleDescriptors, this._prevStyleDescriptors)) {
42-
this._prevStyleDescriptors = styleDescriptors;
43-
this.setState({ styles: styles });
44-
}
45-
}, 100);
46-
47-
render() {
48-
return this.state.styles.map(style => {
49-
return (
50-
<Fragment key={style.getStyleName()}>
51-
{style.renderLegendDetailRow({
52-
loadIsLinesOnly: this.props.loadIsLinesOnly,
53-
loadIsPointsOnly: this.props.loadIsPointsOnly,
54-
symbolId: this.props.symbolId,
55-
})}
56-
</Fragment>
57-
);
58-
});
59-
}
7+
import React, { Fragment } from 'react';
8+
9+
export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }) {
10+
return styles.map(style => {
11+
return (
12+
<Fragment key={style.getStyleName()}>
13+
{style.renderLegendDetailRow({
14+
isLinesOnly,
15+
isPointsOnly,
16+
symbolId,
17+
})}
18+
</Fragment>
19+
);
20+
});
6021
}

0 commit comments

Comments
 (0)