@@ -7,7 +7,6 @@ import withScrolling, {
77 createVerticalStrength ,
88} from '@nosferatu500/react-dnd-scrollzone'
99import isEqual from 'lodash.isequal'
10- import PropTypes from 'prop-types'
1110import { DndContext , DndProvider } from 'react-dnd'
1211import { HTML5Backend } from 'react-dnd-html5-backend'
1312import { Virtuoso } from 'react-virtuoso'
@@ -731,123 +730,182 @@ class ReactSortableTree extends Component {
731730 }
732731}
733732
734- ReactSortableTree . propTypes = {
735- dragDropManager : PropTypes . shape ( {
736- getMonitor : PropTypes . func ,
737- } ) . isRequired ,
733+ type SearchParams = {
734+ node : any
735+ path : number [ ]
736+ treeIndex : number
737+ searchQuery : string
738+ }
739+
740+ type SearchFinishCallbackParams = {
741+ node : any
742+ path : number [ ]
743+ treeIndex : number
744+ } [ ]
745+
746+ type GenerateNodePropsParams = {
747+ node : any
748+ path : number [ ]
749+ treeIndex : number
750+ lowerSiblingCounts : number [ ]
751+ isSearchMatch : boolean
752+ isSearchFocus : boolean
753+ }
754+
755+ type ShouldCopyOnOutsideDropParams = {
756+ node : any
757+ prevPath : number [ ]
758+ prevTreeIndex : number
759+ }
760+
761+ type OnMoveNodeParams = {
762+ treeData : any [ ]
763+ node : any
764+ nextParentNode : any
765+ prevPath : number [ ]
766+ prevTreeIndex : number
767+ nextPath : number [ ]
768+ nextTreeIndex : number
769+ }
770+
771+ type CanDropParams = {
772+ node : any
773+ prevPath : number [ ]
774+ prevParent : any
775+ prevTreeIndex : number
776+ nextPath : number [ ]
777+ nextParent : any
778+ nextTreeIndex : number
779+ }
780+
781+ type OnVisibilityToggleParams = {
782+ treeData : any [ ]
783+ node : any
784+ expanded : boolean
785+ path : number [ ]
786+ }
787+
788+ type OnDragStateChangedParams = {
789+ isDragging : boolean
790+ draggedNode : any
791+ }
792+
793+ type ReactSortableTreeProps = {
794+ dragDropManager ?: {
795+ getMonitor : ( ) => unknown
796+ }
738797
739798 // Tree data in the following format:
740799 // [{title: 'main', subtitle: 'sub'}, { title: 'value2', expanded: true, children: [{ title: 'value3') }] }]
741800 // `title` is the primary label for the node
742801 // `subtitle` is a secondary label for the node
743802 // `expanded` shows children of the node if true, or hides them if false. Defaults to false.
744803 // `children` is an array of child nodes belonging to the node.
745- treeData : PropTypes . arrayOf ( PropTypes . object ) . isRequired ,
804+ treeData : any [ ]
746805
747806 // Style applied to the container wrapping the tree (style defaults to {height: '100%'})
748- style : PropTypes . shape ( { } ) ,
807+ style ?: any
749808
750809 // Class name for the container wrapping the tree
751- className : PropTypes . string ,
810+ className ?: string
752811
753812 // Style applied to the inner, scrollable container (for padding, etc.)
754- innerStyle : PropTypes . shape ( { } ) ,
813+ innerStyle ?: any
755814
756815 // Size in px of the region near the edges that initiates scrolling on dragover
757- slideRegionSize : PropTypes . number ,
816+ slideRegionSize ?: number
758817
759818 // The width of the blocks containing the lines representing the structure of the tree.
760- scaffoldBlockPxWidth : PropTypes . number ,
819+ scaffoldBlockPxWidth ?: number
761820
762821 // Maximum depth nodes can be inserted at. Defaults to infinite.
763- maxDepth : PropTypes . number ,
822+ maxDepth ?: number
764823
765824 // The method used to search nodes.
766825 // Defaults to a function that uses the `searchQuery` string to search for nodes with
767826 // matching `title` or `subtitle` values.
768827 // NOTE: Changing `searchMethod` will not update the search, but changing the `searchQuery` will.
769- searchMethod : PropTypes . func ,
828+ searchMethod ?: ( params : SearchParams ) => boolean
770829
771830 // Used by the `searchMethod` to highlight and scroll to matched nodes.
772831 // Should be a string for the default `searchMethod`, but can be anything when using a custom search.
773- searchQuery : PropTypes . any , // eslint-disable-line react/forbid-prop-types
832+ searchQuery ?: string // eslint-disable-line react/forbid-prop-types
774833
775834 // Outline the <`searchFocusOffset`>th node and scroll to it.
776- searchFocusOffset : PropTypes . number ,
835+ searchFocusOffset ?: number
777836
778837 // Get the nodes that match the search criteria. Used for counting total matches, etc.
779- searchFinishCallback : PropTypes . func ,
838+ searchFinishCallback ?: ( params : SearchFinishCallbackParams ) => void
780839
781840 // Generate an object with additional props to be passed to the node renderer.
782841 // Use this for adding buttons via the `buttons` key,
783842 // or additional `style` / `className` settings.
784- generateNodeProps : PropTypes . func ,
843+ generateNodeProps ?: ( params : GenerateNodePropsParams ) => any
785844
786- treeNodeRenderer : PropTypes . func ,
845+ treeNodeRenderer ?: any
787846
788847 // Override the default component for rendering nodes (but keep the scaffolding generator)
789848 // This is an advanced option for complete customization of the appearance.
790849 // It is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.
791- nodeContentRenderer : PropTypes . func ,
850+ nodeContentRenderer ?: any
792851
793852 // Override the default component for rendering an empty tree
794853 // This is an advanced option for complete customization of the appearance.
795854 // It is best to copy the component in `placeholder-renderer-default.js` to use as a base,
796855 // and customize as needed.
797- placeholderRenderer : PropTypes . func ,
798-
799- theme : PropTypes . shape ( {
800- style : PropTypes . shape ( { } ) ,
801- innerStyle : PropTypes . shape ( { } ) ,
802- scaffoldBlockPxWidth : PropTypes . number ,
803- slideRegionSize : PropTypes . number ,
804- treeNodeRenderer : PropTypes . func ,
805- nodeContentRenderer : PropTypes . func ,
806- placeholderRenderer : PropTypes . func ,
807- } ) ,
856+ placeholderRenderer ?: any
857+
858+ theme ?: {
859+ style : any
860+ innerStyle : any
861+ scaffoldBlockPxWidth : number
862+ slideRegionSize : number
863+ treeNodeRenderer : any
864+ nodeContentRenderer : any
865+ placeholderRenderer : any
866+ }
808867
809868 // Determine the unique key used to identify each node and
810869 // generate the `path` array passed in callbacks.
811870 // By default, returns the index in the tree (omitting hidden nodes).
812- getNodeKey : PropTypes . func ,
871+ getNodeKey ?: ( node ) => string
813872
814873 // Called whenever tree data changed.
815874 // Just like with React input elements, you have to update your
816875 // own component's data to see the changes reflected.
817- onChange : PropTypes . func . isRequired ,
876+ onChange : ( treeData ) => void
818877
819878 // Called after node move operation.
820- onMoveNode : PropTypes . func ,
879+ onMoveNode ?: ( params : OnMoveNodeParams ) => void
821880
822881 // Determine whether a node can be dragged. Set to false to disable dragging on all nodes.
823- canDrag : PropTypes . oneOfType ( [ PropTypes . func , PropTypes . bool ] ) ,
882+ canDrag ?: ( params : GenerateNodePropsParams ) => boolean
824883
825884 // Determine whether a node can be dropped based on its path and parents'.
826- canDrop : PropTypes . func ,
885+ canDrop ?: ( params : CanDropParams ) => boolean
827886
828887 // Determine whether a node can have children
829- canNodeHaveChildren : PropTypes . func ,
888+ canNodeHaveChildren ?: ( node ) => boolean
830889
831890 // When true, or a callback returning true, dropping nodes to react-dnd
832891 // drop targets outside of this tree will not remove them from this tree
833- shouldCopyOnOutsideDrop : PropTypes . oneOfType ( [
834- PropTypes . func ,
835- PropTypes . bool ,
836- ] ) ,
892+ shouldCopyOnOutsideDrop ?: ( params : ShouldCopyOnOutsideDropParams ) => boolean
837893
838894 // Called after children nodes collapsed or expanded.
839- onVisibilityToggle : PropTypes . func ,
895+ onVisibilityToggle ?: ( params : OnVisibilityToggleParams ) => void
840896
841- dndType : PropTypes . string ,
897+ dndType ?: string
842898
843899 // Called to track between dropped and dragging
844- onDragStateChanged : PropTypes . func ,
900+ onDragStateChanged ?: ( params : OnDragStateChangedParams ) => void
845901
846902 // Specify that nodes that do not match search will be collapsed
847- onlyExpandSearchedNodes : PropTypes . bool ,
903+ onlyExpandSearchedNodes ?: boolean
848904
849905 // rtl support
850- rowDirection : PropTypes . string ,
906+ rowDirection ?: string
907+
908+ debugMode ?: boolean
851909}
852910
853911ReactSortableTree . defaultProps = {
@@ -877,9 +935,10 @@ ReactSortableTree.defaultProps = {
877935 onDragStateChanged : ( ) => { } ,
878936 onlyExpandSearchedNodes : false ,
879937 rowDirection : 'ltr' ,
938+ debugMode : false ,
880939}
881940
882- const SortableTreeWithoutDndContext = ( props ) => (
941+ const SortableTreeWithoutDndContext = ( props : ReactSortableTreeProps ) => (
883942 < DndContext . Consumer >
884943 { ( { dragDropManager } ) =>
885944 dragDropManager === undefined ? null : (
@@ -889,7 +948,7 @@ const SortableTreeWithoutDndContext = (props) => (
889948 </ DndContext . Consumer >
890949)
891950
892- const SortableTree = ( props ) => (
951+ const SortableTree = ( props : ReactSortableTreeProps ) => (
893952 < DndProvider debugMode = { props . debugMode } backend = { HTML5Backend } >
894953 < SortableTreeWithoutDndContext { ...props } />
895954 </ DndProvider >
0 commit comments