-
Notifications
You must be signed in to change notification settings - Fork 829
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b2a2212
commit 02d5a4c
Showing
23 changed files
with
1,481 additions
and
0 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
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
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 |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import React from 'react'; | ||
import { EuiComment } from '../../../../src/components/comment'; | ||
import { EuiAvatar } from '../../../../src/components/avatar'; | ||
import { EuiBadge } from '../../../../src/components/badge'; | ||
import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; | ||
import { EuiButtonIcon } from '../../../../src/components/button'; | ||
import { EuiText } from '../../../../src/components/text'; | ||
|
||
const body = ( | ||
<EuiText size="s"> | ||
<p> | ||
Far out in the uncharted backwaters of the unfashionable end of the | ||
western spiral arm of the Galaxy lies a small unregarded yellow sun. | ||
</p> | ||
</EuiText> | ||
); | ||
|
||
const longBody = ( | ||
<EuiText size="s"> | ||
<p> | ||
This planet has - or rather had - a problem, which was this: most of the | ||
people living on it were unhappy for pretty much of the time. Many | ||
solutions were suggested for this problem, but most of these were largely | ||
concerned with the movements of small green pieces of paper, which is odd | ||
because on the whole it was not the small green pieces of paper that were | ||
unhappy. | ||
</p> | ||
</EuiText> | ||
); | ||
|
||
const copyAction = ( | ||
<EuiButtonIcon | ||
title="Custom action" | ||
aria-label="Custom action" | ||
color="subdued" | ||
iconType="copy" | ||
/> | ||
); | ||
|
||
export default () => ( | ||
<div> | ||
<EuiComment | ||
username="janed" | ||
event="added a comment" | ||
actions={copyAction} | ||
timestamp="on Jan 1, 2020"> | ||
{body} | ||
</EuiComment> | ||
<EuiComment | ||
username="juanab" | ||
type="update" | ||
actions={copyAction} | ||
event="pushed incident X0Z235" | ||
timestamp="on Jan 3, 2020" | ||
timelineIcon={ | ||
<EuiAvatar | ||
imageUrl="https://source.unsplash.com/64x64/?woman" | ||
size="l" | ||
name="Juana" | ||
/> | ||
} | ||
/> | ||
<EuiComment | ||
username="pancho1" | ||
type="update" | ||
event="edited case" | ||
timestamp="on Jan 9, 2020" | ||
/> | ||
<EuiComment | ||
actions={copyAction} | ||
username={ | ||
<EuiFlexGroup responsive={false} alignItems="center" gutterSize="s"> | ||
<EuiFlexItem grow={false}> | ||
<EuiAvatar size="s" type="space" name="Pedro" /> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}>pedror</EuiFlexItem> | ||
</EuiFlexGroup> | ||
} | ||
type="update" | ||
event={ | ||
<EuiFlexGroup responsive={false} alignItems="center" gutterSize="s"> | ||
<EuiFlexItem grow={false}>added tags</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiBadge color="primary">sample</EuiBadge> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<EuiBadge color="secondary">review</EuiBadge> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
} | ||
timestamp="on Jan 11, 2020" | ||
timelineIcon="tag" | ||
/> | ||
<EuiComment | ||
username="elohar" | ||
event="added a comment" | ||
actions={copyAction} | ||
timestamp="on Jan 14, 2020" | ||
timelineIcon={<EuiAvatar size="l" name="Eloha" />}> | ||
{longBody} | ||
</EuiComment> | ||
</div> | ||
); |
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 |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import React, { Component, HTMLAttributes } from 'react'; | ||
import { EuiComment } from '../../../../src/components/comment'; | ||
import { EuiButtonIcon } from '../../../../src/components/button'; | ||
import { EuiText } from '../../../../src/components/text'; | ||
import { EuiPopover } from '../../../../src/components/popover'; | ||
import { | ||
EuiContextMenuPanel, | ||
EuiContextMenuItem, | ||
} from '../../../../src/components/context_menu'; | ||
import { CommonProps } from '../../../../src/components/common'; | ||
|
||
const body = ( | ||
<EuiText size="s"> | ||
<p> | ||
This comment has custom actions available. See the upper right corner. | ||
</p> | ||
</EuiText> | ||
); | ||
|
||
export type CustomActionsProps = HTMLAttributes<HTMLDivElement> & | ||
CommonProps & {}; | ||
|
||
interface CustomActionsState { | ||
isPopoverOpen: boolean; | ||
} | ||
|
||
export default class extends Component<CustomActionsProps, CustomActionsState> { | ||
state = { | ||
isPopoverOpen: false, | ||
}; | ||
|
||
togglePopover = () => { | ||
this.setState(prevState => ({ | ||
isPopoverOpen: !prevState.isPopoverOpen, | ||
})); | ||
}; | ||
|
||
closePopover = () => { | ||
this.setState({ | ||
isPopoverOpen: false, | ||
}); | ||
}; | ||
|
||
render() { | ||
const { isPopoverOpen } = this.state; | ||
const customActions = ( | ||
<EuiPopover | ||
button={ | ||
<EuiButtonIcon | ||
aria-label="Actions" | ||
iconType="gear" | ||
size="s" | ||
color="text" | ||
onClick={() => this.togglePopover()} | ||
/> | ||
} | ||
isOpen={isPopoverOpen} | ||
closePopover={() => this.closePopover()} | ||
panelPaddingSize="none" | ||
anchorPosition="leftCenter"> | ||
<EuiContextMenuPanel | ||
items={[ | ||
<EuiContextMenuItem | ||
key="A" | ||
icon="pencil" | ||
onClick={() => { | ||
this.closePopover(); | ||
}}> | ||
Edit | ||
</EuiContextMenuItem>, | ||
<EuiContextMenuItem | ||
key="B" | ||
icon="share" | ||
onClick={() => { | ||
this.closePopover(); | ||
}}> | ||
Share | ||
</EuiContextMenuItem>, | ||
<EuiContextMenuItem | ||
key="C" | ||
icon="copy" | ||
onClick={() => { | ||
this.closePopover(); | ||
}}> | ||
Copy | ||
</EuiContextMenuItem>, | ||
]} | ||
/> | ||
</EuiPopover> | ||
); | ||
return ( | ||
<div> | ||
<EuiComment | ||
username="janed" | ||
event="added a comment" | ||
actions={customActions} | ||
timestamp="Jan 1, 2020"> | ||
{body} | ||
</EuiComment> | ||
</div> | ||
); | ||
} | ||
} |
Oops, something went wrong.