feat: add drag for chord-list

packages/buitar/package.json

@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"@types/react-beautiful-dnd": "^13.1.7",
 		"@vite-pwa/assets-generator": "^0.0.7",
 		"@vitejs/plugin-react": "^4.0.3",
 		"classnames": "^2.3.1",
@@ -32,6 +33,7 @@
 		"@buitar/abc-editor": "workspace:*",
 		"@buitar/to-guitar": "workspace:*",
 		"@buitar/tone-player": "workspace:*",
+		"react-beautiful-dnd": "^13.1.1",
 		"vexflow": "^4.2.3"
 	}
 }

packages/buitar/src/components/basic/drag-list.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react'
+import {
+	DragDropContext,
+	Droppable,
+	Draggable,
+	type DragDropContextProps,
+	type DroppableProps,
+} from 'react-beautiful-dnd'
+
+export type DragableListProps = {
+	list: any[]
+	className?: string
+} & Pick<DroppableProps, 'direction'> &
+	Pick<DragDropContextProps, 'onDragEnd'>
+
+export const DragableList: FC<DragableListProps> = ({
+	list,
+	onDragEnd,
+	className,
+	direction = 'horizontal',
+}) => {
+	return (
+		<DragDropContext onDragEnd={onDragEnd}>
+			<Droppable droppableId="droppable" direction={direction}>
+				{(provided) => (
+					<div {...provided.droppableProps} ref={provided.innerRef} className={className}>
+						{list.map((item, index) => (
+							<Draggable key={index} draggableId={index.toString()} index={index}>
+								{(provided) => (
+									<div
+										{...provided.draggableProps}
+										{...provided.dragHandleProps}
+										ref={provided.innerRef}
+									>
+										{item}
+									</div>
+								)}
+							</Draggable>
+						))}
+						{provided.placeholder}
+					</div>
+				)}
+			</Droppable>
+		</DragDropContext>
+	)
+}

packages/buitar/src/components/basic/index.ts

@@ -1,2 +1,3 @@
 export * from './collection-selecter'
+export * from './drag-list'
 export * from './text-input'

packages/buitar/src/components/chord-list/chord-list.component.tsx

@@ -2,9 +2,10 @@ import { FC } from 'react'
 import { ChordType, Point } from '@buitar/to-guitar'
 import { ChordCard, useBoardContext } from '../guitar-board'
 import { Icon } from '@/components/icon'
-import { useConfigContext } from '../slide-menu/config-provider'
-import cx from 'classnames'
+import { useConfigContext } from '@/components/slide-menu/config-provider'
+import { DragableList, type DragableListProps } from '@/components/basic'
 
+import cx from 'classnames'
 import styles from './chord-list.module.scss'
 
 export type CollectionChord = {
@@ -19,9 +20,10 @@ export const ChordList: FC<{
 	title?: string
 	intro?: string
 	disableCollect?: boolean
+	disableDrag?: boolean
 	className?: string
 	titleClassName?: string
-}> = ({ data, title, intro, disableCollect, titleClassName, className, index }) => {
+}> = ({ data, title, intro, disableCollect, disableDrag, titleClassName, className, index }) => {
 	const { collection, dispatchCollection, instrumentKeyboard } = useBoardContext()
 	const { isMobileDevice } = useConfigContext()
 
@@ -35,6 +37,16 @@ export const ChordList: FC<{
 		dispatchCollection({ type: 'set', payload: collection })
 	}
 
+	const handleDragEnd: DragableListProps['onDragEnd'] = (result) => {
+		if (!result.destination) return // 如果没有目标位置，不执行任何操作
+		const items = Array.from(data)
+		const [reorderedItem] = items.splice(result.source.index, 1)
+		items.splice(result.destination.index, 0, reorderedItem)
+
+		collection[instrumentKeyboard][index].data = items
+		dispatchCollection({ type: 'set', payload: collection })
+	}
+
 	const dataView = data.map((item, dataIndex) => {
 		return (
 			<ChordCard
@@ -52,17 +64,23 @@ export const ChordList: FC<{
 	return (
 		<div className={cx(styles.list, className)}>
 			<div className={cx(styles['title-view'], titleClassName)}>
-				<div className={cx(styles['title-text'], 'primary-button', 'touch-yellow')}>
-					{title}
-				</div>
+				<div className={cx(styles['title-text'], 'primary-button', 'touch-yellow')}>{title}</div>
 				{!disableCollect && (
 					<div className={cx(styles['title-btn'], 'primary-button', 'touch-primary')}>
 						<Icon name="icon-delete" onClick={handleRemoveCollection} />
 					</div>
 				)}
 				{intro && <div className={cx(styles['title-sub-text'])}>{intro}</div>}
 			</div>
-			<div className={cx(styles['data-list'], 'scroll-without-bar')}>{dataView}</div>
+			{disableDrag ? (
+				<div className={cx(styles['data-list'], 'scroll-without-bar')}>{dataView}</div>
+			) : (
+				<DragableList
+					className={cx(styles['data-list'], 'scroll-without-bar')}
+					list={dataView}
+					onDragEnd={handleDragEnd}
+				></DragableList>
+			)}
 		</div>
 	)
 }

packages/buitar/src/pages/collections/collections.tsx

@@ -93,6 +93,7 @@ export const CagedCollection: FC = () => {
 					index={index}
 					title={key}
 					disableCollect
+					disableDrag
 					className={styles['caged-list']}
 					titleClassName={styles['caged-title']}
 				/>