fix(ui): show 'Copied' tooltip instantly when copy button clicked
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user