From 9ff003bec107a4934daf2a3cee73c40ec72e6999 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 16:31:48 +0300 Subject: feat: migrate SmartList to Typescript --- package-lock.json | 59 +++++++++------------------- package.json | 6 ++- 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 +++ 8 files changed, 155 insertions(+), 148 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 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.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: , - 'getting started': , - explore: , - contribute: , -} - -const Icon1 = logo -const Icon2 = logo - -const App = () => { - const classes = useStyles(); - const [page, setPage] = useState('home'); - - return ( - -
- -
- -

Here is some text about BENZIN library.

- - - -
- - - ); -}; - - -ReactDOM.render(, 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: , + 'getting started': , + explore: , + contribute: , +}; + +const renderItem = ({ index, style }: any) => { + return ( + {index} + ); +}; + +const Icon1 = logo +const Icon2 = logo + +const App = () => { + const classes = useStyles(); + const [page, setPage] = useState('home'); + + return ( + +
+ +
+ +

Here is some text about BENZIN library.

+ + + +
+ + + + + + ); +}; + + +ReactDOM.render(, 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 ( -
- - {({ width, height }) => ( - - {renderItem} - - )} - -
- ); -}; - - -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; +} + +interface Size { + height: number; + width: number; +} + + +const SmartList: React.FC = ({ itemSize, itemCount, renderItem }) => { + + const ResizedList: React.FC = ({ width, height}) => ( + + {renderItem} + + ); + + return ( +
+ +
+ ); +}; + + +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