✨ ツールチップの追加

traPtitech · Oct 7, 2023 · bd8cccb · bd8cccb
1 parent cdcf19c
commit bd8cccb
Show file tree

Hide file tree

Showing 14 changed files with 481 additions and 140 deletions.
diff --git a/dashboard/src/components/UI/Button.tsx b/dashboard/src/components/UI/Button.tsx
@@ -3,6 +3,7 @@ import { colorVars, textVars } from '/@/theme'
 import { styled } from '@macaron-css/solid'
 import { JSX, ParentComponent, Show, splitProps } from 'solid-js'
 import { tippy as tippyDir } from 'solid-tippy'
+import { ToolTip, TooltipProps } from './ToolTip'
 
 // https://github.com/solidjs/solid/discussions/845
 const tippy = tippyDir
@@ -173,7 +174,7 @@ export interface Props extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean
   hasCheckbox?: boolean
   full?: boolean
-  tooltip?: string
+  tooltip?: TooltipProps
   leftIcon?: JSX.Element
   rightIcon?: JSX.Element
 }
@@ -192,34 +193,31 @@ export const Button: ParentComponent<Props> = (props) => {
   ])
 
   return (
-    <span
-      use:tippy={{
-        props: { content: addedProps.tooltip, maxWidth: 1000 },
-        disabled: !addedProps.tooltip,
-        hidden: true,
-      }}
-      style={{
-        width: addedProps.full ? '100%' : 'auto',
-      }}
-    >
-      <Container
-        color={addedProps.color}
-        size={addedProps.size}
-        data-active={addedProps.active}
-        hasCheckbox={addedProps.hasCheckbox}
-        full={addedProps.full}
-        {...originalButtonProps}
+    <ToolTip {...addedProps.tooltip}>
+      <span // ボタンがdisabledの時もTippy.jsのtooltipが表示されるようにするためのラッパー
+        style={{
+          width: addedProps.full ? '100%' : 'fit-content',
+        }}
       >
-        <Show when={addedProps.leftIcon}>
-          <IconContainer size={addedProps.size}>{addedProps.leftIcon}</IconContainer>
-        </Show>
-        <Text color={addedProps.color} size={addedProps.size}>
-          {addedProps.children}
-        </Text>
-        <Show when={addedProps.rightIcon}>
-          <IconContainer size={addedProps.size}>{addedProps.rightIcon}</IconContainer>
-        </Show>
-      </Container>
-    </span>
+        <Container
+          color={addedProps.color}
+          size={addedProps.size}
+          data-active={addedProps.active}
+          hasCheckbox={addedProps.hasCheckbox}
+          full={addedProps.full}
+          {...originalButtonProps}
+        >
+          <Show when={addedProps.leftIcon}>
+            <IconContainer size={addedProps.size}>{addedProps.leftIcon}</IconContainer>
+          </Show>
+          <Text color={addedProps.color} size={addedProps.size}>
+            {addedProps.children}
+          </Text>
+          <Show when={addedProps.rightIcon}>
+            <IconContainer size={addedProps.size}>{addedProps.rightIcon}</IconContainer>
+          </Show>
+        </Container>
+      </span>
+    </ToolTip>
   )
 }
