move -webkit-box-orient to js Ellipsis

src/components/Ellipsis/index.js

@@ -6,7 +6,7 @@ import styles from './index.less';
 /* eslint react/no-did-mount-set-state: 0 */
 /* eslint no-param-reassign: 0 */
 
-const isSupportLineClamp = (document.body.style.webkitLineClamp !== undefined);
+const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
 
 const EllipsisText = ({ text, length, tooltip, ...other }) => {
   if (typeof text !== 'string') {
@@ -20,16 +20,24 @@ const EllipsisText = ({ text, length, tooltip, ...other }) => {
   if (length - tail.length <= 0) {
     displayText = '';
   } else {
-    displayText = text.slice(0, (length - tail.length));
+    displayText = text.slice(0, length - tail.length);
   }
 
   if (tooltip) {
-    return <Tooltip title={text}><span>{displayText}{tail}</span></Tooltip>;
+    return (
+      <Tooltip title={text}>
+        <span>
+          {displayText}
+          {tail}
+        </span>
+      </Tooltip>
+    );
   }
 
   return (
     <span {...other}>
-      {displayText}{tail}
+      {displayText}
+      {tail}
     </span>
   );
 };
@@ -38,7 +46,7 @@ export default class Ellipsis extends Component {
   state = {
     text: '',
     targetCount: 0,
-  }
+  };
 
   componentDidMount() {
     if (this.node) {
@@ -81,7 +89,7 @@ export default class Ellipsis extends Component {
         targetCount: count,
       });
     }
-  }
+  };
 
   bisection = (th, m, b, e, text, shadowNode) => {
     const suffix = '...';
@@ -115,94 +123,88 @@ export default class Ellipsis extends Component {
         return this.bisection(th, mid, begin, end, text, shadowNode);
       }
     }
-  }
+  };
 
   handleRoot = (n) => {
     this.root = n;
-  }
+  };
 
   handleContent = (n) => {
     this.content = n;
-  }
+  };
 
   handleNode = (n) => {
     this.node = n;
-  }
+  };
 
   handleShadow = (n) => {
     this.shadow = n;
-  }
+  };
 
   handleShadowChildren = (n) => {
     this.shadowChildren = n;
-  }
+  };
 
   render() {
     const { text, targetCount } = this.state;
-    const {
+    const { children, lines, length, className, tooltip, ...restProps } = this.props;
-      children,
-      lines,
-      length,
-      className,
-      tooltip,
-      ...restProps
-    } = this.props;
 
     const cls = classNames(styles.ellipsis, className, {
-      [styles.lines]: (lines && !isSupportLineClamp),
+      [styles.lines]: lines && !isSupportLineClamp,
-      [styles.lineClamp]: (lines && isSupportLineClamp),
+      [styles.lineClamp]: lines && isSupportLineClamp,
     });
 
     if (!lines && !length) {
-      return (<span className={cls} {...restProps}>{children}</span>);
+      return (
+        <span className={cls} {...restProps}>
+          {children}
+        </span>
+      );
     }
 
     // length
     if (!lines) {
-      return (<EllipsisText className={cls} length={length} text={children || ''} tooltip={tooltip} {...restProps} />);
+      return (
+        <EllipsisText
+          className={cls}
+          length={length}
+          text={children || ''}
+          tooltip={tooltip}
+          {...restProps}
+        />
+      );
     }
 
     const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
 
     // support document.body.style.webkitLineClamp
     if (isSupportLineClamp) {
-      const style = `#${id}{-webkit-line-clamp:${lines};}`;
+      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
       return (
         <div id={id} className={cls} {...restProps}>
           <style>{style}</style>
-          {
+          {tooltip ? <Tooltip title={children}>{children}</Tooltip> : children}
-            tooltip ? (<Tooltip title={children}>{children}</Tooltip>) : children
+        </div>
-          }
+      );
-        </div>);
     }
 
     const childNode = (
       <span ref={this.handleNode}>
-        {
+        {targetCount > 0 && text.substring(0, targetCount)}
-          (targetCount > 0) && text.substring(0, targetCount)
+        {targetCount > 0 && targetCount < text.length && '...'}
-        }
-        {
-          (targetCount > 0) && (targetCount < text.length) && '...'
-        }
       </span>
     );
 
     return (
-      <div
+      <div {...restProps} ref={this.handleRoot} className={cls}>
-        {...restProps}
+        <div ref={this.handleContent}>
-        ref={this.handleRoot}
+          {tooltip ? <Tooltip title={text}>{childNode}</Tooltip> : childNode}
-        className={cls}
+          <div className={styles.shadow} ref={this.handleShadowChildren}>
-      >
+            {children}
-        <div
+          </div>
-          ref={this.handleContent}
+          <div className={styles.shadow} ref={this.handleShadow}>
-        >
+            <span>{text}</span>
-          {
+          </div>
-            tooltip ? (
-              <Tooltip title={text}>{childNode}</Tooltip>
-            ) : childNode
-          }
-          <div className={styles.shadow} ref={this.handleShadowChildren}>{children}</div>
-          <div className={styles.shadow} ref={this.handleShadow}><span>{text}</span></div>
         </div>
       </div>
     );

src/components/Ellipsis/index.less

@@ -21,5 +21,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-box-orient: vertical;
 }