fastlion-amis
Version:
一种MIS页面生成工具
78 lines (77 loc) • 6.24 kB
JavaScript
"use strict";
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 MediaShowList = function (props) {
var scrollContentRef = react_1.default.useRef(null);
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;
(0, react_1.useEffect)(function () {
var _a;
var bsInstance = (_a = scrollContentRef.current) === null || _a === void 0 ? void 0 : _a.bsInstance;
if (bsInstance) {
var content = bsInstance.content;
var elementList = Array.from(content.children);
bsInstance.scrollToElement(elementList[currentIndex], 100, true, true);
}
}, [currentIndex, scrollContentRef.current]);
(0, react_1.useEffect)(function () {
var _a;
var bsInstance = (_a = scrollContentRef.current) === null || _a === void 0 ? void 0 : _a.bsInstance;
if (bsInstance)
bsInstance.refresh();
}, [unionSelecting]);
var handleScroll = function (type) {
var _a, _b;
var _c = scrollContentRef.current, scrollLeft = _c.scrollLeft, scrollWidth = _c.scrollWidth, clientWidth = _c.clientWidth;
if (type === 'left' && scrollLeft > 0) {
(_a = scrollContentRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
left: Math.max(scrollLeft - 200, 0),
behavior: 'smooth'
});
}
if (type === 'right' && scrollWidth - clientWidth > scrollLeft) {
(_b = scrollContentRef.current) === null || _b === void 0 ? void 0 : _b.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]);
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(react_1.default.Fragment, null,
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'), onClick: function () { return handleScroll('left'); } },
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: "imgList ul" }, mediaList.map(function (mediaItem, mediaIndex) {
var isImg = !mediaItem.isNotImg;
return (!unionSelecting || isImg) ? react_1.default.createElement("div", { className: (0, utils_1.classNames)("imgWrapper", "li", (!unionSelecting && mediaIndex === currentIndex) && "imgWrapper_selected", (unionSelecting && (selectList === null || selectList === void 0 ? void 0 : selectList.includes(mediaIndex))) && "imgWrapper_selected"), onClick: function (e) { handleMediaListSelect(mediaIndex); }, key: mediaIndex },
react_1.default.createElement("img", { src: mediaItem.src }),
unionSelecting && (selectList === null || selectList === void 0 ? void 0 : selectList.includes(mediaIndex)) &&
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'), onClick: function () { return handleScroll('right'); } },
react_1.default.createElement("i", { className: "fa fa-chevron-right" }))),
unionSelecting &&
react_1.default.createElement("div", { className: "unionImgHandle" },
react_1.default.createElement("div", { className: "tip" }, "\u6700\u591A\u53EF\u900920\u5F20\u8FDB\u884C\u5E76\u56FE"),
react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: { marginBottom: 4 } },
react_1.default.createElement(button_1.default, { size: 'small', onClick: handleSelectAll }, "\u5168\u9009"),
react_1.default.createElement(button_1.default, { size: 'small', type: 'primary', style: { marginLeft: 12 }, onClick: handleSelectReverse }, "\u53CD\u9009")),
react_1.default.createElement("div", null,
react_1.default.createElement(button_1.default, { size: 'small', onClick: function () { handleUnionSelecting(false); } }, "\u53D6\u6D88"),
react_1.default.createElement(button_1.default, { size: 'small', onClick: function () { handleUnionImgShow(true); }, type: 'primary', style: { marginLeft: 12 } }, "\u786E\u5B9A"))))));
};
exports.default = MediaShowList;
//# sourceMappingURL=./components/Lion/MediaShowList.js.map