-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
FI-2433: Collapse request details (#448)
* convert codeblock to collapsible panel * make prop optional * remove dead code --------- Co-authored-by: Alyssa Wang <awang@mitre.org>
- Loading branch information
1 parent
022aeaf
commit 21b7aef
Showing
6 changed files
with
144 additions
and
77 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
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,38 @@ | ||
| import React, { FC, useEffect } from 'react'; | ||
| import { IconButton, IconButtonPropsSizeOverrides } from '@mui/material'; | ||
| import { OverridableStringUnion } from '@mui/types'; | ||
| import { ExpandLess, ExpandMore } from '@mui/icons-material'; | ||
| import CustomTooltip from '~/components/_common/CustomTooltip'; | ||
|
|
||
| export interface CollapseButtonProps { | ||
| setCollapsed: (collapsed: boolean) => void; | ||
| size?: OverridableStringUnion<'small' | 'large' | 'medium', IconButtonPropsSizeOverrides>; | ||
| startState?: boolean; | ||
| } | ||
|
|
||
| const CollapseButton: FC<CollapseButtonProps> = ({ | ||
| setCollapsed: setParentCollapsed, | ||
| size, | ||
| startState = false, | ||
| }) => { | ||
| const [collapsed, setCollapsed] = React.useState(startState); | ||
|
|
||
| useEffect(() => { | ||
| setParentCollapsed(collapsed); | ||
| }, [collapsed]); | ||
|
|
||
| return ( | ||
| <CustomTooltip title={collapsed ? 'Expand panel' : 'Collapse panel'}> | ||
| <IconButton | ||
| size={size} | ||
| color="secondary" | ||
| aria-label={collapsed ? 'expand button' : 'collapse button'} | ||
| onClick={() => setCollapsed(!collapsed)} | ||
| > | ||
| {collapsed ? <ExpandMore fontSize="inherit" /> : <ExpandLess fontSize="inherit" />} | ||
| </IconButton> | ||
| </CustomTooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export default CollapseButton; |
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,53 @@ | ||
| import React, { FC } from 'react'; | ||
| import { Box, IconButton, IconButtonPropsSizeOverrides } from '@mui/material'; | ||
| import { OverridableStringUnion } from '@mui/types'; | ||
| import { ContentCopy } from '@mui/icons-material'; | ||
| import CustomTooltip from '~/components/_common/CustomTooltip'; | ||
|
|
||
| export interface CopyButtonProps { | ||
| copyText: string; | ||
| size?: OverridableStringUnion<'small' | 'large' | 'medium', IconButtonPropsSizeOverrides>; | ||
| view?: string; | ||
| } | ||
|
|
||
| const CopyButton: FC<CopyButtonProps> = ({ copyText, size, view }) => { | ||
| const [copySuccess, setCopySuccess] = React.useState({}); // Use map for lists of copiable items | ||
|
|
||
| const copyTextClick = async (text: string) => { | ||
| await navigator.clipboard.writeText(text).then(() => { | ||
| setCopySuccess({ ...copySuccess, [text]: true }); | ||
| setTimeout(() => { | ||
| // Reset map instead of setting false to avoid async bug | ||
| setCopySuccess({}); | ||
| }, 2000); // 2 second delay | ||
| }); | ||
| }; | ||
| return ( | ||
| <CustomTooltip | ||
| title={copySuccess[copyText as keyof typeof copySuccess] ? 'Text copied!' : 'Copy text'} | ||
| sx={ | ||
| view === 'report' | ||
| ? { | ||
| display: 'none', | ||
| '@media print': { | ||
| display: 'none', | ||
| }, | ||
| } | ||
| : {} | ||
| } | ||
| > | ||
| <Box pr={1}> | ||
| <IconButton | ||
| size={size} | ||
| color="secondary" | ||
| aria-label="copy button" | ||
| onClick={() => void copyTextClick(copyText)} | ||
| > | ||
| <ContentCopy fontSize="inherit" /> | ||
| </IconButton> | ||
| </Box> | ||
| </CustomTooltip> | ||
| ); | ||
| }; | ||
|
|
||
| export default CopyButton; |