MotionReorder

Bir listeyi ya da ızgarayı sürükleyerek yeniden sıralayın; klavye desteğiyle.

WebReact NativeListeler

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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;
}

En kısa kullanım

Playlist.jsx

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

Sizin yerinize hallettikleri

Diğer öğeler siz sürüklerken (reorder="live") ya da bıraktığınızda (reorder="drop") yol verir.
columns ve gap ile liste ve ızgara düzenleri.
Web'de klavyeyle taşıma, React Native'de erişilebilirlik eylemleri.
items ve onItemsChange ile denetimli ya da defaultItems ile denetimsiz.

Şunlar için kullanın

Bir çalma listesi.
Önceliklendirilmiş bir iş listesi.
Bir fotoğraf ızgarası.

Props

Prop	Tip	Varsayılan	Açıklama
`items`	`readonly T[]`		Sırayı siz denetlediğinizde öğeler.
`defaultItems`	`readonly T[]`	`[]`	Sırayı bileşen tuttuğunda başlangıç öğeleri.
`onItemsChange`	`(items, { reason, key }) => void`		Yeni sırayla ve bunun sürüklemeden, bırakmadan ya da klavyeden gelip gelmediğiyle çalışır.
`getKey`	`(item) => string \| number`	`item`	Bir öğe için benzersiz bir key döndürür. Varsayılan öğenin kendisidir.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Bir öğeyi çizer; index'ini ve sürüklenip sürüklenmediğini alır.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` sürüklerken diğer öğeleri hareket ettirir; `drop` bırakmayı bekler.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ya da `grid`.
`columns`	`number`	`3`	Izgaradaki sütunlar.
`gap`	`number`	`12`	Öğeler arasındaki boşluk, piksel.
`disabled`	`boolean`	`false`	Sürüklemeyi kapatır.
`duration`	`number`	`260`	Yol veren öğeler için milisaniye.
`itemClassName`	`string`		Her öğe elemanı için class; `itemStyle` satır içi stilini ayarlar.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

onItemsChange(items, { reason }) bir değişikliğin sürüklemeden, bırakmadan ya da klavyeden gelip gelmediğini söyler.

React Native'de aynı props geçerlidir ve yeniden sıralama erişilebilirlik eylemleri olarak da sunulur.