fix: copy button do not work
This commit is contained in:
@@ -1,8 +1,7 @@
|
|||||||
import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
|
import { CheckCircleFilled, CopyOutlined } from '@ant-design/icons';
|
||||||
import { useIntl } from '@umijs/max';
|
import { useIntl } from '@umijs/max';
|
||||||
import { Button, Tooltip, message } from 'antd';
|
import { Typography } from 'antd';
|
||||||
import ClipboardJS from 'clipboard';
|
import React, { useMemo } from 'react';
|
||||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
||||||
|
|
||||||
type CopyButtonProps = {
|
type CopyButtonProps = {
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
@@ -40,65 +39,32 @@ const CopyButton: React.FC<CopyButtonProps> = ({
|
|||||||
size = 'middle'
|
size = 'middle'
|
||||||
}) => {
|
}) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [copied, setCopied] = useState(false);
|
|
||||||
const buttonRef = useRef(null);
|
|
||||||
const clipboardRef = useRef<any>(null);
|
|
||||||
|
|
||||||
const initClipboard = () => {
|
const tooltips = useMemo(() => {
|
||||||
if (buttonRef.current) {
|
return [
|
||||||
clipboardRef.current = new ClipboardJS(buttonRef.current);
|
intl.formatMessage({ id: 'common.button.copy' }),
|
||||||
clipboardRef.current.on('success', () => {
|
intl.formatMessage({ id: 'common.button.copied' })
|
||||||
setCopied(true);
|
];
|
||||||
setTimeout(() => {
|
}, [intl]);
|
||||||
setCopied(false);
|
|
||||||
}, 3000);
|
|
||||||
});
|
|
||||||
|
|
||||||
clipboardRef.current.on('error', (e: any) => {
|
|
||||||
message.error(intl.formatMessage({ id: 'common.copy.fail' }) as string);
|
|
||||||
e.clearSelection();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const tipTitle = useMemo(() => {
|
|
||||||
if (copied) {
|
|
||||||
return intl.formatMessage({ id: 'common.button.copied' });
|
|
||||||
}
|
|
||||||
return tips ?? intl.formatMessage({ id: 'common.button.copy' });
|
|
||||||
}, [copied, intl, tips]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
initClipboard();
|
|
||||||
return () => {
|
|
||||||
clipboardRef.current?.destroy();
|
|
||||||
};
|
|
||||||
}, [buttonRef]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip title={tipTitle} placement={placement}>
|
<Typography.Text
|
||||||
<Button
|
style={{ ...btnStyle }}
|
||||||
className="copy-button"
|
disabled={!!disabled}
|
||||||
ref={buttonRef}
|
copyable={{
|
||||||
type={type}
|
text: text,
|
||||||
shape={shape}
|
tooltips: tooltips,
|
||||||
size={size}
|
icon: [
|
||||||
disabled={!!disabled}
|
<CopyOutlined style={{ fontSize: fontSize, ...style }} key="copy" />,
|
||||||
data-clipboard-text={text}
|
<CheckCircleFilled
|
||||||
style={{ ...btnStyle }}
|
style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
|
||||||
icon={
|
key="check"
|
||||||
copied ? (
|
/>
|
||||||
<CheckCircleFilled
|
]
|
||||||
style={{ color: 'var(--ant-color-success)', fontSize: fontSize }}
|
}}
|
||||||
/>
|
>
|
||||||
) : (
|
{children}
|
||||||
<CopyOutlined style={{ fontSize: fontSize, ...style }} />
|
</Typography.Text>
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -21,7 +21,12 @@ export function useQueryDataList<ListItem, Params = any>(option: {
|
|||||||
getLabel?: (item: ListItem) => string;
|
getLabel?: (item: ListItem) => string;
|
||||||
getValue?: (item: ListItem) => any;
|
getValue?: (item: ListItem) => any;
|
||||||
errorMsg?: string;
|
errorMsg?: string;
|
||||||
}) {
|
}): {
|
||||||
|
loading: boolean;
|
||||||
|
dataList: Array<ListItem & { label: string; value: any }>;
|
||||||
|
cancelRequest: () => void;
|
||||||
|
fetchData: (params: Params, extra?: any) => Promise<ListItem[]>;
|
||||||
|
} {
|
||||||
const { key, fetchList, getLabel, getValue, errorMsg } = option;
|
const { key, fetchList, getLabel, getValue, errorMsg } = option;
|
||||||
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
|
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
|
||||||
const [dataList, setDataList] = useState<
|
const [dataList, setDataList] = useState<
|
||||||
@@ -89,7 +94,12 @@ export function useQueryData<Detail, Params = any>(option: {
|
|||||||
fetchDetail: (params: Params, options?: any) => Promise<Detail>;
|
fetchDetail: (params: Params, options?: any) => Promise<Detail>;
|
||||||
getData?: (response: Detail) => any;
|
getData?: (response: Detail) => any;
|
||||||
errorMsg?: string;
|
errorMsg?: string;
|
||||||
}) {
|
}): {
|
||||||
|
loading: boolean;
|
||||||
|
detailData: Detail;
|
||||||
|
cancelRequest: () => void;
|
||||||
|
fetchData: (params: Params, extra?: any) => Promise<Detail>;
|
||||||
|
} {
|
||||||
const { key, fetchDetail, getData, errorMsg, delay } = option;
|
const { key, fetchDetail, getData, errorMsg, delay } = option;
|
||||||
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
|
const axiosTokenRef = useRef<CancelTokenSource | null>(null);
|
||||||
const [detailData, setDetailData] = useState<Detail>({} as Detail);
|
const [detailData, setDetailData] = useState<Detail>({} as Detail);
|
||||||
|
|||||||
@@ -66,6 +66,11 @@ const options: BackendParameter[] = [
|
|||||||
value: '--ssl-certfile',
|
value: '--ssl-certfile',
|
||||||
options: []
|
options: []
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: '--data-parallel-size-local',
|
||||||
|
value: '--data-parallel-size-local',
|
||||||
|
options: []
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: '--enable-ssl-refresh',
|
label: '--enable-ssl-refresh',
|
||||||
value: '--enable-ssl-refresh',
|
value: '--enable-ssl-refresh',
|
||||||
|
|||||||
@@ -194,24 +194,3 @@ export const hotkeyConfigs = [
|
|||||||
},
|
},
|
||||||
{ keys: HotKeys.NEW4, width: 600, source: modelSourceMap.local_path_value }
|
{ keys: HotKeys.NEW4, width: 600, source: modelSourceMap.local_path_value }
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
|
||||||
* hotkeyConfigs.map(({ keys, width, source }) =>
|
|
||||||
useHotkeys(
|
|
||||||
keys.join(','),
|
|
||||||
() => {
|
|
||||||
setOpenDeployModal({
|
|
||||||
show: true,
|
|
||||||
width,
|
|
||||||
source,
|
|
||||||
gpuOptions: gpuDeviceList.current
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{
|
|
||||||
preventDefault: true,
|
|
||||||
enabled: !openAddModal && !openDeployModal.show && !openLogModal
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { useQueryData } from '@/hooks/use-query-data-list';
|
||||||
|
import { SystemConfig } from '@/pages/cluster-management/config/types';
|
||||||
|
import { request } from '@umijs/max';
|
||||||
|
|
||||||
|
export const SYSTEM_CONFIG_API = '/config';
|
||||||
|
|
||||||
|
const useQuerySystemConfig = () => {
|
||||||
|
async function querySystemConfig() {
|
||||||
|
return request<SystemConfig>(`${SYSTEM_CONFIG_API}`, {
|
||||||
|
method: 'GET'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const { detailData, loading, cancelRequest, fetchData } =
|
||||||
|
useQueryData<SystemConfig>({
|
||||||
|
key: 'system-config',
|
||||||
|
fetchDetail: querySystemConfig
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
systemConfig: detailData,
|
||||||
|
loading,
|
||||||
|
cancelRequest,
|
||||||
|
fetchSystemConfig: fetchData
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useQuerySystemConfig;
|
||||||
Reference in New Issue
Block a user