From 9ff003bec107a4934daf2a3cee73c40ec72e6999 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 3 Feb 2020 16:31:48 +0300
Subject: feat: migrate SmartList to Typescript

---
 src/index.js                    | 71 ----------------------------------
 src/index.tsx                   | 85 +++++++++++++++++++++++++++++++++++++++++
 src/lib/SmartList/SmartList.js  | 28 --------------
 src/lib/SmartList/SmartList.tsx | 44 +++++++++++++++++++++
 src/lib/index.js                |  5 ---
 src/lib/index.ts                |  5 +++
 6 files changed, 134 insertions(+), 104 deletions(-)
 delete mode 100644 src/index.js
 create mode 100644 src/index.tsx
 delete mode 100644 src/lib/SmartList/SmartList.js
 create mode 100644 src/lib/SmartList/SmartList.tsx
 delete mode 100644 src/lib/index.js
 create mode 100644 src/lib/index.ts

(limited to 'src')

diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d0a96a1..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { makeStyles, Button } from '@material-ui/core';
-
-import {
-  BenzinThemeProvider,
-  Header,
-  Window,
-  ContentSection,
-} from './lib';
-
-import icon from './assets/icon.png';
-import icon2 from './assets/icon2.svg';
-import HomeIcon from '@material-ui/icons/Home';
-import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite';
-import ExploreIcon from '@material-ui/icons/Explore';
-import GitHubIcon from '@material-ui/icons/GitHub';
-
-
-const useStyles = makeStyles(theme => ({
-  window: {
-    padding: theme.spacing(4),
-  }
-}));
-
-const headerContents = {
-  home: <HomeIcon />,
-  'getting started': <PlayCircleFilledWhiteIcon />,
-  explore: <ExploreIcon />,
-  contribute: <GitHubIcon />,
-}
-
-const Icon1 = <img src={icon} width="32px" height="37px" alt="logo"/>
-const Icon2 = <img src={icon2} height="32px" alt="logo"/>
-
-const App = () => {
-  const classes = useStyles();
-  const [page, setPage] = useState('home');
-
-  return (
-    <BenzinThemeProvider>
-      <Header
-        logo={{
-          icon: Icon1,
-          title: 'BENZIN',
-        }}
-        contents={headerContents}
-        page={page}
-        setPage={setPage}
-      />
-      <Window type="mono">
-        <div className={classes.window}>
-          <ContentSection sectionName="Out of fuel? You've came to the right place!">
-            <p> Here is some text about BENZIN library. </p>
-            <Button variant="contained" color="secondary">
-              Charge me up!
-            </Button>
-            <Button variant="contained" color="primary">
-              Learn more
-            </Button>
-          </ContentSection>
-        </div>
-      </Window>
-    </BenzinThemeProvider>
-  );
-};
-
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..19c118e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { makeStyles, Button, Typography } from '@material-ui/core';
+
+import {
+  BenzinThemeProvider,
+  Header,
+  Window,
+  ContentSection,
+  SmartList,
+} from './lib';
+
+import icon from './assets/icon.png';
+import icon2 from './assets/icon2.svg';
+import HomeIcon from '@material-ui/icons/Home';
+import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite';
+import ExploreIcon from '@material-ui/icons/Explore';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
+
+const useStyles = makeStyles(theme => ({
+  window: {
+    padding: theme.spacing(4),
+  }
+}));
+
+const headerContents = {
+  home: <HomeIcon />,
+  'getting started': <PlayCircleFilledWhiteIcon />,
+  explore: <ExploreIcon />,
+  contribute: <GitHubIcon />,
+};
+
+const renderItem = ({ index, style }: any) => {
+  return (
+      <Typography variant="h3" style={style} component="div"> {index} </Typography>
+  );
+};
+
+const Icon1 = <img src={icon} width="32px" height="37px" alt="logo"/>
+const Icon2 = <img src={icon2} height="32px" alt="logo"/>
+
+const App = () => {
+  const classes = useStyles();
+  const [page, setPage] = useState('home');
+
+  return (
+    <BenzinThemeProvider>
+      <Header
+        logo={{
+          icon: Icon1,
+          title: 'BENZIN',
+        }}
+        contents={headerContents}
+        page={page}
+        setPage={setPage}
+      />
+      <Window type="primary">
+        <div className={classes.window}>
+          <ContentSection sectionName="Out of fuel? You've came to the right place!">
+            <p> Here is some text about BENZIN library. </p>
+            <Button variant="contained" color="secondary">
+              Charge me up!
+            </Button>
+            <Button variant="contained" color="primary">
+              Learn more
+            </Button>
+          </ContentSection>
+        </div>
+      </Window>
+      <Window type="secondary" name="SmartList test window">
+        <SmartList
+          itemSize={270}
+          itemCount={100}
+          renderItem={renderItem}
+        />
+      </Window>
+    </BenzinThemeProvider>
+  );
+};
+
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
diff --git a/src/lib/SmartList/SmartList.js b/src/lib/SmartList/SmartList.js
deleted file mode 100644
index b462c47..0000000
--- a/src/lib/SmartList/SmartList.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-
-const SmartList = ({ itemSize, itemCount, renderItem }) => {
-
-  return (
-    <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
-      <AutoSizer>
-        {({ width, height }) => (
-          <FixedSizeList
-            height={height}
-            width={width}
-            itemSize={itemSize}
-            itemCount={itemCount}
-          >
-            {renderItem}
-          </FixedSizeList>
-        )}
-      </AutoSizer>
-    </div>
-  );
-};
-
-
-export default SmartList;
diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx
new file mode 100644
index 0000000..c889719
--- /dev/null
+++ b/src/lib/SmartList/SmartList.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+
+interface RenderPropTypes {
+  index: number;
+  style: any;
+}
+
+interface PropTypes {
+  itemSize: number;
+  itemCount: number;
+  renderItem: React.FC<RenderPropTypes>;
+}
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+
+const SmartList: React.FC<PropTypes> = ({ itemSize, itemCount, renderItem }) => {
+
+  const ResizedList: React.FC<Size> = ({ width, height}) => (
+    <FixedSizeList
+      height={height}
+      width={width}
+      itemSize={itemSize}
+      itemCount={itemCount}
+    >
+      {renderItem}
+    </FixedSizeList>
+  );
+
+  return (
+    <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
+      <AutoSizer children={ResizedList} />
+    </div>
+  );
+};
+
+
+export default SmartList;
diff --git a/src/lib/index.js b/src/lib/index.js
deleted file mode 100644
index 67f9bb4..0000000
--- a/src/lib/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Window } from './Window/Window';
-export { default as Header } from './Header/Header';
-export { default as ContentSection } from './ContentSection/ContentSection';
-export { default as SmartList } from './SmartList/SmartList';
-export { default as BenzinThemeProvider } from './BenzinThemeProvider/BenzinThemeProvider';
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..67f9bb4
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1,5 @@
+export { default as Window } from './Window/Window';
+export { default as Header } from './Header/Header';
+export { default as ContentSection } from './ContentSection/ContentSection';
+export { default as SmartList } from './SmartList/SmartList';
+export { default as BenzinThemeProvider } from './BenzinThemeProvider/BenzinThemeProvider';
-- 
cgit v1.2.3