@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
323 lines (319 loc) • 16.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Table = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _taro = require("@tarojs/taro");
var _classnames7 = _interopRequireDefault(require("classnames"));
var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
var _components = require("@tarojs/components");
var _react = _interopRequireWildcard(require("react"));
var _loading = require("../loading");
var _empty = require("../empty");
var _sticky = require("../sticky");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
var _this = void 0;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable @typescript-eslint/ban-ts-comment */
var DEFAULT_COL_WIDTH = 100;
var UNIFY_PADDING = {
padding: '8px'
};
var JC_TA_MAP = {
left: 'flex-start',
center: 'center',
right: 'flex-end'
};
var Table = function Table(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Table),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$columns = _d$props.columns,
pColumns = _d$props$columns === void 0 ? [] : _d$props$columns,
_d$props$dataSource = _d$props.dataSource,
pDataSource = _d$props$dataSource === void 0 ? [] : _d$props$dataSource,
_d$props$rowKey = _d$props.rowKey,
rowKey = _d$props$rowKey === void 0 ? '' : _d$props$rowKey,
_d$props$loading = _d$props.loading,
loading = _d$props$loading === void 0 ? false : _d$props$loading,
_d$props$className = _d$props.className,
className = _d$props$className === void 0 ? '' : _d$props$className,
_d$props$style = _d$props.style,
style = _d$props$style === void 0 ? {} : _d$props$style,
_d$props$titleClassNa = _d$props.titleClassName,
titleClassName = _d$props$titleClassNa === void 0 ? '' : _d$props$titleClassNa,
_d$props$titleStyle = _d$props.titleStyle,
titleStyle = _d$props$titleStyle === void 0 ? {} : _d$props$titleStyle,
_d$props$rowClassName = _d$props.rowClassName,
rowClassName = _d$props$rowClassName === void 0 ? '' : _d$props$rowClassName,
_d$props$rowStyle = _d$props.rowStyle,
rowStyle = _d$props$rowStyle === void 0 ? {} : _d$props$rowStyle,
_d$props$colStyle = _d$props.colStyle,
colStyle = _d$props$colStyle === void 0 ? {} : _d$props$colStyle,
_d$props$colClassName = _d$props.colClassName,
colClassName = _d$props$colClassName === void 0 ? '' : _d$props$colClassName,
_d$props$sortChange = _d$props.sortChange,
sortChange = _d$props$sortChange === void 0 ? function () {} : _d$props$sortChange,
_d$props$scroll = _d$props.scroll,
scroll = _d$props$scroll === void 0 ? {} : _d$props$scroll,
_d$props$placeholder = _d$props.placeholder,
placeholder = _d$props$placeholder === void 0 ? '--' : _d$props$placeholder,
_d$props$scrollViewPr = _d$props.scrollViewProps,
scrollViewProps = _d$props$scrollViewPr === void 0 ? {} : _d$props$scrollViewPr,
_d$props$sticky = _d$props.sticky,
sticky = _d$props$sticky === void 0 ? false : _d$props$sticky;
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
error = _useState4[0],
setError = _useState4[1];
var _useState5 = (0, _react.useState)(pDataSource),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
dataSource = _useState6[0],
setDataSource = _useState6[1];
var _useState7 = (0, _react.useState)(pColumns),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
columns = _useState8[0],
setColumns = _useState8[1];
var _useState9 = (0, _react.useState)(true),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
expansion = _useState10[0],
setExpansion = _useState10[1];
(0, _react.useEffect)(function () {
setDataSource(pDataSource);
}, [pDataSource]);
(0, _react.useEffect)(function () {
if (pColumns.some(function (i) {
return !['number', 'undefined'].includes((0, _typeof2.default)(i['width']));
})) {
console.error('(antmjs/vantui)[table]: columns配置项的width应该设置为number ');
setError(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [columns]);
(0, _useDeepCompareEffect.default)(function () {
setColumns(pColumns);
}, [pColumns]);
// methods
/**
* @description 表头点击事件
* @param item
* @param index
*/
var handleClickTitle = (0, _react.useCallback)(function (item, index) {
if (!item.sort) return;
var array = ['descend', 'ascend', undefined];
sortChange(_objectSpread(_objectSpread({}, item), {}, {
sortOrder: array[(array.indexOf(item.sortOrder) + 1) % array.length]
}));
var temp = (0, _toConsumableArray2.default)(columns);
// 仅支持单个排序触发sortChange请求
var sortItems = temp.filter(function (a) {
return a.sortOrder === 'ascend' || a.sortOrder === 'descend';
});
// @ts-ignore
var curr = array.indexOf(temp[index].sortOrder);
// @ts-ignore
temp[index].sortOrder = array[(curr + 1) % array.length];
sortItems.map(function (b) {
temp.forEach(function (c, ind) {
if (c.dataIndex === b.dataIndex && ind !== index) {
c.sortOrder = undefined;
}
});
});
setColumns(temp);
}, [columns, sortChange]);
/**
* @description 固定列的时候计算偏移量
* @param fixedType
* @param index
*/
var getFixedDistance = (0, _react.useCallback)(function (fixedType, index) {
var result;
if (fixedType === 'left') {
result = columns.reduce(function (prev, cur, i) {
if (i + 1 <= index) {
return prev + (cur.width || DEFAULT_COL_WIDTH);
}
return prev;
}, 0);
} else {
result = columns.reduceRight(function (prev, cur, i) {
if (i - 1 >= index) {
return prev + (cur.width || DEFAULT_COL_WIDTH);
}
return prev;
}, 0);
}
return getSize(result);
}, [columns]);
var wrapWidth = (0, _react.useMemo)(function () {
return columns.reduce(function (prev, cur) {
return prev + (cur.width || DEFAULT_COL_WIDTH);
}, 0);
}, [columns]);
var renderSticky = (0, _react.useMemo)(function () {
var _classnames;
var main = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames7.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, 'van-table_head', true), (0, _defineProperty2.default)(_classnames, 'van-table_scroll', scroll.y), _classnames)),
children: columns.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.Empty, {
description: loading ? '加载中...' : '暂无数据'
}) : columns.map(function (item, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
column: item,
index: index,
handleClickTitle: handleClickTitle,
titleClassName: titleClassName,
getFixedDistance: getFixedDistance,
titleStyle: titleStyle
}, item.key || item.dataIndex);
})
});
if (sticky) {
var stickyProps = typeof sticky === 'boolean' ? {} : sticky;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sticky.Sticky, _objectSpread(_objectSpread({}, stickyProps), {}, {
children: main
}));
} else {
return main;
}
}, [columns, getFixedDistance, handleClickTitle, loading, scroll.y, sticky, titleClassName, titleStyle]);
if (error) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: (0, _classnames7.default)(['van-table', className]),
style: _objectSpread({
width: wrapWidth
}, style),
children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
type: "spinner",
className: "van-table-loading"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ScrollView, _objectSpread(_objectSpread({
className: "van-table_table",
"scroll-x": dataSource.length !== 0 ? scroll.x : false,
"scroll-y": scroll.y,
style: {
maxWidth: getSize(scroll.x),
maxHeight: getSize(scroll.y)
}
}, scrollViewProps), {}, {
children: [renderSticky, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-table_body",
children: dataSource.length > 0 ? dataSource.map(function (dataSourceItem, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
dataSourceItem: dataSourceItem,
index: index,
placeholder: placeholder,
rowClassName: rowClassName,
colClassName: colClassName,
rowStyle: rowStyle,
colStyle: colStyle,
rowKey: rowKey,
columns: columns,
setExpansion: setExpansion,
expansion: expansion,
getFixedDistance: getFixedDistance
}, dataSourceItem[rowKey]);
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_empty.Empty, {
description: loading ? '加载中...' : '暂无数据'
})
})]
}))]
});
};
exports.Table = Table;
var _default = /*#__PURE__*/(0, _react.memo)(Table);
exports.default = _default;
var getSize = function getSize(size) {
if (typeof size === 'number') {
return (0, _taro.pxTransform)(size * 2);
}
return String(size);
};
var Row = function Row(props) {
var _classnames2;
var dataSourceItem = props.dataSourceItem,
index = props.index,
placeholder = props.placeholder,
rowClassName = props.rowClassName,
rowStyle = props.rowStyle,
colStyle = props.colStyle,
colClassName = props.colClassName,
rowKey = props.rowKey,
columns = props.columns,
setExpansion = props.setExpansion,
expansion = props.expansion,
getFixedDistance = props.getFixedDistance;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames7.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, 'van-table_row', true), (0, _defineProperty2.default)(_classnames2, rowClassName, true), _classnames2)),
style: rowStyle,
children: columns.map(function (columnItem, colIndex) {
var _classnames3;
var text = dataSourceItem[columnItem.dataIndex];
var expandable = !!columnItem.expandable;
var result;
if (columnItem.render) {
var render = columnItem.render(text, dataSourceItem, index);
if ((0, _typeof2.default)(render) !== 'object') {
result = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
children: render
});
} else {
result = render;
}
} else {
result = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
children: text || text === false || text === 0 ? String(text) : placeholder
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: function onClick() {
if (expandable) setExpansion.bind(_this, !expansion);
},
className: (0, _classnames7.default)((_classnames3 = {}, (0, _defineProperty2.default)(_classnames3, colClassName, true), (0, _defineProperty2.default)(_classnames3, 'van-table_col', true), (0, _defineProperty2.default)(_classnames3, 'van-table_fixed', columnItem.fixed), (0, _defineProperty2.default)(_classnames3, 'van-table_expansion', expansion), (0, _defineProperty2.default)(_classnames3, columnItem.className, true), _classnames3)),
style: _objectSpread(_objectSpread(_objectSpread((0, _defineProperty2.default)({
textAlign: columnItem.align || 'left',
width: getSize(columnItem.width || DEFAULT_COL_WIDTH)
}, columnItem.fixed, columnItem.fixed && getFixedDistance(columnItem.fixed, colIndex)), columnItem.style), colStyle), UNIFY_PADDING),
children: result
}, columnItem.key || columnItem.dataIndex);
})
}, dataSourceItem[rowKey]);
};
var Title = function Title(props) {
var _classnames4, _objectSpread3, _classnames5, _classnames6;
var column = props.column,
index = props.index,
handleClickTitle = props.handleClickTitle,
titleClassName = props.titleClassName,
getFixedDistance = props.getFixedDistance,
titleStyle = props.titleStyle;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
onClick: handleClickTitle.bind(_this, column, index),
className: (0, _classnames7.default)((_classnames4 = {}, (0, _defineProperty2.default)(_classnames4, 'van-table_title', true), (0, _defineProperty2.default)(_classnames4, 'van-table_fixed', column.fixed), (0, _defineProperty2.default)(_classnames4, column.titleClassName || '', true), (0, _defineProperty2.default)(_classnames4, titleClassName, true), _classnames4)),
style: _objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, (0, _defineProperty2.default)(_objectSpread3, column.fixed, column.fixed && getFixedDistance(column.fixed, index)), (0, _defineProperty2.default)(_objectSpread3, "width", getSize(column.width || DEFAULT_COL_WIDTH)), _objectSpread3), column.titleStyle), titleStyle), {}, {
justifyContent: JC_TA_MAP[column.align || 'left']
}, UNIFY_PADDING),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: column.title
}), column.sort && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-table_sortBtn",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames7.default)((_classnames5 = {}, (0, _defineProperty2.default)(_classnames5, 'van-table_btn', true), (0, _defineProperty2.default)(_classnames5, 'van-table_ascend', true), (0, _defineProperty2.default)(_classnames5, 'van-table_active', column.sortOrder === 'ascend'), _classnames5))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: (0, _classnames7.default)((_classnames6 = {}, (0, _defineProperty2.default)(_classnames6, 'van-table_btn', true), (0, _defineProperty2.default)(_classnames6, 'van-table_descend', true), (0, _defineProperty2.default)(_classnames6, 'van-table_active', column.sortOrder === 'descend'), _classnames6))
})]
})]
}, column.key || column.dataIndex);
};