[WIP] Migration to TS.

Author: nosferatu500

.eslintignore

@@ -1 +1 @@
-/dist/*.ts
+dist/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nosferatu500/react-sortable-tree",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-beta.0",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -120,7 +120,7 @@
     ]
   },
   "dependencies": {
-    "@nosferatu500/react-dnd-scrollzone": "2.0.0-beta.0",
+    "@nosferatu500/react-dnd-scrollzone": "^2.0.0",
     "lodash.isequal": "^4.5.0",
     "prop-types": "^15.7.2",
     "react-dnd": "^14.0.2",
@@ -148,14 +148,15 @@
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
+    "@types/react-virtualized": "^9.21.13",
     "@typescript-eslint/eslint-plugin": "^4.29.0",
     "@typescript-eslint/parser": "^4.29.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "acorn-jsx": "^5.3.2",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-tester": "^10.1.0",
     "enzyme": "^3.11.0",
-    "esbuild": "^0.12.18",
+    "esbuild": "^0.12.19",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",

src/node-renderer-default.tsx

@@ -3,7 +3,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { isDescendant } from './utils/tree-data-utils'
-import classnames from './utils/classnames'
+import { classnames } from './utils/classnames'
 import './node-renderer-default.css'
 
 class NodeRendererDefault extends Component {

src/placeholder-renderer-default.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import classnames from './utils/classnames'
+import { classnames } from './utils/classnames'
 import './placeholder-renderer-default.css'
 
 const PlaceholderRendererDefault = ({ isOver, canDrop }) => (

src/react-sortable-tree.tsx

@@ -18,7 +18,7 @@ import PlaceholderRendererDefault from './placeholder-renderer-default'
 import './react-sortable-tree.css'
 import TreeNode from './tree-node'
 import TreePlaceholder from './tree-placeholder'
-import classnames from './utils/classnames'
+import { classnames } from './utils/classnames'
 import {
   defaultGetNodeKey,
   defaultSearchMethod,

src/tree-node.tsx

@@ -2,7 +2,7 @@
 
 import React, { Component, Children, cloneElement } from 'react'
 import PropTypes from 'prop-types'
-import classnames from './utils/classnames'
+import { classnames } from './utils/classnames'
 import './tree-node.css'
 
 class TreeNode extends Component {

src/utils/classnames.ts

@@ -19,5 +19,3 @@ export const classnames = (...classes: string[]) => {
   // Boolean("classname") === true;
   return classes.filter(Boolean).join(' ')
 }
-
-export default classnames

src/utils/default-handlers.ts

@@ -1,9 +1,49 @@
-// @ts-nocheck
+export interface GetTreeItemChildren {
+  done: (children: TreeItem[]) => void
+  node: TreeItem
+  path: NumberOrStringArray
+  lowerSiblingCounts: number[]
+  treeIndex: number
+}
+
+export type GetTreeItemChildrenFn = (data: GetTreeItemChildren) => void
 
-export const defaultGetNodeKey = ({ treeIndex }: { treeIndex: number }) => {
-  return treeIndex
+export type GetNodeKeyFunction = (data: TreeIndex & TreeNode) => string | number
+
+type NumberOrStringArray = Array<string | number>
+
+export interface TreeItem {
+  title?: React.ReactNode | undefined
+  subtitle?: React.ReactNode | undefined
+  expanded?: boolean | undefined
+  children?: TreeItem[] | GetTreeItemChildrenFn | undefined
+  [x: string]: any
 }
 
+export interface TreeNode {
+  node: TreeItem
+}
+
+export interface TreePath {
+  path: NumberOrStringArray | number
+}
+
+export interface TreeIndex {
+  treeIndex: number
+}
+
+export interface FullTree {
+  treeData: TreeItem[] | undefined | null
+}
+
+export interface NodeData extends TreeNode, TreePath, TreeIndex {}
+
+export interface SearchData extends NodeData {
+  searchQuery: any
+}
+
+export const defaultGetNodeKey = ({ treeIndex }: TreeIndex) => treeIndex
+
 // Cheap hack to get the text of a react object
 const getReactElementText = (parent: any) => {
   if (typeof parent === 'string') {
@@ -34,8 +74,8 @@ const getReactElementText = (parent: any) => {
 const stringSearch = (
   key: string,
   searchQuery: string,
-  node,
-  path,
+  node: TreeItem,
+  path: NumberOrStringArray | number,
   treeIndex: number
 ) => {
   if (typeof node[key] === 'function') {
@@ -58,12 +98,7 @@ export const defaultSearchMethod = ({
   path,
   treeIndex,
   searchQuery,
-}: {
-  node
-  path
-  treeIndex: number
-  searchQuery: string
-}) => {
+}: SearchData): boolean => {
   return (
     stringSearch('title', searchQuery, node, path, treeIndex) ||
     stringSearch('subtitle', searchQuery, node, path, treeIndex)

src/utils/generic-utils.ts

@@ -1,8 +1,11 @@
-// @ts-nocheck
-
 /* eslint-disable import/prefer-default-export */
 
-export function slideRows(rows, fromIndex, toIndex, count = 1) {
+export function slideRows(
+  rows: any[],
+  fromIndex: number,
+  toIndex: number,
+  count = 1
+) {
   const rowsWithoutMoved = [
     ...rows.slice(0, fromIndex),
     ...rows.slice(fromIndex + count),

src/utils/memoized-tree-data-utils.test.ts

@@ -1,8 +1,7 @@
-// @ts-nocheck
-
 import { insertNode } from './tree-data-utils'
 
 import { memoizedInsertNode } from './memoized-tree-data-utils'
+import { TreeIndex } from '..'
 
 describe('insertNode', () => {
   it('should handle empty data', () => {
@@ -11,7 +10,7 @@ describe('insertNode', () => {
       depth: 0,
       minimumTreeIndex: 0,
       newNode: {},
-      getNodeKey: ({ treeIndex }) => treeIndex,
+      getNodeKey: ({ treeIndex }: TreeIndex) => treeIndex,
     }
 
     let firstCall = insertNode(params)