dev.to - storybook - post

2-MessageListItem.stories.js

import React from "react";
import { action } from "@storybook/addon-actions";
import MessageListItem from "../components/MessageListItem";
import { IonList } from "@ionic/react";

export default {
  title: "MessageListItem",
  component: MessageListItem,
};

export const BasicMessage = () => {
  let m = {
    fromName: "Andrea Cornerston",
    subject: "Last minute ask",
    summary: "Basic Message Summary",
    date: "Yesterday",
    id: 5,
  };
  return (
<IonList>
  <MessageListItem
    key={m.id}
    message={m}
    handleClick={action("item-clicked")}
    handleFavorite={action("option-handleFavorite")}
    handleDelete={action("option-handleDelete")}
  />
</IonList>
  );
};

MessageListItem.tsx

import React from "react";
import {
  IonItem,
  IonLabel,
  IonNote,
  IonItemSliding,
  IonItemOptions,
  IonItemOption,
} from "@ionic/react";
import { Message } from "../data/messages";
import "./MessageListItem.css";

interface MessageListItemProps {
  message: Message;
  handleClick: any;
  handleFavorite: any;
  handleDelete: any;
}

const MessageListItem: React.FC<MessageListItemProps> = ({
  message,
  handleClick,
  handleDelete,
  handleFavorite,
}) => {
  return (
    <IonItemSliding>
      <IonItem onClick={() => handleClick(message)} detail={false}>
        <div slot="start" className="dot dot-unread"></div>
        <IonLabel className="ion-text-wrap">
          <h2>
            {message.fromName}
            <span className="date">
              <IonNote>{message.date}</IonNote>
            </span>
          </h2>
          <h3 style={{ fontSize: "smaller", fontWeight: "bold" }}>
            {message.subject}
          </h3>
          {message.summary ? (
            <div style={{ fontSize: "smaller" }}>{message.summary}</div>
          ) : (
            <div style={{ fontStyle: "italic", fontSize: "smaller" }}>
              NO SUMMARY PROVIDED
            </div>
          )}
        </IonLabel>
      </IonItem>
      <IonItemOptions side="end">
        <IonItemOption onClick={() => handleFavorite(message)}>
          Favorite
        </IonItemOption>

        <IonItemOption onClick={() => handleDelete(message)} color="danger">
          Delete
        </IonItemOption>
      </IonItemOptions>
    </IonItemSliding>
  );
};

export default MessageListItem;