Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders
Created June 17, 2020 03:13
Show Gist options
  • Save aaronksaunders/7db8d84555f1a736a2777825ec8bca73 to your computer and use it in GitHub Desktop.
Save aaronksaunders/7db8d84555f1a736a2777825ec8bca73 to your computer and use it in GitHub Desktop.
dev.to - storybook - post
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>
);
};
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment