Skip to content

Commit

Permalink
[docs] Add Chip TypeScript demo for Chip array (#15050)
Browse files Browse the repository at this point in the history
* [docs] Add Chips Array TS Demo

* do not initialize icon as null
  • Loading branch information
sperry94 authored and eps1lon committed Mar 26, 2019
1 parent cc856b6 commit 77806af
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/src/pages/demos/chips/ChipsArray.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function ChipsArray() {
return (
<Paper className={classes.root}>
{chipData.map(data => {
let icon = null;
let icon;

if (data.label === 'React') {
icon = <TagFacesIcon />;
Expand Down
68 changes: 68 additions & 0 deletions docs/src/pages/demos/chips/ChipsArray.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';
import TagFacesIcon from '@material-ui/icons/TagFaces';

interface ChipData {
key: number;
label: string;
}

const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
padding: theme.spacing(0.5),
},
chip: {
margin: theme.spacing(0.5),
},
}));

function ChipsArray() {
const classes = useStyles();
const [chipData, setChipData] = React.useState<ChipData[]>([
{ key: 0, label: 'Angular' },
{ key: 1, label: 'jQuery' },
{ key: 2, label: 'Polymer' },
{ key: 3, label: 'React' },
{ key: 4, label: 'Vue.js' },
]);

const handleDelete = (data: ChipData) => () => {
if (data.label === 'React') {
alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
return;
}

const chipToDelete = chipData.indexOf(data);
chipData.splice(chipToDelete, 1);
setChipData(chipData);
};

return (
<Paper className={classes.root}>
{chipData.map(data => {
let icon;

if (data.label === 'React') {
icon = <TagFacesIcon />;
}

return (
<Chip
key={data.key}
icon={icon}
label={data.label}
onDelete={handleDelete(data)}
className={classes.chip}
/>
);
})}
</Paper>
);
}

export default ChipsArray;

0 comments on commit 77806af

Please sign in to comment.