Skip to content

Commit 4c372cf

Browse files
yessGlory17yessGlory17
authored
Merge pull request #14 from yessGlory17/accordion-keyboard-control
Accordion keyboard control
2 parents caeef94 + 6777220 commit 4c372cf

File tree

6 files changed

+127
-64
lines changed

6 files changed

+127
-64
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
1616
"package:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --win",
1717
"package:linux": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never --linux",
18+
"deploy": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish always",
1819
"prepare": "husky install",
1920
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
2021
"start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",

‎src/renderer/App.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,13 @@ import { Input,
2020
Container,
2121
Spacer
2222
} from '@chakra-ui/react';
23-
import { useEffect,useState, useCon } from 'react';
23+
2424
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
25-
import icon from '../../assets/icon.svg';
2625
import './App.css';
27-
import BrowserCollapse from './components/BrowserCollapse';
2826
import List from './components/List';
2927
import Searchbar from './components/Searchbar';
30-
import Webview from './components/Webview';
3128
import {SearchContextProvider } from './context/SearchContext';
29+
import { TabContextProvider } from './context/TabContext';
3230

3331

3432
const Hello = () => {
@@ -38,8 +36,10 @@ const Hello = () => {
3836
{/* Searchbar */}
3937
<SearchContextProvider>
4038
<Container centerContent paddingTop='10px'>
41-
<Searchbar />
42-
<List />
39+
<TabContextProvider>
40+
<Searchbar />
41+
<List />
42+
</TabContextProvider>
4343
</Container>
4444
</SearchContextProvider>
4545
</div>

‎src/renderer/components/BrowserCollapse.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,16 @@ import { SearchContext } from 'renderer/context/SearchContext';
2121
import { AiOutlineLeft, AiOutlineRight, AiOutlineClose } from 'react-icons/ai';
2222
import Webview from './Webview';
2323

24-
const BrowserCollapse = ({ name, tabUrl, tabId }) => {
24+
const BrowserCollapse = ({ name, tabUrl, tabId, onOpen, index }) => {
2525
const webviewRef = useRef();
2626

2727
const [collapseName, setCollapseName] = useState(name);
2828

2929
const { closeTab } = useContext(SearchContext);
3030

31+
32+
33+
3134
const close = (id: any) => closeTab(id);
3235

3336
const back = (e: MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -55,9 +58,9 @@ const BrowserCollapse = ({ name, tabUrl, tabId }) => {
5558
return webviewRef.current.getTitle();
5659
};
5760
return (
58-
<AccordionItem border="none">
61+
<AccordionItem border="none" >
5962
<h2>
60-
<AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }}>
63+
<AccordionButton _expanded={{ bg: '#03c9d7', color: 'white' }} onClick={(e)=> {onOpen(e,index)}} >
6164
<IconButton
6265
backgroundColor="#32363e"
6366
_hover={{ bg: '#32363e' }}

‎src/renderer/components/List.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
11
import { Accordion } from "@chakra-ui/react";
2-
import { useContext } from "react";
2+
import { useCallback, useContext, useEffect, useState } from "react";
33
import { SearchContext } from "renderer/context/SearchContext";
4+
import { TabContext } from "renderer/context/TabContext";
45
import BrowserCollapse from "./BrowserCollapse";
56

67
const List = () => {
78

89
const {tabs} = useContext(SearchContext);
910

11+
const {
12+
currentTabIndex,
13+
setTabIndex
14+
} = useContext(TabContext);
15+
16+
const onOpen = (e,index) => {
17+
e.preventDefault();
18+
if(currentTabIndex == index) {
19+
setTabIndex(null)
20+
}else{
21+
setTabIndex(index)
22+
}
23+
}
24+
25+
1026
return (
1127
<div>
12-
<Accordion width='95vw' allowToggle _hover={{}}
28+
<Accordion width='95vw' allowToggle _hover={{}} index={currentTabIndex}
1329
border='none' backgroundColor='#32363e' margin='10px' overflowY='scroll' >
1430
{tabs.map((tab,index)=>(
15-
<BrowserCollapse key={index} name={tab.keyword} tabUrl={tab.url} tabId={tab.tabId}/>
31+
<BrowserCollapse key={index} name={tab.keyword} tabUrl={tab.url} tabId={tab.tabId} onOpen={onOpen} index={index}/>
1632
))}
1733
</Accordion>
1834
</div>

‎src/renderer/components/Searchbar.tsx‎

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,94 +6,99 @@ import {
66
InputLeftAddon,
77
InputRightElement,
88
HStack,
9-
Select
9+
Select,
1010
} from '@chakra-ui/react';
11-
import {useCallback, useContext, useEffect,useState} from 'react';
11+
import { useCallback, useContext, useEffect, useState } from 'react';
1212
import { SearchContext } from 'renderer/context/SearchContext';
13-
import {FcGoogle} from 'react-icons/fc';
14-
import {SiDuckduckgo} from 'react-icons/si';
15-
import {FaYandexInternational} from 'react-icons/fa';
13+
import { FcGoogle } from 'react-icons/fc';
14+
import { SiDuckduckgo } from 'react-icons/si';
15+
import { FaYandexInternational } from 'react-icons/fa';
1616
import '../App.css';
17+
import { TabContext } from 'renderer/context/TabContext';
1718
import SearchEngineModal from './Settings/SearchEngineModal';
1819

1920
const Searchbar = ({}) => {
20-
2121
const [isModalOpen, setModal] = useState(false);
2222

2323
const onClose = () => setModal(!isModalOpen);
2424

25-
const {
26-
url,
27-
setUrl,
28-
keyword,
29-
setKeyword,
30-
onChange,
31-
search,
32-
searchEngine
33-
} = useContext(SearchContext);
25+
const { url, setUrl, keyword, setKeyword,tabs,closeTab, onChange, search, searchEngine } =
26+
useContext(SearchContext);
3427

28+
const { nexTab,setTabIndex,currentTabIndex } = useContext(TabContext);
3529

36-
const handleSetSearchEngineShortcut = useCallback((event)=>{
37-
if(event.ctrlKey && (event.key === 'E' || event.key === 'e')){
30+
const handleSetSearchEngineShortcut = useCallback((event) => {
31+
if (event.ctrlKey && (event.key === 'E' || event.key === 'e')) {
3832
onClose();
3933
}
40-
})
34+
nexTab(event);
35+
});
4136

42-
useEffect(()=>{
43-
document.addEventListener('keydown',handleSetSearchEngineShortcut);
37+
useEffect(() => {
38+
document.addEventListener('keydown', handleSetSearchEngineShortcut);
4439

4540
return () => {
46-
document.removeEventListener('keydown',handleSetSearchEngineShortcut);
47-
}
48-
},[])
41+
document.removeEventListener('keydown', handleSetSearchEngineShortcut);
42+
};
43+
}, []);
4944

5045
const getEngineIcon = () => {
51-
switch(searchEngine){
52-
case "https://www.google.com/search?q=":
53-
return <FcGoogle />
54-
case "https://yandex.com.tr/search/?text=":
55-
return <FaYandexInternational/>
56-
case "https://duckduckgo.com/?q=":
57-
return <SiDuckduckgo />
58-
}
59-
}
46+
switch (searchEngine) {
47+
case 'https://www.google.com/search?q=':
48+
return <FcGoogle />;
49+
case 'https://yandex.com.tr/search/?text=':
50+
return <FaYandexInternational />;
51+
case 'https://duckduckgo.com/?q=':
52+
return <SiDuckduckgo />;
53+
}
54+
};
6055

6156
return (
6257
<>
63-
<HStack w='95vw' >
64-
<InputGroup size='md' h='40px' id='search-bar-container'
65-
>
66-
<InputLeftAddon h='40px' children={getEngineIcon()} color='white' backgroundColor='#32363e' border='none' onClick={onClose} />
67-
<Input variant='filled' placeholder='Search' autoFocus
68-
onKeyDown={e => e.key === 'Enter' && search()}
58+
<HStack w="95vw">
59+
<InputGroup size="md" h="40px" id="search-bar-container">
60+
<InputLeftAddon
61+
h="40px"
62+
children={getEngineIcon()}
63+
color="white"
64+
backgroundColor="#32363e"
65+
border="none"
66+
onClick={onClose}
67+
/>
68+
<Input
69+
variant="filled"
70+
placeholder="Search"
71+
autoFocus
72+
onKeyDown={(e) => e.key === 'Enter' && search()}
6973
onChange={onChange}
70-
backgroundColor='#32363e'
71-
_focus={{backgroundColor:'#32363e'}}
72-
_hover={{backgroundColor:'#32363e'}}
73-
/>
74+
backgroundColor="#32363e"
75+
_focus={{ backgroundColor: '#32363e' }}
76+
_hover={{ backgroundColor: '#32363e' }}
77+
/>
7478

7579
<InputRightElement>
76-
<Button h='40px' w='40px' size='sm'
80+
<Button
81+
h="40px"
82+
w="40px"
83+
size="sm"
7784
leftIcon={<SearchIcon />}
78-
backgroundColor='#32363e'
79-
variant='solid'
85+
backgroundColor="#32363e"
86+
variant="solid"
8087
onClick={search}
8188
_hover={{
82-
backgroundColor:'#32363e',
89+
backgroundColor: '#32363e',
8390
}}
8491
_focus={{
85-
backgroundColor:'#32363e',
86-
outline:'none'
92+
backgroundColor: '#32363e',
93+
outline: 'none',
8794
}}
88-
>
89-
</Button>
95+
/>
9096
</InputRightElement>
9197
</InputGroup>
92-
9398
</HStack>
9499
<SearchEngineModal isOpen={isModalOpen} onClose={onClose} />
95100
</>
96101
);
97-
}
102+
};
98103

99104
export default Searchbar;

‎src/renderer/context/TabContext.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { createContext, useCallback, useContext, useState } from 'react';
2+
import { SearchContext } from './SearchContext';
3+
4+
export const TabContext = createContext();
5+
6+
export const TabContextProvider = (props) => {
7+
const [currentTabIndex, setTabIndex] = useState(0);
8+
9+
const { closeTab, tabs } = useContext(SearchContext);
10+
11+
const nexTab = (event) => {
12+
13+
if (event.ctrlKey && isFinite(event.key)) {
14+
// if (Number(event.key) - 1 == currentTabIndex) {
15+
// setTabIndex(null);
16+
// } else {
17+
// setTabIndex(Number(event.key) - 1);
18+
// }
19+
20+
21+
22+
setTabIndex(Number(event.key) - 1);
23+
24+
}
25+
};
26+
27+
return (
28+
<TabContext.Provider
29+
value={{
30+
currentTabIndex,
31+
setTabIndex,
32+
nexTab,
33+
}}
34+
>
35+
{props.children}
36+
</TabContext.Provider>
37+
);
38+
};

0 commit comments

Comments
 (0)