opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-16 06:40:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use UIKit button as base for Cloudbeaver button

Browse Source
This commit is contained in:
Andrey Sychev
2025-02-12 21:11:55 +01:00
parent ef3e005c70
commit 62bb1fe9a0
9 changed files with 28 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/Button.tsx
+7 -8
View File
@@ -1,12 +1,13 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import { Button as UIKitButton, type UiKitButtonProps } from '@dbeaver/ui-kit';
import style from './Button.module.css';
import { IconOrImage } from './IconOrImage.js';
@@ -25,7 +26,7 @@ export type ButtonProps = (React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAn
icon?: string;
viewBox?: string;
mod?: ButtonMod;
tag?: 'button' | 'a' | 'div';
render?: UiKitButtonProps['render'];
href?: string;
target?: '_blank' | '_self' | '_parent' | '_top';
loader?: boolean;
@@ -38,7 +39,7 @@ export const Button = observer<ButtonProps>(function Button({
icon,
viewBox,
mod,
tag = 'button',
render,
type = 'button',
disabled = false,
loading,
@@ -78,12 +79,10 @@ export const Button = observer<ButtonProps>(function Button({
disabled = true;
}
const Button = tag;
return (
<Button
role="button"
tabIndex={0}
<UIKitButton
{...rest}
render={render}
type={type}
disabled={disabled}
className={s(
@@ -108,6 +107,6 @@ export const Button = observer<ButtonProps>(function Button({
)}
<span className={s(styles, { buttonLabel: true })}>{children}</span>
<Loader className={s(styles, { loader: true })} small />
</Button>
</UIKitButton>
);
});
webapp/packages/core-blocks/src/FormControls/InputFileTextContent.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -139,7 +139,7 @@ export const InputFileTextContent: InputFileTextContentType = observer(function
{children}
</FieldLabel>
<UploadArea title={tooltip} disabled={disabled} accept={accept} reset onChange={handleChange}>
<Button icon="/icons/import.svg" tag="div" mod={['outlined']} disabled={disabled}>
<Button icon="/icons/import.svg" render={<div />} mod={['outlined']} disabled={disabled}>
{translate('ui_upload_file')}
</Button>
</UploadArea>
webapp/packages/core-blocks/src/FormControls/InputFiles.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -182,7 +182,7 @@ export const InputFiles: InputFilesType = observer(
</FieldLabel>
<div className={s(styles, { inputContainer: true })}>
<UploadArea ref={ref} {...rest} name={name} value={value} required={required} onChange={handleChange}>
<Button icon="/icons/import.svg" tag="div" loading={loading} mod={['outlined']}>
<Button icon="/icons/import.svg" render={<div />} loading={loading} mod={['outlined']}>
{text}
</Button>
</UploadArea>
webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -137,7 +137,7 @@ export const Textarea: TextareaType = observer(function Textarea({
}
}}
>
<Button tag="div" disabled={rest.disabled || rest.readOnly} mod={['outlined']}>
<Button render={<div />} disabled={rest.disabled || rest.readOnly} mod={['outlined']}>
{translate('ui_file')}
</Button>
</UploadArea>
webapp/packages/core-blocks/src/IconButton.tsx
+6 -11
View File
@@ -1,13 +1,13 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import { observer } from 'mobx-react-lite';
import type React from 'react';
import { type ButtonProps, Button as ReakitButton } from 'reakit';
import { type UiKitButtonProps, Button as UIKitButton } from '@dbeaver/ui-kit';
import { Icon } from './Icon.js';
import IconButtonStyles from './IconButton.module.css';
@@ -15,26 +15,21 @@ import { s } from './s.js';
import { StaticImage } from './StaticImage.js';
import { useS } from './useS.js';
interface Props {
tag?: 'button' | 'a' | 'div';
export interface IconButtonProps extends UiKitButtonProps {
name: string;
img?: boolean;
viewBox?: string;
}
export type IconButtonProps = Props & ButtonProps;
export const IconButton: React.FC<IconButtonProps> = observer(function IconButton({ tag, name, img, viewBox, className, ...rest }) {
export const IconButton: React.FC<IconButtonProps> = observer(function IconButton({ name, img, viewBox, className, ...rest }: IconButtonProps) {
const styles = useS(IconButtonStyles);
const Button = tag ?? ReakitButton;
return (
<Button tabIndex={0} {...rest} className={s(styles, { iconButton: true }, className)}>
<UIKitButton {...rest} className={s(styles, { iconButton: true }, className)}>
<div className={s(styles, { iconBox: true })}>
{img && <StaticImage className={s(styles, { staticImage: true })} icon={name} />}
{!img && <Icon className={s(styles, { icon: true })} name={name} viewBox={viewBox} />}
</div>
</Button>
</UIKitButton>
);
});
webapp/packages/core-blocks/src/Menu/MenuBarSmallItem.tsx
+3 -3
View File
@@ -1,18 +1,18 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
import type { ButtonProps } from 'reakit';
import type { UiKitButtonProps } from '@dbeaver/ui-kit';
import { IconButton } from '../IconButton.js';
import { s } from '../s.js';
import { useS } from '../useS.js';
import moduleStyles from './MenuBarSmallItem.module.css';
interface Props extends Omit<ButtonProps, 'style' | 'icon'> {
interface Props extends Omit<UiKitButtonProps, 'style' | 'icon' | 'onClick'> {
icon?: string;
viewBox?: string;
onClick?: React.MouseEventHandler<HTMLDivElement>;
webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSHKeyUploader.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -52,7 +52,7 @@ export const SSHKeyUploader = observer<Props>(function SSHKeyUploader({ state, s
</Textarea>
<GroupItem>
<UploadArea disabled={disabled || readonly} reset onChange={handleKeyUpload}>
<Button tag="div" disabled={disabled || readonly} mod={['outlined']}>
<Button render={<div />} disabled={disabled || readonly} mod={['outlined']}>
{translate('ui_file')}
</Button>
</UploadArea>
webapp/packages/plugin-data-export/src/ExportNotification/ExportNotification.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -59,7 +59,7 @@ export const ExportNotification = observer<Props>(function ExportNotification({
<Button type="button" mod={['outlined']} onClick={state.delete}>
{translate('ui_processing_cancel')}
</Button>
<Button tag="a" href={state.downloadUrl} mod={['unelevated']} download onClick={state.download}>
<Button render={<a />} href={state.downloadUrl} mod={['unelevated']} download onClick={state.download}>
{translate('data_transfer_notification_download')}
</Button>
</>
webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditorTools.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
/*
* CloudBeaver - Cloud Database Manager
* Copyright (C) 2020-2024 DBeaver Corp and others
* Copyright (C) 2020-2025 DBeaver Corp and others
*
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
@@ -80,7 +80,7 @@ export const SqlEditorTools = observer<Props>(function SqlEditorTools({ data, st
reset
onChange={handleScriptUpload}
>
<ActionIconButton tag="div" name="/icons/import.svg" disabled={data.readonly} img />
<ActionIconButton render={<div />} name="/icons/import.svg" disabled={data.readonly} img />
</UploadArea>
)}
</>