From d088a34fe298dc83fdd104f8db8762be6760639b Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 7 Jan 2025 12:53:06 +0800 Subject: [PATCH] Feat: Add LoadingButton #4368 (#4384) ### What problem does this PR solve? Feat: Add LoadingButton #4368 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/loading-button.tsx | 75 +++++++++++++++++++ web/src/hooks/knowledge-hooks.ts | 6 +- .../components/knowledge-setting/hooks.ts | 18 ----- .../knowledge-setting/tag-table/index.tsx | 2 - .../tag-table/rename-dialog/index.tsx | 8 +- 5 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 web/src/components/ui/loading-button.tsx diff --git a/web/src/components/ui/loading-button.tsx b/web/src/components/ui/loading-button.tsx new file mode 100644 index 000000000..7bc95247d --- /dev/null +++ b/web/src/components/ui/loading-button.tsx @@ -0,0 +1,75 @@ +// https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/components/ui/loading-button.tsx + +import { cn } from '@/lib/utils'; +import { Slot, Slottable } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { Loader2 } from 'lucide-react'; +import * as React from 'react'; + +const buttonVariants = cva( + 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: + 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', + }, + size: { + default: 'h-10 px-4 py-2', + sm: 'h-9 rounded-md px-3', + lg: 'h-11 rounded-md px-8', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + }, +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; + loading?: boolean; +} + +const LoadingButton = React.forwardRef( + ( + { + className, + loading = false, + children, + disabled, + variant, + size, + asChild = false, + ...props + }, + ref, + ) => { + const Comp = asChild ? Slot : 'button'; + return ( + + {loading && } + {children} + + ); + }, +); +LoadingButton.displayName = 'LoadingButton'; + +export { LoadingButton, buttonVariants }; diff --git a/web/src/hooks/knowledge-hooks.ts b/web/src/hooks/knowledge-hooks.ts index 545cb61c8..32317adce 100644 --- a/web/src/hooks/knowledge-hooks.ts +++ b/web/src/hooks/knowledge-hooks.ts @@ -321,7 +321,7 @@ export const useRenameTag = () => { isPending: loading, mutateAsync, } = useMutation({ - mutationKey: ['deleteTag'], + mutationKey: ['renameTag'], mutationFn: async (params: IRenameTag) => { const { data } = await renameTag(knowledgeBaseId, params); if (data.code === 0) { @@ -337,4 +337,8 @@ export const useRenameTag = () => { return { data, loading, renameTag: mutateAsync }; }; +export const useTagIsRenaming = () => { + return useIsMutating({ mutationKey: ['renameTag'] }) > 0; +}; + //#endregion diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts index 205740d47..1357ddbf5 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts +++ b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts @@ -2,7 +2,6 @@ import { LlmModelType } from '@/constants/knowledge'; import { useSetModalState } from '@/hooks/common-hooks'; import { useFetchKnowledgeBaseConfiguration, - useRenameTag, useUpdateKnowledge, } from '@/hooks/knowledge-hooks'; import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks'; @@ -97,21 +96,6 @@ export const useRenameKnowledgeTag = () => { hideModal: hideTagRenameModal, showModal: showFileRenameModal, } = useSetModalState(); - const { renameTag, loading } = useRenameTag(); - - const onTagRenameOk = useCallback( - async (name: string) => { - const ret = await renameTag({ - fromTag: tag, - toTag: name, - }); - - if (ret === 0) { - hideTagRenameModal(); - } - }, - [renameTag, tag, hideTagRenameModal], - ); const handleShowTagRenameModal = useCallback( (record: string) => { @@ -122,9 +106,7 @@ export const useRenameKnowledgeTag = () => { ); return { - renameLoading: loading, initialName: tag, - onTagRenameOk, tagRenameVisible, hideTagRenameModal, showTagRenameModal: handleShowTagRenameModal, diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx index e23c4c6a4..63082211f 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx @@ -74,7 +74,6 @@ export function TagTable() { showTagRenameModal, hideTagRenameModal, tagRenameVisible, - onTagRenameOk, initialName, } = useRenameKnowledgeTag(); @@ -300,7 +299,6 @@ export function TagTable() { {tagRenameVisible && ( )} diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx index 4473eeca1..b95907f92 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx @@ -1,4 +1,3 @@ -import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, @@ -6,6 +5,8 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog'; +import { LoadingButton } from '@/components/ui/loading-button'; +import { useTagIsRenaming } from '@/hooks/knowledge-hooks'; import { IModalProps } from '@/interfaces/common'; import { TagRenameId } from '@/pages/add-knowledge/constant'; import { useTranslation } from 'react-i18next'; @@ -16,6 +17,7 @@ export function RenameDialog({ initialName, }: IModalProps & { initialName: string }) { const { t } = useTranslation(); + const loading = useTagIsRenaming(); return ( @@ -28,9 +30,9 @@ export function RenameDialog({ hideModal={hideModal} > - +