From 77806af81198994ce926ac384489e82cfa1150d2 Mon Sep 17 00:00:00 2001
From: Seth Perry <seth.perry@logrhythm.com>
Date: Tue, 26 Mar 2019 01:49:59 -0600
Subject: [PATCH] [docs] Add Chip TypeScript demo for Chip array (#15050)

* [docs] Add Chips Array TS Demo

* do not initialize icon as null
---
 docs/src/pages/demos/chips/ChipsArray.js  |  2 +-
 docs/src/pages/demos/chips/ChipsArray.tsx | 68 +++++++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/demos/chips/ChipsArray.tsx

diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js
index eff6a0e8f8fc62..6e992c9e9e558e 100644
--- a/docs/src/pages/demos/chips/ChipsArray.js
+++ b/docs/src/pages/demos/chips/ChipsArray.js
@@ -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 />;
diff --git a/docs/src/pages/demos/chips/ChipsArray.tsx b/docs/src/pages/demos/chips/ChipsArray.tsx
new file mode 100644
index 00000000000000..9f2080593930bd
--- /dev/null
+++ b/docs/src/pages/demos/chips/ChipsArray.tsx
@@ -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;