[Maps] convert dynamic icon style to TS

x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/breaked_legend.tsx

@@ -4,35 +4,59 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Component, ReactElement } from 'react';
 import _ from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 import { Category } from './category';
+import { IDynamicStyleProperty } from '../../properties/dynamic_style_property';
+
 const EMPTY_VALUE = '';
 
-export class BreakedLegend extends React.Component {
-  state = {
+interface Break {
+  color: string;
+  label: ReactElement<any> | string;
+  symbolId: string;
+}
+
+interface Props {
+  style: IDynamicStyleProperty<any>;
+  breaks: Break[];
+  isLinesOnly: boolean;
+  isPointsOnly: boolean;
+}
+
+interface State {
+  label: string;
+}
+
+export class BreakedLegend extends Component<Props, State> {
+  private _isMounted: boolean = false;
+
+  state: State = {
     label: EMPTY_VALUE,
   };
 
   componentDidMount() {
     this._isMounted = true;
-    this._loadParams();
+    this._loadLabel();
   }
 
   componentDidUpdate() {
-    this._loadParams();
+    this._loadLabel();
   }
 
   componentWillUnmount() {
     this._isMounted = false;
   }
 
-  async _loadParams() {
-    const label = await this.props.style.getField().getLabel();
-    const newState = { label };
-    if (this._isMounted && !_.isEqual(this.state, newState)) {
-      this.setState(newState);
+  async _loadLabel() {
+    const field = this.props.style.getField();
+    if (!field) {
+      return;
+    }
+    const label = await field.getLabel();
+    if (this._isMounted && !_.isEqual(this.state.label, label)) {
+      this.setState({ label });
     }
   }
 

x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/category.tsx

@@ -4,12 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { VECTOR_STYLES } from '../../../../../../common/constants';
+import React, { ReactElement } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { VECTOR_STYLES } from '../../../../../../common/constants';
 import { VectorIcon } from './vector_icon';
 
-export function Category({ styleName, label, color, isLinesOnly, isPointsOnly, symbolId }) {
+interface Props {
+  styleName: VECTOR_STYLES;
+  label: ReactElement<any> | string;
+  color: string;
+  isLinesOnly: boolean;
+  isPointsOnly: boolean;
+  symbolId: string;
+}
+
+export function Category({ styleName, label, color, isLinesOnly, isPointsOnly, symbolId }: Props) {
   function renderIcon() {
     if (styleName === VECTOR_STYLES.LABEL_COLOR) {
       return (

x-pack/plugins/maps/public/classes/styles/vector/components/legend/circle_icon.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/circle_icon.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
-export const CircleIcon = ({ style }) => (
+export const CircleIcon = ({ style }: { style: CSSProperties }) => (
   <svg
     className="euiIcon euiIcon--medium mapFillableCircle"
     xmlns="http://www.w3.org/2000/svg"

x-pack/plugins/maps/public/classes/styles/vector/components/legend/line_icon.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/line_icon.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
-export const LineIcon = ({ style }) => (
+export const LineIcon = ({ style }: { style: CSSProperties }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
     <line x1="0" y1="6" x2="16" y2="6" style={style} />
   </svg>

x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.tsx

@@ -4,12 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+// @ts-expect-error
 import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row';
 import { VECTOR_STYLES } from '../../../../../../common/constants';
-import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import { CircleIcon } from './circle_icon';
+import { IDynamicStyleProperty } from '../../properties/dynamic_style_property';
 
 function getLineWidthIcons() {
   const defaultStyle = {
@@ -37,41 +39,50 @@ function getSymbolSizeIcons() {
 }
 const EMPTY_VALUE = '';
 
-export class OrdinalLegend extends React.Component {
-  constructor() {
-    super();
-    this._isMounted = false;
-    this.state = {
-      label: EMPTY_VALUE,
-    };
-  }
+interface Props {
+  style: IDynamicStyleProperty<any>;
+}
 
-  async _loadParams() {
-    const label = await this.props.style.getField().getLabel();
-    const newState = { label };
-    if (this._isMounted && !_.isEqual(this.state, newState)) {
-      this.setState(newState);
-    }
-  }
+interface State {
+  label: string;
+}
 
-  _formatValue(value) {
-    if (value === EMPTY_VALUE) {
-      return value;
-    }
-    return this.props.style.formatField(value);
+export class OrdinalLegend extends Component<Props, State> {
+  private _isMounted: boolean = false;
+
+  state: State = {
+    label: EMPTY_VALUE,
+  };
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadLabel();
   }
 
   componentDidUpdate() {
-    this._loadParams();
+    this._loadLabel();
   }
 
   componentWillUnmount() {
     this._isMounted = false;
   }
 
-  componentDidMount() {
-    this._isMounted = true;
-    this._loadParams();
+  async _loadLabel() {
+    const field = this.props.style.getField();
+    if (!field) {
+      return;
+    }
+    const label = await field.getLabel();
+    if (this._isMounted && !_.isEqual(this.state.label, label)) {
+      this.setState({ label });
+    }
+  }
+
+  _formatValue(value: string | number) {
+    if (value === EMPTY_VALUE) {
+      return value;
+    }
+    return this.props.style.formatField(value);
   }
 
   _renderRangeLegendHeader() {
@@ -115,21 +126,16 @@ export class OrdinalLegend extends React.Component {
 
     const fieldMeta = this.props.style.getRangeFieldMeta();
 
-    let minLabel = EMPTY_VALUE;
-    let maxLabel = EMPTY_VALUE;
+    let minLabel: string | number = EMPTY_VALUE;
+    let maxLabel: string | number = EMPTY_VALUE;
     if (fieldMeta) {
-      const range = { min: fieldMeta.min, max: fieldMeta.max };
-      const min = this._formatValue(_.get(range, 'min', EMPTY_VALUE));
+      const min = this._formatValue(_.get(fieldMeta, 'min', EMPTY_VALUE));
       minLabel =
-        this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange
-          ? `< ${min}`
-          : min;
+        this.props.style.isFieldMetaEnabled() && fieldMeta.isMinOutsideStdRange ? `< ${min}` : min;
 
-      const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE));
+      const max = this._formatValue(_.get(fieldMeta, 'max', EMPTY_VALUE));
       maxLabel =
-        this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange
-          ? `> ${max}`
-          : max;
+        this.props.style.isFieldMetaEnabled() && fieldMeta.isMaxOutsideStdRange ? `> ${max}` : max;
     }
 
     return (

x-pack/plugins/maps/public/classes/styles/vector/components/legend/polygon_icon.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/polygon_icon.tsx

@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { CSSProperties } from 'react';
 
-export const PolygonIcon = ({ style }) => (
+export const PolygonIcon = ({ style }: { style: CSSProperties }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
     <rect width="15" height="15" x=".5" y=".5" style={style} rx="4" />
   </svg>

x-pack/plugins/maps/public/classes/styles/vector/components/legend/symbol_icon.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/symbol_icon.tsx

@@ -5,13 +5,24 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
+// @ts-expect-error
 import { getMakiSymbolSvg, styleSvg, buildSrcUrl } from '../../symbol_utils';
 
-export class SymbolIcon extends Component {
-  state = {
-    imgDataUrl: undefined,
+interface Props {
+  symbolId: string;
+  fill?: string;
+  stroke?: string;
+}
+
+interface State {
+  imgDataUrl: string | null;
+}
+
+export class SymbolIcon extends Component<Props, State> {
+  private _isMounted: boolean = false;
+
+  state: State = {
+    imgDataUrl: null,
   };
 
   componentDidMount() {
@@ -62,9 +73,3 @@ export class SymbolIcon extends Component {
     );
   }
 }
-
-SymbolIcon.propTypes = {
-  symbolId: PropTypes.string.isRequired,
-  fill: PropTypes.string,
-  stroke: PropTypes.string,
-};

x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_icon.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_icon.tsx

@@ -5,14 +5,21 @@
  */
 
 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';
 
-export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor, symbolId }) {
+interface Props {
+  fillColor?: string;
+  isPointsOnly: boolean;
+  isLinesOnly: boolean;
+  strokeColor?: string;
+  symbolId?: string;
+}
+
+export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor, symbolId }: Props) {
   if (isLinesOnly) {
     const style = {
       stroke: strokeColor,
@@ -44,11 +51,3 @@ export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor,
     />
   );
 }
-
-VectorIcon.propTypes = {
-  fillColor: PropTypes.string,
-  isPointsOnly: PropTypes.bool.isRequired,
-  isLinesOnly: PropTypes.bool.isRequired,
-  strokeColor: PropTypes.string,
-  symbolId: PropTypes.string,
-};

x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.js → x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx

@@ -5,8 +5,16 @@
  */
 
 import React from 'react';
+import { IStyleProperty } from '../../properties/style_property';
 
-export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }) {
+interface Props {
+  isLinesOnly: boolean;
+  isPointsOnly: boolean;
+  styles: Array<IStyleProperty<any>>;
+  symbolId: string;
+}
+
+export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }: Props) {
   const legendRows = [];
 
   for (let i = 0; i < styles.length; i++) {

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx

@@ -21,15 +21,21 @@ import { DynamicIconProperty } from './dynamic_icon_property';
 import { mockField, MockLayer } from './__tests__/test_util';
 import { IconDynamicOptions } from '../../../../../common/descriptor_types';
 import { IField } from '../../../fields/field';
+import { IVectorLayer } from '../../../layers/vector_layer/vector_layer';
 
 const makeProperty = (options: Partial<IconDynamicOptions>, field: IField = mockField) => {
+  const defaultOptions: IconDynamicOptions = {
+    iconPaletteId: null,
+    fieldMetaOptions: { isEnabled: false },
+  };
+  const mockVectorLayer = (new MockLayer() as unknown) as IVectorLayer;
   return new DynamicIconProperty(
-    { ...options, fieldMetaOptions: { isEnabled: false } },
+    { ...defaultOptions, ...options },
     VECTOR_STYLES.ICON,
     field,
-    new MockLayer(),
+    mockVectorLayer,
     () => {
-      return (x: string) => x + '_format';
+      return (value: string | number | undefined) => value + '_format';
     }
   );
 };