MotionSwipe

Een rij met acties onder een veeg en optioneel wegvegen.

WebReact NativeGebaren

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Row.jsx

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

Wat het voor je regelt

De rij volgt horizontaal slepen, biedt weerstand voorbij de acties en komt tot rust met je loslaatsnelheid.
Met dismiss schuift een lange veeg of een worp de rij weg, klapt de hoogte in en roept dan onDismiss(side) aan.
Verticaal scrollen blijft werken, en er blijft maar één rij open.
Een tik op een open rij sluit hem, en toetsenbordfocus op een actie toont hem.

Gebruik het voor

Archiveren of verwijderen in een inbox.
Een gesprek vastzetten.
Een item uit een lijst verwijderen.

Props

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		De inhoud van de rij.
`startActions`	`ReactNode`		Getoond aan het begin van de regel als de rij naar het einde wordt gesleept.
`endActions`	`ReactNode`		Getoond aan het einde van de regel als de rij naar het begin wordt gesleept.
`dismiss`	`'start' \| 'end' \| 'both'`		Kanten waar een lange veeg of worp de rij verwijdert.
`onDismiss`	`(side) => void`		Draait nadat de rij is weggeschoven en ingeklapt; verwijder hier het item uit je data.
`onOpenChange`	`(side \| null) => void`		Draait met de open kant, of `null` als de rij sluit.
`disabled`	`boolean`	`false`	Zet vegen uit.
`contentClassName`	`string`		Class voor de rij-inhoud; `contentStyle` zet de inline style.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

startActions verschijnen als je naar het einde van de regel sleept, endActions als je naar het begin sleept. Geef de rij-inhoud een achtergrond met contentClassName.

React Native gebruikt dezelfde props en gebaren.

Gebruikt in deze voorbeelden

InboxFiltertabs met live tellingen, rijen die je kunt wegvegen en een lijst die het gat dicht.MotionHighlightMotionListMotionSwipeMotionNumber