MotionSwipe

En rad med åtgärder som visas vid svep och valfri bortsvepning.

WebbReact NativeGester

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

App.jsx

import { useState } from 'react';
import { MotionList, MotionSwipe, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const inbox = [
  { id: 1, from: 'Design team', subject: 'New motion tokens are ready' },
  { id: 2, from: 'Build bot', subject: 'All checks passed on main' },
  { id: 3, from: 'Hana', subject: 'Lunch on Friday?' },
  { id: 4, from: 'Support', subject: 'Your export is complete' },
];

export default function App({ dismiss = 'end', spring = 'default' }) {
  const [messages, setMessages] = useState(inbox);
  const [pinned, setPinned] = useState([]);
  const remove = (id) => setMessages(messages.filter((message) => message.id !== id));
  const pin = (id) =>
    setPinned(pinned.includes(id) ? pinned.filter((item) => item !== id) : [...pinned, id]);

  return (
    <div className="stage">
      {/* The list animates rows that leave by a button and rows that come back. */}
      <MotionList
        className="rows"
        items={messages}
        renderItem={(message) => (
          <MotionSwipe
            className="row"
            contentClassName="content"
            dismiss={dismiss === 'none' ? undefined : dismiss}
            onDismiss={() => remove(message.id)}
            transition={motionTokens.spring[spring]}
            startActions={
              <button className="action pin" onClick={() => pin(message.id)}>
                {pinned.includes(message.id) ? 'Unpin' : 'Pin'}
              </button>
            }
            endActions={
              <button className="action archive" onClick={() => remove(message.id)}>
                Archive
              </button>
            }
          >
            <strong>
              {pinned.includes(message.id) ? '● ' : ''}
              {message.from}
            </strong>
            <span>{message.subject}</span>
          </MotionSwipe>
        )}
      />
      {messages.length === 0 && <p className="empty">Inbox zero.</p>}
      <button className="restore" onClick={() => setMessages(inbox)}>
        Restore messages
      </button>
    </div>
  );
}

styles.css

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

.rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  border-radius: 14px;
  background: #eaf6f0;
}

.content {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
  user-select: none;
}

.content strong {
  color: #0e2e24;
}

.content span {
  color: #5b616b;
}

.action {
  height: 100%;
  min-width: 88px;
  padding: 0 18px;
  border: 0;
  font:
    650 14px system-ui,
    sans-serif;
  color: #fff;
  cursor: pointer;
}

.archive {
  border-radius: 0 14px 14px 0;
  background: #176b52;
}

.pin {
  border-radius: 14px 0 0 14px;
  background: #2e8f6d;
}

.empty {
  margin: 12px 0;
  color: #5b616b;
  text-align: center;
}

.restore {
  justify-self: center;
  min-height: 40px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Kortaste användning

Row.jsx

<MotionSwipe
  endActions={<button onClick={() => archive(id)}>Archive</button>}
  dismiss="end"
  onDismiss={() => remove(id)}
>
  <MessagePreview />
</MotionSwipe>;

Det här sköter den åt dig

Raden följer horisontella dragningar, gör motstånd förbi sina åtgärder och landar med din släpphastighet.
Med dismiss skjuter ett långt svep eller ett kast ut raden, fäller ihop dess höjd och anropar sedan onDismiss(side).
Vertikal scrollning fungerar fortfarande, och bara en rad är öppen åt gången.
Ett tryck på en öppen rad stänger den, och tangentbordsfokus på en åtgärd visar den.

Använd den för

Arkivera eller radera i en inkorg.
Fäst en konversation.
Ta bort ett objekt från en lista.

Props

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Radens innehåll.
`startActions`	`ReactNode`		Visas i radens början när raden dras mot slutet.
`endActions`	`ReactNode`		Visas i radens slut när raden dras mot början.
`dismiss`	`'start' \| 'end' \| 'both'`		Sidor där ett långt svep eller ett kast tar bort raden.
`onDismiss`	`(side) => void`		Körs efter att raden glidit ut och fällts ihop; ta bort objektet från din data här.
`onOpenChange`	`(side \| null) => void`		Körs med den öppna sidan, eller `null` när raden stängs.
`disabled`	`boolean`	`false`	Stänger av svepning.
`contentClassName`	`string`		Klass för radinnehållet; `contentStyle` sätter dess inline-style.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

startActions visas när du drar mot radens slut, endActions när du drar mot början. Ge radinnehållet en bakgrund med contentClassName.

React Native använder samma props och gester.

Används i de här exemplen

InkorgFilterflikar med liveantal, rader som kan svepas bort och en lista som sluter luckan.MotionHighlightMotionListMotionSwipeMotionNumber