-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update ItemView with context decorator
- Loading branch information
Showing
1 changed file
with
32 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,41 @@ | ||
| import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; | ||
| import ItemView from './ItemView'; | ||
| import { useState } from "react"; | ||
| import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; | ||
| import ItemView from './ItemView'; | ||
| import ItemProvider, { useItem, useItemSetter } from "../ItemProvider"; | ||
|
|
||
| <Meta | ||
| title="Components/ItemView" | ||
| component={ItemView} | ||
| decorators={[ | ||
| (Story) => { | ||
| let [isFirstRender, setIsFirstRender] = useState(true); | ||
|
|
||
| let setItem = useItemSetter(); | ||
| let demoItem = {"queue": "ce", "number": 100, "lastUpdated": "2020-12-01T19:53:00-0500", "headers": [{"type": "Merged-Time", "content": "2020-06-23T13:31:53-0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "2020-06-23T13:28:50-0400"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "2020-06-23T13:28:50-0400"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "2020-06-23T13:28:48-0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "2020-06-23T13:27:56-0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "2020-06-23T13:27:00-0400"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "2020-06-23T13:27:00-0400"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "2020-06-23T13:26:55-0400"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "2020-06-23T13:26:55-0400"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "2020-06-23T13:25:51-0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "initial_message", "datetime": "2020-06-23T13:25:51-0400", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "to": [{"name": "", "email": "cesite@ecn.purdue.edu"}], "cc": [], "subject": "Beepboop", "content": ["Testtest\n"]}, {"type": "status", "by": "campb303", "datetime": "2020-06-23T13:26:55-0400", "content": ["Dont Delete\n"]}, {"type": "assignment", "datetime": "2020-06-23T13:27:00-0400", "by": "campb303", "to": "campb303"}, {"type": "edit", "by": "campb303", "datetime": "2020-06-23T13:27:56-0400", "content": ["This be an edit my boy\n"]}, {"type": "reply_to_user", "by": "campb303", "datetime": "2020-06-23T13:28:18-0400", "content": ["This be a reply my son\n", "\n", "Justin\n", "ECN\n"]}, {"type": "reply_from_user", "subject": "Re: Beepboop", "from_name": "Justin Campbell", "from_email": "campb303@purdue.edu", "datetime": "2020-06-23T13:30:45-0400", "content": ["Huzzah!\n"], "headers": [{"type": "Subject", "content": "Re: Beepboop\n"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>\n"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:30:45 -0400\n"}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n"}]}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"}; | ||
|
|
||
| if (isFirstRender) { | ||
| setItem(demoItem); | ||
| setIsFirstRender(false); | ||
| } | ||
|
|
||
| let item = useItem(); | ||
| console.log("Item:", item); | ||
| return <Story />; | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| The ItemView is the primary view for an item. It displays the messages and actions in a timeline view. | ||
| Combined view of [ItemMetadataView](/?path=/docs/components-itemmetadataview), [ItemBodyView](/?path=/docs/components-itemmbodyview), [ItemHeaderView](/?path=/docs/components-itemmbodyview) split between [MUI Tabs](https://material-ui.com/components/tabs/). | ||
|
|
||
| <Meta title="Components/ItemView" component={ItemView}/> | ||
|
|
||
| export const Template = () => { | ||
| const item = {"queue": "ce", "number": 100, "lastUpdated": "07-23-20 10:11 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell <campb303@purdue.edu>"}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": ["Testtest\n", "\n", "*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n", "*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n", "*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n", "=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell <campb303@purdue.edu>\n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n"], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "Tue, 23 Jun 2020 13:25:51 -0400"}; | ||
| const setItem = useItemSetter(); | ||
| setItem(item); | ||
| return( | ||
| <ItemProvider> | ||
| <ItemView/> | ||
| </ItemProvider> | ||
| ); | ||
| } | ||
|
|
||
| # ItemView with Valid Item | ||
| The component relies of context of the [ItemProvider](/?path=/docs/components-itemprovider) for data. | ||
|
|
||
| <Canvas> | ||
| <Story name="With Item"> | ||
| {Template.bind({})} | ||
| <Story | ||
| name="Default" | ||
| args={{}} | ||
| > | ||
| { args => <ItemView {...args} /> } | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <ArgsTable of={ItemView} /> |