From 82baedfb418f850211fff38850655e619c324c4c Mon Sep 17 00:00:00 2001 From: Igor Dykhta Date: Tue, 16 Aug 2022 20:26:42 +0300 Subject: [PATCH] [Chore] (Types) move howto button out, add layer conf types, yarn lint (#1926) --- .github/workflows/test.yml | 3 ++ src/components/index.ts | 3 +- .../side-panel/layer-panel/how-to-button.tsx | 45 +++++++++++++++++++ .../layer-panel/layer-configurator.tsx | 30 ++++--------- 4 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 src/components/side-panel/layer-panel/how-to-button.tsx diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 7f794e4bff..8749d73896 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -35,6 +35,9 @@ jobs: - name: Install Dependecies run: yarn + - name: Lint + run: yarn lint + - name: Test run: xvfb-run --auto-servernum yarn cover diff --git a/src/components/index.ts b/src/components/index.ts index 258608f503..0f9ebb17d1 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -208,8 +208,9 @@ export { LayerTitleSectionFactory } from './side-panel/layer-panel/layer-panel-header'; +export {default as HowToButton} from './side-panel/layer-panel/how-to-button'; + export { - HowToButton, LayerColorRangeSelector, LayerColorSelector } from './side-panel/layer-panel/layer-configurator'; diff --git a/src/components/side-panel/layer-panel/how-to-button.tsx b/src/components/side-panel/layer-panel/how-to-button.tsx new file mode 100644 index 0000000000..3c995fa2b4 --- /dev/null +++ b/src/components/side-panel/layer-panel/how-to-button.tsx @@ -0,0 +1,45 @@ +// Copyright (c) 2022 Uber Technologies, Inc. +// +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: +// +// The above copyright notice and this permission notice shall be included in +// all copies or substantial portions of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +// THE SOFTWARE. + +import React, {MouseEventHandler} from 'react'; +import styled from 'styled-components'; +import {FormattedMessage} from '@kepler.gl/localization'; + +import {Button} from 'components/common/styled-components'; + +const StyledHowToButton = styled.div` + position: absolute; + right: 12px; + top: -4px; +`; + +export type HowToButtonProps = { + onClick: MouseEventHandler; +}; + +export const HowToButton: React.FC = ({onClick}: HowToButtonProps) => ( + + + +); + +export default HowToButton; diff --git a/src/components/side-panel/layer-panel/layer-configurator.tsx b/src/components/side-panel/layer-panel/layer-configurator.tsx index f331232312..3d5e2fe2a3 100644 --- a/src/components/side-panel/layer-panel/layer-configurator.tsx +++ b/src/components/side-panel/layer-panel/layer-configurator.tsx @@ -23,7 +23,7 @@ import React, {Component, Fragment, MouseEventHandler} from 'react'; import styled from 'styled-components'; import {FormattedMessage} from '@kepler.gl/localization'; -import {Button, Input, PanelLabel, SidePanelSection} from 'components/common/styled-components'; +import {Input, PanelLabel, SidePanelSection} from 'components/common/styled-components'; import ItemSelector from 'components/common/item-selector/item-selector'; import VisConfigByFieldSelectorFactory from './vis-config-by-field-selector'; @@ -36,6 +36,7 @@ import VisConfigSwitchFactory from './vis-config-switch'; import VisConfigSliderFactory from './vis-config-slider'; import LayerConfigGroupFactory, {ConfigGroupCollapsibleContent} from './layer-config-group'; import TextLabelPanelFactory from './text-label-panel'; +import HowToButton from './how-to-button'; import {capitalizeFirstLetter} from 'utils/utils'; @@ -60,14 +61,18 @@ type LayerConfiguratorProps = { layerTypeOptions: { id: string; label: string; - icon: any; // - requireData: any; // + icon: React.ElementType; + requireData: boolean; }[]; openModal: ActionHandler; updateLayerConfig: (newConfig: Partial) => void; updateLayerType: (newType: string) => void; updateLayerVisConfig: (newVisConfig: Partial) => void; - updateLayerVisualChannelConfig: (newConfig: Partial, channel: string) => void; + updateLayerVisualChannelConfig: ( + newConfig: Partial, + channel: string, + newVisConfig?: Partial + ) => void; updateLayerColorUI: (prop: string, newConfig: NestedPartial) => void; updateLayerTextLabel: (idx: number | 'all', prop: string, value: any) => void; }; @@ -1064,23 +1069,6 @@ export default function LayerConfiguratorFactory( return LayerConfigurator; } -/* - * Componentize config component into pure functional components - */ - -const StyledHowToButton = styled.div` - position: absolute; - right: 12px; - top: -4px; -`; - -export const HowToButton = ({onClick}: {onClick: MouseEventHandler}) => ( - - - -); export const LayerColorSelector = ({ layer,