Use named imports for rollup to find mdc react packages

thdk · thdk · commit bb5a92ffa84c · 2019-03-11T11:33:25.000+01:00
diff --git a/dist/index.html b/dist/index.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-    <style href="style.css"></style>
+    <link rel ="stylesheet" type="text/css" href="style.css"></style>
 </head>
 
 <body>
diff --git a/dist/style.css b/dist/style.css
@@ -1 +1 @@
-@import "@material/react-chips/dist/chips.css";
+@import "../node_modules/@material/react-chips/dist/chips.css";
diff --git a/rollup.config.js b/rollup.config.js
@@ -19,7 +19,8 @@ export default {
       include: 'node_modules/**',
       namedExports: {
         'node_modules/react/index.js': ['cloneElement', 'createRef', 'Component', 'PureComponent', 'Fragment', 'Children', 'createElement', 'forwardRef'],
-        'node_modules/react-dom/index.js': ['findDOMNode', 'unstable_batchedUpdates', 'render']
+        'node_modules/react-dom/index.js': ['findDOMNode', 'unstable_batchedUpdates', 'render'],
+        '@material/react-chips': ["Chip", "ChipSet"]
       }
     }),
     typescript()
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,13 +1,34 @@
 import * as React from 'react';
 import { Chip, ChipSet } from '@material/react-chips';
 
-export class App extends React.Component {
+export type Season = 'summer' | 'winter' | 'spring' | 'fall';
+
+const seasons: Season[] = [
+    'summer', 'winter', 'spring', 'fall'
+];
+
+export class App extends React.Component<React.HTMLProps<HTMLDivElement>, { season?: Season }> {
+    constructor(props: React.HTMLProps<HTMLDivElement>) {
+        super(props);
+        this.state = {};
+    };
+
     render() {
+        const seasonComponents = seasons.map(s =>
+            <Chip selected={this.state.season === s}
+                handleSelect={this.handleSelect.bind(this, s)}
+                id={s}
+                label={s}
+            />);
+
         return (
-            <ChipSet>
-                <Chip id='summer' label='Summer' />
-                <Chip id='winter' label='Winter' />
+            <ChipSet filter={true}>
+                {seasonComponents}
             </ChipSet>
         );
     }
+
+    handleSelect(id: Season) {
+        this.setState({ season: id });
+    }
 }

-Original file line number
+Diff line change
@@ @@ -1,7 +1,7 @@ @@
 <html>
 <head>
 -    <style href="style.css"></style>
 +    <link rel ="stylesheet" type="text/css" href="style.css"></style>
 </head>
 <body>
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@import "@material/react-chips/dist/chips.css";`
	`1`	`+@import "../node_modules/@material/react-chips/dist/chips.css";`