MotionSwipe

Rivi, jonka toiminnot paljastuvat pyyhkäisyllä ja joka voidaan halutessa hylätä pyyhkäisemällä.

WebReact NativeEleet

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Row.jsx

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

Mitä se hoitaa puolestasi

Rivi seuraa vaakasuuntaisia vetoja, vastustaa toimintojensa yli ja asettuu irrotusnopeutesi mukaan.
dismiss-asetuksella pitkä pyyhkäisy tai heitto liu'uttaa rivin ulos, tiivistää sen korkeuden ja kutsuu sitten onDismiss(side).
Pystyvieritys toimii edelleen, ja vain yksi rivi on kerrallaan auki.
Napautus avoimeen riviin sulkee sen, ja näppäimistökohdistus toimintoon paljastaa sen.

Käytä sitä

Arkistointi tai poisto saapuneissa.
Keskustelun kiinnittäminen.
Kohteen poistaminen listasta.

Props

Prop	Tyyppi	Oletus	Kuvaus
`children`	`ReactNode`		Rivin sisältö.
`startActions`	`ReactNode`		Paljastuvat rivin alussa, kun riviä vedetään loppua kohti.
`endActions`	`ReactNode`		Paljastuvat rivin lopussa, kun riviä vedetään alkua kohti.
`dismiss`	`'start' \| 'end' \| 'both'`		Puolet, joilla pitkä pyyhkäisy tai heitto poistaa rivin.
`onDismiss`	`(side) => void`		Suoritetaan, kun rivi on liukunut ulos ja tiivistynyt; poista kohde datastasi tässä.
`onOpenChange`	`(side \| null) => void`		Suoritetaan avatun puolen kanssa tai `null`-arvolla, kun rivi sulkeutuu.
`disabled`	`boolean`	`false`	Poistaa pyyhkäisyn käytöstä.
`contentClassName`	`string`		Luokka rivin sisällölle; `contentStyle` asettaa sen inline-tyylin.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

startActions näkyvät, kun vedetään rivin loppua kohti, ja endActions, kun vedetään alkua kohti. Anna rivin sisällölle tausta contentClassName-arvolla.

React Native käyttää samoja props-arvoja ja eleitä.

Käytetty näissä esimerkeissä

SaapuneetSuodatinvälilehdet live-laskureilla, pois pyyhkäistävät rivit ja lista, joka sulkee aukon.MotionHighlightMotionListMotionSwipeMotionNumber