aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json59
-rw-r--r--package.json6
-rw-r--r--src/index.tsx (renamed from src/index.js)20
-rw-r--r--src/lib/SmartList/SmartList.js28
-rw-r--r--src/lib/SmartList/SmartList.tsx44
-rw-r--r--src/lib/index.ts (renamed from src/lib/index.js)0
6 files changed, 82 insertions, 75 deletions
diff --git a/package-lock.json b/package-lock.json
index 5bac2cc..b4909da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,34 +1,9 @@
{
"name": "react-benzin",
- "version": "1.0.1",
+ "version": "2.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
- "@babel/cli": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.8.3.tgz",
- "integrity": "sha512-K2UXPZCKMv7KwWy9Bl4sa6+jTNP7JyDiHKzoOiUUygaEDbC60vaargZDnO9oFMvlq8pIKOOyUUgeMYrsaN9djA==",
- "dev": true,
- "requires": {
- "chokidar": "^2.1.8",
- "commander": "^4.0.1",
- "convert-source-map": "^1.1.0",
- "fs-readdir-recursive": "^1.1.0",
- "glob": "^7.0.0",
- "lodash": "^4.17.13",
- "make-dir": "^2.1.0",
- "slash": "^2.0.0",
- "source-map": "^0.5.0"
- },
- "dependencies": {
- "commander": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.0.tgz",
- "integrity": "sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==",
- "dev": true
- }
- }
- },
"@babel/code-frame": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -988,16 +963,6 @@
"@babel/plugin-transform-react-jsx-source": "^7.8.3"
}
},
- "@babel/preset-typescript": {
- "version": "7.8.3",
- "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz",
- "integrity": "sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==",
- "dev": true,
- "requires": {
- "@babel/helper-plugin-utils": "^7.8.3",
- "@babel/plugin-transform-typescript": "^7.8.3"
- }
- },
"@babel/runtime": {
"version": "7.7.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.4.tgz",
@@ -1635,6 +1600,22 @@
"@types/react": "*"
}
},
+ "@types/react-virtualized-auto-sizer": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz",
+ "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
+ "@types/react-window": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.1.tgz",
+ "integrity": "sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -6155,12 +6136,6 @@
"minipass": "^3.0.0"
}
},
- "fs-readdir-recursive": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
- "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
- "dev": true
- },
"fs-write-stream-atomic": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
diff --git a/package.json b/package.json
index e663a8b..e6421f5 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
"name": "react-benzin",
"version": "2.0.0",
"description": "A powerful React Material components library.",
- "main": "dist/index.js",
- "module": "dist/index.js",
+ "main": "dist/index.tsx",
+ "module": "dist/index.tsx",
"files": [
"dist",
"README.md"
@@ -29,6 +29,8 @@
"@types/node": "^13.5.0",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
+ "@types/react-virtualized-auto-sizer": "^1.0.0",
+ "@types/react-window": "^1.8.1",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.1.0",
"typescript": "^3.7.5"
diff --git a/src/index.js b/src/index.tsx
index d0a96a1..19c118e 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
-import { makeStyles, Button } from '@material-ui/core';
+import { makeStyles, Button, Typography } from '@material-ui/core';
import {
BenzinThemeProvider,
Header,
Window,
ContentSection,
+ SmartList,
} from './lib';
import icon from './assets/icon.png';
@@ -29,7 +30,13 @@ const headerContents = {
'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"/>
@@ -49,7 +56,7 @@ const App = () => {
page={page}
setPage={setPage}
/>
- <Window type="mono">
+ <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>
@@ -62,6 +69,13 @@ const App = () => {
</ContentSection>
</div>
</Window>
+ <Window type="secondary" name="SmartList test window">
+ <SmartList
+ itemSize={270}
+ itemCount={100}
+ renderItem={renderItem}
+ />
+ </Window>
</BenzinThemeProvider>
);
};
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.ts
index 67f9bb4..67f9bb4 100644
--- a/src/lib/index.js
+++ b/src/lib/index.ts
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:18:33 +0000