[Chore]: Technical: add types for side panel common (#1807)

* add types for side panel common Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * remove js modules Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * add factories return types Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> Co-authored-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>
keplergl · May 17, 2022 · 47e4963 · 47e4963
1 parent 0d3c98c
commit 47e4963
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 33 deletions.
diff --git a/src/components/common/styled-components.tsx b/src/components/common/styled-components.tsx
@@ -138,9 +138,9 @@ interface SidePanelSectionProps {
   disabled?: boolean;
 }
 
-export const SidePanelSection = styled.div.attrs({
-  className: 'side-panel-section'
-})<SidePanelSectionProps>`
+export const SidePanelSection = styled.div.attrs(props => ({
+  className: classnames('side-panel-section', props.className)
+}))<SidePanelSectionProps>`
   margin-bottom: 12px;
 
   opacity: ${props => (props.disabled ? 0.4 : 1)};

diff --git a/...ponents/side-panel/common/dataset-info.js → ...onents/side-panel/common/dataset-info.tsx b/...ponents/side-panel/common/dataset-info.js → ...onents/side-panel/common/dataset-info.tsx
@@ -22,6 +22,7 @@ import React from 'react';
 import styled from 'styled-components';
 import {format} from 'd3-format';
 import {FormattedMessage} from 'localization';
+import {DatasetInfoProps} from './types';
 
 const numFormat = format(',');
 
@@ -32,7 +33,7 @@ const StyledDataRowCount = styled.div`
 `;
 
 export default function DatasetInfoFactory() {
-  const DatasetInfo = ({dataset}) => (
+  const DatasetInfo = ({dataset}: DatasetInfoProps) => (
     <StyledDataRowCount className="source-data-rows">
       <FormattedMessage
         id={'datasetInfo.rowCount'}

diff --git a/src/components/side-panel/common/dataset-tag.d.ts b/src/components/side-panel/common/dataset-tag.d.ts
diff --git a/...mponents/side-panel/common/dataset-tag.js → ...ponents/side-panel/common/dataset-tag.tsx b/...mponents/side-panel/common/dataset-tag.js → ...ponents/side-panel/common/dataset-tag.tsx
@@ -18,14 +18,15 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {MouseEvent} from 'react';
 import {FormattedMessage} from 'localization';
 import styled from 'styled-components';
 import {DatasetSquare, Tooltip} from 'components';
+import {DatasetTagWrapperProps, DatasetTagProps, UpdateTableColorTypes} from './types';
 
 function nop(_) {}
 
-const DatasetTagWrapper = styled.div`
+const DatasetTagWrapper = styled.div<DatasetTagWrapperProps>`
   display: flex;
   color: ${props => props.theme.textColor};
   font-size: 11px;
@@ -48,12 +49,12 @@ const DatasetColorPicker = styled.div`
   display: flex;
 `;
 
-const UpdateTableColor = ({updateTableColor = nop, children, id}) => (
+const UpdateTableColor = ({updateTableColor = nop, children, id}: UpdateTableColorTypes) => (
   <DatasetColorPicker
     className="dataset-action update-color"
     data-tip
     data-for={`update-color-${id}`}
-    onClick={e => {
+    onClick={(e: MouseEvent) => {
       e.stopPropagation();
       updateTableColor(id);
     }}
@@ -63,7 +64,7 @@ const UpdateTableColor = ({updateTableColor = nop, children, id}) => (
 );
 
 export default function DatasetTagFactory() {
-  const DatasetTag = ({onClick, onClickSquare, dataset, updateTableColor, id}) => (
+  const DatasetTag = ({onClick, onClickSquare, dataset, updateTableColor, id}: DatasetTagProps) => (
     <DatasetTagWrapper className="source-data-tag" updateTableColor={updateTableColor}>
       <UpdateTableColor id={dataset.id} updateTableColor={updateTableColor}>
         <DatasetSquare

diff --git a/...onents/side-panel/common/dataset-title.js → ...nents/side-panel/common/dataset-title.tsx b/...onents/side-panel/common/dataset-title.js → ...nents/side-panel/common/dataset-title.tsx
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {createRef, PureComponent} from 'react';
+import React, {createRef, MouseEvent, PureComponent} from 'react';
 import styled from 'styled-components';
 import {FormattedMessage} from 'localization';
 
@@ -28,10 +28,16 @@ import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
 import CustomPicker from '../layer-panel/custom-picker';
 import {Portaled} from 'components';
 import {rgbToHex} from 'utils/color-utils';
+import {
+  StyledDatasetTitleProps,
+  DatasetTitleProps,
+  RemoveDatasetProps,
+  ShowDataTableProps
+} from './types';
 
 function nop(_) {}
 
-const StyledDatasetTitle = styled.div`
+const StyledDatasetTitle = styled.div<StyledDatasetTitleProps>`
   color: ${props => props.theme.textColor};
   display: flex;
   align-items: flex-start;
@@ -63,7 +69,7 @@ const DataTagAction = styled.div`
   opacity: 0;
 `;
 
-const ShowDataTable = ({id, showDatasetTable = nop}) => (
+const ShowDataTable = ({id, showDatasetTable = nop}: ShowDataTableProps) => (
   <DataTagAction className="dataset-action show-data-table" data-tip data-for={`data-table-${id}`}>
     <Table
       height="16px"
@@ -80,7 +86,7 @@ const ShowDataTable = ({id, showDatasetTable = nop}) => (
   </DataTagAction>
 );
 
-const RemoveDataset = ({datasetKey, removeDataset = nop}) => (
+const RemoveDataset = ({datasetKey, removeDataset = nop}: RemoveDatasetProps) => (
   <DataTagAction
     className="dataset-action remove-dataset"
     data-tip
@@ -103,8 +109,10 @@ const RemoveDataset = ({datasetKey, removeDataset = nop}) => (
 
 DatasetTitleFactory.deps = [DatasetTagFactory];
 
-export default function DatasetTitleFactory(DatasetTag) {
-  class DatasetTitle extends PureComponent {
+export default function DatasetTitleFactory(
+  DatasetTag: ReturnType<typeof DatasetTagFactory>
+): React.ComponentClass<DatasetTitleProps> {
+  class DatasetTitle extends PureComponent<DatasetTitleProps> {
     state = {
       displayColorPicker: false
     };
@@ -117,9 +125,9 @@ export default function DatasetTitleFactory(DatasetTag) {
       this.setState({displayColorPicker: false});
     };
 
-    root = createRef();
+    root = createRef<HTMLDivElement>();
 
-    _onClickTitle = e => {
+    _onClickTitle = (e: MouseEvent) => {
       e.stopPropagation();
       if (typeof this.props.onTitleClick === 'function') {
         this.props.onTitleClick();
@@ -153,8 +161,8 @@ export default function DatasetTitleFactory(DatasetTag) {
             <Portaled isOpened={this.state.displayColorPicker !== false} left={110} top={-50}>
               <CustomPicker
                 color={rgbToHex(dataset.color)}
-                onChange={color =>
-                  updateTableColor(dataset.id, [color.rgb.r, color.rgb.g, color.rgb.b])
+                onChange={(color: {rgb: Record<string, number>}) =>
+                  updateTableColor?.(dataset.id, [color.rgb.r, color.rgb.g, color.rgb.b])
                 }
                 onSwatchClose={this._handleClosePicker}
               />

diff --git a/.../side-panel/common/source-data-catalog.js → ...side-panel/common/source-data-catalog.tsx b/.../side-panel/common/source-data-catalog.js → ...side-panel/common/source-data-catalog.tsx
@@ -24,22 +24,26 @@ import styled from 'styled-components';
 import {SidePanelSection} from 'components/common/styled-components';
 import DatasetTitleFactory from 'components/side-panel/common/dataset-title';
 import DatasetInfoFactory from 'components/side-panel/common/dataset-info';
+import {SourceDataCatalogProps} from './types';
 
 const SourceDataCatalogWrapper = styled.div`
   transition: ${props => props.theme.transition};
 `;
 
 SourceDataCatalogFactory.deps = [DatasetTitleFactory, DatasetInfoFactory];
 
-function SourceDataCatalogFactory(DatasetTitle, DatasetInfo) {
+function SourceDataCatalogFactory(
+  DatasetTitle: ReturnType<typeof DatasetTitleFactory>,
+  DatasetInfo: ReturnType<typeof DatasetInfoFactory>
+) {
   const SourceDataCatalog = ({
     datasets,
     showDatasetTable,
     removeDataset,
     onTitleClick,
     updateTableColor,
     showDeleteDataset = false
-  }) => (
+  }: SourceDataCatalogProps) => (
     <SourceDataCatalogWrapper className="source-data-catalog">
       {Object.values(datasets).map((dataset, index) => (
         <SidePanelSection key={dataset.id}>

diff --git a/...side-panel/common/source-data-selector.js → ...ide-panel/common/source-data-selector.tsx b/...side-panel/common/source-data-selector.js → ...ide-panel/common/source-data-selector.tsx
@@ -25,18 +25,24 @@ import {PanelLabel, SidePanelSection} from 'components/common/styled-components'
 import ItemSelector from 'components/common/item-selector/item-selector';
 import DatasetTagFactory from 'components/side-panel/common/dataset-tag';
 import {FormattedMessage} from 'localization';
+import {DatasetItemProps, SourceDataSelectorProps} from './types';
 
 const defaultPlaceHolder = 'Select A Data Source';
 
 SourceDataSelectorFactory.deps = [DatasetTagFactory];
 
-export default function SourceDataSelectorFactory(DatasetTag) {
-  const DatasetItem = ({value}) => <DatasetTag dataset={value} />;
+export default function SourceDataSelectorFactory(
+  DatasetTag: ReturnType<typeof DatasetTagFactory>
+): React.ComponentClass<SourceDataSelectorProps> {
+  const DatasetItem = ({value}: DatasetItemProps) => <DatasetTag dataset={value} />;
+
+  class SourceDataSelector extends Component<SourceDataSelectorProps> {
+    static defaultProps = {
+      defaultValue: defaultPlaceHolder
+    };
 
-  class SourceDataSelector extends Component {
     /* selectors */
-    /* eslint-disable no-invalid-this */
-    datasetsSelector = props => props.datasets;
+    datasetsSelector = (props: SourceDataSelectorProps) => props.datasets;
     dsOptionsSelector = createSelector(this.datasetsSelector, datasets =>
       Object.values(datasets).map(ds => ({
         label: ds.label,
@@ -56,7 +62,7 @@ export default function SourceDataSelectorFactory(DatasetTag) {
           </PanelLabel>
           <ItemSelector
             inputTheme={inputTheme}
-            selectedItems={dataId ? this.props.datasets[dataId] : null}
+            selectedItems={dataId ? [this.props.datasets[dataId]] : []}
             options={dsOptions}
             getOptionValue={'value'}
             filterOption={'label'}
@@ -72,8 +78,5 @@ export default function SourceDataSelectorFactory(DatasetTag) {
     }
   }
 
-  SourceDataSelector.defaultProps = {
-    defaultValue: defaultPlaceHolder
-  };
   return SourceDataSelector;
 }
diff --git a/src/components/side-panel/common/types.ts b/src/components/side-panel/common/types.ts
@@ -0,0 +1,70 @@
+import React, {MouseEvent} from 'react';
+import {Datasets, RGBColor} from 'reducers';
+import KeplerTable from 'utils/table-utils/kepler-table';
+
+export type DatasetInfoProps = {
+  dataset: KeplerTable;
+};
+
+export type UpdateTableColorTypes = {
+  id: string;
+  children: React.ReactNode;
+  updateTableColor?: (d: string, c?: RGBColor) => void;
+};
+
+export type DatasetTagWrapperProps = {
+  updateTableColor?: (d: string, c?: RGBColor) => void;
+};
+
+export type DatasetTagProps = {
+  id?: string;
+  dataset: KeplerTable;
+  updateTableColor?: (d: string, c?: RGBColor) => void;
+  onClick?: (e: MouseEvent) => void;
+  onClickSquare?: (e: MouseEvent) => void;
+};
+
+export type ShowDataTableProps = {
+  id: string;
+  showDatasetTable: Function;
+};
+
+export type RemoveDatasetProps = {
+  datasetKey: string;
+  removeDataset?: (d: string) => void;
+};
+
+export type StyledDatasetTitleProps = {
+  clickable: boolean;
+};
+
+export type DatasetTitleProps = {
+  dataset: KeplerTable;
+  showDatasetTable: Function;
+  showDeleteDataset: boolean;
+  onTitleClick?: () => void;
+  updateTableColor?: (d: string, c?: RGBColor) => void;
+  removeDataset?: (d: string) => void;
+};
+
+export type SourceDataCatalogProps = {
+  datasets: Datasets;
+  showDatasetTable: Function;
+  showDeleteDataset: boolean;
+  onTitleClick?: () => void;
+  updateTableColor?: (d: string, c?: RGBColor) => void;
+  removeDataset?: (d: string) => void;
+};
+
+export type DatasetItemProps = {
+  value: KeplerTable;
+};
+
+export type SourceDataSelectorProps = {
+  dataId: string;
+  datasets: Datasets;
+  disabled: boolean;
+  defaultValue: string;
+  inputTheme: string;
+  onSelect: (items: ReadonlyArray<string | number | boolean | object> | null) => void;
+};