@dcp-designable/components
Version:
公共组件及业务组件
101 lines • 4.2 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("react");
require("./index.less");
var dcp_design_react_1 = require("dcp-design-react");
var icons_1 = require("@ant-design/icons");
/**
* 自定义文字展开收起组件
* @param props
* @constructor
*/
function TextExpand(props) {
var content = props.content, _a = props.maxLen, maxLen = _a === void 0 ? 300 : _a, _b = props.expandText, expandText = _b === void 0 ? '展开' : _b, _c = props.collapseText, collapseText = _c === void 0 ? '收起' : _c, _d = props.onExpand, onExpand = _d === void 0 ? function (expanded) { } : _d;
var _e = __read((0, react_1.useState)(null), 2), body = _e[0], setBody = _e[1];
var _f = __read((0, react_1.useState)(false), 2), expanded = _f[0], setExpanded = _f[1];
var _g = __read((0, react_1.useState)(false), 2), showBtn = _g[0], setShowBtn = _g[1];
/**
* 获取截断后的文字
* @param text
*/
var getText = function (text) {
return "".concat((text || '').slice(0, maxLen), "...");
};
/**
* 展开、收起
* @param status
*/
var expandToggle = function (status) {
var text = status ? content : getText(content);
setExpanded(status);
setBody(text);
onExpand(status);
};
/**
* 获取展开收起按钮
* @param status
*/
var getExpandBtn = function () {
return showBtn
? (React.createElement("div", { className: "custom-text-expanded-handler-btn" },
React.createElement(dcp_design_react_1.DcpButton, { type: "link", style: { float: 'right', height: '20px', padding: '2px' }, onClick: function () { return expandToggle(!expanded); }, icon: expanded ? React.createElement(icons_1.CaretUpOutlined, null) : React.createElement(icons_1.CaretDownOutlined, null) }, expanded ? collapseText : expandText)))
: null;
};
(0, react_1.useEffect)(function () {
var contentBody = content || '';
if (contentBody.length > maxLen) {
contentBody = getText(contentBody);
setShowBtn(true);
}
setBody(contentBody);
return function () {
setExpanded(false);
setShowBtn(false);
};
}, [content]);
return (React.createElement("div", { className: "custom-text-expanded-handler" },
React.createElement("span", null, body),
getExpandBtn()));
}
exports.default = TextExpand;
//# sourceMappingURL=TextExpand.js.map