[Chore]: Technical: js to ts convertion components root modals (#1801)

* Modals translated Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Prettier changes Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Build fixes Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Review fixes Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Rebase changes Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com> * Review changes Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>
keplergl · Jun 9, 2022 · fe293e7 · fe293e7
1 parent 55abc87
commit fe293e7
Show file tree

Hide file tree

Showing 43 changed files with 575 additions and 385 deletions.
diff --git a/package.json b/package.json
@@ -123,6 +123,7 @@
     "@types/lodash.xor": "^4.5.7",
     "@types/mapbox__geo-viewport": "^0.4.1",
     "@types/react-dom": "^18.0.0",
+    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-map-gl": "^6.1.2",
     "@types/react-modal": "^3.13.1",

diff --git a/src/actions/vis-state-actions.ts b/src/actions/vis-state-actions.ts
@@ -496,7 +496,7 @@ export function updateTableColor(
 export type SortTableColumnUpdaterAction = {
   dataId: string;
   column: string;
-  mode: string;
+  mode?: string;
 };
 /**
  * Sort dataset column, for table display
@@ -510,7 +510,7 @@ export type SortTableColumnUpdaterAction = {
 export function sortTableColumn(
   dataId: string,
   column: string,
-  mode: string
+  mode?: string
 ): Merge<SortTableColumnUpdaterAction, {type: typeof ActionTypes.SORT_TABLE_COLUMN}> {
   return {
     type: ActionTypes.SORT_TABLE_COLUMN,

diff --git a/src/cloud-providers/provider.ts b/src/cloud-providers/provider.ts
@@ -46,7 +46,7 @@ export type ProviderProps = {
   thumbnail?: Thumbnail;
 };
 
-interface IconProps {
+export interface IconProps {
   height?: string;
   width?: string;
 }
@@ -169,7 +169,7 @@ export default class Provider {
    * @param {function} onCloudLogoutSuccess - callbacks to be called after logout success
    * @public
    */
-  async logout(onCloudLogoutSuccess) {
+  async logout(onCloudLogoutSuccess: () => void) {
     onCloudLogoutSuccess();
     return;
   }

diff --git a/src/components/bottom-widget.tsx b/src/components/bottom-widget.tsx
@@ -33,7 +33,7 @@ const maxWidth = 1080;
 
 interface BottomWidgetContainerProps {
   hasPadding?: boolean;
-  width: number;
+  width?: number;
 }
 
 const BottomWidgetContainer = styled.div<BottomWidgetContainerProps>`

diff --git a/src/components/common/data-table/index.tsx b/src/components/common/data-table/index.tsx
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {Component, createRef} from 'react';
-import {ScrollSync, AutoSizer} from 'react-virtualized';
+import {ScrollSync, AutoSizer, OnScrollParams, GridProps, Index} from 'react-virtualized';
 import styled, {withTheme} from 'styled-components';
 import classnames from 'classnames';
 import {createSelector} from 'reselect';
@@ -37,6 +37,7 @@ import {adjustCellsToContainer} from './cell-size';
 
 import {ALL_FIELD_TYPES, SORT_ORDER} from 'constants/default-settings';
 import FieldTokenFactory from 'components/common/field-token';
+import {DataContainerInterface} from 'utils/table-utils/data-container-interface';
 
 const defaultHeaderRowHeight = 55;
 const defaultRowHeight = 32;
@@ -229,10 +230,26 @@ const columnWidthFunction = (columns, cellSizeCache, ghost?) => ({index}) => {
   return (columns[index] || {}).ghost ? ghost : cellSizeCache[columns[index]] || defaultColumnWidth;
 };
 
+interface GetRowCellProps {
+  dataContainer: DataContainerInterface;
+  columns: (string & {ghost?: boolean})[];
+  column: string;
+  colMeta;
+  rowIndex: number;
+  sortOrder?: number[] | null;
+}
+
 /*
  * This is an accessor method used to generalize getting a cell from a data row
  */
-const getRowCell = ({dataContainer, columns, column, colMeta, rowIndex, sortOrder}) => {
+const getRowCell = ({
+  dataContainer,
+  columns,
+  column,
+  colMeta,
+  rowIndex,
+  sortOrder
+}: GetRowCellProps) => {
   const rowIdx = sortOrder && sortOrder.length ? get(sortOrder, rowIndex) : rowIndex;
   const {type} = colMeta[column];
 
@@ -241,6 +258,29 @@ const getRowCell = ({dataContainer, columns, column, colMeta, rowIndex, sortOrde
   return parseFieldValue(value, type);
 };
 
+interface TableSectionProps {
+  classList?: {
+    header: string;
+    rows: string;
+  };
+  isPinned?: boolean;
+  columns: (string & {ghost?: boolean})[];
+  headerGridProps?;
+  fixedWidth?: number;
+  fixedHeight?: number;
+  onScroll?: (params: OnScrollParams) => void;
+  scrollTop?: number;
+  dataGridProps: {
+    rowHeight: number | ((params: Index) => number);
+    rowCount: number;
+  } & Partial<GridProps>;
+  columnWidth?;
+  setGridRef?: Function;
+  headerCellRender?;
+  dataCellRender?;
+  scrollLeft?: number;
+}
+
 export const TableSection = ({
   classList,
   isPinned,
@@ -256,7 +296,7 @@ export const TableSection = ({
   headerCellRender,
   dataCellRender,
   scrollLeft = 0
-}) => (
+}: TableSectionProps) => (
   <AutoSizer>
     {({width, height}) => {
       const gridDimension = {
@@ -303,10 +343,22 @@ type CellSizeCache = {[id: string]: number};
 interface DataTableProps {
   cellSizeCache?: CellSizeCache;
   pinnedColumns?: string[];
+  columns: (string & {ghost?: boolean})[];
   fixedWidth?: number;
   theme?: any;
-  dataContainer;
-  fixedHeight;
+  dataContainer: DataContainerInterface;
+  fixedHeight?: number;
+  colMeta: {
+    [id: string]: {
+      name: string;
+      type: string;
+    };
+  };
+  sortColumn?: {[id: string]: string};
+  sortTableColumn: (id: string, mode?: string) => void;
+  pinTableColumn: (id: string) => void;
+  copyTableColumn: (id: string) => void;
+  sortOrder?: number[] | null;
 }
 
 interface DataTableState {
@@ -357,8 +409,8 @@ function DataTableFactory(FieldToken: ReturnType<typeof FieldTokenFactory>) {
     }
 
     root = createRef<HTMLDivElement>();
-    columns = props => props.columns;
-    pinnedColumns = props => props.pinnedColumns;
+    columns = (props: DataTableProps) => props.columns;
+    pinnedColumns = (props: DataTableProps) => props.pinnedColumns;
     unpinnedColumns = createSelector(this.columns, this.pinnedColumns, (columns, pinnedColumns) =>
       !Array.isArray(pinnedColumns) ? columns : columns.filter(c => !pinnedColumns.includes(c))
     );
@@ -396,11 +448,17 @@ function DataTableFactory(FieldToken: ReturnType<typeof FieldTokenFactory>) {
 
     scaleCellsToWidth = debounce(this.doScaleCellsToWidth, 300);
 
-    renderHeaderCell = (columns, isPinned, props, toggleMoreOptions, moreOptionsColumn) => {
+    renderHeaderCell = (
+      columns: (string & {ghost?: boolean})[],
+      isPinned: boolean,
+      props: DataTableProps,
+      toggleMoreOptions,
+      moreOptionsColumn
+    ) => {
       // eslint-disable-next-line react/display-name
       return cellInfo => {
         const {columnIndex, key, style} = cellInfo;
-        const {colMeta, sortColumn, sortTableColumn, pinTableColumn, copyTableColumn} = props;
+        const {colMeta, sortColumn = {}, sortTableColumn, pinTableColumn, copyTableColumn} = props;
 
         const column = columns[columnIndex];
         const isGhost = column.ghost;
@@ -468,7 +526,7 @@ function DataTableFactory(FieldToken: ReturnType<typeof FieldTokenFactory>) {
       };
     };
 
-    renderDataCell = (columns, isPinned, props) => {
+    renderDataCell = (columns, isPinned, props: DataTableProps) => {
       return cellInfo => {
         const {columnIndex, key, style, rowIndex} = cellInfo;
         const {dataContainer, colMeta} = props;
@@ -483,7 +541,7 @@ function DataTableFactory(FieldToken: ReturnType<typeof FieldTokenFactory>) {
         const endCell = columnIndex === columns.length - 1;
         const firstCell = columnIndex === 0;
         const bottomCell = rowIndex === lastRowIndex;
-        const alignRight = fieldToAlignRight[type];
+        const alignRight = fieldToAlignRight[Number(type)];
 
         const cell = (
           <div
@@ -509,11 +567,19 @@ function DataTableFactory(FieldToken: ReturnType<typeof FieldTokenFactory>) {
     };
 
     render() {
-      const {dataContainer, pinnedColumns = [], theme = {}, fixedWidth, fixedHeight} = this.props;
+      const {
+        dataContainer,
+        pinnedColumns = [],
+        theme = {},
+        fixedWidth,
+        fixedHeight = 0
+      } = this.props;
       const unpinnedColumns = this.unpinnedColumns(this.props);
 
       const {cellSizeCache = {}, moreOptionsColumn, ghost} = this.state;
-      const unpinnedColumnsGhost = ghost ? [...unpinnedColumns, {ghost: true}] : unpinnedColumns;
+      const unpinnedColumnsGhost = ghost
+        ? [...unpinnedColumns, {ghost: true} as string & {ghost: boolean}]
+        : unpinnedColumns;
       const pinnedColumnsWidth = pinnedColumns.reduce(
         (acc, val) => acc + get(cellSizeCache, val, 0),
         0

diff --git a/src/components/common/data-table/option-dropdown.tsx b/src/components/common/data-table/option-dropdown.tsx
@@ -59,7 +59,7 @@ interface OptionDropdownProps {
   pinTableColumn: () => void;
   copyTableColumn: () => void;
   sortMode?: string;
-  isSorted?: boolean;
+  isSorted?: string;
   isPinned?: boolean;
 }
 

diff --git a/src/components/common/item-selector/item-selector.d.ts b/src/components/common/item-selector/item-selector.d.ts
@@ -1,30 +1,30 @@
 import {FunctionComponent, ComponentType} from 'react';
 
 export type ItemSelectorProps = {
-  selectedItems: ReadonlyArray<string | number | boolean | object>,
-  options: ReadonlyArray<string | number | boolean | object>,
-  onChange: (items: ReadonlyArray<string | number | boolean | object>) => void,
-  fixedOptions?: any[],
-  erasable?: boolean,
-  showArrow?: boolean,
-  searchable?: boolean,
-  displayOption?: string | ((opt: any) => any),
-  getOptionValue?: string | ((opt: any) => any),
-  filterOption?: string | ((opt: any) => any),
-  placement?: string,
-  disabled?: boolean,
-  isError?: boolean,
-  multiSelect?: boolean,
-  inputTheme?: string,
-  size?: string,
-  onBlur?: () => void,
-  placeholder?: string,
-  closeOnSelect?: boolean,
-  typeaheadPlaceholder?: string,
-  DropdownHeaderComponent?: ComponentType<any> | null,
-  DropDownRenderComponent?: ComponentType<any>,
-  DropDownLineItemRenderComponent?: ComponentType<any>,
-  CustomChickletComponent?: ComponentType<any>
+  selectedItems: ReadonlyArray<string | number | boolean | object>;
+  options: ReadonlyArray<string | number | boolean | object>;
+  onChange: (items: ReadonlyArray<string | number | boolean | object>) => void;
+  fixedOptions?: any[];
+  erasable?: boolean;
+  showArrow?: boolean;
+  searchable?: boolean;
+  displayOption?: string | ((opt: any) => any);
+  getOptionValue?: string | ((opt: any) => any);
+  filterOption?: string | ((opt: any) => any);
+  placement?: string;
+  disabled?: boolean;
+  isError?: boolean;
+  multiSelect?: boolean;
+  inputTheme?: string;
+  size?: string;
+  onBlur?: () => void;
+  placeholder?: string;
+  closeOnSelect?: boolean;
+  typeaheadPlaceholder?: string;
+  DropdownHeaderComponent?: ComponentType<any> | null;
+  DropDownRenderComponent?: ComponentType<any>;
+  DropDownLineItemRenderComponent?: ComponentType<any>;
+  CustomChickletComponent?: ComponentType<any>;
 };
 
 const ItemSelector: FunctionComponent<ItemSelectorProps>;

diff --git a/src/components/common/modal.tsx b/src/components/common/modal.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, ReactNode} from 'react';
 import {FormattedMessage} from 'localization';
 
 import styled, {FlattenSimpleInterpolation} from 'styled-components';
@@ -155,9 +155,10 @@ export interface ModalDialogProps {
   cssStyle?: FlattenSimpleInterpolation | string;
   style?: React.CSSProperties;
   theme: any;
+  children?: ReactNode;
 }
 
-class ModalDialog extends Component<ModalDialogProps> {
+export class ModalDialog extends Component<ModalDialogProps> {
   static defaultProps = {
     footer: false,
     close: true,

diff --git a/src/components/common/styled-components.tsx b/src/components/common/styled-components.tsx
@@ -477,9 +477,9 @@ export const StyledModalVerticalPanel = styled.div.attrs({
   }
 `;
 
-export const StyledModalSection = styled.div.attrs({
-  className: 'modal-section'
-})`
+export const StyledModalSection = styled.div.attrs(({className}) => ({
+  className: classnames('modal-section', className)
+}))`
   margin-bottom: 32px;
 
   .modal-section-title {
@@ -559,7 +559,7 @@ export const StyledAttrbution = styled.div.attrs({
   }
 `;
 
-interface StyledExportSectionProps {
+export interface StyledExportSectionProps {
   disabled?: boolean;
 }