diff options
author | Eug-VS <eug-vs@keemail.me> | 2020-02-03 16:37:43 +0300 |
---|---|---|
committer | Eug-VS <eug-vs@keemail.me> | 2020-02-03 16:37:43 +0300 |
commit | cc6c8e9109f1807ce48b061fa497535ab9f674e8 (patch) | |
tree | 0a80624d621f4d85b44584ecf3842ff753cc3d2d /src/lib/components | |
parent | 989173ea6e39ac27893f3cc5efba043ebda9df67 (diff) | |
download | react-benzin-cc6c8e9109f1807ce48b061fa497535ab9f674e8.tar.gz |
feat: change src structure
Diffstat (limited to 'src/lib/components')
-rw-r--r-- | src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js | 40 | ||||
-rw-r--r-- | src/lib/components/ContentSection/ContentSection.js | 37 | ||||
-rw-r--r-- | src/lib/components/Header/Header.js | 67 | ||||
-rw-r--r-- | src/lib/components/SmartList/SmartList.js | 28 | ||||
-rw-r--r-- | src/lib/components/Window/Window.tsx | 61 | ||||
-rw-r--r-- | src/lib/components/Window/WindowSurface.tsx | 44 | ||||
-rw-r--r-- | src/lib/components/Window/types.ts | 11 |
7 files changed, 0 insertions, 288 deletions
diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js deleted file mode 100644 index 8e52ed4..0000000 --- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; -import { CssBaseline } from '@material-ui/core'; -import 'typeface-roboto'; - - -const benzinTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#ffa726', - }, - secondary: { - main: '#9c27b0', - }, - background: { - default: '#121212', - paper: '#1e1e1e', - elevation1: '#1e1e1e', - elevation2: '#232323', - elevation3: '#252525', - }, - text: { - primary: '#f4f4f4', - secondary: 'rgba(255, 255, 255, 0.6)', - } - }, -}); - - -const BenzinThemeProvider = ({ children }) => ( - <ThemeProvider theme={benzinTheme}> - <CssBaseline /> - {children} - </ThemeProvider> -); - - -export default BenzinThemeProvider; - diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js deleted file mode 100644 index 461a9c2..0000000 --- a/src/lib/components/ContentSection/ContentSection.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -import { - Typography, - Divider, - makeStyles -} from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - content: { - padding: theme.spacing(0, 2, 1, 2), - marginBottom: theme.spacing(1), - - '& .MuiButton-root': { - margin: theme.spacing(1, 2, 2, 0), - }, - }, -})); - -const ContentSection = ({ sectionName, children }) => { - const classes = useStyles(); - - return ( - <> - <Typography variant="h4">{sectionName}</Typography> - <Divider variant="middle"/> - <Typography component="div" className={classes.content}> - {children} - </Typography> - </> - ); - -}; - - -export default ContentSection; diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js deleted file mode 100644 index 3ade7b3..0000000 --- a/src/lib/components/Header/Header.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; - -import { - AppBar, - Tabs, - Tab, - Typography, - Toolbar, -} from '@material-ui/core'; - -import { makeStyles } from '@material-ui/core/styles'; - - -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 = ({ logo, contents, page, setPage }) => { - const classes = useStyles(); - - const handleChange = (event, newPage) => { - setPage(newPage); - }; - - return ( - <AppBar position="sticky" className={classes.root}> - <Toolbar> - {logo.icon} - <Typography variant="h5" className={classes.logo} color="primary"> - {logo.title} - </Typography> - <Tabs onChange={handleChange} value={page}> - {contents && Object.keys(contents).map(item => ( - <Tab - label={item} - icon={contents[item]} - value={item} - className={classes.tab} - key={item} - /> - ))} - </Tabs> - </Toolbar> - </AppBar> - ); -}; - -export default Header; diff --git a/src/lib/components/SmartList/SmartList.js b/src/lib/components/SmartList/SmartList.js deleted file mode 100644 index b462c47..0000000 --- a/src/lib/components/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/components/Window/Window.tsx b/src/lib/components/Window/Window.tsx deleted file mode 100644 index ea8e264..0000000 --- a/src/lib/components/Window/Window.tsx +++ /dev/null @@ -1,61 +0,0 @@ -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: any) => ({ - header: { - padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation2, - }, -})); - - -const Window: React.FC<PropTypes> = ({ 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 ( - <WindowSurface - size={size} - position={position} - > - {name && - <div> - <Typography variant="h5" className={classes.header}>{name}</Typography> - <Divider /> - </div> - } - {children} - </WindowSurface> - ); -}; - -export default Window; diff --git a/src/lib/components/Window/WindowSurface.tsx b/src/lib/components/Window/WindowSurface.tsx deleted file mode 100644 index 701a767..0000000 --- a/src/lib/components/Window/WindowSurface.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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: any) => ({ - 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<PropTypes> = ({ size, position, children }) => { - const classes = useStyles(); - - return ( - <Paper - variant="outlined" - style={{...size, ...position}} - className={classes.surface} - > - {children} - </Paper> - ) -}; - - -export default WindowSurface; diff --git a/src/lib/components/Window/types.ts b/src/lib/components/Window/types.ts deleted file mode 100644 index 9e18fe3..0000000 --- a/src/lib/components/Window/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface SurfaceSize { - height: string; - width?: string; -} - -export interface SurfacePosition { - bottom: string; - left?: string; - right?: string; -} - |