dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-21 01:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

search - better work with focus, unified component

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-10 21:27:07 +02:00
parent 125ba3b0c8
commit 8f5467859b
6 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/web/src/widgets/DatabaseWidget.js
View File

@@ -58,13 +58,14 @@ function ConnectionList() {
axios.post('server-connections/refresh', { conid });
}
};
const inputRef = React.useRef(null);
const [filter, setFilter] = React.useState('');
return (
<>
<WidgetTitle>Connections</WidgetTitle>
<WidgetTitle inputRef={inputRef}>Connections</WidgetTitle>
<SearchBoxWrapper>
<SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} />
<SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} inputRef={inputRef} />
<InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
</SearchBoxWrapper>
@@ -94,11 +95,12 @@ function SqlObjectList({ conid, database }) {
((objects || {})[objectTypeField] || []).map((obj) => ({ ...obj, objectTypeField }))
)
);
const inputRef = React.useRef(null);
return (
<>
<WidgetTitle>Tables, views, functions</WidgetTitle>
<WidgetTitle inputRef={inputRef}>Tables, views, functions</WidgetTitle>
<SearchBoxWrapper>
<SearchInput placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
<SearchInput inputRef={inputRef} placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
<InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
</SearchBoxWrapper>
<WidgetsInnerContainer>

3
packages/web/src/widgets/SearchInput.js
View File

@@ -7,7 +7,7 @@ const StyledInput = styled.input`
min-width: 90px;
`;
export default function SearchInput({ placeholder, filter, setFilter }) {
export default function SearchInput({ placeholder, filter, setFilter, inputRef = undefined }) {
const handleKeyDown = (ev) => {
if (ev.keyCode == keycodes.escape) {
setFilter('');
@@ -15,6 +15,7 @@ export default function SearchInput({ placeholder, filter, setFilter }) {
};
return (
<StyledInput
ref={inputRef}
type="text"
placeholder={placeholder}
value={filter}

14
packages/web/src/widgets/WidgetStyles.js
View File

@@ -48,10 +48,22 @@ export function WidgetsInnerContainer({ children }) {
// min-width: 90px;
// `;
export const WidgetTitle = styled.div`
const StyledWidgetTitle = styled.div`
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: gray;
// background-color: #CEC;
`;
export function WidgetTitle({ children, inputRef = undefined }) {
return (
<StyledWidgetTitle
onClick={() => {
if (inputRef && inputRef.current) inputRef.current.focus();
}}
>
{children}
</StyledWidgetTitle>
);
}