add types for editor component

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

src/components/editor/editor.js → src/components/editor/editor.tsx

@@ -18,57 +18,67 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component, ComponentType, CSSProperties, KeyboardEvent} from 'react';
 import styled from 'styled-components';
 import {Editor as Draw} from 'react-map-gl-draw';
 import window from 'global/window';
 import classnames from 'classnames';
 import get from 'lodash.get';
 import {createSelector} from 'reselect';
 
-import FeatureActionPanelFactory from './feature-action-panel';
+import FeatureActionPanelFactory, {FeatureActionPanelProps} from './feature-action-panel';
 import {FILTER_TYPES, EDITOR_MODES, EDITOR_AVAILABLE_LAYERS} from 'constants/default-settings';
 
 import {DEFAULT_RADIUS, getStyle as getFeatureStyle} from './feature-styles';
 import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style';
 import KeyEvent from 'constants/keyevent';
+import {Layer} from 'layers';
+import {Datasets, Filter} from 'reducers';
+import {Feature} from '@nebula.gl/edit-modes';
+import {MjolnirEvent} from 'mjolnir.js';
 
 const StyledWrapper = styled.div`
-  cursor: ${props => (props.editor.mode === EDITOR_MODES.EDIT ? 'pointer' : 'crosshair')};
+  cursor: ${(props: {editor: {mode: string}}) =>
+    props.editor.mode === EDITOR_MODES.EDIT ? 'pointer' : 'crosshair'};
   position: relative;
 `;
 
-const editorLayerFilter = layer => EDITOR_AVAILABLE_LAYERS.includes(layer.type);
+// @ts-ignore
+const editorLayerFilter = (layer: Layer) => EDITOR_AVAILABLE_LAYERS.includes(layer.type);
 
 EditorFactory.deps = [FeatureActionPanelFactory];
 