diff --git a/dashboard/src/components/UI/ToolTip.tsx b/dashboard/src/components/UI/ToolTip.tsx
@@ -0,0 +1,67 @@
+import { styled } from '@macaron-css/solid'
+import { FlowComponent, JSX, children, mergeProps, onMount, splitProps } from 'solid-js'
+import { TippyOptions, tippy } from 'solid-tippy'
+import { Props } from 'tippy.js'
+
+const TooltipContainer = styled('div', {
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  variants: {
+    align: {
+      left: {
+        alignItems: 'flex-start',
+      },
+      center: {
+        alignItems: 'center',
+      },
+    },
+  },
+})
+
+export type TooltipProps = Omit<TippyOptions, 'props'> & {
+  props?: Partial<
+    Omit<Props, 'content'> & {
+      content?: JSX.Element
+    }
+  >
+} & {
+  /**
+   * @default "center"
+   */
+  style?: 'left' | 'center'
+}
+
+export const ToolTip: FlowComponent<TooltipProps> = (props) => {
+  const defaultOptions: TooltipProps = {
+    style: 'center',
+    hidden: true,
+    props: {
+      allowHTML: true,
+      maxWidth: 1000,
+      animation: 'shift-away-subtle',
+    },
+    disabled: props.props?.content === undefined,
+  }
+  const propsWithDefaults = mergeProps(defaultOptions, props)
+  const [addedProps, tippyProps] = splitProps(propsWithDefaults, ['style', 'children'])
+  const c = children(() => props.children)
+
+  onMount(() => {
+    for (const child of c.toArray()) {
+      if (child instanceof Element) {
+        tippy(child, () => ({
+          ...tippyProps,
+          props: {
+            content: (
+              <TooltipContainer align={addedProps.style}>{propsWithDefaults.props?.content}</TooltipContainer>
+            ) as Element,
+          },
+        }))
+      }
+    }
+  })
+
+  return <>{c()}</>
+}
diff --git a/dashboard/src/components/UI/TooltipInfoIcon.tsx b/dashboard/src/components/UI/TooltipInfoIcon.tsx
@@ -0,0 +1,14 @@
+import { colorVars } from '/@/theme'
+import { Component } from 'solid-js'
+import { MaterialSymbols } from './MaterialSymbols'
+import { ToolTip, TooltipProps } from './ToolTip'
+
+export const TooltipInfoIcon: Component<TooltipProps> = (props) => {
+  return (
+    <ToolTip {...props}>
+      <MaterialSymbols opticalSize={20} color={colorVars.semantic.text.link}>
+        help
+      </MaterialSymbols>
+    </ToolTip>
+  )
+}
diff --git a/dashboard/src/components/UI/URLText.tsx b/dashboard/src/components/UI/URLText.tsx
@@ -1,11 +1,8 @@
 import { colorVars, textVars } from '/@/theme'
 import { styled } from '@macaron-css/solid'
 import { Component } from 'solid-js'
-import { tippy as tippyDir } from 'solid-tippy'
 import { MaterialSymbols } from './MaterialSymbols'
-
-// https://github.com/solidjs/solid/discussions/845
-const tippy = tippyDir
+import { ToolTip } from './ToolTip'
 
 const StyledAnchor = styled('a', {
   base: {
@@ -29,19 +26,18 @@ export interface URLTextProps {
 
 export const URLText: Component<URLTextProps> = (props) => {
   return (
-    <div
-      use:tippy={{
-        props: { content: props.href, maxWidth: 1000 },
-        disabled: props.text === props.href,
-        hidden: true,
+    <ToolTip
+      props={{
+        content: props.href,
       }}
+      disabled={props.text === props.href}
     >
       <StyledAnchor href={props.href} target="_blank" rel="noreferrer">
         <ContentContainer>
           {props.text}
           <MaterialSymbols opticalSize={20}>open_in_new</MaterialSymbols>
         </ContentContainer>
       </StyledAnchor>
-    </div>
+    </ToolTip>
   )
 }
diff --git a/dashboard/src/components/templates/AppRow.tsx b/dashboard/src/components/templates/AppRow.tsx
@@ -1,11 +1,12 @@
 import { Application } from '/@/api/neoshowcase/protobuf/gateway_pb'
 import { applicationState, getWebsiteURL } from '/@/libs/application'
-import { DiffHuman, shortSha } from '/@/libs/format'
+import { diffHuman, shortSha } from '/@/libs/format'
 import { colorVars, textVars } from '/@/theme'
 import { styled } from '@macaron-css/solid'
 import { A } from '@solidjs/router'
 import { Component, Show } from 'solid-js'
 import { AppStatusIcon } from '../UI/AppStatusIcon'
+import { ToolTip } from '../UI/ToolTip'
 
 const Container = styled('div', {
   base: {
@@ -95,11 +96,14 @@ export const AppRow: Component<Props> = (props) => {
           <AppStatusIcon state={applicationState(props.app)} />
           <AppName>{props.app.name}</AppName>
           <Show when={props.app.updatedAt}>
-            {(nonNullUpdatedAt) => (
-              <UpdatedAt>
-                <DiffHuman target={nonNullUpdatedAt().toDate()} />
-              </UpdatedAt>
-            )}
+            {(nonNullUpdatedAt) => {
+              const { diff, localeString } = diffHuman(nonNullUpdatedAt().toDate())
+              return (
+                <ToolTip props={{ content: localeString }}>
+                  <UpdatedAt>{diff}</UpdatedAt>
+                </ToolTip>
+              )
+            }}
           </Show>
         </TitleContainer>
         <MetaContainer>