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`	वस्तूसाठी अद्वितीय key परत करते. डीफॉल्टनुसार वस्तू स्वतः.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	वस्तू काढते; तिचा index आणि ती ओढली जात आहे का ते मिळवते.
`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` त्याची inline style सेट करते.

इतर props रेंडर होणाऱ्या एलिमेंटकडे जातात, त्यामुळे className, style आणि इव्हेंट हँडलर नेहमीप्रमाणे चालतात.

वेब आणि React Native

onItemsChange(items, { reason }) बदल ओढण्यातून, सोडण्यातून की कीबोर्डमधून आला ते सांगते.

React Native वर तेच props लागू होतात आणि क्रम बदलणे सुलभता क्रिया म्हणूनही दिले जाते.