MotionReorder

Vilkite, kad pertvarkytumėte sąrašą ar tinklelį, su klaviatūros palaikymu.

ŽiniatinklisReact NativeSąrašai

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Playlist.jsx

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

Ką jis sutvarko už jus

Kiti elementai pasitraukia, kol velkate (reorder="live") arba kai paleidžiate (reorder="drop").
Sąrašo ir tinklelio išdėstymai su columns ir gap.
Perkėlimai klaviatūra žiniatinklyje ir prieinamumo veiksmai React Native.
Valdomas su items ir onItemsChange arba nevaldomas su defaultItems.

Naudokite jį

Grojaraštis.
Pagal prioritetą surikiuotas darbų sąrašas.
Nuotraukų tinklelis.

Props

Prop	Tipas	Numatytoji	Aprašymas
`items`	`readonly T[]`		Elementai, kai tvarką valdote jūs.
`defaultItems`	`readonly T[]`	`[]`	Pradiniai elementai, kai tvarką laiko komponentas.
`onItemsChange`	`(items, { reason, key }) => void`		Vykdomas su nauja tvarka ir nurodo, ar ji atėjo iš vilkimo, paleidimo ar klaviatūros.
`getKey`	`(item) => string \| number`	`item`	Grąžina unikalų elemento key. Pagal numatymą pats elementas.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Nupiešia elementą; gauna jo indeksą ir ar jis velkamas.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` vilkimo metu judina kitus elementus; `drop` laukia paleidimo.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` arba `grid`.
`columns`	`number`	`3`	Stulpeliai tinklelyje.
`gap`	`number`	`12`	Tarpas tarp elementų pikseliais.
`disabled`	`boolean`	`false`	Išjungia vilkimą.
`duration`	`number`	`260`	Milisekundės pasitraukiantiems elementams.
`itemClassName`	`string`		Klasė kiekvienam elementui; `itemStyle` nustato jo vidinį stilių.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

onItemsChange(items, { reason }) pasako, ar pakeitimas atėjo iš vilkimo, paleidimo ar klaviatūros.

React Native galioja tie patys props, o pertvarkymas siūlomas ir kaip prieinamumo veiksmai.