@krmao/react-basic
Version:
### features
210 lines (209 loc) • 10 kB
JavaScript
"use strict";
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols,ES6CheckImport
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_infinite_scroll_component_1 = (0, tslib_1.__importDefault)(require("react-infinite-scroll-component"));
var prop_types_1 = (0, tslib_1.__importDefault)(require("prop-types"));
/**
* 整体竖向可加载更多的等宽横向瀑布流组件
* @author kr.mao@qq.com
*/
var WaterfallHorizontalEqualWidthComponent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(WaterfallHorizontalEqualWidthComponent, _super);
function WaterfallHorizontalEqualWidthComponent(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.wrapData = function (dataList) {
var _a, _b, _c, _d, _e;
var horizontalMargin = (_a = _this.props.horizontalMargin) !== null && _a !== void 0 ? _a : 0;
var rowMaxWidth = _this.state.rowMaxWidth;
var columns = [];
var row = [];
var rowDefaultHeight = (_b = _this.props.rowDefaultHeight) !== null && _b !== void 0 ? _b : 160;
var rowCurrentTotalWidth = 0;
var _loop_1 = function (i) {
var origin_1 = dataList[i];
if (columns.length >= 1 && _this.props.singleRow === true) {
return "break";
}
var item = (_e = (_d = (_c = _this.props).itemMapping) === null || _d === void 0 ? void 0 : _d.call(_c, origin_1)) !== null && _e !== void 0 ? _e : origin_1;
var itemRealWidth = (item.width / item.height) * rowDefaultHeight;
if (rowCurrentTotalWidth + horizontalMargin + itemRealWidth > rowMaxWidth) {
//region 变高拉宽
var newRowCurrentTotalWidth_1 = 0;
var newRowHeight_1 = -1;
row.forEach(function (rowItem, index) {
var newRealWidth = rowItem.realWidth +
Math.round((rowMaxWidth - rowCurrentTotalWidth) * (rowItem.realWidth / rowCurrentTotalWidth));
newRowCurrentTotalWidth_1 += newRealWidth;
if (index === row.length - 1) {
if (newRowCurrentTotalWidth_1 > rowMaxWidth) {
newRealWidth -= newRowCurrentTotalWidth_1 - rowMaxWidth;
}
else {
newRealWidth += rowMaxWidth - newRowCurrentTotalWidth_1;
}
}
else {
newRowCurrentTotalWidth_1 += horizontalMargin;
}
if (newRowHeight_1 === -1) {
newRowHeight_1 = Math.round((rowItem.realHeight / rowItem.realWidth) * newRealWidth);
}
rowItem.realHeight = newRowHeight_1;
rowItem.realWidth = newRealWidth;
});
//endregion
columns.push(row);
rowCurrentTotalWidth = itemRealWidth;
item.realWidth = itemRealWidth;
item.realHeight = rowDefaultHeight;
row = [item];
}
else {
item.realWidth = itemRealWidth;
item.realHeight = rowDefaultHeight;
row.push((0, tslib_1.__assign)({}, item));
rowCurrentTotalWidth += row.length >= 2 ? horizontalMargin + itemRealWidth : itemRealWidth;
if (i === dataList.length - 1) {
columns.push(row);
}
}
};
for (var i = 0; i < dataList.length; i++) {
var state_1 = _loop_1(i);
if (state_1 === "break")
break;
}
return columns;
};
_this.state = {
rowMaxWidth: (_a = props.rowMaxWidth) !== null && _a !== void 0 ? _a : 1000
};
return _this;
}
WaterfallHorizontalEqualWidthComponent.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g;
return (react_1.default.createElement(react_infinite_scroll_component_1.default, { style: (0, tslib_1.__assign)({ width: this.state.rowMaxWidth, display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start" }, this.props.columnStyle), scrollableTarget: (_a = this.props.scrollableTarget) !== null && _a !== void 0 ? _a : "scrollableTarget", dataLength: this.props.dataList.length, next: this.props.singleRow === true ? null : this.props.fetchMoreData, hasMore: this.props.singleRow === true ? false : this.props.hasMore, loader: (_d = (_c = (_b = this.props).renderLoader) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : (this.props.singleRow === true ? null : (react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "#999",
height: "40px",
width: "100%",
fontSize: "15px"
} }, "正在加载中 . . ."))), endMessage: (_g = (_f = (_e = this.props).renderEndMessage) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : (this.props.singleRow === true ? null : (react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "#999",
height: "40px",
width: "100%",
fontSize: "15px"
} }, "没有更多数据了"))) }, this.wrapData(this.props.dataList).map(function (columnItem, columnItemIndex) {
return (react_1.default.createElement("div", { key: columnItemIndex, style: (0, tslib_1.__assign)({ width: "100%", maxWidth: "100%", minWidth: "100%", display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-start" }, _this.props.rowStyle) }, columnItem.map(function (rowItem, rowItemIndex) {
var _a, _b, _c;
return (react_1.default.createElement("div", { key: rowItemIndex, style: (0, tslib_1.__assign)({ display: "flex", alignItems: "center", justifyContent: "center", marginRight: rowItemIndex === columnItem.length - 1
? 0
: _this.props.horizontalMargin, width: rowItem.realWidth, minWidth: rowItem.realWidth, maxWidth: rowItem.realWidth, height: rowItem.realHeight, maxHeight: rowItem.realHeight, minHeight: rowItem.realHeight }, _this.props.rowItemContainerStyle) }, (_c = (_b = (_a = _this.props).renderRowItem) === null || _b === void 0 ? void 0 : _b.call(_a, rowItem, rowItemIndex, columnItem, columnItemIndex)) !== null && _c !== void 0 ? _c : (react_1.default.createElement("div", { style: {
borderRadius: 5,
opacity: 0.7,
fontSize: 12,
color: "black",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#" + ((Math.random() * 0xffffff) << 0).toString(16),
width: "100%",
height: "100%"
} },
"$",
columnItemIndex,
"-$",
rowItemIndex))));
})));
})));
};
return WaterfallHorizontalEqualWidthComponent;
}(react_1.Component));
exports.default = WaterfallHorizontalEqualWidthComponent;
WaterfallHorizontalEqualWidthComponent.propTypes = {
/**
* 第一页显示数据
*/
dataList: prop_types_1.default.array.isRequired,
/**
* 总体最大显示宽度
*/
rowMaxWidth: prop_types_1.default.number.isRequired,
/**
* 单行默认高度
*/
rowDefaultHeight: prop_types_1.default.number,
/**
* 是否还有更多数据
* isRequired if singleRow is not true
*/
hasMore: prop_types_1.default.bool,
/**
* 请求下一页数据
* isRequired if singleRow is not true
*/
fetchMoreData: prop_types_1.default.func,
/**
* 传入可滚动容器的 id
*/
scrollableTarget: prop_types_1.default.string.isRequired,
/**
* 显示正在加载中的组件
*/
renderLoader: prop_types_1.default.func,
/**
* 显示没有更多数据的组件
*/
renderEndMessage: prop_types_1.default.func,
/**
* 显示具体单个数据的组件
*
* @param rowItem
* @param rowItemIndex
* @param columnItem
* @param columnItemIndex
*/
renderRowItem: prop_types_1.default.func,
/**
* 显示具体单个数据的组件
*
* @param originItem
* @return
* {
* width: originItem.photoInfo[0].width,
* height: originItem.photoInfo[0].height,
* origin: originItem
* }
*/
itemMapping: prop_types_1.default.func,
/**
* 可覆盖每行的样式
*/
rowStyle: prop_types_1.default.any,
/**
* 可覆盖每个item容器的样式
*/
rowItemContainerStyle: prop_types_1.default.any,
/**
* 可覆盖整体样式
*/
columnStyle: prop_types_1.default.any,
/**
* 横向间隔
*/
horizontalMargin: prop_types_1.default.number,
/**
* 只显示一行, 其余数据忽略
*/
singleRow: prop_types_1.default.bool
};