taro-manage-layout
Version:
164 lines (163 loc) • 9.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
const react_1 = __importDefault(require("react"));
const taro_1 = __importDefault(require("@tarojs/taro"));
const components_1 = require("@tarojs/components");
const react_2 = require("react");
const store_1 = require("../layout/store");
const checkbox_1 = require("../checkbox");
const Table = ({ headerTitle = [], columns = [], pageInfo = {
current: 1,
pageSize: 20
}, dataSource = [], width, multi = true, request, onMulti = () => { } }) => {
const { menus_visible, setLoading } = (0, store_1.store)();
const [data, setData] = (0, react_2.useState)([]);
const [current, setCurrent] = (0, react_2.useState)((pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current) || 1);
const [realTotal, setRealTotal] = (0, react_2.useState)(1);
const [renderPageSizes, setRenderPageSizes] = (0, react_2.useState)([]);
const [multis, setMultis] = (0, react_2.useState)([]);
function countPageSizes(dataSource, current) {
const length = dataSource.length;
if (length < 5)
return dataSource;
const currentIndex = dataSource.indexOf(current);
if (currentIndex === -1)
return [];
let startIndex = Math.max(0, currentIndex - 2);
let endIndex = startIndex + 5;
if (endIndex > length) {
startIndex = Math.max(0, length - 5);
endIndex = length;
}
endIndex = Math.min(startIndex + 5, length);
return dataSource.slice(startIndex, endIndex);
}
async function algorithm() {
var _a, _b;
const boxWidth = (width || 0) - parseFloat(taro_1.default.pxTransform(20));
setLoading(true);
const notWidthDataSource = columns.filter(item => !(item === null || item === void 0 ? void 0 : item.width));
const hasWidthDataSource = columns.filter(item => item === null || item === void 0 ? void 0 : item.width);
let isUseWidth = 0;
for (let i in hasWidthDataSource) {
const item = hasWidthDataSource[i];
isUseWidth = isUseWidth + (typeof item.width === 'number' ? boxWidth - (boxWidth - parseFloat(taro_1.default.pxTransform(item.width))) : ((((_a = (item.width || "")) === null || _a === void 0 ? void 0 : _a.indexOf('%')) > -1) ? (boxWidth * (parseFloat(item.width || "0") / 100)) : parseFloat(item.width || "")));
}
for (let i in columns) {
if (!((_b = columns === null || columns === void 0 ? void 0 : columns[i]) === null || _b === void 0 ? void 0 : _b.width)) {
columns[i].width = (boxWidth - isUseWidth) / notWidthDataSource.length;
}
}
let tempKey = [];
for (let i in columns) {
tempKey.push(columns[i].dataIndex);
}
let tempDataSource = [];
for (let i in dataSource) {
const curIndex = parseInt(i);
if ((curIndex < current * pageInfo.pageSize) && (curIndex >= (current - 1) * pageInfo.pageSize)) {
for (let j in tempKey) {
if (!tempDataSource[parseInt(j)]) {
tempDataSource[parseInt(j)] = [columns === null || columns === void 0 ? void 0 : columns[j]];
}
tempDataSource[parseInt(j)].push(dataSource[i]);
}
}
}
setRealTotal(Math.ceil(dataSource.length / pageInfo.pageSize));
setData(tempDataSource);
setLoading(false);
}
async function switchPageQuest() {
if (!request) {
return;
}
setLoading(true);
const data = await request({ current: current, pageSize: pageInfo.pageSize });
setLoading(false);
return data;
}
(0, react_2.useEffect)(() => {
if (multi) {
columns = [{ type: "multi", dataIndex: "", width: taro_1.default.pxTransform(5) }, ...columns];
}
algorithm();
}, [current, menus_visible]);
(0, react_2.useEffect)(() => {
setRenderPageSizes(countPageSizes(new Array(realTotal).fill(``).map((_, index) => (index + 1)), current).map((item) => ({ index: item })));
}, [current, realTotal, menus_visible]);
(0, react_2.useEffect)(() => {
if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.current) {
setCurrent(pageInfo.current);
}
}, [pageInfo.current]);
(0, react_2.useEffect)(() => {
onMulti(multis);
}, [multis]);
(0, react_2.useEffect)(() => {
if (current && request) {
switchPageQuest();
}
}, [current]);
return (react_1.default.createElement(components_1.View, { className: "table-container" },
headerTitle.length > 0 && (react_1.default.createElement(components_1.View, { className: "header-content" }, headerTitle.map(item => {
return item;
}))),
react_1.default.createElement(components_1.View, { className: "table-content" }, data.map((item, index) => {
var _a, _b, _c;
const part = multis.length > 0 ? (multis.length === item.length - 1 ? false : true) : false;
return (react_1.default.createElement(components_1.View, { key: `table-key-${index}-${Math.ceil(Math.random() * 1000)}`, className: "table-item", style: {
width: typeof ((_a = item === null || item === void 0 ? void 0 : item[0]) === null || _a === void 0 ? void 0 : _a.width) === 'number' ? `${(_b = item === null || item === void 0 ? void 0 : item[0]) === null || _b === void 0 ? void 0 : _b.width}px` : (_c = item === null || item === void 0 ? void 0 : item[0]) === null || _c === void 0 ? void 0 : _c.width
} }, item.map((items, indexs) => {
var _a, _b;
const multied = (multis.length === item.length - 1) || multis.filter(item => JSON.stringify(item) === JSON.stringify(items)).length > 0;
return (react_1.default.createElement(components_1.View, { key: `table-key-${index}-${indexs}-${Math.ceil(Math.random() * 1000)}`, className: indexs === 0 ? `table-header` : `table-content` }, ((_a = item === null || item === void 0 ? void 0 : item[0]) === null || _a === void 0 ? void 0 : _a.type) === "multi" ? (react_1.default.createElement(checkbox_1.CheckBox, Object.assign({ checked: multied }, indexs === 0 && {
part
}, { onChange: () => {
if (indexs === 0) {
if (multis.length === item.length - 1) {
setMultis([]);
}
else {
setMultis(item.filter(items => JSON.stringify(items) !== JSON.stringify(item[0])));
}
return;
}
if (!multied) {
setMultis([...multis, items]);
return;
}
else {
let tempMultis = [];
for (let i in multis) {
if (JSON.stringify(items) !== JSON.stringify(multis[i])) {
tempMultis = [...tempMultis, multis[i]];
}
}
setMultis(tempMultis);
}
} }))) : (react_1.default.createElement(components_1.Text, { className: "text" }, (items === null || items === void 0 ? void 0 : items.title) || (items === null || items === void 0 ? void 0 : items[(_b = item === null || item === void 0 ? void 0 : item[0]) === null || _b === void 0 ? void 0 : _b.dataIndex])))));
})));
})),
data.length > 0 && (react_1.default.createElement(components_1.View, { className: "page-info-box" },
renderPageSizes.map(({ index }) => {
return (react_1.default.createElement(components_1.View, { key: `page-size-key-${index}-${Math.ceil(Math.random() * 1000)}`, className: "page-info-item", onClick: () => {
setMultis([]);
setCurrent(index);
} },
react_1.default.createElement(components_1.Text, { className: `page-info-text ${index === current ? `checked` : ``}` }, index)));
}),
renderPageSizes.filter((item) => item.index === realTotal).length === 0 &&
renderPageSizes.filter((item) => item.index === realTotal - 1).length === 0 && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(components_1.Text, { className: "omit-text" }, "..."),
react_1.default.createElement(components_1.View, { className: "page-info-item", onClick: () => {
setMultis([]);
setCurrent(realTotal);
} },
react_1.default.createElement(components_1.Text, { className: "page-info-text" }, realTotal))))))));
};
exports.Table = Table;