Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
pro-blocks
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
pro-blocks
Commits
456d25aa
Commit
456d25aa
authored
Jun 11, 2018
by
twisger
Committed by
陈帅
Jun 12, 2018
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
change api name
parent
5baed891
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
16 additions
and
16 deletions
+16
-16
src/components/Ellipsis/index.d.ts
src/components/Ellipsis/index.d.ts
+1
-1
src/components/Ellipsis/index.en-US.md
src/components/Ellipsis/index.en-US.md
+1
-1
src/components/Ellipsis/index.js
src/components/Ellipsis/index.js
+7
-7
src/components/Ellipsis/index.test.js
src/components/Ellipsis/index.test.js
+6
-6
src/components/Ellipsis/index.zh-CN.md
src/components/Ellipsis/index.zh-CN.md
+1
-1
No files found.
src/components/Ellipsis/index.d.ts
View file @
456d25aa
...
@@ -5,7 +5,7 @@ export interface IEllipsisProps {
...
@@ -5,7 +5,7 @@ export interface IEllipsisProps {
lines
?:
number
;
lines
?:
number
;
style
?:
React
.
CSSProperties
;
style
?:
React
.
CSSProperties
;
className
?:
string
;
className
?:
string
;
caculateShowLength
?:
boolean
;
fullWidthRecognition
?:
boolean
;
}
}
export
default
class
Ellipsis
extends
React
.
Component
<
IEllipsisProps
,
any
>
{}
export
default
class
Ellipsis
extends
React
.
Component
<
IEllipsisProps
,
any
>
{}
src/components/Ellipsis/index.en-US.md
View file @
456d25aa
...
@@ -13,4 +13,4 @@ Property | Description | Type | Default
...
@@ -13,4 +13,4 @@ Property | Description | Type | Default
tooltip | tooltip for showing the full text content when hovering over | boolean | -
tooltip | tooltip for showing the full text content when hovering over | boolean | -
length | maximum number of characters in the text before being truncated | number | -
length | maximum number of characters in the text before being truncated | number | -
lines | maximum number of rows in the text before being truncated | number |
`1`
lines | maximum number of rows in the text before being truncated | number |
`1`
caculateShowLength
| whether consider full-width character length as 2 when calculate string length | boolean | -
fullWidthRecognition
| whether consider full-width character length as 2 when calculate string length | boolean | -
src/components/Ellipsis/index.js
View file @
456d25aa
...
@@ -8,7 +8,7 @@ import styles from './index.less';
...
@@ -8,7 +8,7 @@ import styles from './index.less';
const
isSupportLineClamp
=
document
.
body
.
style
.
webkitLineClamp
!==
undefined
;
const
isSupportLineClamp
=
document
.
body
.
style
.
webkitLineClamp
!==
undefined
;
export
const
getStr
Show
Length
=
(
str
=
''
)
=>
{
export
const
getStr
Full
Length
=
(
str
=
''
)
=>
{
return
str
.
split
(
''
).
reduce
((
pre
,
cur
)
=>
{
return
str
.
split
(
''
).
reduce
((
pre
,
cur
)
=>
{
const
charCode
=
cur
.
charCodeAt
(
0
);
const
charCode
=
cur
.
charCodeAt
(
0
);
if
(
charCode
>=
0
&&
charCode
<=
128
)
{
if
(
charCode
>=
0
&&
charCode
<=
128
)
{
...
@@ -19,7 +19,7 @@ export const getStrShowLength = (str = '') => {
...
@@ -19,7 +19,7 @@ export const getStrShowLength = (str = '') => {
},
0
);
},
0
);
};
};
export
const
cutStrBy
Show
Length
=
(
str
=
''
,
maxLength
)
=>
{
export
const
cutStrBy
Full
Length
=
(
str
=
''
,
maxLength
)
=>
{
let
showLength
=
0
;
let
showLength
=
0
;
return
str
.
split
(
''
).
reduce
((
pre
,
cur
)
=>
{
return
str
.
split
(
''
).
reduce
((
pre
,
cur
)
=>
{
const
charCode
=
cur
.
charCodeAt
(
0
);
const
charCode
=
cur
.
charCodeAt
(
0
);
...
@@ -36,11 +36,11 @@ export const cutStrByShowLength = (str = '', maxLength) => {
...
@@ -36,11 +36,11 @@ export const cutStrByShowLength = (str = '', maxLength) => {
},
''
);
},
''
);
};
};
const
EllipsisText
=
({
text
,
length
,
tooltip
,
caculateShowLength
,
...
other
})
=>
{
const
EllipsisText
=
({
text
,
length
,
tooltip
,
fullWidthRecognition
,
...
other
})
=>
{
if
(
typeof
text
!==
'
string
'
)
{
if
(
typeof
text
!==
'
string
'
)
{
throw
new
Error
(
'
Ellipsis children must be string.
'
);
throw
new
Error
(
'
Ellipsis children must be string.
'
);
}
}
const
textLength
=
caculateShowLength
?
getStrShow
Length
(
text
)
:
text
.
length
;
const
textLength
=
fullWidthRecognition
?
getStrFull
Length
(
text
)
:
text
.
length
;
if
(
textLength
<=
length
||
length
<
0
)
{
if
(
textLength
<=
length
||
length
<
0
)
{
return
<
span
{...
other
}
>
{
text
}
<
/span>
;
return
<
span
{...
other
}
>
{
text
}
<
/span>
;
}
}
...
@@ -49,7 +49,7 @@ const EllipsisText = ({ text, length, tooltip, caculateShowLength, ...other }) =
...
@@ -49,7 +49,7 @@ const EllipsisText = ({ text, length, tooltip, caculateShowLength, ...other }) =
if
(
length
-
tail
.
length
<=
0
)
{
if
(
length
-
tail
.
length
<=
0
)
{
displayText
=
''
;
displayText
=
''
;
}
else
{
}
else
{
displayText
=
caculateShowLength
?
cutStrByShow
Length
(
text
,
length
)
:
text
.
slice
(
0
,
length
);
displayText
=
fullWidthRecognition
?
cutStrByFull
Length
(
text
,
length
)
:
text
.
slice
(
0
,
length
);
}
}
if
(
tooltip
)
{
if
(
tooltip
)
{
...
@@ -182,7 +182,7 @@ export default class Ellipsis extends Component {
...
@@ -182,7 +182,7 @@ export default class Ellipsis extends Component {
length
,
length
,
className
,
className
,
tooltip
,
tooltip
,
caculateShowLength
,
fullWidthRecognition
,
...
restProps
...
restProps
}
=
this
.
props
;
}
=
this
.
props
;
...
@@ -207,7 +207,7 @@ export default class Ellipsis extends Component {
...
@@ -207,7 +207,7 @@ export default class Ellipsis extends Component {
length
=
{
length
}
length
=
{
length
}
text
=
{
children
||
''
}
text
=
{
children
||
''
}
tooltip
=
{
tooltip
}
tooltip
=
{
tooltip
}
caculateShowLength
=
{
caculateShowLength
}
fullWidthRecognition
=
{
fullWidthRecognition
}
{...
restProps
}
{...
restProps
}
/
>
/
>
);
);
...
...
src/components/Ellipsis/index.test.js
View file @
456d25aa
import
{
getStr
ShowLength
,
cutStrByShow
Length
}
from
'
./index.js
'
;
import
{
getStr
FullLength
,
cutStrByFull
Length
}
from
'
./index.js
'
;
describe
(
'
test calculateShowLength
'
,
()
=>
{
describe
(
'
test calculateShowLength
'
,
()
=>
{
it
(
'
get
show
length
'
,
()
=>
{
it
(
'
get
full
length
'
,
()
=>
{
expect
(
getStr
Show
Length
(
'
一二,a,
'
)).
toEqual
(
8
);
expect
(
getStr
Full
Length
(
'
一二,a,
'
)).
toEqual
(
8
);
});
});
it
(
'
cut str by
show
length
'
,
()
=>
{
it
(
'
cut str by
full
length
'
,
()
=>
{
expect
(
cutStrBy
Show
Length
(
'
一二,a,
'
,
7
)).
toEqual
(
'
一二,a
'
);
expect
(
cutStrBy
Full
Length
(
'
一二,a,
'
,
7
)).
toEqual
(
'
一二,a
'
);
});
});
it
(
'
cut str when length small
'
,
()
=>
{
it
(
'
cut str when length small
'
,
()
=>
{
expect
(
cutStrBy
Show
Length
(
'
一22三
'
,
5
)).
toEqual
(
'
一22
'
);
expect
(
cutStrBy
Full
Length
(
'
一22三
'
,
5
)).
toEqual
(
'
一22
'
);
});
});
});
});
src/components/Ellipsis/index.zh-CN.md
View file @
456d25aa
...
@@ -14,4 +14,4 @@ order: 10
...
@@ -14,4 +14,4 @@ order: 10
tooltip | 移动到文本展示完整内容的提示 | boolean | -
tooltip | 移动到文本展示完整内容的提示 | boolean | -
length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | -
length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | -
lines | 在按照行数截取下最大的行数,超过则截取省略 | number |
`1`
lines | 在按照行数截取下最大的行数,超过则截取省略 | number |
`1`
caculateShowLength
| 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
fullWidthRecognition
| 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment