Open Ktchan825 opened 5 years ago
Did you solve it? @Ktchan825
Hi @ke1vin1993, I monkey patch the modules with patch-package
by myself.
here is my patch file
diff --git a/node_modules/react-truncate/lib/Truncate.CommonJS.js b/node_modules/react-truncate/lib/Truncate.CommonJS.js
index dff0cc2..7483c2f 100644
--- a/node_modules/react-truncate/lib/Truncate.CommonJS.js
+++ b/node_modules/react-truncate/lib/Truncate.CommonJS.js
@@ -207,6 +207,7 @@ var Truncate = function (_Component) {
_props = this.props,
numLines = _props.lines,
ellipsis = _props.ellipsis,
+ separator = _props.separator,
trimWhitespace = _props.trimWhitespace,
targetWidth = this.state.targetWidth,
innerText = this.innerText,
@@ -218,7 +219,7 @@ var Truncate = function (_Component) {
var lines = [];
var text = innerText(elements.text);
var textLines = text.split('\n').map(function (line) {
- return line.split(' ');
+ return line.split(separator);
});
var didTruncate = true;
var ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
@@ -234,7 +235,7 @@ var Truncate = function (_Component) {
continue;
}
- var resultLine = textWords.join(' ');
+ var resultLine = textWords.join(separator);
if (measureWidth(resultLine) <= targetWidth) {
if (textLines.length === 1) {
@@ -248,7 +249,7 @@ var Truncate = function (_Component) {
if (line === numLines) {
// Binary search determining the longest possible line inluding truncate string
- var textRest = textWords.join(' ');
+ var textRest = textWords.join(separator);
var lower = 0;
var upper = textRest.length - 1;
@@ -292,7 +293,7 @@ var Truncate = function (_Component) {
while (_lower <= _upper) {
var _middle = Math.floor((_lower + _upper) / 2);
- var _testLine = textWords.slice(0, _middle + 1).join(' ');
+ var _testLine = textWords.slice(0, _middle + 1).join(separator);
if (measureWidth(_testLine) <= targetWidth) {
_lower = _middle + 1;
@@ -308,7 +309,7 @@ var Truncate = function (_Component) {
continue;
}
- resultLine = textWords.slice(0, _lower).join(' ');
+ resultLine = textWords.slice(0, _lower).join(separator);
textLines[0].splice(0, _lower);
}
@@ -352,7 +353,7 @@ var Truncate = function (_Component) {
children = _props2.children,
ellipsis = _props2.ellipsis,
lines = _props2.lines,
- spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines']),
+ spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines', 'separator']),
targetWidth = this.state.targetWidth,
getLines = this.getLines,
renderLine = this.renderLine,
@@ -412,6 +413,7 @@ Truncate.propTypes = {
lines: _propTypes2.default.oneOfType([_propTypes2.default.oneOf([false]), _propTypes2.default.number]),
trimWhitespace: _propTypes2.default.bool,
width: _propTypes2.default.number,
+ separator: _propTypes2.default.string,
onTruncate: _propTypes2.default.func
};
Truncate.defaultProps = {
@@ -419,6 +421,7 @@ Truncate.defaultProps = {
ellipsis: '…',
lines: 1,
trimWhitespace: false,
+ separator: '',
width: 0
};
exports.default = Truncate;
diff --git a/node_modules/react-truncate/lib/Truncate.js b/node_modules/react-truncate/lib/Truncate.js
index d618493..c084cb0 100644
--- a/node_modules/react-truncate/lib/Truncate.js
+++ b/node_modules/react-truncate/lib/Truncate.js
@@ -194,6 +194,7 @@ var Truncate = function (_Component) {
_props = this.props,
numLines = _props.lines,
ellipsis = _props.ellipsis,
+ separator = _props.separator,
trimWhitespace = _props.trimWhitespace,
targetWidth = this.state.targetWidth,
innerText = this.innerText,
@@ -205,7 +206,7 @@ var Truncate = function (_Component) {
var lines = [];
var text = innerText(elements.text);
var textLines = text.split('\n').map(function (line) {
- return line.split(' ');
+ return line.split(separator);
});
var didTruncate = true;
var ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
@@ -221,7 +222,7 @@ var Truncate = function (_Component) {
continue;
}
- var resultLine = textWords.join(' ');
+ var resultLine = textWords.join(separator);
if (measureWidth(resultLine) <= targetWidth) {
if (textLines.length === 1) {
@@ -235,7 +236,7 @@ var Truncate = function (_Component) {
if (line === numLines) {
// Binary search determining the longest possible line inluding truncate string
- var textRest = textWords.join(' ');
+ var textRest = textWords.join(separator);
var lower = 0;
var upper = textRest.length - 1;
@@ -279,7 +280,7 @@ var Truncate = function (_Component) {
while (_lower <= _upper) {
var _middle = Math.floor((_lower + _upper) / 2);
- var _testLine = textWords.slice(0, _middle + 1).join(' ');
+ var _testLine = textWords.slice(0, _middle + 1).join(separator);
if (measureWidth(_testLine) <= targetWidth) {
_lower = _middle + 1;
@@ -295,7 +296,7 @@ var Truncate = function (_Component) {
continue;
}
- resultLine = textWords.slice(0, _lower).join(' ');
+ resultLine = textWords.slice(0, _lower).join(separator);
textLines[0].splice(0, _lower);
}
@@ -339,7 +340,7 @@ var Truncate = function (_Component) {
children = _props2.children,
ellipsis = _props2.ellipsis,
lines = _props2.lines,
- spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines']),
+ spanProps = _objectWithoutProperties(_props2, ['children', 'ellipsis', 'lines', 'separator']),
targetWidth = this.state.targetWidth,
getLines = this.getLines,
renderLine = this.renderLine,
@@ -399,6 +400,7 @@ Truncate.propTypes = {
lines: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number]),
trimWhitespace: PropTypes.bool,
width: PropTypes.number,
+ separator: PropTypes.string,
onTruncate: PropTypes.func
};
Truncate.defaultProps = {
@@ -406,6 +408,7 @@ Truncate.defaultProps = {
ellipsis: '…',
lines: 1,
trimWhitespace: false,
+ separator: '',
width: 0
};
export default Truncate;
Then i use the component like <Truncate separator={lang === "zh" ? "": " "}> {Chinese Text}<Truncate>
This modules doesn't support language that doesn't separate word by space, e.g. Chinese, Japanese