受信箱

件数がリアルタイムで変わるフィルタータブ、スワイプで消せる行、すき間を詰めるリスト。

MotionHighlightMotionListMotionSwipeMotionNumber

サンプルを準備中…

JavaScript がオフになっています。下のコードがサンプルの全体です。

App.jsx

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

const start = [
  { id: 1, from: 'Design team', subject: 'Motion tokens are ready', unread: true },
  { id: 2, from: 'Build bot', subject: 'All checks passed', unread: false },
  { id: 3, from: 'Hana', subject: 'Lunch on Friday?', unread: true },
  { id: 4, from: 'Support', subject: 'Your export is complete', unread: false },
  { id: 5, from: 'Jun', subject: 'Notes from the review', unread: true },
];

export default function App({ effect = 'slide', spring = 'default' }) {
  const [mail, setMail] = useState(start);
  const [filter, setFilter] = useState('all');
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const unread = mail.filter((message) => message.unread).length;
  const tabs = [
    { id: 'all', label: 'All', count: mail.length },
    { id: 'unread', label: 'Unread', count: unread },
  ];
  const visible = filter === 'all' ? mail : mail.filter((message) => message.unread);

  const archive = (id) => setMail(mail.filter((message) => message.id !== id));
  const toggleRead = (id) =>
    setMail(
      mail.map((message) =>
        message.id === id ? { ...message, unread: !message.unread } : message,
      ),
    );

  return (
    <div className="inbox">
      <header>
        <MotionHighlight
          items={tabs}
          value={filter}
          onValueChange={setFilter}
          transition={transition}
          className="tabs"
          itemClassName="tab"
          highlightClassName="tab-on"
          renderItem={(tab) => (
            <>
              {tab.label} <MotionNumber className="count" value={tab.count} />
            </>
          )}
        />
        <button className="reset" onClick={() => setMail(start)}>
          Reset
        </button>
      </header>
      <MotionList
        className="list"
        items={visible}
        effect={effect}
        transition={transition}
        layoutTransition={transition}
        renderItem={(message) => (
          <MotionSwipe
            className="row"
            contentClassName={message.unread ? 'content unread' : 'content'}
            dismiss="end"
            onDismiss={() => archive(message.id)}
            endActions={
              <button className="action" onClick={() => archive(message.id)}>
                Archive
              </button>
            }
          >
            <button className="open" onClick={() => toggleRead(message.id)}>
              <strong>{message.from}</strong>
              <span>{message.subject}</span>
            </button>
          </MotionSwipe>
        )}
      />
      {visible.length === 0 && <p className="empty">Nothing here.</p>}
    </div>
  );
}

styles.css

.inbox {
  display: grid;
  gap: 12px;
  max-width: 540px;
  min-height: 440px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.tab {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: none;
  font:
    650 14px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.tab-on {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.count {
  margin-inline-start: 4px;
  padding: 0 7px;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.reset {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.list {
  display: grid;
  gap: 8px;
}

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

.content {
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
}

.content.unread {
  border-inline-start: 4px solid #43c58f;
}

.open {
  display: grid;
  width: 100%;
  gap: 2px;
  padding: 12px 16px;
  border: 0;
  background: none;
  font:
    15px system-ui,
    sans-serif;
  text-align: start;
  cursor: pointer;
  user-select: none;
}

.open strong {
  color: #0e2e24;
}

.open span {
  color: #5b616b;
}

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

.empty {
  color: #5b616b;
  text-align: center;
}

しくみ

MotionHighlight が「すべて」と「未読」の間を移動し、各タブのラベルには MotionNumber の件数が入っています。
MotionSwipe がアーカイブを表示し、大きくスワイプすると行を消します。
MotionList は、フィルターやデータが変わったときに出入りする行だけをアニメーションします。
行をクリックすると既読・未読が切り替わります。件数が回転し、その行は「未読」の表示から外れます。

受信箱

しくみ

ほかのサンプル

検索