import { useDragDropContext } from "./drag-drop-context" ; import { moveArrayItem } from "./move-array-item" ; import { Component , createContext , createEffect , untrack , useContext , } from "solid-js" ; import { createStore , Store } from "solid-js/store" ; interface SortableContextState { initialIds : Array < string | number > ; sortedIds : Array < string | number > ; } interface SortableContextProps { ids : Array < string | number > ; } type SortableContext = [ Store < SortableContextState > , { } ] ; const Context = createContext < SortableContext > ( ) ; const SortableProvider = ( props ) => { const [ dndState ] = useDragDropContext ( ) ! ; const [ state , setState ] = createStore < SortableContextState > ( { initialIds : [ ] , sortedIds : [ ] , } ) ; const isValidIndex = ( index ) : boolean => { return index >= 0 && index < state . initialIds . length ; } ; createEffect ( ( ) => { setState ( "initialIds" , [ ... props . ids ] ) ; setState ( "sortedIds" , [ ... props . ids ] ) ; } ) ; createEffect ( ( ) => { if ( dndState . active . draggable && dndState . active . droppable ) { untrack ( ( ) => { const fromIndex = state . sortedIds . indexOf ( dndState . active . draggable ! ) ; const toIndex = state . initialIds . indexOf ( dndState . active . droppable ! ) ; if ( fromIndex !== toIndex && isValidIndex ( fromIndex ) && isValidIndex ( toIndex ) ) { const resorted = moveArrayItem ( state . sortedIds , fromIndex , toIndex ) ; setState ( "sortedIds" , resorted ) ; } } ) ; } else { setState ( "sortedIds" , [ ... props . ids ] ) ; } } ) ; const actions = { } ; const context = [ state , actions ] ; return < Context . Provider value = { context } > { props . children } < /Context.Provider>; } ; const useSortableContext = ( ) : SortableContext | null => { return useContext ( Context ) || null ; } ; export { Context , SortableProvider , useSortableContext } ;