@charcoal-ui/react 5.3.0-beta.2 → 5.4.0

package/src/components/TextEllipsis/helper.ts

@@ -0,0 +1,50 @@
+// https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
+
+import { Children, isValidElement, ReactElement, ReactNode } from 'react'
+
+const hasChildren = (
+  element: ReactNode,
+): element is ReactElement<{ children: ReactNode[] }> =>
+  isValidElement<{ children?: ReactNode[] }>(element) &&
+  Boolean(element.props.children)
+
+export const childToString = (
+  child?: number | string | boolean | {} | null,
+): string => {
+  if (
+    typeof child === 'undefined' ||
+    child === null ||
+    typeof child === 'boolean'
+  ) {
+    return ''
+  }
+
+  if (JSON.stringify(child) === '{}') {
+    return ''
+  }
+
+  return (child as string | number).toString()
+}
+
+export const onlyText = (children: ReactNode): string => {
+  if (!Array.isArray(children) && !isValidElement(children)) {
+    return childToString(children)
+  }
+
+  return Children.toArray(children).reduce(
+    (text: string, child: ReactNode): string => {
+      let newText = ''
+
+      if (isValidElement(child) && hasChildren(child)) {
+        newText = onlyText(child.props.children)
+      } else if (isValidElement(child) && !hasChildren(child)) {
+        newText = ''
+      } else {
+        newText = childToString(child)
+      }
+
+      return text.concat(newText)
+    },
+    '',
+  )
+}

package/src/components/TextEllipsis/index.css

@@ -0,0 +1,20 @@
+.charcoal-text-ellipsis {
+  overflow: hidden;
+  line-height: var(--charcoal-text-ellipsis-line-height);
+  overflow-wrap: break-word;
+}
+
+.charcoal-text-ellipsis[data-line-limit='1'] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.charcoal-text-ellipsis[data-line-limit]:not([data-line-limit='1']) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--charcoal-text-ellipsis-line-limit);
+  max-height: calc(
+    var(--charcoal-text-ellipsis-line-height) *
+      var(--charcoal-text-ellipsis-line-limit)
+  );
+}

package/src/components/TextEllipsis/index.tsx

@@ -0,0 +1,43 @@
+import './index.css'
+
+import { onlyText } from './helper'
+import { useClassNames } from '../../_lib/useClassNames'
+
+export type TextEllipsisProps = {
+  lineHeight: number
+  lineLimit?: number
+} & React.ComponentPropsWithoutRef<'div'>
+
+/**
+ * 複数行のテキストに表示行数制限を設けて`...`で省略する
+ */
+export default function TextEllipsis({
+  lineHeight,
+  lineLimit = 1,
+  children,
+  title,
+  ...props
+}: TextEllipsisProps) {
+  const resolvedTitle = title === undefined ? onlyText(children) : title
+  const finalTitle = resolvedTitle !== '' ? resolvedTitle : undefined
+
+  const classNames = useClassNames('charcoal-text-ellipsis', props.className)
+
+  return (
+    <div
+      {...props}
+      className={classNames}
+      data-line-limit={lineLimit}
+      style={
+        {
+          '--charcoal-text-ellipsis-line-height': `${lineHeight}px`,
+          '--charcoal-text-ellipsis-line-limit': lineLimit,
+          ...props.style,
+        } satisfies React.CSSProperties
+      }
+      title={finalTitle}
+    >
+      {children}
+    </div>
+  )
+}

package/src/index.ts

@@ -79,3 +79,7 @@ export {
   type HintTextProps,
   type HintTextContext,
 } from './components/HintText'
+export {
+  default as UnstableTextEllipsis,
+  type TextEllipsisProps,
+} from './components/TextEllipsis'