1
1
import React , { useEffect , useMemo , useRef , useState } from "react" ;
2
2
import styled from "styled-components" ;
3
3
4
- const ColumnTypeViewWrapper = styled . div `
5
- div {
6
- overflow: hidden;
7
- white-space: nowrap;
8
- text-overflow: ellipsis;
9
- word-break: keep-all;
10
- }
4
+ const ColumnTypeViewWrapper = styled . div < {
5
+ textOverflow ?: boolean
6
+ } > `
7
+ ${ props => ! props . textOverflow && `
8
+ div {
9
+ overflow: hidden;
10
+ white-space: nowrap;
11
+ text-overflow: ellipsis;
12
+ word-break: keep-all;
13
+ }
14
+ ` }
11
15
` ;
12
16
13
17
const ColumnTypeHoverView = styled . div < {
@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
62
66
return false ;
63
67
}
64
68
65
- export default function ColumnTypeView ( props : { children : React . ReactNode } ) {
69
+ export default function ColumnTypeView ( props : {
70
+ children : React . ReactNode ,
71
+ textOverflow ?: boolean ,
72
+ } ) {
66
73
const wrapperRef = useRef < HTMLDivElement > ( null ) ;
67
74
const hoverViewRef = useRef < HTMLDivElement > ( null ) ;
68
75
const [ isHover , setIsHover ] = useState ( false ) ;
@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
161
168
< >
162
169
< ColumnTypeViewWrapper
163
170
ref = { wrapperRef }
171
+ textOverflow = { props . textOverflow }
164
172
onMouseEnter = { ( ) => {
165
173
delayMouseEnter ( ) ;
166
174
} }
@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
171
179
>
172
180
{ props . children }
173
181
</ ColumnTypeViewWrapper >
174
- { isHover && hasOverflow && wrapperRef . current && (
182
+ { isHover && hasOverflow && wrapperRef . current && ! props . textOverflow && (
175
183
< ColumnTypeHoverView
176
184
ref = { hoverViewRef }
177
185
visible = { adjustedPosition . done }
0 commit comments