From 69f8534d33ad1ce5ecda87d790b846efeaf86fbd Mon Sep 17 00:00:00 2001 From: jagerts <94642410+jagerts@users.noreply.github.com> Date: Fri, 3 Jun 2022 02:11:13 +0300 Subject: [PATCH] [Chore]: Technical: fix linting errors of @types/styled-components plugin (#1834) * fix linting errors of @types/styled-components plugin Signed-off-by: Evgeny Zhgulev * add changes due to code review Signed-off-by: Evgeny Zhgulev * add @types/styled-components and resolve last errors Signed-off-by: Evgeny Zhgulev * fix build crush Signed-off-by: Evgeny Zhgulev * fix build crush Signed-off-by: Evgeny Zhgulev * ignore TS4023 linting error Signed-off-by: Evgeny Zhgulev * fix linting errors after merge Signed-off-by: Evgeny Zhgulev * ignore TS4023 linting error Signed-off-by: Evgeny Zhgulev * fix TS4023 linting error Signed-off-by: Evgeny Zhgulev --- package.json | 1 + .../animation-control/animation-control.tsx | 2 +- .../floating-time-display.tsx | 2 +- .../animation-control/playback-controls.tsx | 4 +-- src/components/common/dataset-label.tsx | 7 +++-- .../file-uploader/file-upload-progress.tsx | 9 +++--- src/components/common/info-helper.tsx | 2 +- .../common/item-selector/item-selector.tsx | 6 ++-- src/components/common/line-chart.tsx | 10 ++++--- src/components/common/portaled.tsx | 14 +++++----- src/components/common/range-brush.tsx | 4 +-- src/components/common/range-plot.tsx | 6 ++-- .../common/slider/slider-handle.tsx | 4 +-- src/components/common/styled-components.tsx | 28 ++++++++++--------- src/components/common/toolbar-item.tsx | 8 +++--- src/components/common/toolbar.tsx | 2 +- src/components/common/vertical-toolbar.tsx | 4 +-- src/components/geocoder/geocoder.tsx | 6 +++- src/components/modal-container.tsx | 2 +- .../side-panel/common/dataset-tag.tsx | 2 +- .../filter-panel/filter-panel-header.tsx | 18 ++++++------ .../tooltip-config/tooltip-chicklet.tsx | 10 +++++-- src/components/side-panel/layer-manager.tsx | 2 +- .../layer-panel/add-layer-button.tsx | 2 +- .../side-panel/layer-panel/color-palette.tsx | 4 +-- .../layer-panel/color-range-selector.tsx | 4 +-- .../side-panel/layer-panel/color-selector.tsx | 16 +++++++---- .../side-panel/layer-panel/custom-palette.tsx | 4 +-- .../side-panel/layer-panel/custom-picker.tsx | 11 +++++++- .../layer-panel/dataset-section.tsx | 6 ++-- .../layer-panel/layer-configurator.tsx | 3 +- .../layer-panel/layer-panel-header.tsx | 8 +++--- .../side-panel/layer-panel/layer-panel.tsx | 18 ++++++------ .../layer-panel/layer-type-dropdown-list.tsx | 2 +- .../layer-panel/layer-type-selector.tsx | 2 ++ .../layer-panel/panel-view-list-toggle.tsx | 10 +++++-- .../layer-panel/single-color-palette.tsx | 4 +-- .../map-style-panel/map-layer-selector.tsx | 2 +- .../side-panel/panel-header-action.tsx | 14 ++++++---- src/components/side-panel/panel-header.tsx | 13 +++++---- src/components/side-panel/panel-title.tsx | 7 +++-- src/components/side-panel/side-bar.tsx | 4 +-- src/utils/data-utils.ts | 2 +- yarn.lock | 11 +++++++- 44 files changed, 176 insertions(+), 124 deletions(-) diff --git a/package.json b/package.json index f5c0a2c5cb..adc4810874 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "@types/react-redux": "^7.1.23", "@types/react-virtualized": "^9.21.20", "@types/react-vis": "^1.8.0", + "@types/styled-components": "^5.1.25", "classnames": "^2.2.1", "colorbrewer": "^1.5.0", "copy-to-clipboard": "^3.3.1", diff --git a/src/components/common/animation-control/animation-control.tsx b/src/components/common/animation-control/animation-control.tsx index 165c975034..bf95bb3ab3 100644 --- a/src/components/common/animation-control/animation-control.tsx +++ b/src/components/common/animation-control/animation-control.tsx @@ -50,7 +50,7 @@ const AnimationWidgetInner = styled.div` `; const StyledDomain = styled.div.attrs(props => ({ - className: classnames('animation-control__time-domain', {[props.className]: props.className}) + className: classnames('animation-control__time-domain', props.className) }))` color: ${props => props.theme.titleTextColor}; font-weight: 400; diff --git a/src/components/common/animation-control/floating-time-display.tsx b/src/components/common/animation-control/floating-time-display.tsx index 05d1e108c3..456376eeff 100644 --- a/src/components/common/animation-control/floating-time-display.tsx +++ b/src/components/common/animation-control/floating-time-display.tsx @@ -43,7 +43,7 @@ const StyledTimeDisplayWrapper = styled.div.attrs({ `; const StyledTimeDisplay = styled.div.attrs(props => ({ - className: classnames('floating-time-display__inner', {[props.className]: props.className}) + className: classnames('floating-time-display__inner', props.className) }))` background-color: ${props => props.theme.panelBackground}; border-radius: ${props => props.theme.timeDisplayBorderRadius}px; diff --git a/src/components/common/animation-control/playback-controls.tsx b/src/components/common/animation-control/playback-controls.tsx index 3cf7ae2384..60602ee942 100644 --- a/src/components/common/animation-control/playback-controls.tsx +++ b/src/components/common/animation-control/playback-controls.tsx @@ -22,7 +22,7 @@ import React, {useState, useCallback} from 'react'; import styled from 'styled-components'; import classnames from 'classnames'; import {FormattedMessage} from 'localization'; -import {Button, Tooltip} from 'components/common/styled-components'; +import {Button, Tooltip, ButtonProps} from 'components/common/styled-components'; import AnimationSpeedSliderFactory from './animation-speed-slider'; import {Reset, Play, Pause, Rocket, AnchorWindow, FreeWindow} from 'components/common/icons'; import {ANIMATION_WINDOW} from 'constants/default-settings'; @@ -51,7 +51,7 @@ const StyledSpeedControl = styled.div` } `; -interface IconButtonProps { +interface IconButtonProps extends ButtonProps { collapsed?: boolean; } diff --git a/src/components/common/dataset-label.tsx b/src/components/common/dataset-label.tsx index 2ab0b69b64..684fc07b73 100644 --- a/src/components/common/dataset-label.tsx +++ b/src/components/common/dataset-label.tsx @@ -21,6 +21,7 @@ import React from 'react'; import styled from 'styled-components'; import {CenterFlexbox, DatasetSquare} from 'components/common/styled-components'; +import {RGBColor} from 'reducers'; const DatasetName = styled.div.attrs({ className: 'dataset-name' @@ -32,14 +33,14 @@ const DatasetName = styled.div.attrs({ interface DatasetLabelType { dataset: { - color?: string; - label?: string; + color: RGBColor; + label: string; }; } const DatasetLabel = ({dataset}: DatasetLabelType) => ( - + {dataset.label} ); diff --git a/src/components/common/file-uploader/file-upload-progress.tsx b/src/components/common/file-uploader/file-upload-progress.tsx index ba053b134a..72f19c2e38 100644 --- a/src/components/common/file-uploader/file-upload-progress.tsx +++ b/src/components/common/file-uploader/file-upload-progress.tsx @@ -20,16 +20,15 @@ import React from 'react'; import styled, {withTheme} from 'styled-components'; +import classnames from 'classnames'; import ProgressBar from '../progress-bar'; import {TruncatedTitleText} from 'components/common/styled-components'; import {getError} from 'utils/utils'; import {FileLoadingProgress} from 'reducers/vis-state-updaters'; -/** @typedef {import('./file-upload-progress').FileUploadProgressProps} FileUploadProgressProps*/ - -const StyledFileProgress = styled.div.attrs({ - className: 'file-upload__progress' -})` +const StyledFileProgress = styled.div.attrs(props => ({ + className: classnames('file-upload__progress', props.className) +}))` color: ${props => props.theme.textColorLT}; font-size: 12px; margin-top: 12px; diff --git a/src/components/common/info-helper.tsx b/src/components/common/info-helper.tsx index 548b7cd85e..6e8c1c1214 100644 --- a/src/components/common/info-helper.tsx +++ b/src/components/common/info-helper.tsx @@ -27,7 +27,7 @@ import styled from 'styled-components'; import {camelize} from 'utils/utils'; interface StyledInfoHelperProps { - width: number; + width?: number; } const StyledInfoHelper = styled.div` diff --git a/src/components/common/item-selector/item-selector.tsx b/src/components/common/item-selector/item-selector.tsx index 123b2ec120..e4dadf3b72 100644 --- a/src/components/common/item-selector/item-selector.tsx +++ b/src/components/common/item-selector/item-selector.tsx @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component, ComponentType} from 'react'; +import React, {Component, ComponentType, MouseEventHandler} from 'react'; import classnames from 'classnames'; import uniqBy from 'lodash.uniqby'; import listensToClickOutside from 'react-onclickoutside'; @@ -232,12 +232,12 @@ class ItemSelector extends Component { } }; - _onErase = e => { + _onErase: MouseEventHandler = e => { e.stopPropagation(); this.props.onChange(null); }; - _showTypeahead = e => { + _showTypeahead: MouseEventHandler = e => { e.stopPropagation(); if (!this.props.disabled) { this.setState({ diff --git a/src/components/common/line-chart.tsx b/src/components/common/line-chart.tsx index c3dbdd0561..0e8abad68d 100644 --- a/src/components/common/line-chart.tsx +++ b/src/components/common/line-chart.tsx @@ -97,12 +97,12 @@ interface LineChartProps { height: number; hoveredDP?: HoverDP | null; isEnlarged?: boolean; - lineChart: LineChart; + lineChart?: LineChart; margin: {top?: number; bottom?: number; left?: number; right?: number}; onMouseMove: (datapoint: LineSeriesPoint | null, data?: RVNearestXData) => void; width: number; timezone?: string | null; - timeFormat: string; + timeFormat?: string; } const MARGIN = {top: 0, bottom: 0, left: 0, right: 0}; @@ -122,10 +122,12 @@ function LineChartFactory() { timezone, timeFormat }: LineChartProps) => { - const {series, yDomain} = lineChart; + const {series, yDomain} = lineChart || {}; const brushData = useMemo(() => { - return [{x: series[0].x, y: yDomain[1], customComponent: () => brushComponent}]; + return series && series[0] && series[0].x && yDomain && yDomain[1] + ? [{x: series[0].x, y: yDomain[1], customComponent: () => brushComponent}] + : []; }, [series, yDomain, brushComponent]); const hintFormatter = useMemo(() => datetimeFormatter(timezone)(timeFormat), [ timezone, diff --git a/src/components/common/portaled.tsx b/src/components/common/portaled.tsx index 847da34c74..b411df8113 100644 --- a/src/components/common/portaled.tsx +++ b/src/components/common/portaled.tsx @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component, createRef, ElementType} from 'react'; +import React, {Component, createRef, ElementType, PropsWithChildren} from 'react'; import debounce from 'lodash.debounce'; import isEqual from 'lodash.isequal'; @@ -51,11 +51,11 @@ const addEventListeners = () => { }; interface GetChildPosProps { - offsets: { + offsets: Partial<{ topOffset: number; leftOffset: number; rightOffset: number; - }; + }>; rect: DOMRect; childRect: DOMRect; pageOffset: { @@ -72,7 +72,7 @@ export const getChildPos = ({offsets, rect, childRect, pageOffset, padding}: Get const pos = { top: pageOffset.y + rect.top + (topOffset || 0), ...(anchorLeft - ? {left: pageOffset.x + rect.left + leftOffset} + ? {left: pageOffset.x + rect.left + leftOffset!} : {right: window.innerWidth - rect.right - pageOffset.x + (rightOffset || 0)}) }; @@ -131,7 +131,7 @@ const WINDOW_PAD = 40; const noop = () => {}; -interface PortaledProps { +type PortaledProps = PropsWithChildren<{ component: ElementType; onClose?: ( event: React.MouseEvent | React.KeyboardEvent @@ -140,11 +140,11 @@ interface PortaledProps { isOpened?: boolean; top: number; left?: number; - right: number; + right?: number; overlayZIndex?: number; modalProps?: Partial; modalStyle?: Partial; -} +}>; interface PortaledState { pos: diff --git a/src/components/common/range-brush.tsx b/src/components/common/range-brush.tsx index 2f9ad1ca96..50b992a845 100644 --- a/src/components/common/range-brush.tsx +++ b/src/components/common/range-brush.tsx @@ -64,7 +64,7 @@ export type OnBrush = (val0: number, val1: number) => void; export interface RangeBrushProps { isRanged?: boolean; - theme: any; + theme?: any; range: number[]; value: number[]; onBrushStart: () => void; @@ -78,7 +78,7 @@ export interface RangeBrushProps { onMouseoutHandle: () => void; } -function RangeBrushFactory() { +function RangeBrushFactory(): React.ComponentType { class RangeBrush extends Component { static defaultProps = { isRanged: true diff --git a/src/components/common/range-plot.tsx b/src/components/common/range-plot.tsx index bdbd38a034..bbd1c47627 100644 --- a/src/components/common/range-plot.tsx +++ b/src/components/common/range-plot.tsx @@ -38,13 +38,13 @@ interface RangePlotProps { value: number[]; width: number; plotType?: string; - lineChart: LineChart; + lineChart?: LineChart; histogram?: {x0: number; x1: number}[]; isEnlarged?: boolean; isRanged?: boolean; theme: any; - timeFormat: string; - timezone?: string; + timeFormat?: string; + timezone?: string | null; playbackControlWidth?: number; } diff --git a/src/components/common/slider/slider-handle.tsx b/src/components/common/slider/slider-handle.tsx index 4c1f1d64b5..f1def0bc77 100644 --- a/src/components/common/slider/slider-handle.tsx +++ b/src/components/common/slider/slider-handle.tsx @@ -31,7 +31,7 @@ interface StyledSliderHandleProps { } const StyledSliderHandle = styled.span.attrs(props => ({ - className: classnames('kg-range-slider__handle', {[props.className]: props.className}) + className: classnames('kg-range-slider__handle', props.className) }))` position: absolute; z-index: 10; @@ -174,7 +174,7 @@ export default class SliderHandle extends Component { } state = {mouseOver: false}; - ref = createRef(); // Set correct type + ref = createRef(); toggleMouseOver = () => { this.setState({mouseOver: !this.state.mouseOver}); diff --git a/src/components/common/styled-components.tsx b/src/components/common/styled-components.tsx index e53e5c298e..424889184a 100644 --- a/src/components/common/styled-components.tsx +++ b/src/components/common/styled-components.tsx @@ -22,6 +22,7 @@ import styled from 'styled-components'; import ReactTooltip from 'react-tooltip'; import {media} from 'styles/media-breakpoints'; import classnames from 'classnames'; +import {RGBColor} from 'reducers'; export const SelectText = styled.span` color: ${props => props.theme.labelColor}; @@ -104,9 +105,9 @@ export const PanelLabelBold = styled(PanelLabel)` font-weight: 500; `; -export const PanelHeaderTitle = styled.span.attrs({ - className: 'side-panel-panel__header__title' -})` +export const PanelHeaderTitle = styled.span.attrs(props => ({ + className: classnames('side-panel-panel__header__title', props.className) +}))` color: ${props => props.theme.textColor}; font-size: 13px; letter-spacing: 0.43px; @@ -127,9 +128,9 @@ export const PanelHeaderContent = styled.div` } `; -export const PanelContent = styled.div.attrs({ - className: 'side-panel-panel__content' -})` +export const PanelContent = styled.div.attrs(props => ({ + className: classnames('side-panel-panel__content', props.className) +}))` background-color: ${props => props.theme.panelContentBackground}; padding: 12px; `; @@ -193,7 +194,7 @@ export const Tooltip = styled(ReactTooltip)` } `; -interface ButtonProps { +export interface ButtonProps { negative?: boolean; secondary?: boolean; link?: boolean; @@ -203,6 +204,7 @@ interface ButtonProps { small?: boolean; disabled?: boolean; width?: string; + inactive?: boolean; } export const Button = styled.div.attrs(props => ({ @@ -324,9 +326,9 @@ export const InlineInput = styled(Input)` ${props => props.theme.inlineInput}; `; -interface StyledPanelHeaderProps { +export interface StyledPanelHeaderProps { active?: boolean; - labelRCGColorValues?: string[]; + labelRCGColorValues?: RGBColor | null; } export const StyledPanelHeader = styled.div` @@ -378,15 +380,15 @@ export const ButtonGroup = styled.div` } `; -interface StyledPanelHeaderProps { - color: string[]; +interface DatasetSquareProps { + backgroundColor: RGBColor; } -export const DatasetSquare = styled.div` +export const DatasetSquare = styled.div` display: inline-block; width: 10px; height: 10px; - background-color: rgb(${props => props.color.join(',')}); + background-color: rgb(${props => props.backgroundColor.join(',')}); margin-right: 12px; `; diff --git a/src/components/common/toolbar-item.tsx b/src/components/common/toolbar-item.tsx index 64ab80237a..13f8bdfc11 100644 --- a/src/components/common/toolbar-item.tsx +++ b/src/components/common/toolbar-item.tsx @@ -20,6 +20,7 @@ import React from 'react'; import styled from 'styled-components'; +import classnames from 'classnames'; import {FormattedMessage} from 'localization'; import {ComponentType, MouseEvent} from 'react'; @@ -27,9 +28,9 @@ interface StyledDivProps { active?: boolean; } -const StyledDiv = styled.div.attrs({ - className: 'toolbar-item' -})` +const StyledDiv = styled.div.attrs(props => ({ + className: classnames('toolbar-item', props.className) +}))` color: ${props => props.active ? props.theme.toolbarItemIconHover : props.theme.panelHeaderIcon}; padding: 12px 20px; @@ -72,7 +73,6 @@ export type ToolbarItemProps = { icon?: ComponentType; }; -/** @type {typeof import('./toolbar-item').ToolbarItem} */ const ToolbarItem = React.memo((props: ToolbarItemProps) => ( ` flex-direction: column; .toolbar-item { diff --git a/src/components/geocoder/geocoder.tsx b/src/components/geocoder/geocoder.tsx index 58172b28ee..4744c47d12 100644 --- a/src/components/geocoder/geocoder.tsx +++ b/src/components/geocoder/geocoder.tsx @@ -29,6 +29,10 @@ import {Input} from 'components/common/styled-components'; import {Search, Delete} from 'components/common/icons'; import {Viewport} from 'reducers/map-state-updaters'; +type StyledContainerProps = { + width?: number; +}; + // matches only valid coordinates const COORDINATE_REGEX_STRING = '^[-+]?([1-8]?\\d(\\.\\d+)?|90(\\.0+)?),\\s*[-+]?(180(\\.0+)?|((1[0-7]\\d)|([1-9]?\\d))(\\.\\d+)?)'; @@ -50,7 +54,7 @@ export const testForCoordinates = (query: string): [true, number, number] | [fal return [isValid, Number(tokens[0]), Number(tokens[1])]; }; -const StyledContainer = styled.div` +const StyledContainer = styled.div` position: relative; color: ${props => props.theme.textColor}; diff --git a/src/components/modal-container.tsx b/src/components/modal-container.tsx index ef490b84ea..4a80dbe6c9 100644 --- a/src/components/modal-container.tsx +++ b/src/components/modal-container.tsx @@ -148,7 +148,6 @@ export default function ModalContainerFactory( SaveMapModal: ReturnType, ShareMapModal: ReturnType ): React.ElementType { - /** @typedef {import('./modal-container').ModalContainerProps} ModalContainerProps */ /** @augments React.Component */ class ModalContainer extends Component { // TODO - remove when prop types are fully exported @@ -313,6 +312,7 @@ export default function ModalContainerFactory( ); // TODO: we need to make this width consistent with the css rule defined modal.js:32 max-width: 70vw + // @ts-ignore // TODO fix this after add types to Theme modalProps.cssStyle = css` ${DataTableModalStyle}; ${media.palm` diff --git a/src/components/side-panel/common/dataset-tag.tsx b/src/components/side-panel/common/dataset-tag.tsx index 45a1040f83..6ad0fd232b 100644 --- a/src/components/side-panel/common/dataset-tag.tsx +++ b/src/components/side-panel/common/dataset-tag.tsx @@ -63,7 +63,7 @@ export default function DatasetTagFactory() { ` +interface StyledFilterHeaderProps extends StyledPanelHeaderProps { + $labelRCGColorValues: RGBColor[]; +} + +export const StyledFilterHeader = styled(StyledPanelHeader)` cursor: pointer; padding: 10px 12px; @@ -38,9 +40,9 @@ export const StyledFilterHeader = styled(StyledPanelHeader)<{ } border-left: 3px solid; - ${(props: {labelRCGColorValues: KeplerTable['color'][]}) => - props.labelRCGColorValues && props.labelRCGColorValues.length > 0 - ? `border-image: ${createLinearGradient('bottom', props.labelRCGColorValues)} 3;` + ${props => + props.$labelRCGColorValues && props.$labelRCGColorValues.length > 0 + ? `border-image: ${createLinearGradient('bottom', props.$labelRCGColorValues)} 3;` : 'border-color: transparent;'}; `; @@ -74,7 +76,7 @@ function FilterPanelHeaderFactory( }: FilterPanelHeaderProps) => ( d.color)} + $labelRCGColorValues={datasets.map((d: KeplerTable) => d.color)} > {children} fmt[TOOLTIP_KEY]; @@ -104,7 +108,7 @@ const hashStyles = { const IconDiv = styled.div.attrs({ className: 'tooltip-chicklet__icon' -})` +})` color: ${props => props.status === hashStyles.SHOW ? props.theme.subtextColorActive @@ -134,7 +138,7 @@ function TooltipChickletFactory( state = { show: false }; - private node!: HTMLElement; + private node!: HTMLDivElement; componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside, false); @@ -165,7 +169,7 @@ function TooltipChickletFactory( const hashStyle = show ? hashStyles.SHOW : hasFormat ? hashStyles.ACTIVE : null; return ( - (this.node = node)}> + (this.node = node)}> {displayOption(item)} {formatLabels.length > 1 && ( diff --git a/src/components/side-panel/layer-manager.tsx b/src/components/side-panel/layer-manager.tsx index fd192920ff..22f4afefb3 100644 --- a/src/components/side-panel/layer-manager.tsx +++ b/src/components/side-panel/layer-manager.tsx @@ -56,7 +56,7 @@ type LayerManagerProps = { layerBlending: string; uiStateActions: typeof UiStateActions; visStateActions: typeof VisStateActions; - showAddDataModal: ActionHandler; + showAddDataModal: () => void; removeDataset: ActionHandler; showDatasetTable: ActionHandler; updateTableColor: ActionHandler; diff --git a/src/components/side-panel/layer-panel/add-layer-button.tsx b/src/components/side-panel/layer-panel/add-layer-button.tsx index 6b5a8a31a1..b09b73bf7c 100644 --- a/src/components/side-panel/layer-panel/add-layer-button.tsx +++ b/src/components/side-panel/layer-panel/add-layer-button.tsx @@ -100,7 +100,7 @@ const TYPEAHEAD_INPUT_CLASS = 'typeahead__input'; function AddLayerButtonFactory() { const ListItem = ({value}) => ( - +
{value.label}
diff --git a/src/components/side-panel/layer-panel/color-palette.tsx b/src/components/side-panel/layer-panel/color-palette.tsx index a4b07e9b57..5b383b7534 100644 --- a/src/components/side-panel/layer-panel/color-palette.tsx +++ b/src/components/side-panel/layer-panel/color-palette.tsx @@ -52,7 +52,7 @@ const PaletteWrapper = styled.div.attrs({ const PaletteContainer = styled.div.attrs(props => ({ className: classnames('color-range-palette', props.className) -}))<{isSelected: boolean}>` +}))<{isSelected?: boolean}>` display: flex; flex-grow: 1; border-width: 1px; @@ -78,7 +78,7 @@ const ColorPalette: React.FC = ({ {colors.map((color: number | string, index: number) => ( - + ))} diff --git a/src/components/side-panel/layer-panel/color-range-selector.tsx b/src/components/side-panel/layer-panel/color-range-selector.tsx index 8a2d3f2386..83c65ddf5d 100644 --- a/src/components/side-panel/layer-panel/color-range-selector.tsx +++ b/src/components/side-panel/layer-panel/color-range-selector.tsx @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component} from 'react'; +import React, {Component, MouseEvent} from 'react'; import uniq from 'lodash.uniq'; import styled from 'styled-components'; import {createSelector} from 'reselect'; @@ -220,7 +220,7 @@ export const PaletteConfig: React.FC = ({ }) => ( e.stopPropagation()} + onClick={(e) => e.stopPropagation()} >
diff --git a/src/components/side-panel/layer-panel/color-selector.tsx b/src/components/side-panel/layer-panel/color-selector.tsx index a8839d7ab7..213d4f078c 100644 --- a/src/components/side-panel/layer-panel/color-selector.tsx +++ b/src/components/side-panel/layer-panel/color-selector.tsx @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component, createRef} from 'react'; +import React, {Component, createRef, MouseEvent} from 'react'; import styled from 'styled-components'; import {rgbToHex} from 'utils/color-utils'; import SingleColorPalette from './single-color-palette'; @@ -30,6 +30,12 @@ import {ColorUI} from 'layers/layer-factory'; import {ColorRange} from 'constants/color-ranges'; import {NestedPartial, RGBColor} from 'reducers'; +type ColorSelectorInputProps = { + active: boolean; + disabled?: boolean; + inputTheme?: string; +}; + type ColorSelectorProps = { colorSets: { selectedColor: RGBColor | ColorRange; @@ -43,14 +49,14 @@ type ColorSelectorProps = { setColorUI?: (newConfig: NestedPartial) => void; }; -export const ColorBlock = styled.div<{color: string}>` +export const ColorBlock = styled.div<{backgroundcolor: RGBColor}>` width: 32px; height: 18px; border-radius: 1px; - background-color: ${props => `rgb(${props.color.slice(0, 3).join(',')})`}; + background-color: ${props => `rgb(${props.backgroundcolor.slice(0, 3).join(',')})`}; `; -export const ColorSelectorInput = styled.div` +export const ColorSelectorInput = styled.div` ${props => (props.inputTheme === 'secondary' ? props.theme.secondaryInput : props.theme.input)}; height: ${props => props.theme.inputBoxHeight}; @@ -156,7 +162,7 @@ class ColorSelector extends Component { ) : ( )} {cSet.label ? ( diff --git a/src/components/side-panel/layer-panel/custom-palette.tsx b/src/components/side-panel/layer-panel/custom-palette.tsx index af35a3779a..4766fac8ee 100644 --- a/src/components/side-panel/layer-panel/custom-palette.tsx +++ b/src/components/side-panel/layer-panel/custom-palette.tsx @@ -18,7 +18,7 @@ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. -import React, {Component, createRef} from 'react'; +import React, {Component, createRef, MouseEventHandler, MouseEvent} from 'react'; import classnames from 'classnames'; import styled, {css} from 'styled-components'; import {SortableContainer, SortableElement, SortableHandle} from 'react-sortable-hoc'; @@ -194,7 +194,7 @@ class CustomPalette extends Component { this.props.onToggleSketcher(false); }; - _onApply = (event: MouseEvent) => { + _onApply: MouseEventHandler = event => { event.stopPropagation(); event.preventDefault(); diff --git a/src/components/side-panel/layer-panel/custom-picker.tsx b/src/components/side-panel/layer-panel/custom-picker.tsx index b95cd1712d..703bf0c471 100644 --- a/src/components/side-panel/layer-panel/custom-picker.tsx +++ b/src/components/side-panel/layer-panel/custom-picker.tsx @@ -26,12 +26,21 @@ import {createSelector} from 'reselect'; // This was put in because 3rd party library react-color doesn't yet cater for customized color of child component which contains HEX/RGB input text box // Issue raised: https://github.com/casesandberg/react-color/issues/631 +type SketchPickerValue = { + hsl: {h: number; s: number; l: number; a: number}; + hex: string; + rgb: {r: number; g: number; b: number; a: number}; + hsv: {h: number; s: number; v: number; a: number}; + oldHue: number; + source: string; +}; + type CustomPickerProps = { color: string; theme: { panelBackground: string; }; - onChange: (v: {r: number; g: number; b: number; a: number; source: string; hex: string}) => void; + onChange: (v: SketchPickerValue) => void; onSwatchClose: () => void; }; diff --git a/src/components/side-panel/layer-panel/dataset-section.tsx b/src/components/side-panel/layer-panel/dataset-section.tsx index 6f6f541315..979e7e4613 100644 --- a/src/components/side-panel/layer-panel/dataset-section.tsx +++ b/src/components/side-panel/layer-panel/dataset-section.tsx @@ -31,7 +31,7 @@ import * as VisStateActions from 'actions/vis-state-actions'; import {ActionHandler} from 'actions'; type AddDataButtonProps = { - onClick: ActionHandler; + onClick: () => void; isInactive: boolean; }; @@ -43,7 +43,7 @@ type DatasetSectionProps = { showDatasetTable: ActionHandler; updateTableColor: ActionHandler; removeDataset: ActionHandler; - showAddDataModal: ActionHandler; + showAddDataModal: () => void; }; const StyledDatasetTitle = styled.div<{showDatasetList: boolean}>` @@ -69,7 +69,7 @@ export function AddDataButtonFactory() {