mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
Alexeyanddariamarutkina
64040bc3a3
* CB-3372 feat: codemirror6 autocomplete * CB-3372 feat: autocomplete icons * CB-3371 feat: sql editor syntax highlight * CB-3371 fix: syntax highlight blinking * CB-3371 fix: editor extensions state * CB-3372 chore: code cleanup * CB-3372 fix: remove useSqlDIalectAutocompletion * CB-3372 fix: add useSqlDIalectAutocompletion * CB-3372 feat: experimental context menu * CB-3372 feat: use new sql editor * CB-3372 chore: remove sql script parser * CB-3372 fix: rounded menu * CB-3372 fix: event preventDefault on dialog * CB-3372 fix: context menu styles * CB-3372 feat: remove old codemirror * CB-3372 fix: numbers completion & extensions caching * CB-3372 fix: table display * CB-3372 fix: decrease sql editor font size * CB-3372 fix: copy in readonly mode & autocompletion in safari on MacOS * CB-3372 fix: value panel styles * CB-3372 fix: menu bar styles * CB-3372 fix: menu bar and inline editor styles * CB-3372 fix: menu and inline editor styles * CB-3372 chore: update bundle --------- Co-authored-by: dariamarutkina <125263541+dariamarutkina@users.noreply.github.com>
84 lines
1.6 KiB
TypeScript
84 lines
1.6 KiB
TypeScript
/*
|
|
* CloudBeaver - Cloud Database Manager
|
|
* Copyright (C) 2020-2023 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 React from 'react';
|
|
import styled, { css } from 'reshadow';
|
|
|
|
import type { ComponentStyle } from '@cloudbeaver/core-theming';
|
|
|
|
import { Icon } from './Icon';
|
|
import { useStyles } from './useStyles';
|
|
|
|
const style = css`
|
|
timer {
|
|
position: relative;
|
|
width: 16px;
|
|
height: 16px;
|
|
overflow: hidden;
|
|
|
|
& > Icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
& state {
|
|
opacity: 0;
|
|
|
|
& > Icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
}
|
|
state, interval {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
width: 16px;
|
|
height: 16px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
timer:hover {
|
|
& state {
|
|
opacity: 1;
|
|
}
|
|
& interval {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
interval {
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
line-height: normal;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
`;
|
|
|
|
interface Props {
|
|
state: 'play' | 'stop';
|
|
interval: number;
|
|
styles?: ComponentStyle;
|
|
}
|
|
|
|
export const TimerIcon: React.FC<Props & React.ButtonHTMLAttributes<HTMLDivElement>> = function TimerIcon({
|
|
state,
|
|
interval,
|
|
styles,
|
|
...rest
|
|
}) {
|
|
return styled(style, useStyles(styles))(
|
|
<timer {...rest}>
|
|
<Icon name='/icons/timer_m.svg#root' viewBox="0 0 24 24" />
|
|
<state><Icon name={`/icons/timer-${state}_m.svg#root`} viewBox="0 0 12 12" /></state>
|
|
<interval>{interval}</interval>
|
|
</timer>
|
|
);
|
|
}; |