6811966977

Committed 09 Nov 2023 12:45PM UTC coverage: 79.087% (+0.01%) from 79.073%

Build # 6811966977

Build Type

push

github

Committed by

web-flow

Commit Message

[chore] Making EffectPanelHeader actions configurable (#2432)

Run Details

5014 of 7484 branches covered (0.0%)

Branch coverage included in aggregate %.

22 of 22 new or added lines in 4 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

11883 of 13881 relevant lines covered (85.61%)

171.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

74.42

/src/components/src/effects/effect-panel.tsx

import React, {Component, ComponentType} from 'react';
import styled from 'styled-components';
import classnames from 'classnames';
import PropTypes from 'prop-types';

import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
import {removeEffect, updateEffect} from '@kepler.gl/actions';
import {Effect} from '@kepler.gl/types';

import EffectPanelHeaderFactory from './effect-panel-header';
import EffectConfiguratorFactory from './effect-configurator';

export type EffectPanelProps = {
  className: string;
  effect: Effect;
  isDraggable: boolean;
  listeners: any;
  removeEffect: typeof removeEffect;
  updateEffect: typeof updateEffect;

  style?: React.CSSProperties;
  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
  onTouchStart: React.TouchEventHandler<HTMLDivElement>;
};

export type PanelWrapperProps = {
  active: boolean;
};

const PanelWrapper = styled.div<PanelWrapperProps>`
  font-size: 12px;
  border-radius: 1px;
  margin-bottom: 8px;
  z-index: 1000;
  &.dragging {
    cursor: move;
  }
  margin: 3px 25px;
`;

EffectPanelFactory.deps = [EffectPanelHeaderFactory, EffectConfiguratorFactory];

function EffectPanelFactory(
  EffectPanelHeader: ReturnType<typeof EffectPanelHeaderFactory>,
  EffectConfigurator: ReturnType<typeof EffectConfiguratorFactory>
): ComponentType<EffectPanelProps> {
  class EffectPanel extends Component<EffectPanelProps> {
    static propTypes = {
      effect: PropTypes.object.isRequired,
      removeEffect: PropTypes.func.isRequired,
      updateEffect: PropTypes.func.isRequired,
      isDraggable: PropTypes.bool
    };

    _toggleEnabled = (event?: Event) => {
      event?.stopPropagation();
      this.props.updateEffect(this.props.effect.id, {
        isEnabled: !this.props.effect.isEnabled
      });
    };

    _toggleConfigActive = (event?: Event) => {
      event?.stopPropagation();
      this.props.updateEffect(this.props.effect.id, {
        isConfigActive: !this.props.effect.isConfigActive
      });
    };

    _removeEffect = (event?: Event) => {
      event?.stopPropagation();
      this.props.removeEffect(this.props.effect.id);
    };

    _updateEffectConfig = (event, id, props) => {
      event?.stopPropagation();
      this.props.updateEffect(id, props);
    };

    render() {
      const {effect, isDraggable, listeners} = this.props;
      const {id, type, isConfigActive, isJsonEditorActive, isEnabled} = effect;

      const sortingAllowed = type !== LIGHT_AND_SHADOW_EFFECT.type;

      return (
        <PanelWrapper
          active={false}
          className={classnames('effect-panel', this.props.className)}
          data-testid={dataTestIds.effectPanel}
          style={this.props.style}
          onMouseDown={this.props.onMouseDown}
          onTouchStart={this.props.onTouchStart}
        >
          <EffectPanelHeader
            isConfigActive={isConfigActive}
            effectId={id}
            type={type}
            isEnabled={isEnabled}
            isJsonEditorActive={isJsonEditorActive}
            onToggleEnabled={this._toggleEnabled}
            onRemoveEffect={this._removeEffect}
            onToggleEnableConfig={this._toggleConfigActive}
            isDragNDropEnabled={isDraggable && sortingAllowed}
            listeners={listeners}
            showSortHandle={type !== LIGHT_AND_SHADOW_EFFECT.type}
          />
          {isConfigActive && (
            <EffectConfigurator
              key={`effect-configurator-${id}`}
              effect={effect}
              updateEffectConfig={this._updateEffectConfig}
            />
          )}
        </PanelWrapper>
      );
    }
  }

  // @ts-expect-error fix The types of 'propTypes.isDraggable[nominalTypeHack]' are incompatible between these types.
  return EffectPanel;
}

export default EffectPanelFactory;

1	import React, {Component, ComponentType} from 'react';
2	import styled from 'styled-components';	6✔
3	import classnames from 'classnames';	6✔
4	import PropTypes from 'prop-types';	6✔
5
6	import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';	6✔
7	import {removeEffect, updateEffect} from '@kepler.gl/actions';
8	import {Effect} from '@kepler.gl/types';
9
10	import EffectPanelHeaderFactory from './effect-panel-header';	6✔
11	import EffectConfiguratorFactory from './effect-configurator';	6✔
12
13	export type EffectPanelProps = {
14	className: string;
15	effect: Effect;
16	isDraggable: boolean;
17	listeners: any;
18	removeEffect: typeof removeEffect;
19	updateEffect: typeof updateEffect;
20
21	style?: React.CSSProperties;
22	onMouseDown: React.MouseEventHandler<HTMLDivElement>;
23	onTouchStart: React.TouchEventHandler<HTMLDivElement>;
24	};
25
26	export type PanelWrapperProps = {
27	active: boolean;
28	};
29
30	const PanelWrapper = styled.div<PanelWrapperProps>`	6✔
31	font-size: 12px;
32	border-radius: 1px;
33	margin-bottom: 8px;
34	z-index: 1000;
35	&.dragging {
36	cursor: move;
37	}
38	margin: 3px 25px;
39	`;
40
41	EffectPanelFactory.deps = [EffectPanelHeaderFactory, EffectConfiguratorFactory];	6✔
42
43	function EffectPanelFactory(	6✔
44	EffectPanelHeader: ReturnType<typeof EffectPanelHeaderFactory>,
45	EffectConfigurator: ReturnType<typeof EffectConfiguratorFactory>
46	): ComponentType<EffectPanelProps> {	68!
47	class EffectPanel extends Component<EffectPanelProps> {
48	static propTypes = {
49	effect: PropTypes.object.isRequired,
50	removeEffect: PropTypes.func.isRequired,
51	updateEffect: PropTypes.func.isRequired,
52	isDraggable: PropTypes.bool
53	};
54
55	_toggleEnabled = (event?: Event) => {
56	event?.stopPropagation();
57	this.props.updateEffect(this.props.effect.id, {
58	isEnabled: !this.props.effect.isEnabled
59	});
60	};	13✔
61
62	_toggleConfigActive = (event?: Event) => {
63	event?.stopPropagation();	13✔
64	this.props.updateEffect(this.props.effect.id, {
65	isConfigActive: !this.props.effect.isConfigActive
66	});
67	};	4✔
68
69	_removeEffect = (event?: Event) => {
70	event?.stopPropagation();	4✔
71	this.props.removeEffect(this.props.effect.id);
72	};
73
74	_updateEffectConfig = (event, id, props) => {
75	event?.stopPropagation();
76	this.props.updateEffect(id, props);
77	};
78
79	render() {	4!
80	const {effect, isDraggable, listeners} = this.props;
81	const {id, type, isConfigActive, isJsonEditorActive, isEnabled} = effect;
82
83	const sortingAllowed = type !== LIGHT_AND_SHADOW_EFFECT.type;	4✔
84
UNCOV 85	return (	×
86	<PanelWrapper	×
87	active={false}
UNCOV 88	className={classnames('effect-panel', this.props.className)}	×
89	data-testid={dataTestIds.effectPanel}
90	style={this.props.style}	4✔
91	onMouseDown={this.props.onMouseDown}
92	onTouchStart={this.props.onTouchStart}
93	>
94	<EffectPanelHeader	8✔
95	isConfigActive={isConfigActive}
96	effectId={id}
97	type={type}
98	isEnabled={isEnabled}	4✔
99	isJsonEditorActive={isJsonEditorActive}	4✔
100	onToggleEnabled={this._toggleEnabled}	4✔
101	onRemoveEffect={this._removeEffect}	4✔
102	onToggleEnableConfig={this._toggleConfigActive}	4✔
103	isDragNDropEnabled={isDraggable && sortingAllowed}	4✔
104	listeners={listeners}
105	showSortHandle={type !== LIGHT_AND_SHADOW_EFFECT.type}	4✔
106	/>
107	{isConfigActive && (	4✔
108	<EffectConfigurator
109	key={`effect-configurator-${id}`}
110	effect={effect}
111	updateEffectConfig={this._updateEffectConfig}
112	/>
113	)}
114	</PanelWrapper>
115	);
116	}
117	}
118
119	// @ts-expect-error fix The types of 'propTypes.isDraggable[nominalTypeHack]' are incompatible between these types.
120	return EffectPanel;	8✔
121	}
122
123	export default EffectPanelFactory;	4✔

keplergl / kepler.gl / 6811966977

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous