Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 61x 61x 42x 42x 230x 61x 61x 8x 8x 24x 8x 8x 24x 8x 61x 92x 92x 92x 92x 84x 84x 8x 8x 92x | import React,{ useState } from 'react';
import Chip from '@material-ui/core/Chip';
import makeStyles from '@material-ui/core/styles/makeStyles';
import CopyPasteIcon from '../../icons/CopyPasteIcon';
import Grid from '@material-ui/core/Grid';
import { useClipboard } from 'use-clipboard-copy';
const useStyles = makeStyles((theme) => ({
topicTag: {
backgroundColor: theme.palette.background.default,
borderRadius: '24px',
padding: '0 10px',
'&.MuiChip-outlined': {
borderColor: theme.palette.outline.gray,
[theme.breakpoints.down('md')]: {
height: '42px',
},
[theme.breakpoints.up('md')]: {
height: '48px',
},
},
'&.MuiChip-deletable svg': {
color: theme.palette.outline.gray,
},
},
}));
const GeneratedTopicTag = (props) => {
const topicArray = props.topicnames || []
return topicArray.map((data,key) => {
return (
<Grid key={key}>
<Chip label={data} {...props} />
</Grid>
);
})
}
const ClickableTopicTag = (props) => {
return <Chip {...props} />;
};
const CopyPasteTopicTag = (props) => {
const [cValue,setCvalue]=useState()
const clipboard = useClipboard({
copiedTimeout: 600,
});
const handleDelete = (data,key) => () => {
clipboard.copy(data);
setCvalue(key)
};
const topicArray = props.topicnames || []
const ChipArray = topicArray.map((data,key) => {
return (
<Grid key={key}>
<Chip
key={key}
label={(clipboard.copied && cValue === key)?'copied':data}
onDelete={handleDelete(data,key)}
deleteIcon={<CopyPasteIcon />}
{...props}
/>
</Grid>
);
})
return (
<>
{ChipArray}
</>
)
};
const TopicTag = ({ topicnames, variant,label }) => {
const classes = useStyles();
let Component = ClickableTopicTag;
let clickable = false;
if (variant === 'generated') {
Component = GeneratedTopicTag;
clickable = true;
} else Eif (variant === 'copypaste') {
Component = CopyPasteTopicTag;
}
return (
<Component
topicnames={topicnames}
clickable={clickable}
variant='outlined'
className={classes.topicTag}
data-cy='topic-tag'
/>
);
};
export default TopicTag;
|