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

Jump to bottom

[7.x] [Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make synchronous (#54067) #54569

Merged
merged 1 commit into from
Jan 13, 2020
Merged

[7.x] [Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make synchronous (#54067) #54569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions ...maps/public/layers/styles/vector/components/legend/__snapshots__/vector_icon.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

91 changes: 30 additions & 61 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,51 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';

import { CircleIcon } from './circle_icon';
import { LineIcon } from './line_icon';
import { PolygonIcon } from './polygon_icon';
import { SymbolIcon } from './symbol_icon';
import { VECTOR_STYLES } from '../../vector_style_defaults';

export class VectorIcon extends Component {
state = {
isInitialized: false,
};

componentDidMount() {
this._isMounted = true;
this._init();
}

componentWillUnmount() {
this._isMounted = false;
}

async _init() {
const isPointsOnly = await this.props.loadIsPointsOnly();
const isLinesOnly = await this.props.loadIsLinesOnly();
if (this._isMounted) {
this.setState({
isInitialized: true,
isPointsOnly,
isLinesOnly,
});
}
}

render() {
if (!this.state.isInitialized) {
return null;
}

if (this.state.isLinesOnly) {
const style = {
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, true),
strokeWidth: '4px',
};
return <LineIcon style={style} />;
}

export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor, symbolId }) {
if (isLinesOnly) {
const style = {
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, false),
strokeWidth: '1px',
fill: this.props.getColorForProperty(VECTOR_STYLES.FILL_COLOR, false),
stroke: strokeColor,
strokeWidth: '4px',
};
return <LineIcon style={style} />;
}

if (!this.state.isPointsOnly) {
return <PolygonIcon style={style} />;
}
const style = {
stroke: strokeColor,
strokeWidth: '1px',
fill: fillColor,
};

if (!this.props.symbolId) {
return <CircleIcon style={style} />;
}
if (!isPointsOnly) {
return <PolygonIcon style={style} />;
}

return (
<SymbolIcon
symbolId={this.props.symbolId}
fill={style.fill}
stroke={style.stroke}
strokeWidth={style.strokeWidth}
/>
);
if (!symbolId) {
return <CircleIcon style={style} />;
}

return (
<SymbolIcon
symbolId={symbolId}
fill={style.fill}
stroke={style.stroke}
strokeWidth={style.strokeWidth}
/>
);
}

VectorIcon.propTypes = {
getColorForProperty: PropTypes.func.isRequired,
fillColor: PropTypes.string,
isPointsOnly: PropTypes.bool.isRequired,
isLinesOnly: PropTypes.bool.isRequired,
strokeColor: PropTypes.string.isRequired,
symbolId: PropTypes.string,
loadIsPointsOnly: PropTypes.func.isRequired,
loadIsLinesOnly: PropTypes.func.isRequired,
};
126 changes: 32 additions & 94 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,113 +8,51 @@ import React from 'react';
import { shallow } from 'enzyme';

import { VectorIcon } from './vector_icon';
import { VectorStyle } from '../../vector_style';
import { extractColorFromStyleProperty } from './extract_color_from_style_property';
import { VECTOR_STYLES } from '../../vector_style_defaults';

let isPointsOnly = false;
let isLinesOnly = false;
const styles = {
fillColor: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
color: '#ff0000',
},
},
lineColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
color: 'Blues',
field: {
name: 'prop1',
},
},
},
};

const defaultProps = {
getColorForProperty: (styleProperty, isLinesOnly) => {
if (isLinesOnly) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'grey');
}

if (styleProperty === VECTOR_STYLES.LINE_COLOR) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'none');
} else if (styleProperty === VECTOR_STYLES.FILL_COLOR) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.FILL_COLOR], 'grey');
} else {
//unexpected
console.error('Cannot return color for properties other then line or fill color');
}
},

loadIsPointsOnly: () => {
return isPointsOnly;
},
loadIsLinesOnly: () => {
return isLinesOnly;
},
};

function configureIsLinesOnly() {
isLinesOnly = true;
isPointsOnly = false;
}

function configureIsPointsOnly() {
isLinesOnly = false;
isPointsOnly = true;
}

function configureNotLineOrPointOnly() {
isLinesOnly = false;
isPointsOnly = false;
}

test('Renders PolygonIcon with correct styles when not line only or not point only', async () => {
configureNotLineOrPointOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders PolygonIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={false}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
/>
);

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

test('Renders LineIcon with correct styles when isLineOnly', async () => {
configureIsLinesOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders LineIcon', () => {
const component = shallow(
<VectorIcon isPointsOnly={false} isLinesOnly={true} strokeColor="rgb(106,173,213)" />
);

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

test('Renders CircleIcon with correct styles when isPointOnly', async () => {
configureIsPointsOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders CircleIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={true}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
/>
);

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

test('Renders SymbolIcon with correct styles when isPointOnly and symbolId provided', async () => {
configureIsPointsOnly();
const component = shallow(<VectorIcon {...defaultProps} symbolId="airfield-15" />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders SymbolIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={true}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
symbolId="airfield-15"
/>
);

expect(component).toMatchSnapshot();
});
67 changes: 14 additions & 53 deletions .../legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/

import _ from 'lodash';
import React, { Component, Fragment } from 'react';

export class VectorStyleLegend extends Component {
state = {
styles: [],
};

componentDidMount() {
this._isMounted = true;
this._prevStyleDescriptors = undefined;
this._loadRows();
}

componentDidUpdate() {
this._loadRows();
}

componentWillUnmount() {
this._isMounted = false;
}

_loadRows = _.debounce(async () => {
const styles = await this.props.getLegendDetailStyleProperties();
const styleDescriptorPromises = styles.map(async style => {
return {
type: style.getStyleName(),
options: style.getOptions(),
fieldMeta: style.getFieldMeta(),
label: await style.getField().getLabel(),
};
});

const styleDescriptors = await Promise.all(styleDescriptorPromises);
if (this._isMounted && !_.isEqual(styleDescriptors, this._prevStyleDescriptors)) {
this._prevStyleDescriptors = styleDescriptors;
this.setState({ styles: styles });
}
}, 100);

render() {
return this.state.styles.map(style => {
return (
<Fragment key={style.getStyleName()}>
{style.renderLegendDetailRow({
loadIsLinesOnly: this.props.loadIsLinesOnly,
loadIsPointsOnly: this.props.loadIsPointsOnly,
symbolId: this.props.symbolId,
})}
</Fragment>
);
});
}
import React, { Fragment } from 'react';

export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }) {
return styles.map(style => {
return (
<Fragment key={style.getStyleName()}>
{style.renderLegendDetailRow({
isLinesOnly,
isPointsOnly,
symbolId,
})}
</Fragment>
);
});
}
Loading