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.

מתאים ל־

פלייליסט.
backlog לפי עדיפות.
רשת תמונות.

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`		class לאלמנט של כל פריט; `itemStyle` מגדיר את הסגנון המוטבע שלו.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

onItemsChange(items, { reason }) אומר אם השינוי הגיע מגרירה, משחרור או מהמקלדת.

ב־React Native חלים אותם props, והסידור מחדש מוצע גם כפעולות נגישות.