Commit 456d25aa authored by twisger's avatar twisger Committed by 陈帅

change api name

parent 5baed891
...@@ -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> {}
...@@ -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 | -
...@@ -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 getStrShowLength = (str = '') => { export const getStrFullLength = (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 cutStrByShowLength = (str = '', maxLength) => { export const cutStrByFullLength = (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 ? getStrShowLength(text) : text.length; const textLength = fullWidthRecognition ? getStrFullLength(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 ? cutStrByShowLength(text, length) : text.slice(0, length); displayText = fullWidthRecognition ? cutStrByFullLength(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}
/> />
); );
......
import { getStrShowLength, cutStrByShowLength } from './index.js'; import { getStrFullLength, cutStrByFullLength } from './index.js';
describe('test calculateShowLength', () => { describe('test calculateShowLength', () => {
it('get show length', () => { it('get full length', () => {
expect(getStrShowLength('一二,a,')).toEqual(8); expect(getStrFullLength('一二,a,')).toEqual(8);
}); });
it('cut str by show length', () => { it('cut str by full length', () => {
expect(cutStrByShowLength('一二,a,', 7)).toEqual('一二,a'); expect(cutStrByFullLength('一二,a,', 7)).toEqual('一二,a');
}); });
it('cut str when length small', () => { it('cut str when length small', () => {
expect(cutStrByShowLength('一22三', 5)).toEqual('一22'); expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
}); });
}); });
...@@ -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 | -
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment