antd-mobile/es/components/ellipsis/ellipsis.js

<div align="center">

import React from 'react';
import { withNativeProps } from '../../utils/native-props';
import { useResizeEffect } from '../../utils/use-resize-effect';
import { mergeProps } from '../../utils/with-default-props';
import { withStopPropagation } from '../../utils/with-stop-propagation';
import useMeasure from './useMeasure';
const classPrefix = `adm-ellipsis`;
const defaultProps = {
  direction: 'end',
  rows: 1,
  expandText: '',
  content: '',
  collapseText: '',
  stopPropagationForActionButtons: [],
  onContentClick: () => {},
  defaultExpanded: false
};
export const Ellipsis = p => {
  const props = mergeProps(defaultProps, p);
  const {
    content,
    direction,
    rows,
    expandText,
    collapseText,
    stopPropagationForActionButtons,
    onContentClick,
    defaultExpanded
  } = props;
  // ============================ Refs ============================
  const rootRef = React.useRef(null);
  // ========================== Expanded ==========================
  const [expanded, setExpanded] = React.useState(defaultExpanded);
  const expandNode = expandText ? withStopPropagation(stopPropagationForActionButtons, React.createElement("a", {
    onClick: () => {
      setExpanded(true);
    }
  }, expandText)) : null;
  const collapseNode = collapseText ? withStopPropagation(stopPropagationForActionButtons, React.createElement("a", {
    onClick: () => {
      setExpanded(false);
    }
  }, collapseText)) : null;
  // ========================== Ellipsis ==========================
  const [measureNodes, forceResize] = useMeasure(rootRef, content, rows, direction, expanded, expandNode, collapseNode);
  useResizeEffect(forceResize, rootRef);
  // =========================== Render ===========================
  return withNativeProps(props, React.createElement("div", {
    ref: rootRef,
    className: classPrefix,
    onClick: e => {
      if (e.target === e.currentTarget) {
        onContentClick(e);
      }
    }
  }, measureNodes));
};