MotionSwipe

שורה עם פעולות שנחשפות בהחלקה והסרה אופציונלית בהחלקה.

אינטרנטReact Nativeמחוות

נסו את זה

מכין את הדוגמה…

JavaScript כבוי. הקוד שלמטה הוא הדוגמה המלאה.

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

השימוש הקצר ביותר

Row.jsx

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

מה הוא עושה בשבילכם

השורה עוקבת אחרי גרירות אופקיות, מתנגדת מעבר לפעולות שלה ומתייצבת לפי מהירות השחרור.
עם dismiss, החלקה ארוכה או זריקה מחליקה את השורה החוצה, מקפלת את הגובה שלה ואז קוראת ל־onDismiss(side).
הגלילה האנכית ממשיכה לעבוד, ורק שורה אחת נשארת פתוחה.
הקשה על שורה פתוחה סוגרת אותה, ופוקוס מקלדת על פעולה חושף אותה.

מתאים ל־

העברה לארכיון או מחיקה בתיבת הדואר.
הצמדת שיחה.
הסרת פריט מרשימה.

Props

Prop	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`		תוכן השורה.
`startActions`	`ReactNode`		נחשפות בתחילת השורה כשגוררים אותה לכיוון הסוף.
`endActions`	`ReactNode`		נחשפות בסוף השורה כשגוררים אותה לכיוון ההתחלה.
`dismiss`	`'start' \| 'end' \| 'both'`		צדדים שבהם החלקה ארוכה או זריקה מסירה את השורה.
`onDismiss`	`(side) => void`		רץ אחרי שהשורה החליקה החוצה והתקפלה; הסירו כאן את הפריט מהנתונים שלכם.
`onOpenChange`	`(side \| null) => void`		רץ עם הצד הפתוח, או `null` כשהשורה נסגרת.
`disabled`	`boolean`	`false`	מכבה את ההחלקה.
`contentClassName`	`string`		class לתוכן השורה; `contentStyle` מגדיר את הסגנון המוטבע שלו.
`transition`	`Transition`	`spring`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

startActions מופיעות בגרירה לכיוון סוף השורה, endActions בגרירה לכיוון ההתחלה. תנו לתוכן השורה רקע עם contentClassName.

React Native משתמש באותם props ובאותן מחוות.

בשימוש בדוגמאות האלה

תיבת דוארלשוניות סינון עם ספירות חיות, שורות שאפשר להחליק הצידה ורשימה שסוגרת את הרווח.MotionHighlightMotionListMotionSwipeMotionNumber