@fle-ui/plus-goods-detail-drawer
Version:
@fle-ui/plus-goods-detail-drawer
97 lines • 4.09 kB
JavaScript
import React, { useMemo, useCallback } from 'react';
/** 获取数量范围显示文本 */
var getNumberRangeText = function getNumberRangeText(index, data, thead, previewMaxNumber) {
var currentItem = data[index];
var nextItem = data[index + 1];
var minNumber = currentItem[thead[0].key];
var maxNumber = (nextItem === null || nextItem === void 0 ? void 0 : nextItem[thead[0].key]) ? nextItem[thead[0].key] - 1 : previewMaxNumber;
if (!minNumber) return '';
if (maxNumber && minNumber < maxNumber) {
return "".concat(minNumber, " - ").concat(maxNumber);
} else if (!maxNumber) {
return "\u2265".concat(minNumber);
} else {
return String(minNumber);
}
};
/** 表头组件 */
var TableHeader = function TableHeader(_ref) {
var thead = _ref.thead,
previewText = _ref.previewText,
showPreview = _ref.showPreview;
return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, thead.map(function (item) {
return /*#__PURE__*/React.createElement("th", {
key: item.key
}, /*#__PURE__*/React.createElement("span", null, item.name));
}), showPreview && /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("span", null, previewText))));
};
/** 表体组件 */
var TableBody = function TableBody(_ref2) {
var data = _ref2.data,
thead = _ref2.thead,
showPreview = _ref2.showPreview,
previewMaxNumber = _ref2.previewMaxNumber;
var tableData = useMemo(function () {
return data.length ? data : [{
minNum: 0,
salePrice: '0.00'
}];
}, [data]);
var renderCell = useCallback(function (item, theadItem) {
return /*#__PURE__*/React.createElement("td", {
key: theadItem.key
}, /*#__PURE__*/React.createElement("div", {
className: "field"
}, item[theadItem.key]));
}, []);
var renderPreviewCell = useCallback(function (item, thead, index) {
var hasValidData = item[thead[0].key] && item[thead[1].key];
if (!hasValidData) return /*#__PURE__*/React.createElement("td", {
key: "preview"
});
var rangeText = getNumberRangeText(index, tableData, thead, previewMaxNumber);
return /*#__PURE__*/React.createElement("td", {
key: "preview"
}, /*#__PURE__*/React.createElement("span", null, "".concat(rangeText).concat(thead[0].unit || '', "\uFF1A").concat(item[thead[1].key]).concat(thead[1].unit || '')));
}, [tableData]);
return /*#__PURE__*/React.createElement("tbody", null, tableData.map(function (item, index) {
return /*#__PURE__*/React.createElement("tr", {
key: index
}, thead.map(function (theadItem) {
return renderCell(item, theadItem);
}), showPreview && renderPreviewCell(item, thead, index));
}));
};
/** 商品分段表格组件 */
var GoodsSectionTable = function GoodsSectionTable(_ref3) {
var header = _ref3.header,
footer = _ref3.footer,
_ref3$data = _ref3.data,
data = _ref3$data === void 0 ? [] : _ref3$data,
_ref3$thead = _ref3.thead,
thead = _ref3$thead === void 0 ? [] : _ref3$thead,
_ref3$previewText = _ref3.previewText,
previewText = _ref3$previewText === void 0 ? '预览' : _ref3$previewText,
_ref3$showPreview = _ref3.showPreview,
showPreview = _ref3$showPreview === void 0 ? true : _ref3$showPreview,
previewMaxNumber = _ref3.previewMaxNumber;
return /*#__PURE__*/React.createElement("div", {
className: "fx__goods-score-table"
}, header && /*#__PURE__*/React.createElement("div", {
className: "fx__goods-score-table-header"
}, header), /*#__PURE__*/React.createElement("table", {
className: "form-table"
}, /*#__PURE__*/React.createElement(TableHeader, {
thead: thead,
previewText: previewText,
showPreview: showPreview
}), /*#__PURE__*/React.createElement(TableBody, {
data: data,
thead: thead,
previewMaxNumber: previewMaxNumber,
showPreview: showPreview
})), footer && /*#__PURE__*/React.createElement("div", {
className: "fx__goods-score-table-footer"
}, footer));
};
export default /*#__PURE__*/React.memo(GoodsSectionTable);