Merge pull request #152 from alley-rs/main

0.3.4

biome.json

@@ -14,6 +14,7 @@
       "correctness": {
         "useJsxKeyInIterable": "off"
       },
+      "style": { "noNonNullAssertion": "off" },
       "a11y": { "useKeyWithClickEvents": "off" }
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "alley-components",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "repository": "https://github.com/alley-rs/alley-components",
   "keywords": [
     "solid",

packages/components/typography/text.tsx

@@ -1,8 +1,26 @@
-import { Match, Switch } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  lazy,
+  Match,
+  onCleanup,
+  onMount,
+  Show,
+  Switch,
+} from "solid-js";
 import type { BaseComponentProps } from "~/interface";
 import { addClassNames } from "~/utils";
 import { baseClassName } from ".";
 import "./text.scss";
+import type { TooltipProps } from "../tooltip";
+
+const Tooltip = lazy(() => import("../tooltip"));
+
+interface EllipsisConfig {
+  rows?: number;
+  tooltip?: TooltipProps;
+}
 
 export interface TextProps extends BaseComponentProps<HTMLSpanElement> {
   type?: "secondary" | "success" | "warning" | "danger";
@@ -14,26 +32,76 @@ export interface TextProps extends BaseComponentProps<HTMLSpanElement> {
   delete?: boolean;
   strong?: boolean;
   italic?: boolean;
+  ellipsis?: EllipsisConfig;
 }
 
 const Text = (props: TextProps) => {
-  const classes = () =>
+  const [ref, setRef] = createSignal<HTMLSpanElement | null>(null);
+  const [isEllipsis, setIsEllipsis] = createSignal(false);
+
+  const classes = createMemo(() =>
     addClassNames(
       props.class,
       baseClassName,
       props.type && `${baseClassName}-${props.type}`,
       props.disabled && `${baseClassName}-disabled`,
-      props.code && `${baseClassName}-${props.code}`,
+      props.code && `${baseClassName}-code`,
       props.keyboard && `${baseClassName}-${props.keyboard}`,
       props.underline && `${baseClassName}-${props.underline}`,
       props.delete && `${baseClassName}-${props.delete}`,
       props.strong && `${baseClassName}-${props.strong}`,
       props.italic && `${baseClassName}-${props.italic}`,
-    );
+      props.ellipsis && `${baseClassName}-ellipsis`,
+    ),
+  );
 
-  return (
+  const updateEllipsis = () => {
+    const element = ref();
+    if (props.ellipsis && element) {
+      const lineHeight = Number.parseInt(getComputedStyle(element).lineHeight);
+      const rows = props.ellipsis.rows || 1;
+      const maxHeight = rows * lineHeight;
+
+      if (element.scrollHeight > maxHeight) {
+        element.style.maxHeight = `${maxHeight}px`;
+        element.style.overflow = "hidden";
+        element.style.textOverflow = "ellipsis";
+        element.style.display = "-webkit-box";
+        element.style.webkitBoxOrient = "vertical";
+        element.style.webkitLineClamp = rows.toString();
+        setIsEllipsis(true);
+      } else {
+        element.style.maxHeight = "";
+        element.style.overflow = "";
+        element.style.textOverflow = "";
+        element.style.display = "";
+        element.style.webkitBoxOrient = "";
+        element.style.webkitLineClamp = "";
+        setIsEllipsis(false);
+      }
+    }
+  };
+
+  onMount(() => {
+    const element = ref();
+    if (element) {
+      updateEllipsis();
+
+      const resizeObserver = new ResizeObserver(() => {
+        updateEllipsis();
+      });
+
+      resizeObserver.observe(element);
+
+      onCleanup(() => {
+        resizeObserver.disconnect();
+      });
+    }
+  });
+
+  const TextContent = children(() => (
     <span
-      ref={props.ref}
+      ref={setRef}
       id={props.id}
       class={classes()}
       style={props.style}
@@ -43,32 +111,37 @@ const Text = (props: TextProps) => {
         <Match when={props.mark}>
           <mark>{props.children}</mark>
         </Match>
-
         <Match when={props.code}>
           <code>{props.children}</code>
         </Match>
-
         <Match when={props.keyboard}>
           <kbd>{props.children}</kbd>
         </Match>
-
         <Match when={props.underline}>
           <u>{props.children}</u>
         </Match>
-
         <Match when={props.delete}>
           <del>{props.children}</del>
         </Match>
-
         <Match when={props.strong}>
           <strong>{props.children}</strong>
         </Match>
-
         <Match when={props.italic}>
           <i>{props.children}</i>
         </Match>
       </Switch>
     </span>
+  ));
+
+  return (
+    <Show
+      when={props.ellipsis?.tooltip && isEllipsis()}
+      fallback={<TextContent />}
+    >
+      <Tooltip {...props.ellipsis!.tooltip!}>
+        <TextContent />
+      </Tooltip>
+    </Show>
   );
 };
 

src/components/typographys.tsx

@@ -22,6 +22,27 @@ const Typographys = () => (
     <Text delete>删除线文本</Text>
     <Text strong>加粗文本</Text>
     <Text italic>斜体文本</Text>
+    <Text ellipsis={{ rows: 2 }}>
+      In the process of internal desktop applications development, many
+      different design specs and implementations would be involved, which might
+      cause designers and developers difficulties and duplication and reduce the
+      efficiency of development.
+    </Text>
+    <Text
+      ellipsis={{
+        rows: 2,
+        tooltip: {
+          text: "可以将原文本放到提示文字里",
+          placement: "top",
+          showArrow: true,
+        },
+      }}
+    >
+      In the process of internal desktop applications development, many
+      different design specs and implementations would be involved, which might
+      cause designers and developers difficulties and duplication and reduce the
+      efficiency of development.
+    </Text>
   </Space>
 );