-export default function EditorFactory(FeatureActionPanel) {
-  class Editor extends Component {
-    static propTypes = {
-      filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-      layers: PropTypes.arrayOf(PropTypes.object).isRequired,
-      datasets: PropTypes.object.isRequired,
-      editor: PropTypes.object.isRequired,
-      layersToRender: PropTypes.object.isRequired,
-      onSelect: PropTypes.func.isRequired,
-      onUpdate: PropTypes.func.isRequired,
-      onDeleteFeature: PropTypes.func.isRequired,
-      onTogglePolygonFilter: PropTypes.func.isRequired,
-
-      index: PropTypes.number,
-      classnames: PropTypes.string,
-      clickRadius: PropTypes.number,
-      isEnabled: PropTypes.bool
-    };
+interface EditorProps {
+  filters: Filter[];
+  layers: Layer[];
+  datasets: Datasets;
+  editor: {selectedFeature: Feature; mode: string};
+  layersToRender: Record<string, Layer>;
+  index: number;
+  className: string; // ??
+  classnames: string;
+  clickRadius: number;
+  style: CSSProperties;
+  isEnabled: boolean;
+  onSelect: (f: Feature | null) => void;
+  onUpdate: (f: Feature[]) => void;
+  onDeleteFeature: (f: Feature) => void;
+  onTogglePolygonFilter: (l: Layer, f: Feature) => void;
+}
 
+export default function EditorFactory(
+  FeatureActionPanel: ComponentType<FeatureActionPanelProps>
+): ComponentType<EditorProps> {
+  class Editor extends Component<EditorProps> {
     static defaultProps = {
       clickRadius: DEFAULT_RADIUS
     };
 
+    static displayName = 'Editor';
+
     state = {
       showActions: false,
-      lastPosition: null
+      lastPosition: {x: 0, y: 0}
     };
 
     componentDidMount() {
@@ -79,11 +89,12 @@ export default function EditorFactory(FeatureActionPanel) {
       window.removeEventListener('keydown', this._onKeyPressed);
     }
 
-    layerSelector = props => props.layers;
-    layersToRenderSelector = props => props.layersToRender;
-    filterSelector = props => props.filters;
-    selectedFeatureIdSelector = props => get(props, ['editor', 'selectedFeature', 'id']);
-    editorFeatureSelector = props => get(props, ['editor', 'features']);
+    layerSelector = (props: EditorProps) => props.layers;
+    layersToRenderSelector = (props: EditorProps) => props.layersToRender;
+    filterSelector = (props: EditorProps) => props.filters;
+    selectedFeatureIdSelector = (props: EditorProps) =>
+      get(props, ['editor', 'selectedFeature', 'id']);
+    editorFeatureSelector = (props: EditorProps) => get(props, ['editor', 'features']);
 
     currentFilterSelector = createSelector(
       this.filterSelector,
@@ -110,7 +121,7 @@ export default function EditorFactory(FeatureActionPanel) {
           .concat(editorFeatures)
     );
 
-    _onKeyPressed = event => {
+    _onKeyPressed = (event: KeyboardEvent) => {
       const {isEnabled} = this.props;
 
       if (!isEnabled) {
@@ -130,7 +141,13 @@ export default function EditorFactory(FeatureActionPanel) {
       }
     };
 
-    _onSelect = ({selectedFeatureId, sourceEvent}) => {
+    _onSelect = ({
+      selectedFeatureId,
+      sourceEvent
+    }: {
+      selectedFeatureId: string | number;
+      sourceEvent: MjolnirEvent;
+    }) => {
       const allFeatures = this.allFeaturesSelector(this.props);
       this.setState(
         {
@@ -164,7 +181,7 @@ export default function EditorFactory(FeatureActionPanel) {
       this.setState({showActions: false});
     };
 
-    _onToggleLayer = layer => {
+    _onToggleLayer = (layer: Layer) => {
       const {selectedFeature} = this.props.editor;
       if (!selectedFeature) {
         return;
@@ -212,7 +229,5 @@ export default function EditorFactory(FeatureActionPanel) {
     }
   }
 
-  Editor.displayName = 'Editor';
-
   return Editor;
 }

src/components/editor/feature-action-panel.js → src/components/editor/feature-action-panel.tsx

@@ -18,16 +18,18 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useState, ComponentType} from 'react';
 import {useIntl} from 'react-intl';
 
 import ActionPanel, {ActionPanelItem} from 'components/common/action-panel';
 import styled from 'styled-components';
 import onClickOutside from 'react-onclickoutside';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {Trash, Layers, Copy, Checkmark} from 'components/common/icons';
 import copy from 'copy-to-clipboard';
+import {Layer} from 'layers';
+import {Datasets, Filter} from 'reducers';
+import {Feature} from '@nebula.gl/edit-modes';
 
 const LAYOVER_OFFSET = 4;
 
@@ -37,7 +39,22 @@ const StyledActionsLayer = styled.div`
 
 PureFeatureActionPanelFactory.deps = [];
 
-export function PureFeatureActionPanelFactory() {
+export interface FeatureActionPanelProps {
+  className?: string;
+  datasets: Datasets;
+  selectedFeature: Feature;
+  position: {
+    x: number;
+    y: number;
+  };
+  layers: Layer[];
+  currentFilter?: Filter;
+  onToggleLayer: (l: Layer) => void;
+  onDeleteFeature: () => void;
+  onClose: () => void;
+}
+
+export function PureFeatureActionPanelFactory(): ComponentType<FeatureActionPanelProps> {
   const FeatureActionPanel = ({
     className,
     datasets,
@@ -47,7 +64,7 @@ export function PureFeatureActionPanelFactory() {
     currentFilter,
     onToggleLayer,
     onDeleteFeature
-  }) => {
+  }: FeatureActionPanelProps) => {
     const [copied, setCopied] = useState(false);
     const {layerId = []} = currentFilter || {};
     const intl = useIntl();
@@ -75,6 +92,7 @@ export function PureFeatureActionPanelFactory() {
               <ActionPanelItem
                 key={index}
                 label={layer.config.label}
+                // @ts-ignore
                 color={datasets[layer.config.dataId].color}
                 isSelection={true}
                 isActive={layerId.includes(layer.id)}
@@ -102,18 +120,8 @@ export function PureFeatureActionPanelFactory() {
   };
 
   FeatureActionPanel.displayName = 'FeatureActionPanel';
-  FeatureActionPanel.propTypes = {
-    className: PropTypes.string,
-    datasets: PropTypes.object.isRequired,
-    position: PropTypes.object.isRequired,
-    layers: PropTypes.arrayOf(PropTypes.object).isRequired,
-    currentFilter: PropTypes.object,
-    onClose: PropTypes.func.isRequired,
-    onDeleteFeature: PropTypes.func.isRequired
-  };
-
   FeatureActionPanel.defaultProps = {
-    position: {}
+    position: {x: 0, y: 0}
   };
 
   return FeatureActionPanel;
@@ -124,9 +132,9 @@ FeatureActionPanelFactory.deps = PureFeatureActionPanelFactory.deps;
 export default function FeatureActionPanelFactory() {
   const PureFeatureActionPanel = PureFeatureActionPanelFactory();
 
-  const ClickOutsideFeatureActionPanel = props => {
+  const ClickOutsideFeatureActionPanel = (props: FeatureActionPanelProps) => {
     // @ts-ignore
-    ClickOutsideFeatureActionPanel.handleClickOutside = e => {
+    ClickOutsideFeatureActionPanel.handleClickOutside = (e: Event) => {
       e.preventDefault();
       e.stopPropagation();
       props.onClose?.();