Merge pull request #1619 from alibaba/xflow-doc

feat:demo增加最佳实践

docs/xflow/best-practices.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title: '最佳实践'
+mobile: false
+group: 
+  title: 最佳实践
+  order: 1
+---
+
+# 在项目中使用
+
+
+<code src="./demo/best/basic/index.tsx"></code>
+
+
+

docs/xflow/demo/best/basic/TextEllipsis/index.less

@@ -0,0 +1,13 @@
+.text-ellipsis {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.paragraph-ellipsis {
+  display: block;
+  width: 100%;
+  word-break: break-all;
+}

docs/xflow/demo/best/basic/TextEllipsis/index.tsx

@@ -0,0 +1,101 @@
+import { Tooltip, TooltipProps } from 'antd';
+import React, { FC, memo, useEffect, useState } from 'react';
+import './index.less';
+
+interface ITextEllipsisProps {
+  text: string;
+  style?: object;
+  className?: string;
+  toolTipProps?: TooltipProps;
+  type?: 'text' | 'paragraph';
+  rows?: number;
+}
+const TextEllipsis: FC<ITextEllipsisProps> = ({
+  text,
+  style,
+  toolTipProps,
+  type = 'text',
+  rows = 1,
+  className,
+}) => {
+  const typographyRef = React.useRef<HTMLElement>(null);
+  const [isEllipse, setIsEllipse] = useState(false);
+
+  const component =
+    type === 'paragraph' ? (
+      <span
+        ref={typographyRef}
+        className={`paragraph-ellipsis ${className}`}
+        style={{
+          ...style,
+          display: '-webkit-box',
+          overflow: 'hidden',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: rows,
+        }}
+      >
+        {text}
+      </span>
+    ) : (
+      <span
+        ref={typographyRef}
+        className={`text-ellipsis ${className}`}
+        style={style}
+      >
+        {text}
+      </span>
+    );
+
+  useEffect(() => {
+    if (text) {
+      if (type === 'paragraph') {
+        const { offsetHeight, scrollHeight, clientHeight } =
+          typographyRef.current;
+        setIsEllipse(scrollHeight > clientHeight);
+      } else {
+        const isEllipse = isEleEllipsis(typographyRef?.current);
+        setIsEllipse(isEllipse);
+      }
+    }
+  }, [text]);
+
+  const isEleEllipsis = (ele: HTMLElement): boolean => {
+    const childDiv = document.createElement('em');
+    ele.appendChild(childDiv);
+
+    const rect = ele.getBoundingClientRect();
+    const childRect = childDiv.getBoundingClientRect();
+
+    ele.removeChild(childDiv);
+
+    return (
+      rect.left > childRect.left ||
+      childRect.right > rect.right ||
+      rect.top > childRect.top ||
+      childRect.bottom > rect.bottom
+    );
+  };
+  if (isEllipse) {
+    return (
+      <Tooltip
+        title={text}
+        getPopupContainer={() =>
+          document.getElementById('xflow-container') as HTMLElement
+        }
+        color="#ffff"
+        overlayInnerStyle={{
+          color: '#354052',
+          fontSize: '12px',
+          borderRadius: '8px',
+        }}
+        placement="bottomRight"
+        {...toolTipProps}
+      >
+        {component}
+      </Tooltip>
+    );
+  }
+  return component;
+};
+
+export default memo(TextEllipsis);