shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: inline setting input fields with buttons

Browse Source
This commit is contained in:
Henry
2025-02-01 11:51:21 +00:00
parent e321aa2f5d
commit 2882a3da2a
4 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
View File

@@ -64,19 +64,21 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
}; };
return ( return (
<> <div className="flex gap-2">
<div className="mb-4 flex max-w-[350px] items-center gap-2"> <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input {...register("name")} errorMessage={errors.name?.message} /> <Input {...register("name")} errorMessage={errors.name?.message} />
</div> </div>
<Button <div>
onClick={handleSubmit(onSubmit)} <Button
variant="primary" onClick={handleSubmit(onSubmit)}
disabled={!isDirty || updateDisplayName.isPending} variant="primary"
isLoading={updateDisplayName.isPending} disabled={!isDirty || updateDisplayName.isPending}
> isLoading={updateDisplayName.isPending}
Update >
</Button> Update
</> </Button>
</div>
</div>
); );
}; };

24
apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
View File

@@ -71,22 +71,24 @@ const UpdateWorkspaceDescriptionForm = ({
}; };
return ( return (
<> <div className="flex gap-2">
<div className="mb-4 flex max-w-[350px] items-center gap-2"> <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input <Input
{...register("description")} {...register("description")}
errorMessage={errors.description?.message} errorMessage={errors.description?.message}
/> />
</div> </div>
<Button <div>
onClick={handleSubmit(onSubmit)} <Button
variant="primary" onClick={handleSubmit(onSubmit)}
disabled={!isDirty || updateWorkspaceDescription.isPending} variant="primary"
isLoading={updateWorkspaceDescription.isPending} disabled={!isDirty || updateWorkspaceDescription.isPending}
> isLoading={updateWorkspaceDescription.isPending}
Update >
</Button> Update
</> </Button>
</div>
</div>
); );
}; };

24
apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
View File

@@ -67,19 +67,21 @@ const UpdateWorkspaceNameForm = ({
}; };
return ( return (
<> <div className="flex gap-2">
<div className="mb-4 flex max-w-[350px] items-center gap-2"> <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input {...register("name")} errorMessage={errors.name?.message} /> <Input {...register("name")} errorMessage={errors.name?.message} />
</div> </div>
<Button <div>
onClick={handleSubmit(onSubmit)} <Button
variant="primary" onClick={handleSubmit(onSubmit)}
disabled={!isDirty || updateWorkspaceName.isPending} variant="primary"
isLoading={updateWorkspaceName.isPending} disabled={!isDirty || updateWorkspaceName.isPending}
> isLoading={updateWorkspaceName.isPending}
Update >
</Button> Update
</> </Button>
</div>
</div>
); );
}; };

36
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -102,8 +102,8 @@ const UpdateWorkspaceUrlForm = ({
}; };
return ( return (
<> <div className="flex gap-2">
<div className="mb-4 flex max-w-[350px] items-center gap-2"> <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input <Input
{...register("slug")} {...register("slug")}
className={`${ className={`${
@@ -129,21 +129,23 @@ const UpdateWorkspaceUrlForm = ({
} }
/> />
</div> </div>
<Button <div>
onClick={handleSubmit(onSubmit)} <Button
variant="primary" onClick={handleSubmit(onSubmit)}
disabled={ variant="primary"
!isDirty || disabled={
updateWorkspaceSlug.isPending || !isDirty ||
checkWorkspaceSlugAvailability.isPending || updateWorkspaceSlug.isPending ||
isWorkspaceSlugAvailable?.isAvailable === false || checkWorkspaceSlugAvailability.isPending ||
isTyping isWorkspaceSlugAvailable?.isAvailable === false ||
} isTyping
isLoading={updateWorkspaceSlug.isPending} }
> isLoading={updateWorkspaceSlug.isPending}
Update >
</Button> Update
</> </Button>
</div>
</div>
); );
}; };