Просмотр исходного кода

fix(ui): show 'Copied' tooltip instantly when copy button clicked

David Hill 4 недель назад
Родитель
Сommit
3d956c5f7e
2 измененных файлов с 11 добавлено и 2 удалено
  1. 1 0
      packages/ui/src/components/text-field.tsx
  2. 10 2
      packages/ui/src/components/tooltip.tsx

+ 1 - 0
packages/ui/src/components/text-field.tsx

@@ -96,6 +96,7 @@ export function TextField(props: TextFieldProps) {
             value={copied() ? i18n.t("ui.textField.copied") : i18n.t("ui.textField.copyLink")}
             value={copied() ? i18n.t("ui.textField.copied") : i18n.t("ui.textField.copyLink")}
             placement="top"
             placement="top"
             gutter={4}
             gutter={4}
+            forceOpen={copied()}
           >
           >
             <IconButton
             <IconButton
               type="button"
               type="button"

+ 10 - 2
packages/ui/src/components/tooltip.tsx

@@ -8,6 +8,7 @@ export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
   contentClass?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   inactive?: boolean
+  forceOpen?: boolean
 }
 }
 
 
 export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
 export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
@@ -32,7 +33,14 @@ export function TooltipKeybind(props: TooltipKeybindProps) {
 
 
 export function Tooltip(props: TooltipProps) {
 export function Tooltip(props: TooltipProps) {
   const [open, setOpen] = createSignal(false)
   const [open, setOpen] = createSignal(false)
-  const [local, others] = splitProps(props, ["children", "class", "contentClass", "contentStyle", "inactive"])
+  const [local, others] = splitProps(props, [
+    "children",
+    "class",
+    "contentClass",
+    "contentStyle",
+    "inactive",
+    "forceOpen",
+  ])
 
 
   const c = children(() => local.children)
   const c = children(() => local.children)
 
 
@@ -55,7 +63,7 @@ export function Tooltip(props: TooltipProps) {
     <Switch>
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
       <Match when={true}>
-        <KobalteTooltip forceMount gutter={4} {...others} open={open()} onOpenChange={setOpen}>
+        <KobalteTooltip forceMount gutter={4} {...others} open={local.forceOpen || open()} onOpenChange={setOpen}>
           <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
           <KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger" class={local.class}>
             {c()}
             {c()}
           </KobalteTooltip.Trigger>
           </KobalteTooltip.Trigger>