@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 3.8 kB
Source Map (JSON)
{"version":3,"file":"SortableList.mjs","names":["active","Flexbox","SortableOverlay","SortableItem","DragHandle"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Active,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n SortableContext,\n arrayMove,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, type ReactNode, memo, useMemo, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport DragHandle from './components/DragHandle';\nimport SortableItem from './components/SortableItem';\nimport SortableOverlay from './components/SortableOverlay';\nimport { styles } from './style';\nimport type { SortableListProps } from './type';\n\nconst SortableListParent = memo<SortableListProps>(\n ({ ref, items, onChange, renderItem, gap = 8, ...rest }) => {\n const [active, setActive] = useState<Active | null>(null);\n const activeItem = useMemo(() => items.find((item) => item.id === active?.id), [active, items]);\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n return (\n <DndContext\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n onDragCancel={() => {\n setActive(null);\n }}\n onDragEnd={({ active, over }) => {\n if (over && active.id !== over?.id) {\n const activeIndex = items.findIndex(({ id }) => id === active.id);\n const overIndex = items.findIndex(({ id }) => id === over.id);\n\n onChange(arrayMove(items, activeIndex, overIndex));\n }\n setActive(null);\n }}\n onDragStart={({ active }) => {\n setActive(active);\n }}\n sensors={sensors}\n >\n <SortableContext items={items} strategy={verticalListSortingStrategy}>\n <Flexbox as={'ul'} className={styles.container} gap={gap} ref={ref} {...rest}>\n {items.map((item) => (\n <Fragment key={item.id}>{renderItem(item)}</Fragment>\n ))}\n </Flexbox>\n </SortableContext>\n <SortableOverlay>{activeItem ? renderItem(activeItem) : null}</SortableOverlay>\n </DndContext>\n );\n },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n (props: SortableListProps): ReactNode;\n DragHandle: typeof DragHandle;\n Item: typeof SortableItem;\n}\n\nconst SortableList = SortableListParent as unknown as ISortableList;\n\nSortableList.Item = SortableItem;\nSortableList.DragHandle = DragHandle;\n\nexport default SortableList;\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,MAAM,GAAG,GAAG,WAAW;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAwB,KAAK;CACzD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC;CAC/F,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;AAED,QACE,qBAAC;EACC,WAAW,CAAC,wBAAwB,sBAAsB;EAC1D,oBAAoB;AAClB,aAAU,KAAK;;EAEjB,YAAY,EAAE,kBAAQ,WAAW;AAC/B,OAAI,QAAQA,SAAO,OAAO,MAAM,GAI9B,UAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAOA,SAAO,GAAG,EAC/C,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEZ,CAAC;AAEpD,aAAU,KAAK;;EAEjB,cAAc,EAAE,uBAAa;AAC3B,aAAUA,SAAO;;EAEV;aAET,oBAAC;GAAuB;GAAO,UAAU;aACvC,oBAACC;IAAQ,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,sBAAwB,WAAW,KAAK,IAA1B,KAAK,GAAiC,CACrD;KACM;IACM,EAClB,oBAACC,qCAAiB,aAAa,WAAW,WAAW,GAAG,OAAuB;GACpE;EAGlB;AAED,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAOC;AACpB,aAAa,aAAaC;AAE1B,2BAAe"}