MotionSwipe

Une ligne avec des actions révélées au balayage et une suppression au balayage facultative.

WebReact NativeGestes

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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

Usage minimal

Row.jsx

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

Ce qu’il gère pour vous

La ligne suit les glisser horizontaux, résiste au-delà de ses actions et se pose selon la vitesse de relâchement.
Avec dismiss, un long balayage ou un lancer fait sortir la ligne, replie sa hauteur puis appelle onDismiss(side).
Le défilement vertical continue de fonctionner, et une seule ligne reste ouverte à la fois.
Un appui sur une ligne ouverte la referme, et le focus clavier sur une action la révèle.

À utiliser pour

Archiver ou supprimer dans une boîte de réception.
Épingler une conversation.
Retirer un élément d’une liste.

Props

Prop	Type	Défaut	Description
`children`	`ReactNode`		Le contenu de la ligne.
`startActions`	`ReactNode`		Révélées au début de la ligne quand on la fait glisser vers la fin.
`endActions`	`ReactNode`		Révélées à la fin de la ligne quand on la fait glisser vers le début.
`dismiss`	`'start' \| 'end' \| 'both'`		Côtés où un long balayage ou un lancer supprime la ligne.
`onDismiss`	`(side) => void`		S’exécute une fois la ligne sortie et repliée ; retirez ici l’élément de vos données.
`onOpenChange`	`(side \| null) => void`		S’exécute avec le côté ouvert, ou `null` quand la ligne se ferme.
`disabled`	`boolean`	`false`	Désactive le balayage.
`contentClassName`	`string`		Classe du contenu de la ligne ; `contentStyle` définit son style en ligne.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Les startActions apparaissent quand on fait glisser vers la fin de la ligne, les endActions vers le début. Donnez un fond au contenu de la ligne avec contentClassName.

React Native utilise les mêmes props et les mêmes gestes.

Utilisé dans ces exemples

Boîte de réceptionDes onglets de filtre avec des compteurs en direct, des lignes à balayer et une liste qui comble le vide.MotionHighlightMotionListMotionSwipeMotionNumber