From 060decad2aa576a699e1d277ddd54feaaaefaf5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hubert=20Soko=C5=82owski?= Date: Wed, 24 Feb 2021 16:10:44 +0100 Subject: [PATCH] new navbar with drawer roll --- src/App.jsx | 27 +- src/components/FileReader.jsx | 6 +- src/components/Navigation/DrawerRoll.jsx | 33 ++ .../Navigation/FormControlNumberInput.jsx | 56 ++++ src/components/Navigation/index.jsx | 299 +++++++++++------- src/css/App.scss | 2 + src/css/inputs.scss | 7 + src/css/main.scss | 20 +- src/theme.js | 58 ++++ src/utils/decision-tree.js | 1 + 10 files changed, 383 insertions(+), 126 deletions(-) create mode 100644 src/components/Navigation/DrawerRoll.jsx create mode 100644 src/components/Navigation/FormControlNumberInput.jsx create mode 100644 src/css/inputs.scss create mode 100644 src/theme.js diff --git a/src/App.jsx b/src/App.jsx index dd05b8d..eed5d37 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,18 +1,21 @@ -import React from "react"; +import React from 'react'; //import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; -import "./css/App.scss"; -import Main from './components/Main' -import { ChakraProvider , CSSReset } from "@chakra-ui/react"; +import './css/App.scss'; +import Main from './components/Main'; +import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react'; +import theme from './theme'; + +const themes = extendTheme({ ...theme }); function App() { - return ( - - -
-
-
- - ); + return ( + + +
+
+
+ + ); } export default App; diff --git a/src/components/FileReader.jsx b/src/components/FileReader.jsx index 4bb3326..60d7781 100644 --- a/src/components/FileReader.jsx +++ b/src/components/FileReader.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import ReactFileReader from 'react-file-reader'; import { Button } from '@chakra-ui/react'; -import { AddIcon, ArrowUpIcon } from '@chakra-ui/icons'; +import { AddIcon } from '@chakra-ui/icons'; import { readLocalFile } from '../utils/file-reader'; import parseCsv from 'csv-parse/lib/sync'; @@ -42,10 +42,12 @@ function FileReader(props) { diff --git a/src/components/Navigation/DrawerRoll.jsx b/src/components/Navigation/DrawerRoll.jsx new file mode 100644 index 0000000..9f91b3c --- /dev/null +++ b/src/components/Navigation/DrawerRoll.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { + Button, + useDisclosure, + Drawer, + DrawerHeader, + DrawerBody, + DrawerOverlay, + DrawerContent, +} from '@chakra-ui/react'; + +function DrawerRoll() { + const { isOpen, onOpen, onClose } = useDisclosure(); + + return ( + <> + + + + + Basic Drawer + +

Some contents...

+

Some contents...

+

Some contents...

+ + + + + ); +} + +export default DrawerRoll; diff --git a/src/components/Navigation/FormControlNumberInput.jsx b/src/components/Navigation/FormControlNumberInput.jsx new file mode 100644 index 0000000..7c16a38 --- /dev/null +++ b/src/components/Navigation/FormControlNumberInput.jsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + FormControl, + FormLabel, + NumberInput, + NumberInputStepper, + NumberInputField, + NumberIncrementStepper, + NumberDecrementStepper, +} from '@chakra-ui/react'; + +/** + * @param {Object} props + * @param {number} props.defaultValue + * @param {number} props.min + * @param {number} [props.max] + * @param {number} [props.step] + * @param {function} props.onChange + * @param {string} props.label + * @param {string} props.htmlId + * + */ +function FormControlNumberInput({ defaultValue, min, max, step, onChange, label, htmlId }) { + function handleChange(e) { + console.log(e); + onChange(e); + } + + return ( + + {label} + + + + + + + + + ); +} + +export default FormControlNumberInput; diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx index e364ed6..e0d8052 100644 --- a/src/components/Navigation/index.jsx +++ b/src/components/Navigation/index.jsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import '../../css/main.scss'; -import { Icon } from '@chakra-ui/react'; +import '../../css/inputs.scss'; +import { Collapse, Icon, useDisclosure } from '@chakra-ui/react'; import { GiLightningTree } from 'react-icons/gi'; import { Button, @@ -13,6 +14,7 @@ import { NumberDecrementStepper, FormControl, FormLabel, + Box, } from '@chakra-ui/react'; import FileReader from '../FileReader'; import { Search as SearchBar } from '../SearchBar'; @@ -21,13 +23,15 @@ import { builder } from '../../services/Playground'; import IgnoredAttributes from './IgnoredAttributes'; import Builder from './Builder'; +import FormControlNumberInput from './FormControlNumberInput'; +import DrawerRoll from './DrawerRoll'; /** * @typedef {import('../../utils/decision-tree.js').DecisionTreeBuilder} DecisionTreeBuilder */ function Navigation({ onPrepareConfig }) { - const [size, setSize] = useState('md'); + const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true }); const [dataSet, setDataSet] = useState(null); const [decisionAttribute, setDecisionAttribute] = useState(null); const [ignoredAttributes, setIgnoredAttributes] = useState([]); @@ -43,9 +47,9 @@ function Navigation({ onPrepareConfig }) { { value: 'milkshake', name: 'Milkshake' }, ]); - useEffect(() => { - window.addEventListener('resize', () => handleResizeButtonsStyle()); - }, []); + // useEffect(() => { + // //window.addEventListener('resize', () => handleResizeButtonsStyle()); + // }, []); const handleSetAttributes = () => { let array = []; @@ -56,14 +60,14 @@ function Navigation({ onPrepareConfig }) { }); return array; }; - const handleResizeButtonsStyle = () => { - const windowSize = window.innerWidth; - if (windowSize < 6000) setSize('xl'); - if (windowSize < 3000) setSize('lg'); - if (windowSize < 1900) setSize('md'); - if (windowSize < 1200) setSize('sm'); - if (windowSize < 530) setSize('xs'); - }; + // const handleResizeButtonsStyle = () => { + // const windowSize = window.innerWidth; + // if (windowSize < 6000) setSize('xl'); + // if (windowSize < 3000) setSize('lg'); + // if (windowSize < 1900) setSize('md'); + // if (windowSize < 1200) setSize('sm'); + // if (windowSize < 530) setSize('xs'); + // }; function handleSelectDecision(value) { //console.log(value); @@ -122,112 +126,189 @@ function Navigation({ onPrepareConfig }) { } return ( - + + + + + + + // ); } diff --git a/src/css/App.scss b/src/css/App.scss index 74b5e05..21603e4 100644 --- a/src/css/App.scss +++ b/src/css/App.scss @@ -1,3 +1,5 @@ +@import './inputs.scss'; + .App { text-align: center; } diff --git a/src/css/inputs.scss b/src/css/inputs.scss new file mode 100644 index 0000000..f1d822b --- /dev/null +++ b/src/css/inputs.scss @@ -0,0 +1,7 @@ +.inputss { + border: 1px solid transparent; + &:hover { + border: 1px solid #2fcc8b; + border-radius: 0.375rem; + } +} diff --git a/src/css/main.scss b/src/css/main.scss index 345ceaf..18d65ce 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -9,9 +9,23 @@ $gradient-right: linear-gradient(90deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51 $gradient-bottom: linear-gradient(180deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); $gradient-left: linear-gradient(270deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); $gradient-top-right: linear-gradient(45deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); -$gradient-bottom-right: linear-gradient(135deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); +$gradient-bottom-right: linear-gradient( + 135deg, + #d8dbe2ff, + #a9bcd0ff, + #58a4b0ff, + #373f51ff, + #1b1b1eff +); $gradient-top-left: linear-gradient(225deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); -$gradient-bottom-left: linear-gradient(315deg, #d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); +$gradient-bottom-left: linear-gradient( + 315deg, + #d8dbe2ff, + #a9bcd0ff, + #58a4b0ff, + #373f51ff, + #1b1b1eff +); $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1b1b1eff); .center-horizontal { @@ -27,7 +41,7 @@ $gradient-radial: radial-gradient(#d8dbe2ff, #a9bcd0ff, #58a4b0ff, #373f51ff, #1 } .main { height: 100vh; - background-color: azure; + //padding: 10px; } #navigation-navbar { //background-color: red; diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..fda1f80 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,58 @@ +// theme.js +import { extendTheme, useBreakpointValue } from '@chakra-ui/react'; +import { createBreakpoints } from '@chakra-ui/theme-tools'; + +const breakpoints = createBreakpoints({ + sm: '320px', + md: '768px', + lg: '960px', + xl: '1200px', +}); + +const theme = extendTheme({ + breakpoints: breakpoints, + components: { + Button: { + // 1. We can update the base styles + baseStyle: { + fontWeight: 'bold', // Normally, it is "semibold" + }, + // 2. We can add a new button size or extend existing + sizes: { + xl: { + h: '56px', + fontSize: 'lg', + px: '32px', + }, + lg: { + h: '56px', + fontSize: 'lg', + px: '32px', + }, + md: { + h: '36px', + fontSize: 'md', + px: '32px', + }, + sm: { + h: '16px', + fontSize: 'lg', + px: '12px', + }, + }, + // 3. We can add a new visual variant + // variants: { + // 'beamed': { + // bg: 'red.400', + // boxShadow: '0 0 2px 2px #efdfde', + // }, + // // 4. We can override existing variants + // solid: props => ({ + // bg: props.colorMode === 'dark' ? 'red.300' : 'red.500', + // }), + // }, + }, + }, +}); + +export default theme; diff --git a/src/utils/decision-tree.js b/src/utils/decision-tree.js index 36a876f..c93ddde 100644 --- a/src/utils/decision-tree.js +++ b/src/utils/decision-tree.js @@ -205,6 +205,7 @@ export function buildDecisionTree(_builder, isChanged = false) { notMatch: notMatchSubTree, //{category: ...} matchedCount: match.length, notMatchedCount: notMatch.length, + nodeSet: match.concat(notMatch), }; //console.log(attributes); }