github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] Refactor style editor to use style property class instead of style descriptor object (#52001)

Browse source 
* [Maps] pass style property object instead of style descriptor to style editer components

* pass symbol descriptor

* cleanup from merge
This commit is contained in:
Nathan Reese 2019-12-02 14:08:30 -07:00 • committed by GitHub
parent d0d6d43aee
commit a46833ec98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

5
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/vector_style_color_editor.js
View file

@ -9,15 +9,12 @@ import React from 'react';
import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
import { DynamicColorSelection } from './dynamic_color_selection';
import { StaticColorSelection } from './static_color_selection';
import { getVectorStyleLabel } from '../get_vector_style_label';
export function VectorStyleColorEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
property={props.styleProperty}
label={getVectorStyleLabel(props.styleProperty)}
styleDescriptor={props.styleDescriptor}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
swatches={props.swatches}
DynamicSelector={DynamicColorSelection}

4
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/get_vector_style_label.js
View file

@ -26,6 +26,10 @@ export function getVectorStyleLabel(styleName) {
return i18n.translate('xpack.maps.styles.vector.symbolSizeLabel', {
defaultMessage: 'Symbol size'
});
case vectorStyles.ICON_ORIENTATION:
return i18n.translate('xpack.maps.styles.vector.orientationLabel', {
defaultMessage: 'Symbol orientation'
});
default:
return styleName;
}

7
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/orientation_editor.js
View file

@ -9,17 +9,12 @@ import React from 'react';
import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
import { DynamicOrientationSelection } from './dynamic_orientation_selection';
import { StaticOrientationSelection } from './static_orientation_selection';
import { i18n } from '@kbn/i18n';
export function OrientationEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
property={props.styleProperty}
label={i18n.translate('xpack.maps.styles.vector.orientationLabel', {
defaultMessage: 'Symbol orientation'
})}
styleDescriptor={props.styleDescriptor}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
DynamicSelector={DynamicOrientationSelection}
StaticSelector={StaticOrientationSelection}

5
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/vector_style_size_editor.js
View file

@ -9,15 +9,12 @@ import React from 'react';
import { StaticDynamicStyleRow } from '../static_dynamic_style_row';
import { DynamicSizeSelection } from './dynamic_size_selection';
import { StaticSizeSelection } from './static_size_selection';
import { getVectorStyleLabel } from '../get_vector_style_label';
export function VectorStyleSizeEditor(props) {
return (
<StaticDynamicStyleRow
ordinalFields={props.ordinalFields}
property={props.styleProperty}
label={getVectorStyleLabel(props.styleProperty)}
styleDescriptor={props.styleDescriptor}
styleProperty={props.styleProperty}
handlePropertyChange={props.handlePropertyChange}
DynamicSelector={DynamicSizeSelection}
StaticSelector={StaticSizeSelection}

18
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/static_dynamic_style_row.js
View file

@ -6,8 +6,8 @@
import React from 'react';
import { VectorStyle } from '../vector_style';
import _ from 'lodash';
import { i18n } from '@kbn/i18n';
import { getVectorStyleLabel } from './get_vector_style_label';
import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiFormRow, EuiButtonToggle } from '@elastic/eui';
@ -22,14 +22,11 @@ export class StaticDynamicStyleRow extends React.Component {
}
_isDynamic() {
if (!this.props.styleDescriptor) {
return false;
}
return this.props.styleDescriptor.type === VectorStyle.STYLE_TYPE.DYNAMIC;
return this.props.styleProperty.isDynamic();
}
_getStyleOptions() {
return _.get(this.props, 'styleDescriptor.options');
return this.props.styleProperty.getOptions();
}
_onStaticStyleChange = options => {
@ -37,7 +34,7 @@ export class StaticDynamicStyleRow extends React.Component {
type: VectorStyle.STYLE_TYPE.STATIC,
options,
};
this.props.handlePropertyChange(this.props.property, styleDescriptor);
this.props.handlePropertyChange(this.props.styleProperty.getStyleName(), styleDescriptor);
};
_onDynamicStyleChange = options => {
@ -45,7 +42,7 @@ export class StaticDynamicStyleRow extends React.Component {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options,
};
this.props.handlePropertyChange(this.props.property, styleDescriptor);
this.props.handlePropertyChange(this.props.styleProperty.getStyleName(), styleDescriptor);
};
_onTypeToggle = () => {
@ -100,7 +97,10 @@ export class StaticDynamicStyleRow extends React.Component {
<EuiFlexItem
className={isDynamic ? 'mapStaticDynamicSylingOption__dynamicSizeHack' : undefined}
>
<EuiFormRow label={this.props.label && this.props.label} display="rowCompressed">
<EuiFormRow
label={getVectorStyleLabel(this.props.styleProperty.getStyleName())}
display="rowCompressed"
>
{this._renderStyleSelector()}
</EuiFormRow>
</EuiFlexItem>

20
x-pack/legacy/plugins/maps/public/layers/styles/vector/components/vector_style_editor.js
View file

@ -15,7 +15,6 @@ import { OrientationEditor } from './orientation/orientation_editor';
import {
getDefaultDynamicProperties,
getDefaultStaticProperties,
vectorStyles,
} from '../vector_style_defaults';
import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
@ -121,10 +120,9 @@ export class VectorStyleEditor extends Component {
_renderFillColor() {
return (
<VectorStyleColorEditor
styleProperty={vectorStyles.FILL_COLOR}
swatches={DEFAULT_FILL_COLORS}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.fillColor}
styleProperty={this.props.styleProperties.fillColor}
ordinalFields={this._getOrdinalFields()}
defaultStaticStyleOptions={this.state.defaultStaticProperties.fillColor.options}
defaultDynamicStyleOptions={this.state.defaultDynamicProperties.fillColor.options}
@ -135,10 +133,9 @@ export class VectorStyleEditor extends Component {
_renderLineColor() {
return (
<VectorStyleColorEditor
styleProperty={vectorStyles.LINE_COLOR}
swatches={DEFAULT_LINE_COLORS}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.lineColor}
styleProperty={this.props.styleProperties.lineColor}
ordinalFields={this._getOrdinalFields()}
defaultStaticStyleOptions={this.state.defaultStaticProperties.lineColor.options}
defaultDynamicStyleOptions={this.state.defaultDynamicProperties.lineColor.options}
@ -149,9 +146,8 @@ export class VectorStyleEditor extends Component {
_renderLineWidth() {
return (
<VectorStyleSizeEditor
styleProperty={vectorStyles.LINE_WIDTH}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.lineWidth}
styleProperty={this.props.styleProperties.lineWidth}
ordinalFields={this._getOrdinalFields()}
defaultStaticStyleOptions={this.state.defaultStaticProperties.lineWidth.options}
defaultDynamicStyleOptions={this.state.defaultDynamicProperties.lineWidth.options}
@ -162,9 +158,8 @@ export class VectorStyleEditor extends Component {
_renderSymbolSize() {
return (
<VectorStyleSizeEditor
styleProperty={vectorStyles.ICON_SIZE}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.iconSize}
styleProperty={this.props.styleProperties.iconSize}
ordinalFields={this._getOrdinalFields()}
defaultStaticStyleOptions={this.state.defaultStaticProperties.iconSize.options}
defaultDynamicStyleOptions={this.state.defaultDynamicProperties.iconSize.options}
@ -174,13 +169,12 @@ export class VectorStyleEditor extends Component {
_renderPointProperties() {
let iconOrientation;
if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_ICON) {
if (this.props.symbolDescriptor.options.symbolizeAs === SYMBOLIZE_AS_ICON) {
iconOrientation = (
<Fragment>
<OrientationEditor
styleProperty={vectorStyles.ICON_ORIENTATION}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.iconOrientation}
styleProperty={this.props.styleProperties.iconOrientation}
ordinalFields={this.state.numberFields}
defaultStaticStyleOptions={this.state.defaultStaticProperties.iconOrientation.options}
defaultDynamicStyleOptions={this.state.defaultDynamicProperties.iconOrientation.options}
@ -193,7 +187,7 @@ export class VectorStyleEditor extends Component {
return (
<Fragment>
<VectorStyleSymbolEditor
styleOptions={this.props.styleProperties.symbol.options}
styleOptions={this.props.symbolDescriptor.options}
handlePropertyChange={this.props.handlePropertyChange}
symbolOptions={SYMBOL_OPTIONS}
isDarkMode={chrome.getUiSettingsClient().get('theme:darkMode', false)}

10
x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
View file

@ -59,7 +59,6 @@ export class VectorStyle extends AbstractStyle {
this._iconSizeStyleProperty = this._makeSizeProperty(this._descriptor.properties[vectorStyles.ICON_SIZE], vectorStyles.ICON_SIZE);
// eslint-disable-next-line max-len
this._iconOrientationProperty = this._makeOrientationProperty(this._descriptor.properties[vectorStyles.ICON_ORIENTATION], vectorStyles.ICON_ORIENTATION);
}
_getAllStyleProperties() {
@ -83,7 +82,14 @@ export class VectorStyle extends AbstractStyle {
return (
<VectorStyleEditor
handlePropertyChange={handlePropertyChange}
styleProperties={styleProperties}
styleProperties={{
lineColor: this._lineColorStyleProperty,
fillColor: this._fillColorStyleProperty,
lineWidth: this._lineWidthStyleProperty,
iconSize: this._iconSizeStyleProperty,
iconOrientation: this._iconOrientationProperty,
}}
symbolDescriptor={this._descriptor.properties[vectorStyles.SYMBOL]}
layer={layer}
loadIsPointsOnly={this._getIsPointsOnly}
loadIsLinesOnly={this._getIsLinesOnly}