fastlion-amis
Version:
一种MIS页面生成工具
168 lines (167 loc) • 11.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
// 文件浏览列表
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var react_1 = tslib_1.__importStar(require("react"));
var utils_1 = require("../../renderers/Lion/utils/utils");
var antd_1 = require("antd");
var lodash_1 = require("lodash");
var icons_1 = require("@ant-design/icons");
var types_1 = require("../../types");
var icons_2 = require("../icons");
var MediaShowList = function (props) {
var mediaList = props.mediaList, currentIndex = props.currentIndex, unionSelecting = props.unionSelecting, selectList = props.selectList, mediaListShow = props.mediaListShow, unionImgShow = props.unionImgShow, handleUnionSelecting = props.handleUnionSelecting, handleMediaListSelect = props.handleMediaListSelect, handleUnionImgShow = props.handleUnionImgShow, handleSelectAll = props.handleSelectAll, handleSelectReverse = props.handleSelectReverse;
var scrollContentRef = react_1.default.useRef(null);
var _a = (0, react_1.useState)(''), imgSize = _a[0], setImgSize = _a[1];
var _b = (0, react_1.useState)(mediaList), finalImgList = _b[0], setFinalImgList = _b[1];
var _c = (0, react_1.useState)([]), allImgList = _c[0], setAllImgList = _c[1];
var _d = (0, react_1.useState)(0), index = _d[0], setIndex = _d[1];
(0, react_1.useEffect)(function () {
document.body.addEventListener(types_1.ResizeEvent.DIALOGRESIZEENDEVENT, handleCalcImgSize);
return function () {
document.body.removeEventListener(types_1.ResizeEvent.DIALOGRESIZEENDEVENT, handleCalcImgSize);
};
}, []);
// useImperativeHandle(ref, () => ({
// handleToggle
// }));
// useEffect(() => {
// const bsInstance = scrollContentRef.current?.bsInstance;
// if (bsInstance) {
// let content = bsInstance.content;
// let elementList = Array.from(content.children);
// bsInstance.scrollToElement(
// elementList[currentIndex] as HTMLElement,
// 100,
// true,
// true
// );
// }
// }, [currentIndex, scrollContentRef.current]);
// useEffect(() => {
// const bsInstance = scrollContentRef.current?.bsInstance;
// if (bsInstance) bsInstance.refresh();
// }, [unionSelecting]);
// const handleScroll = (type: 'left' | 'right') => {
// const { scrollLeft, scrollWidth, clientWidth } = scrollContentRef.current;
// if (type === 'left' && scrollLeft > 0) {
// scrollContentRef.current?.scrollTo({
// left: Math.max(scrollLeft - 200, 0),
// behavior: 'smooth'
// });
// }
// if (type === 'right' && scrollWidth - clientWidth > scrollLeft) {
// scrollContentRef.current?.scrollTo({
// left: Math.min(scrollLeft + 200, scrollWidth - clientWidth),
// behavior: 'smooth'
// });
// }
// };
var imageList = (0, react_1.useMemo)(function () {
if (unionSelecting) {
return mediaList.filter(function (item) { return !item.isNotImg; });
}
return mediaList;
}, [unionSelecting, mediaList]);
var handleToggle = function (type) {
var moveIndex = type === 'prev' ? -1 : 1;
setIndex(function (index) {
var nextIndex = index + moveIndex;
var finalIndex = nextIndex < 0 || nextIndex > allImgList.length - 1 ? index : nextIndex;
setFinalImgList(function () { return allImgList[finalIndex]; });
return finalIndex;
});
};
var handleCalcImgSize = function () {
var _a, _b;
setIndex(0);
var mediaListWrapper = document.querySelector('.mediaShowListWrapper');
var unionImgHandler = document.querySelector('.unionImgHandle');
// const imgListWrapper = document.querySelector('.imgListWrapper.con-main') as HTMLElement;
// 剩余实际的图片容器空间宽度
var clientWidth = mediaListWrapper.clientWidth - (unionImgHandler ? 208 : 0) - 18 * 2;
var singleSize = 30 + 8;
// 单行能容纳的数量
var ceilCount = Math.ceil(clientWidth / singleSize);
// 实际单行宽度
var realWidth = ceilCount * singleSize;
var floorCount = Math.floor(clientWidth / singleSize);
var allList = (_a = (0, lodash_1.chunk)((0, lodash_1.cloneDeep)(mediaList), floorCount * 2)) !== null && _a !== void 0 ? _a : [];
var newImgList = mediaList.slice(0, floorCount * 2);
/** 如果容器宽度计算出的图片个数 * 初始宽高 >= 容器宽度 则进行赋值small 的className */
if (realWidth >= clientWidth && mediaList.length > floorCount) {
singleSize = 24 + 8;
ceilCount = Math.ceil(clientWidth / singleSize);
realWidth = ceilCount * singleSize;
floorCount = Math.floor(clientWidth / singleSize);
allList = (_b = (0, lodash_1.chunk)((0, lodash_1.cloneDeep)(mediaList), floorCount * 2)) !== null && _b !== void 0 ? _b : [];
newImgList = mediaList.slice(0, floorCount * 2);
setImgSize('small');
}
else {
setImgSize('');
}
setAllImgList(allList);
setFinalImgList(newImgList);
};
var handleImgSelectAll = function () {
var ids = mediaList.map(function (item, index) { return !item.isNotImg ? "" + index : undefined; }).filter(Boolean).map(function (idx) { return Number(idx); });
handleSelectAll(ids);
};
var handleImgSelectReverse = function () {
var ids = mediaList.map(function (item, index) { return !item.isNotImg && !selectList.includes(index) ? "" + index : undefined; }).filter(Boolean).map(function (idx) { return Number(idx); });
handleSelectReverse(ids);
};
(0, react_1.useEffect)(function () {
var _a, _b, _c, _d;
if (allImgList.length > 1) {
var currentMaxIndex = ((_b = (_a = allImgList[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) * (index + 1) - 1;
var perPageLen = (_d = (_c = allImgList[0]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
// 在currentIndex 小于当前长度最小值的index 或大于当前长度最大值的index 才进行换页
if (currentIndex > currentMaxIndex) {
handleToggle('next');
}
else if (currentIndex < (currentMaxIndex - perPageLen + 1)) {
handleToggle('prev');
}
}
}, [currentIndex]);
(0, react_1.useEffect)(function () {
handleCalcImgSize();
}, [unionSelecting]);
return (react_1.default.createElement("div", { className: (0, utils_1.classNames)('mediaShowList', !((mediaListShow || unionSelecting) && !unionImgShow) &&
'mediaShowListWrapper_hidden') }, !mediaList.length || (unionSelecting && !imageList.length) ? (react_1.default.createElement("div", null, "\u7A7A\u7A7A\u5982\u4E5F")) : (react_1.default.createElement("div", { className: (0, utils_1.classNames)('mediaShowListWrapper') },
react_1.default.createElement("div", { className: (0, utils_1.classNames)('mediaShowListContent'
// unionSelecting && "w-50"
) },
react_1.default.createElement("div", { className: (0, utils_1.classNames)('imgList-arrow is-disabled', "" + ((allImgList === null || allImgList === void 0 ? void 0 : allImgList.length) > 1 ? 'show' : '')), onClick: function () { return handleToggle('prev'); } },
react_1.default.createElement("i", { className: "fa fa-chevron-left" })),
react_1.default.createElement("div", { className: "imgListWrapper con-main", ref: scrollContentRef },
react_1.default.createElement("div", { className: (0, utils_1.classNames)('imgList', 'ul', imgSize) }, finalImgList === null || finalImgList === void 0 ? void 0 : finalImgList.map(function (mediaItem, mediaIndex) {
var _a, _b;
var isImg = !mediaItem.isNotImg;
var idx = allImgList.length > 1 ? (((_b = (_a = allImgList[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0)) * index + mediaIndex : mediaIndex;
return !unionSelecting || isImg ? (react_1.default.createElement("div", { className: (0, utils_1.classNames)('imgWrapper', 'li', !unionSelecting &&
idx === currentIndex &&
'imgWrapper_selected', unionSelecting &&
(selectList === null || selectList === void 0 ? void 0 : selectList.includes(idx)) &&
'imgWrapper_selected'), onClick: function (e) {
handleMediaListSelect(idx);
}, key: mediaIndex },
Array.isArray(mediaItem.src) && !isImg ? (react_1.default.createElement(icons_2.Icon, { icon: mediaItem.src[0], color: mediaItem.src[1], symbol: true })) : (react_1.default.createElement("img", { src: mediaItem.src })),
unionSelecting && (selectList === null || selectList === void 0 ? void 0 : selectList.includes(idx)) && (react_1.default.createElement("div", { className: "check-icon" },
react_1.default.createElement("i", { className: "fa fa-check-square" }))))) : null;
}))),
react_1.default.createElement("div", { className: (0, utils_1.classNames)('imgList-arrow is-disabled', "" + ((allImgList === null || allImgList === void 0 ? void 0 : allImgList.length) > 1 ? 'show' : '')), onClick: function () { return handleToggle('next'); } },
react_1.default.createElement("i", { className: "fa fa-chevron-right" }))),
unionSelecting && (react_1.default.createElement("div", { className: "unionImgHandle" },
react_1.default.createElement(antd_1.Tooltip, { title: "\u4E00\u5F20\u5E76\u56FE\u6700\u591A\u652F\u630120\u6761\uFF0C\u8D85\u8FC720\u6761\u5F62\u6210\u65B0\u7684\u5E76\u56FE", placement: "top" },
react_1.default.createElement(icons_1.QuestionCircleOutlined, { className: "item", style: { color: '#666' } })),
react_1.default.createElement(button_1.default, { type: "link", size: "small", className: "item", onClick: handleImgSelectReverse }, " \u53CD\u9009 "),
react_1.default.createElement(button_1.default, { type: "link", size: "small", className: "item", onClick: handleImgSelectAll }, " \u5168\u9009 "),
react_1.default.createElement(button_1.default, { size: "small", className: "item", onClick: function () { handleUnionSelecting(false); } }, " \u53D6\u6D88 "),
react_1.default.createElement(button_1.default, { size: "small", className: "item", onClick: function () { handleUnionImgShow(true); }, type: "primary" }, " \u786E\u5B9A ")))))));
};
exports.default = MediaShowList;
//# sourceMappingURL=./components/Lion/MediaShowList.js.map