From bfa9f7b9158faa3a453eaabf5be3c96b6c8a18b1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 13:39:08 +0300 Subject: refactor: remove demo components from lib --- src/demo/Button/Button.tsx | 18 +++++++++ src/demo/Header/Header.tsx | 81 +++++++++++++++++++++++++++++++++++++++ src/demo/SmartList/SmartList.tsx | 43 +++++++++++++++++++++ src/demo/Window/Window.tsx | 62 ++++++++++++++++++++++++++++++ src/demo/Window/WindowSurface.tsx | 44 +++++++++++++++++++++ src/demo/Window/types.ts | 11 ++++++ 6 files changed, 259 insertions(+) create mode 100644 src/demo/Button/Button.tsx create mode 100644 src/demo/Header/Header.tsx create mode 100644 src/demo/SmartList/SmartList.tsx create mode 100644 src/demo/Window/Window.tsx create mode 100644 src/demo/Window/WindowSurface.tsx create mode 100644 src/demo/Window/types.ts (limited to 'src/demo') diff --git a/src/demo/Button/Button.tsx b/src/demo/Button/Button.tsx new file mode 100644 index 0000000..6bc0f98 --- /dev/null +++ b/src/demo/Button/Button.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Button as MaterialButton } from '@material-ui/core'; + + +interface PropTypes { + color: 'primary' | 'secondary'; +} + +const Button: React.FC = ({ color, children }) => ( + +); + + +export default Button; diff --git a/src/demo/Header/Header.tsx b/src/demo/Header/Header.tsx new file mode 100644 index 0000000..58be989 --- /dev/null +++ b/src/demo/Header/Header.tsx @@ -0,0 +1,81 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; + + +interface PropTypes { + logo: { + icon: React.ReactNode; + title: string; + }; + contents: { + [key: string]: React.ReactNode | null; + }; + page: string; + setPage: (newPage: string) => void; +} + +const useStyles = makeStyles(theme => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + paddingLeft: theme.spacing(3), + }, + logo: { + margin: theme.spacing(0, 3, 0, 1), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + fontSize: '0.8125rem', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + }, + }, + }, +})); + + +const Header: React.FC = ({ + logo, contents, page, setPage, +}) => { + const classes = useStyles(); + + const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map((item: string) => ( + + ))} + + + + ); +}; + +export default Header; diff --git a/src/demo/SmartList/SmartList.tsx b/src/demo/SmartList/SmartList.tsx new file mode 100644 index 0000000..c86c127 --- /dev/null +++ b/src/demo/SmartList/SmartList.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; + + +interface RenderPropTypes { + index: number; + style: React.CSSProperties; +} + +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/demo/Window/Window.tsx b/src/demo/Window/Window.tsx new file mode 100644 index 0000000..beaa672 --- /dev/null +++ b/src/demo/Window/Window.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface'; +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + type: 'primary' | 'secondary' | 'mono'; + name?: string; +} + + +const useStyles = makeStyles(theme => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation2, + }, +})); + + +const Window: React.FC = ({ type, name, children }) => { + const classes = useStyles(); + + const size: SurfaceSize = { + height: '85vh', + }; + + const position: SurfacePosition = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + + {name + && ( +
+ {name} + +
+ )} + {children} +
+ ); +}; + +export default Window; diff --git a/src/demo/Window/WindowSurface.tsx b/src/demo/Window/WindowSurface.tsx new file mode 100644 index 0000000..1900901 --- /dev/null +++ b/src/demo/Window/WindowSurface.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import { Paper, makeStyles } from '@material-ui/core'; + +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + size: SurfaceSize; + position: SurfacePosition; +} + + +const useStyles = makeStyles(theme => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + overflowY: 'auto', + scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, + + '& a.MuiTypography-root': { + color: theme.palette.primary.light, + }, + }, +})); + + +const WindowSurface: React.FC = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + + {children} + + ); +}; + + +export default WindowSurface; diff --git a/src/demo/Window/types.ts b/src/demo/Window/types.ts new file mode 100644 index 0000000..9e18fe3 --- /dev/null +++ b/src/demo/Window/types.ts @@ -0,0 +1,11 @@ +export interface SurfaceSize { + height: string; + width?: string; +} + +export interface SurfacePosition { + bottom: string; + left?: string; + right?: string; +} + -- cgit v1.2.3 From 59787b22e6f27a8c1714a195d1124752de4531a6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 13:40:16 +0300 Subject: feat!: remove SmartList component --- src/demo/SmartList/SmartList.tsx | 43 ---------------------------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/demo/SmartList/SmartList.tsx (limited to 'src/demo') diff --git a/src/demo/SmartList/SmartList.tsx b/src/demo/SmartList/SmartList.tsx deleted file mode 100644 index c86c127..0000000 --- a/src/demo/SmartList/SmartList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { FixedSizeList } from 'react-window'; -import AutoSizer from 'react-virtualized-auto-sizer'; - - -interface RenderPropTypes { - index: number; - style: React.CSSProperties; -} - -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; -- cgit v1.2.3