diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts index a7673c8d3c0a25841cefb1c08a134db98b5be73a..9fd49f17e0e59bdc79b7475637a62635d0bf7de1 100644 --- a/src/components/Ellipsis/index.d.ts +++ b/src/components/Ellipsis/index.d.ts @@ -5,7 +5,7 @@ export interface IEllipsisProps { lines?: number; style?: React.CSSProperties; className?: string; - caculateShowLength?: boolean; + fullWidthRecognition?: boolean; } export default class Ellipsis extends React.Component {} diff --git a/src/components/Ellipsis/index.en-US.md b/src/components/Ellipsis/index.en-US.md index 2f34cc3f53f7fb1a88432f9228508c13b63785e4..15139cc9dc13e1f0db7c50f942d884761ed82fec 100644 --- a/src/components/Ellipsis/index.en-US.md +++ b/src/components/Ellipsis/index.en-US.md @@ -13,4 +13,4 @@ Property | Description | Type | Default tooltip | tooltip for showing the full text content when hovering over | boolean | - 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` -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 | - diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index 69439fadc7bd9144f3d6eaff154a5a3a62376059..4537b367a5db1f0ddc299865898a7caef8e4dc68 100644 --- a/src/components/Ellipsis/index.js +++ b/src/components/Ellipsis/index.js @@ -8,7 +8,7 @@ import styles from './index.less'; const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined; -export const getStrShowLength = (str = '') => { +export const getStrFullLength = (str = '') => { return str.split('').reduce((pre, cur) => { const charCode = cur.charCodeAt(0); if (charCode >= 0 && charCode <= 128) { @@ -19,7 +19,7 @@ export const getStrShowLength = (str = '') => { }, 0); }; -export const cutStrByShowLength = (str = '', maxLength) => { +export const cutStrByFullLength = (str = '', maxLength) => { let showLength = 0; return str.split('').reduce((pre, cur) => { const charCode = cur.charCodeAt(0); @@ -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') { throw new Error('Ellipsis children must be string.'); } - const textLength = caculateShowLength ? getStrShowLength(text) : text.length; + const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length; if (textLength <= length || length < 0) { return {text}; } @@ -49,7 +49,7 @@ const EllipsisText = ({ text, length, tooltip, caculateShowLength, ...other }) = if (length - tail.length <= 0) { displayText = ''; } else { - displayText = caculateShowLength ? cutStrByShowLength(text, length) : text.slice(0, length); + displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length); } if (tooltip) { @@ -182,7 +182,7 @@ export default class Ellipsis extends Component { length, className, tooltip, - caculateShowLength, + fullWidthRecognition, ...restProps } = this.props; @@ -207,7 +207,7 @@ export default class Ellipsis extends Component { length={length} text={children || ''} tooltip={tooltip} - caculateShowLength={caculateShowLength} + fullWidthRecognition={fullWidthRecognition} {...restProps} /> ); diff --git a/src/components/Ellipsis/index.test.js b/src/components/Ellipsis/index.test.js index 18772f022a5e3af32da57168a4faed33a22cb516..ab45463766536dc253df3b12ca59290c25ac7e5d 100644 --- a/src/components/Ellipsis/index.test.js +++ b/src/components/Ellipsis/index.test.js @@ -1,13 +1,13 @@ -import { getStrShowLength, cutStrByShowLength } from './index.js'; +import { getStrFullLength, cutStrByFullLength } from './index.js'; describe('test calculateShowLength', () => { - it('get show length', () => { - expect(getStrShowLength('一二,a,')).toEqual(8); + it('get full length', () => { + expect(getStrFullLength('一二,a,')).toEqual(8); }); - it('cut str by show length', () => { - expect(cutStrByShowLength('一二,a,', 7)).toEqual('一二,a'); + it('cut str by full length', () => { + expect(cutStrByFullLength('一二,a,', 7)).toEqual('一二,a'); }); it('cut str when length small', () => { - expect(cutStrByShowLength('一22三', 5)).toEqual('一22'); + expect(cutStrByFullLength('一22三', 5)).toEqual('一22'); }); }); diff --git a/src/components/Ellipsis/index.zh-CN.md b/src/components/Ellipsis/index.zh-CN.md index 201578783e9fb8291b3594dfc9cee537ecb439fa..f7a70eadd41a8251e76dbe4bcebdb909cdafbc43 100644 --- a/src/components/Ellipsis/index.zh-CN.md +++ b/src/components/Ellipsis/index.zh-CN.md @@ -14,4 +14,4 @@ order: 10 tooltip | 移动到文本展示完整内容的提示 | boolean | - length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | - lines | 在按照行数截取下最大的行数,超过则截取省略 | number | `1` -caculateShowLength | 是否将全角字符的长度视为2来计算字符串长度 | boolean | - +fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | -