mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-08 15:09:27 +08:00
61f95f78c2
* feat(data-vi): allow to set auto refresh interval for charts * feat(data-vi): allow to add refresh button and set auto refresh interval * fix: build * fix: bug * chore: optimize global auto refresh * chore: remove console.log * fix: remove console log
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
/**
|
|
* This file is part of the NocoBase (R) project.
|
|
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
|
|
* Authors: NocoBase Team.
|
|
*
|
|
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
|
|
* For more information, please refer to: https://www.nocobase.com/agreement.
|
|
*/
|
|
|
|
import { ActionInitializer } from '@nocobase/client';
|
|
import React, { forwardRef, useContext, useEffect } from 'react';
|
|
import { useChartsTranslation } from '../locale';
|
|
import { Dropdown, MenuProps } from 'antd';
|
|
import { DownOutlined, ReloadOutlined } from '@ant-design/icons';
|
|
import { useFieldSchema } from '@formily/react';
|
|
import { GlobalAutoRefreshContext } from '../block/GlobalAutoRefreshProvider';
|
|
|
|
export const BlockRefreshButton: React.FC = forwardRef<HTMLButtonElement | HTMLAnchorElement, any>((props, ref) => {
|
|
const { t } = useChartsTranslation();
|
|
const { autoRefresh, setAutoRefresh } = useContext(GlobalAutoRefreshContext);
|
|
const interval = {
|
|
5: '5s',
|
|
10: '10s',
|
|
30: '30s',
|
|
60: '1m',
|
|
300: '5m',
|
|
900: '15m',
|
|
1800: '30m',
|
|
3600: '1h',
|
|
7200: '2h',
|
|
86400: '1d',
|
|
};
|
|
const items: MenuProps['items'] = Object.entries(interval).map(([key, label]) => ({
|
|
key,
|
|
label,
|
|
onClick: () => setAutoRefresh(+key),
|
|
}));
|
|
return (
|
|
<Dropdown.Button
|
|
{...props}
|
|
menu={{
|
|
items: [
|
|
{
|
|
key: 'off',
|
|
label: t('Off'),
|
|
onClick: () => setAutoRefresh(false),
|
|
},
|
|
...items,
|
|
],
|
|
}}
|
|
icon={<DownOutlined />}
|
|
buttonsRender={([_, rightButton]) => [
|
|
_,
|
|
React.cloneElement(
|
|
rightButton as React.ReactElement<any, string>,
|
|
{ iconPosition: 'end' },
|
|
autoRefresh ? interval[autoRefresh as number] : null,
|
|
),
|
|
]}
|
|
>
|
|
<ReloadOutlined />
|
|
{t('Refresh')}
|
|
{props.children}
|
|
</Dropdown.Button>
|
|
);
|
|
});
|
|
|
|
export const useChartBlockRefreshActionProps = () => {
|
|
const fieldSchema = useFieldSchema();
|
|
const { setAutoRefresh, refreshCharts } = useContext(GlobalAutoRefreshContext);
|
|
useEffect(() => {
|
|
setAutoRefresh(fieldSchema['x-decorator-props']?.autoRefresh);
|
|
return () => {
|
|
setAutoRefresh(false);
|
|
};
|
|
}, [fieldSchema, setAutoRefresh]);
|
|
return {
|
|
onClick: () => {
|
|
refreshCharts?.();
|
|
},
|
|
};
|
|
};
|
|
|
|
export const BlockRefreshActionInitializer = (props) => {
|
|
const schema = {
|
|
'x-component': 'Action',
|
|
'x-use-component-props': 'useChartBlockRefreshActionProps',
|
|
'x-toolbar': 'ActionSchemaToolbar',
|
|
'x-settings': 'chartBlockActionSettings:refresh',
|
|
'x-component-props': {
|
|
component: 'BlockRefreshButton',
|
|
},
|
|
};
|
|
return <ActionInitializer {...props} schema={schema} />;
|
|
};
|