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

prettier

Browse Source
This commit is contained in:
Jan Prochazka
2021-01-23 07:22:09 +01:00
parent 37cc86f8d2
commit 451af5d09f
141 changed files with 763 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/widgets/ArchiveWidget.js
View File

@@ -32,7 +32,7 @@ function ArchiveFolderList() {
<AppObjectList
list={_.sortBy(folders, 'name')}
AppObjectComponent={ArchiveFolderAppObject}
onObjectClick={(archive) => setArchive(archive.name)}
onObjectClick={archive => setArchive(archive.name)}
filter={filter}
/>
</WidgetsInnerContainer>
@@ -56,7 +56,7 @@ function ArchiveFilesList() {
</SearchBoxWrapper>
<WidgetsInnerContainer>
<AppObjectList
list={(files || []).map((file) => ({
list={(files || []).map(file => ({
fileName: file.name,
folderName: folder,
}))}

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

@@ -28,7 +28,7 @@ import ConnectionModal from '../modals/ConnectionModal';
function SubDatabaseList({ data }) {
const setDb = useSetCurrentDatabase();
const handleDatabaseClick = (database) => {
const handleDatabaseClick = database => {
setDb({
...database,
connection: data,
@@ -38,7 +38,7 @@ function SubDatabaseList({ data }) {
const databases = useDatabaseList({ conid: _id });
return (
<AppObjectList
list={(databases || []).map((db) => ({ ...db, connection: data }))}
list={(databases || []).map(db => ({ ...db, connection: data }))}
AppObjectComponent={DatabaseAppObject}
// makeAppObj={databaseAppObject({ boldCurrentDatabase: true })}
onObjectClick={handleDatabaseClick}
@@ -51,9 +51,7 @@ function ConnectionList() {
const serverStatus = useServerStatus();
const openedConnections = useOpenedConnections();
const connectionsWithStatus =
connections && serverStatus
? connections.map((conn) => ({ ...conn, status: serverStatus[conn._id] }))
: connections;
connections && serverStatus ? connections.map(conn => ({ ...conn, status: serverStatus[conn._id] })) : connections;
const showModal = useShowModal();
const handleRefreshConnections = () => {
@@ -63,7 +61,7 @@ function ConnectionList() {
};
const showNewConnection = () => {
showModal((modalState) => <ConnectionModal modalState={modalState} />);
showModal(modalState => <ConnectionModal modalState={modalState} />);
};
const [filter, setFilter] = React.useState('');
@@ -83,7 +81,7 @@ function ConnectionList() {
// makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
SubItems={SubDatabaseList}
filter={filter}
isExpandable={(data) => openedConnections.includes(data._id)}
isExpandable={data => openedConnections.includes(data._id)}
/>
{connections && connections.length == 0 && (
<ToolbarButton icon="icon new-connection" onClick={showNewConnection}>
@@ -105,9 +103,9 @@ function SqlObjectList({ conid, database }) {
const [filter, setFilter] = React.useState('');
const objectList = _.flatten(
['tables', 'views', 'procedures', 'functions'].map((objectTypeField) =>
['tables', 'views', 'procedures', 'functions'].map(objectTypeField =>
_.sortBy(
((objects || {})[objectTypeField] || []).map((obj) => ({ ...obj, objectTypeField })),
((objects || {})[objectTypeField] || []).map(obj => ({ ...obj, objectTypeField })),
['schemaName', 'pureName']
)
)
@@ -147,9 +145,9 @@ function SqlObjectList({ conid, database }) {
<LoadingInfo message="Loading database structure" />
) : (
<AppObjectList
list={objectList.map((x) => ({ ...x, conid, database }))}
list={objectList.map(x => ({ ...x, conid, database }))}
AppObjectComponent={DatabaseObjectAppObject}
groupFunc={(data) => _.startCase(data.objectTypeField)}
groupFunc={data => _.startCase(data.objectTypeField)}
filter={filter}
/>
)}

4
packages/web/src/widgets/FavoritesWidget.js
View File

@@ -18,8 +18,8 @@ function ClosedTabsList() {
<WidgetsInnerContainer>
<AppObjectList
list={_.sortBy(
tabs.filter((x) => x.closedTime),
(x) => -x.closedTime
tabs.filter(x => x.closedTime),
x => -x.closedTime
)}
AppObjectComponent={ClosedTabAppObject}
/>

2
packages/web/src/widgets/FilesWidget.js
View File

@@ -28,7 +28,7 @@ function SavedFilesList() {
<AppObjectList
list={files}
AppObjectComponent={SavedFileAppObject}
groupFunc={(data) => _.startCase(data.folder)}
groupFunc={data => _.startCase(data.folder)}
/>
</WidgetsInnerContainer>
</>

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

@@ -7,17 +7,17 @@ import useTheme from '../theme/useTheme';
// const StyledInputBase=styled.input``;
// const StyledLabelBase=styled.label``;
const makeStyle = (base) => styled(base)`
const makeStyle = base => styled(base)`
// height: ${dimensions.toolBar.height - 5}px;
border: 1px solid ${(props) => props.theme.button_background2};
border: 1px solid ${props => props.theme.button_background2};
padding: 5px;
margin: 2px;
width: 100px;
background-color: ${(props) => props.theme.button_background};
color: ${(props) => props.theme.button_font1};
background-color: ${props => props.theme.button_background};
color: ${props => props.theme.button_font1};
border-radius: 2px;
${(props) =>
${props =>
!props.disabled &&
`
&:hover {
@@ -29,7 +29,7 @@ const makeStyle = (base) => styled(base)`
}
`}
${(props) =>
${props =>
props.disabled &&
`
background-color: ${props.theme.button_background3};
@@ -70,7 +70,7 @@ export default function FormStyledButton({
export const StyledThemedLink = styled.a`
text-decoration: none;
cursor: pointer;
color: ${(props) => props.theme.main_background_blue[7]};
color: ${props => props.theme.main_background_blue[7]};
&:hover {
text-decoration: underline;
}

20
packages/web/src/widgets/InlineButton.js
View File

@@ -6,33 +6,33 @@ import useTheme from '../theme/useTheme';
const ButtonDiv = styled.div`
background: linear-gradient(
to bottom,
${(props) => props.theme.inlinebtn_background} 5%,
${(props) => props.theme.inlinebtn_background3} 100%
${props => props.theme.inlinebtn_background} 5%,
${props => props.theme.inlinebtn_background3} 100%
);
background-color: ${(props) => props.theme.inlinebtn_background};
border: 1px solid ${(props) => props.theme.inlinebtn_background3};
background-color: ${props => props.theme.inlinebtn_background};
border: 1px solid ${props => props.theme.inlinebtn_background3};
display: inline-block;
cursor: pointer;
vertical-align: middle;
color: ${(props) => props.theme.inlinebtn_font1};;
color: ${props => props.theme.inlinebtn_font1};
font-size: 12px;
padding: 3px;
margin: 0;
text-decoration: none;
&:hover {
border: 1px solid ${(props) => props.theme.inlinebtn_font2};
border: 1px solid ${props => props.theme.inlinebtn_font2};
}
&:active:hover {
background: linear-gradient(
to bottom,
${(props) => props.theme.inlinebtn_background3} 5%,
${(props) => props.theme.inlinebtn_background} 100%
${props => props.theme.inlinebtn_background3} 5%,
${props => props.theme.inlinebtn_background} 100%
);
background-color: ${(props) => props.theme.inlinebtn_background3};
background-color: ${props => props.theme.inlinebtn_background3};
}
display: flex;
${(props) =>
${props =>
props.square &&
`
width: 18px;

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

@@ -8,13 +8,13 @@ import { useForm } from '../utility/FormProvider';
const ButtonDiv = styled.div`
padding: 5px 15px;
color: ${(props) => props.theme.main_font1};
border: 1px solid ${(props) => props.theme.border};
color: ${props => props.theme.main_font1};
border: 1px solid ${props => props.theme.border};
width: 120px;
height: 60px;
background-color: ${(props) => props.theme.toolbar_background};
background-color: ${props => props.theme.toolbar_background};
${(props) =>
${props =>
!props.disabled &&
`
&:hover {
@@ -26,7 +26,7 @@ const ButtonDiv = styled.div`
}
`}
${(props) =>
${props =>
props.disabled &&
`
color: ${props.theme.main_font3};

2
packages/web/src/widgets/LoadingInfo.js
View File

@@ -26,7 +26,7 @@ const LoadingInfoWrapper = styled.div`
justify-content: space-around;
`;
const LoadingInfoBox = styled.div`
background-color: ${(props) => props.theme.main_background2};
background-color: ${props => props.theme.main_background2};
padding: 10px;
border: 1px solid gray;
`;

2
packages/web/src/widgets/PluginsWidget.js
View File

@@ -31,7 +31,7 @@ function AvailablePluginsList() {
const setDebouncedFilter = React.useRef(
// @ts-ignore
_.debounce((value) => setSearch(value), 500)
_.debounce(value => setSearch(value), 500)
);
React.useEffect(() => {

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

@@ -9,7 +9,7 @@ const StyledInput = styled.input`
`;
export default function SearchInput({ placeholder, filter, setFilter, inputRef = undefined }) {
const handleKeyDown = (ev) => {
const handleKeyDown = ev => {
if (ev.keyCode == keycodes.escape) {
setFilter('');
}
@@ -20,8 +20,8 @@ export default function SearchInput({ placeholder, filter, setFilter, inputRef =
type="text"
placeholder={placeholder}
value={filter}
onChange={(e) => setFilter(e.target.value)}
onFocus={(e) => e.target.select()}
onChange={e => setFilter(e.target.value)}
onFocus={e => e.target.select()}
onKeyDown={handleKeyDown}
/>
);

16
packages/web/src/widgets/Splitter.js
View File

@@ -28,20 +28,20 @@ const HorizontalMainContainer = styled(SplitterMainBase)`
`;
export const VerticalSplitHandle = styled.div`
background-color: ${(props) => props.theme.border};
background-color: ${props => props.theme.border};
height: ${dimensions.splitter.thickness}px;
cursor: row-resize;
&:hover {
background-color: ${(props) => props.theme.border_background2};
background-color: ${props => props.theme.border_background2};
}
`;
export const HorizontalSplitHandle = styled.div`
background-color: ${(props) => props.theme.border};
background-color: ${props => props.theme.border};
width: ${dimensions.splitter.thickness}px;
cursor: col-resize;
&:hover {
background-color: ${(props) => props.theme.border_background2};
background-color: ${props => props.theme.border_background2};
}
`;
@@ -69,13 +69,13 @@ export function useSplitterDrag(axes, onResize) {
React.useEffect(() => {
if (resizeStart != null) {
const handleResizeMove = (e) => {
const handleResizeMove = e => {
e.preventDefault();
let diff = e[axes] - resizeStart;
setResizeStart(e[axes]);
onResize(diff);
};
const handleResizeEnd = (e) => {
const handleResizeEnd = e => {
e.preventDefault();
setResizeStart(null);
};
@@ -90,7 +90,7 @@ export function useSplitterDrag(axes, onResize) {
}
}, [resizeStart]);
const handleResizeDown = (e) => {
const handleResizeDown = e => {
setResizeStart(e[axes]);
};
@@ -125,7 +125,7 @@ function SplitterCore({
else setSize1(dimensions[dimensionField] / 2);
}, [dimensions]);
const handleResizeDown = useSplitterDrag(eventField, (diff) => setSize1((v) => v + diff));
const handleResizeDown = useSplitterDrag(eventField, diff => setSize1(v => v + diff));
const isSplitter = !!childrenArray[1];

6
packages/web/src/widgets/StatusBar.js
View File

@@ -8,7 +8,7 @@ import { useDatabaseStatus } from '../utility/metadataLoaders';
const Container = styled.div`
display: flex;
color: ${(props) => props.theme.statusbar_font1};
color: ${props => props.theme.statusbar_font1};
align-items: stretch;
`;
@@ -19,13 +19,13 @@ const Item = styled.div`
`;
const ErrorWrapper = styled.span`
color: ${(props) =>
color: ${props =>
// @ts-ignore
props.theme.statusbar_font_red[5]};
`;
const InfoWrapper = styled.span`
color: ${(props) =>
color: ${props =>
// @ts-ignore
props.theme.statusbar_font_green[5]};
`;

16
packages/web/src/widgets/TabControl.js
View File

@@ -5,16 +5,16 @@ import useTheme from '../theme/useTheme';
import dimensions from '../theme/dimensions';
const TabItem = styled.div`
border-right: 1px solid ${(props) => props.theme.border};
border-right: 1px solid ${props => props.theme.border};
padding-left: 15px;
padding-right: 15px;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
color: ${(props) => props.theme.tabs_font_hover};
color: ${props => props.theme.tabs_font_hover};
}
background-color: ${(props) =>
background-color: ${props =>
// @ts-ignore
props.selected ? props.theme.tabs_background1 : 'inherit'};
`;
@@ -35,7 +35,7 @@ const TabContainer = styled.div`
top: 0;
bottom: 0;
${(props) =>
${props =>
// @ts-ignore
!props.tabVisible && `visibility: hidden;`}
`;
@@ -44,7 +44,7 @@ const TabsContainer = styled.div`
display: flex;
height: ${dimensions.tabsPanel.height}px;
right: 0;
background-color: ${(props) => props.theme.tabs_background2};
background-color: ${props => props.theme.tabs_background2};
`;
const TabContentContainer = styled.div`
@@ -67,7 +67,7 @@ export function TabControl({ children, activePageIndex = undefined, activePageLa
// const [mountedTabs, setMountedTabs] = React.useState({});
const childrenArray = (_.isArray(children) ? _.flatten(children) : [children]).filter((x) => x);
const childrenArray = (_.isArray(children) ? _.flatten(children) : [children]).filter(x => x);
React.useEffect(() => {
if (activePageIndex != null) setValue(activePageIndex);
@@ -75,7 +75,7 @@ export function TabControl({ children, activePageIndex = undefined, activePageLa
React.useEffect(() => {
if (activePageLabel != null) {
const pageIndex = _.findIndex(childrenArray, (x) => x.props.label == activePageLabel);
const pageIndex = _.findIndex(childrenArray, x => x.props.label == activePageLabel);
if (pageIndex >= 0) setValue(pageIndex);
}
}, [activePageLabel]);
@@ -97,7 +97,7 @@ export function TabControl({ children, activePageIndex = undefined, activePageLa
<MainContainer>
<TabsContainer theme={theme}>
{childrenArray
.filter((x) => x.props)
.filter(x => x.props)
.map((tab, index) => (
// @ts-ignore
<TabItem key={index} onClick={() => setValue(index)} selected={value == index} theme={theme}>

26
packages/web/src/widgets/Toolbar.js
View File

@@ -49,7 +49,7 @@ export default function ToolBar({ toolbarPortalRef }) {
const favorites = useFavorites();
const openFavorite = useOpenFavorite();
const currentTab = openedTabs.find((x) => x.selected);
const currentTab = openedTabs.find(x => x.selected);
React.useEffect(() => {
if (config.runAsPortal == false) {
@@ -61,11 +61,11 @@ export default function ToolBar({ toolbarPortalRef }) {
});
const showAbout = () => {
showModal((modalState) => <AboutModal modalState={modalState} />);
showModal(modalState => <AboutModal modalState={modalState} />);
};
const showImport = () => {
showModal((modalState) => (
showModal(modalState => (
<ImportExportModal
modalState={modalState}
importToArchive
@@ -81,7 +81,7 @@ export default function ToolBar({ toolbarPortalRef }) {
};
const showNewConnection = () => {
showModal((modalState) => <ConnectionModal modalState={modalState} />);
showModal(modalState => <ConnectionModal modalState={modalState} />);
};
const switchTheme = () => {
@@ -98,7 +98,7 @@ export default function ToolBar({ toolbarPortalRef }) {
};
const addToFavorite = () => {
showModal((modalState) => <FavoriteModal modalState={modalState} savingTab={currentTab} />);
showModal(modalState => <FavoriteModal modalState={modalState} savingTab={currentTab} />);
};
const newShell = () => {
@@ -114,7 +114,7 @@ export default function ToolBar({ toolbarPortalRef }) {
const openFavoriteName = hash && hash.startsWith('#favorite=') ? hash.substring('#favorite='.length) : null;
const openTabdata = hash && hash.startsWith('#tabdata=') ? hash.substring('#tabdata='.length) : null;
if (openFavoriteName) {
const open = (favorites || []).find((x) => x.urlPath == openFavoriteName);
const open = (favorites || []).find(x => x.urlPath == openFavoriteName);
if (open) {
openFavorite(open);
window.history.replaceState(null, null, ' ');
@@ -125,10 +125,10 @@ export default function ToolBar({ toolbarPortalRef }) {
openFavorite(json);
window.history.replaceState(null, null, ' ');
} catch (err) {
showModal((modalState) => <ErrorMessageModal modalState={modalState} message={err.message} />);
showModal(modalState => <ErrorMessageModal modalState={modalState} message={err.message} />);
}
} else if (!openedTabs.find((x) => x.closedTime == null)) {
for (const fav of (favorites || []).filter((x) => x.openOnStartup)) {
} else if (!openedTabs.find(x => x.closedTime == null)) {
for (const fav of (favorites || []).filter(x => x.openOnStartup)) {
openFavorite(fav);
}
}
@@ -144,16 +144,14 @@ export default function ToolBar({ toolbarPortalRef }) {
/>
)}
{(favorites || [])
.filter((x) => x.showInToolbar)
.map((x) => (
.filter(x => x.showInToolbar)
.map(x => (
<ToolbarButton key={x.file} onClick={() => openFavorite(x)} icon={x.icon || 'icon favorite'}>
{x.title}
</ToolbarButton>
))}
<ToolbarDropDownButton icon="icon add" text="New">
{config.runAsPortal == false && (
<DropDownMenuItem onClick={showNewConnection}>Connection</DropDownMenuItem>
)}
{config.runAsPortal == false && <DropDownMenuItem onClick={showNewConnection}>Connection</DropDownMenuItem>}
<DropDownMenuItem onClick={() => newQuery()}>SQL query</DropDownMenuItem>
{!!currentDatabase && <DropDownMenuItem onClick={() => newQueryDesign()}>Query designer</DropDownMenuItem>}
<DropDownMenuItem onClick={() => newFreeTable()}>Free table editor</DropDownMenuItem>

12
packages/web/src/widgets/ToolbarButton.js
View File

@@ -9,12 +9,12 @@ import useTheme from '../theme/useTheme';
const ButtonDiv = styled.div`
padding: 5px 15px;
// margin: 2px;
color: ${(props) => props.theme.main_font1};
color: ${props => props.theme.main_font1};
border: 0;
border-right: 1px solid ${(props) => props.theme.border};
border-right: 1px solid ${props => props.theme.border};
height: ${dimensions.toolBar.height}px;
${(props) =>
${props =>
!props.disabled &&
`
&:hover {
@@ -26,7 +26,7 @@ const ButtonDiv = styled.div`
}
`}
${(props) =>
${props =>
props.disabled &&
`
color: ${props.theme.main_font3};
@@ -36,12 +36,12 @@ const ButtonDiv = styled.div`
const StyledIconSpan = styled.span`
margin-right: 5px;
// font-size: 18px;
color: ${(props) => (props.disabled ? props.theme.main_font3 : props.theme.main_font_link)};
color: ${props => (props.disabled ? props.theme.main_font3 : props.theme.main_font_link)};
`;
const ButtonDivInner = styled.div`
position: relative;
top: ${(props) => props.patchY}px;
top: ${props => props.patchY}px;
white-space: nowrap;
`;

12
packages/web/src/widgets/WidgetColumnBar.js
View File

@@ -19,7 +19,7 @@ function WidgetContainer({ widget, visible, splitterVisible, parentHeight, initi
const [size, setSize] = React.useState(null);
const theme = useTheme();
const handleResizeDown = useSplitterDrag('clientY', (diff) => setSize((v) => v + diff));
const handleResizeDown = useSplitterDrag('clientY', diff => setSize(v => v + diff));
React.useEffect(() => {
if (_.isString(initialSize) && initialSize.endsWith('px')) setSize(parseInt(initialSize.slice(0, -2)));
@@ -44,13 +44,13 @@ export default function WidgetColumnBar({ children, onChangeCollapsedWidgets = u
const childArray = _.isArray(children) ? children : [children];
const [refNode, dimensions] = useDimensions();
const [collapsedWidgets, setCollapsedWidgets] = React.useState(() =>
childArray.filter((x) => x && x.props.collapsed).map((x) => x.props.name)
childArray.filter(x => x && x.props.collapsed).map(x => x.props.name)
);
const toggleCollapsed = (name) => {
const toggleCollapsed = name => {
// skip collapse last uncollapsed item
if (!childArray.find((x) => x.props && x.props.name != name && !collapsedWidgets.includes(x.props.name))) return;
if (!childArray.find(x => x.props && x.props.name != name && !collapsedWidgets.includes(x.props.name))) return;
if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));
if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter(x => x != name));
else setCollapsedWidgets([...collapsedWidgets, name]);
};
React.useEffect(() => {
@@ -69,7 +69,7 @@ export default function WidgetColumnBar({ children, onChangeCollapsedWidgets = u
visible={!collapsedWidgets.includes(widget.props.name)}
widget={widget}
initialSize={widget.props.height}
splitterVisible={!!childArray.slice(index + 1).find((x) => x && !collapsedWidgets.includes(x.props.name))}
splitterVisible={!!childArray.slice(index + 1).find(x => x && !collapsedWidgets.includes(x.props.name))}
/>
</React.Fragment>
);

6
packages/web/src/widgets/WidgetIconPanel.js
View File

@@ -6,14 +6,14 @@ import { FontIcon } from '../icons';
import useTheme from '../theme/useTheme';
const IconWrapper = styled.div`
color: ${(props) => props.theme.widget_font2};
color: ${props => props.theme.widget_font2};
font-size: ${dimensions.widgetMenu.iconFontSize};
height: ${dimensions.widgetMenu.iconSize}px;
display: flex;
align-items: center;
justify-content: center;
${(props) =>
${props =>
// @ts-ignore
props.isSelected &&
`
@@ -25,7 +25,7 @@ const IconWrapper = styled.div`
`}
&:hover {
color: ${(props) => props.theme.widget_font1};
color: ${props => props.theme.widget_font1};
}
`;

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

@@ -21,7 +21,7 @@ export const WidgetsMainContainer = styled.div`
const StyledWidgetsOuterContainer = styled.div`
overflow: hidden;
// width: ${(props) => props.leftPanelWidth}px;
// width: ${props => props.leftPanelWidth}px;
position: relative;
flex-direction: column;
display: flex;
@@ -47,7 +47,7 @@ export const StyledWidgetsInnerContainer = styled.div`
flex: 1 1;
overflow-x: auto;
overflow-y: auto;
width: ${(props) => props.leftPanelWidth}px;
width: ${props => props.leftPanelWidth}px;
`;
export function WidgetsInnerContainer({ children }) {
@@ -64,11 +64,11 @@ const StyledWidgetTitle = styled.div`
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: ${(props) => props.theme.title_background};
background-color: ${props => props.theme.title_background};
&:hover {
background-color: ${(props) => props.theme.title_background2};
background-color: ${props => props.theme.title_background2};
}
border: 1px solid ${(props) => props.theme.border};
border: 1px solid ${props => props.theme.border};
`;
export function WidgetTitle({ children, inputRef = undefined, onClick = undefined }) {