@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.28 kB
Source Map (JSON)
{"version":3,"file":"SortableList.mjs","names":["Flexbox"],"sources":["../../src/SortableList/SortableList.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Active,\n closestCenter,\n DndContext,\n KeyboardSensor,\n MeasuringStrategy,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { Fragment, memo, type ReactNode, 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 SortableListItem, type SortableListProps } from './type';\n\nconst measuringConfig = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nconst SortableListParent = memo<SortableListProps>(\n ({ ref, items, onChange, renderItem, renderOverlay, 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 const overlayRenderer = renderOverlay ?? renderItem;\n\n return (\n <DndContext\n collisionDetection={closestCenter}\n measuring={measuringConfig}\n modifiers={[restrictToVerticalAxis, restrictToWindowEdges]}\n sensors={sensors}\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 >\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 ? overlayRenderer(activeItem) : null}</SortableOverlay>\n </DndContext>\n );\n },\n);\n\nSortableListParent.displayName = 'SortableList';\n\nexport interface ISortableList {\n <T extends SortableListItem = SortableListItem>(props: SortableListProps<T>): 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":";;;;;;;;;;;;AA6BA,MAAM,kBAAkB,EACtB,WAAW,EACT,UAAU,kBAAkB,OAC9B,EACF;AAEA,MAAM,qBAAqB,MACxB,EAAE,KAAK,OAAO,UAAU,YAAY,eAAe,MAAM,GAAG,GAAG,WAAW;CACzE,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,aAAa,cAAc,MAAM,MAAM,SAAS,KAAK,OAAO,QAAQ,EAAE,GAAG,CAAC,QAAQ,KAAK,CAAC;CAC9F,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,kBAAkB,iBAAiB;CAEzC,OACE,qBAAC,YAAD;EACE,oBAAoB;EACpB,WAAW;EACX,WAAW,CAAC,wBAAwB,qBAAqB;EAChD;EACT,oBAAoB;GAClB,UAAU,IAAI;EAChB;EACA,YAAY,EAAE,QAAQ,WAAW;GAC/B,IAAI,QAAQ,OAAO,OAAO,MAAM,IAI9B,SAAS,UAAU,OAHC,MAAM,WAAW,EAAE,SAAS,OAAO,OAAO,EAG1B,GAFlB,MAAM,WAAW,EAAE,SAAS,OAAO,KAAK,EAEX,CAAC,CAAC;GAEnD,UAAU,IAAI;EAChB;EACA,cAAc,EAAE,aAAa;GAC3B,UAAU,MAAM;EAClB;YAnBF,CAqBE,oBAAC,iBAAD;GAAwB;GAAO,UAAU;aACvC,oBAACA,mBAAD;IAAS,IAAI;IAAM,WAAW,OAAO;IAAgB;IAAU;IAAK,GAAI;cACrE,MAAM,KAAK,SACV,oBAAC,UAAD,EAAA,UAAyB,WAAW,IAAI,EAAY,GAArC,KAAK,EAAgC,CACrD;GACM,CAAA;EACM,CAAA,GACjB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,gBAAgB,UAAU,IAAI,KAAsB,CAAA,CACzE;;AAEhB,CACF;AAEA,mBAAmB,cAAc;AAQjC,MAAM,eAAe;AAErB,aAAa,OAAO;AACpB,aAAa,aAAa"}