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`		صنف محتوى الصف؛ ويضبط `contentStyle` نمطه المضمّن.
`transition`	`Transition`	`spring`	منحنى توقيت `{ duration, easing }` أو نابض `{ tempo: 'spring', spring }`. تحتفظ النوابض بزخمها عند المقاطعة.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

تظهر startActions عند السحب نحو نهاية السطر، وendActions عند السحب نحو بدايته. أعطِ محتوى الصف خلفية عبر contentClassName.

يستخدم React Native props والإيماءات نفسها.

مستخدم في هذه الأمثلة

البريد الواردعلامات تبويب للتصفية بأعداد حية، وصفوف يمكن سحبها بعيدًا، وقائمة تسدّ الفراغ.MotionHighlightMotionListMotionSwipeMotionNumber