MotionReorder

اسحب لإعادة ترتيب قائمة أو شبكة، مع دعم لوحة المفاتيح.

الويبReact Nativeالقوائم

جرّبه

جارٍ تجهيز المثال…

JavaScript معطّل. الشيفرة أدناه هي المثال الكامل.

App.jsx

import { useState } from 'react';
import { MotionReorder } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const tracks = [
  { id: 'intro', title: 'Intro', length: '0:48' },
  { id: 'morning', title: 'Morning Light', length: '3:21' },
  { id: 'harbor', title: 'Harbor', length: '4:02' },
  { id: 'chorus', title: 'Chorus Line', length: '2:57' },
  { id: 'night', title: 'Night Drive', length: '5:10' },
  { id: 'outro', title: 'Outro', length: '1:15' },
];

export default function App({ reorder = 'live', layout = 'list' }) {
  const [items, setItems] = useState(tracks);

  return (
    <div className="stage">
      <MotionReorder
        className={`playlist ${layout}`}
        itemClassName="track"
        items={items}
        onItemsChange={setItems}
        getKey={(track) => track.id}
        reorder={reorder}
        layout={layout}
        columns={3}
        gap={8}
        renderItem={(track, { index, dragging }) => (
          <div className={dragging ? 'row dragging' : 'row'}>
            <span className="index">{index + 1}</span>
            <strong>{track.title}</strong>
            <span className="length">{track.length}</span>
          </div>
        )}
      />
      <p className="hint">Drag a handle, or focus it and use the arrow keys.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track > button {
  flex: none;
  width: 36px;
  height: 44px;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  background: #f4faf7;
  color: #176b52;
  font-size: 18px;
}

.grid .track {
  flex-direction: column;
  align-items: stretch;
}

.grid .track > button {
  width: 100%;
  height: 32px;
}

.row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
  user-select: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.row.dragging {
  border-color: #176b52;
  box-shadow: 0 10px 24px rgba(14, 46, 36, 0.16);
}

.grid .row {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  text-align: center;
}

.index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font:
    700 12px system-ui,
    sans-serif;
}

.row strong {
  flex: 1;
  color: #0e2e24;
}

.length {
  color: #5b616b;
  font-variant-numeric: tabular-nums;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

أقصر استخدام

Playlist.jsx

<MotionReorder
  items={tracks}
  onItemsChange={setTracks}
  layout="list"
  renderItem={(track) => track.title}
/>;

ما يتولّاه عنك

تتنحّى العناصر الأخرى أثناء السحب (reorder="live") أو عند الإفلات (reorder="drop").
تخطيطات قائمة وشبكة مع columns وgap.
تحريك بلوحة المفاتيح على الويب، وإجراءات سهولة الوصول في React Native.
متحكَّم به عبر items وonItemsChange، أو غير متحكَّم به عبر defaultItems.

استخدمه لـ

قائمة تشغيل.
قائمة أعمال مرتّبة حسب الأولوية.
شبكة صور.

Props

Prop	النوع	الافتراضي	الوصف
`items`	`readonly T[]`		العناصر، حين تتحكم أنت في الترتيب.
`defaultItems`	`readonly T[]`	`[]`	العناصر الأولى، حين يحتفظ المكوّن بالترتيب.
`onItemsChange`	`(items, { reason, key }) => void`		يعمل مع الترتيب الجديد وما إذا جاء من سحب أو إفلات أو لوحة المفاتيح.
`getKey`	`(item) => string \| number`	`item`	تعيد مفتاحًا فريدًا لعنصر. افتراضيًا العنصر نفسه.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	يرسم عنصرًا؛ ويتلقى فهرسه وما إذا كان يُسحب.
`reorder`	`'live' \| 'drop'`	`'live'`	يحرّك `live` العناصر الأخرى أثناء السحب؛ وينتظر `drop` الإفلات.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` أو `grid`.
`columns`	`number`	`3`	الأعمدة في الشبكة.
`gap`	`number`	`12`	المسافة بين العناصر بالبكسل.
`disabled`	`boolean`	`false`	يعطّل السحب.
`duration`	`number`	`260`	مللي ثوانٍ لتنحّي العناصر.
`itemClassName`	`string`		صنف لعنصر كل بند؛ ويضبط `itemStyle` نمطه المضمّن.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

يخبرك onItemsChange(items, { reason }) إن كان التغيير قد جاء من سحب أو إفلات أو لوحة المفاتيح.

في React Native تنطبق props نفسها، وتُقدَّم إعادة الترتيب أيضًا كإجراءات سهولة الوصول.