@gizwits/vantui
Version:
机智云组件库
289 lines (286 loc) • 12.9 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _this = this;
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) { _defineProperty(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 */
import { pxTransform } from '@tarojs/taro';
import classnames from 'classnames';
import useDeepCompareEffect from 'use-deep-compare-effect';
import { ScrollView, Text, View } from '@tarojs/components';
import React, { memo, useCallback, useEffect, useState, useMemo } from 'react';
import { Loading } from '../loading';
import { Empty } from '../empty';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var DEFAULT_COL_WIDTH = 100;
var UNIFY_PADDING = {
padding: '8px'
};
var JC_TA_MAP = {
left: 'flex-start',
center: 'center',
right: 'flex-end'
};
export var Table = function Table(props) {
var _classnames;
var _props$columns = props.columns,
pColumns = _props$columns === void 0 ? [] : _props$columns,
_props$dataSource = props.dataSource,
pDataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
_props$rowKey = props.rowKey,
rowKey = _props$rowKey === void 0 ? '' : _props$rowKey,
_props$loading = props.loading,
loading = _props$loading === void 0 ? false : _props$loading,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style,
_props$titleClassName = props.titleClassName,
titleClassName = _props$titleClassName === void 0 ? '' : _props$titleClassName,
_props$titleStyle = props.titleStyle,
titleStyle = _props$titleStyle === void 0 ? {} : _props$titleStyle,
_props$rowClassName = props.rowClassName,
rowClassName = _props$rowClassName === void 0 ? '' : _props$rowClassName,
_props$rowStyle = props.rowStyle,
rowStyle = _props$rowStyle === void 0 ? {} : _props$rowStyle,
_props$colStyle = props.colStyle,
colStyle = _props$colStyle === void 0 ? {} : _props$colStyle,
_props$colClassName = props.colClassName,
colClassName = _props$colClassName === void 0 ? '' : _props$colClassName,
_props$sortChange = props.sortChange,
sortChange = _props$sortChange === void 0 ? function () {} : _props$sortChange,
_props$scroll = props.scroll,
scroll = _props$scroll === void 0 ? {} : _props$scroll,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? '--' : _props$placeholder;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
error = _useState2[0],
setError = _useState2[1];
var _useState3 = useState(pDataSource),
_useState4 = _slicedToArray(_useState3, 2),
dataSource = _useState4[0],
setDataSource = _useState4[1];
var _useState5 = useState(pColumns),
_useState6 = _slicedToArray(_useState5, 2),
columns = _useState6[0],
setColumns = _useState6[1];
var _useState7 = useState(true),
_useState8 = _slicedToArray(_useState7, 2),
expansion = _useState8[0],
setExpansion = _useState8[1];
useEffect(function () {
setDataSource(pDataSource);
}, [pDataSource]);
useEffect(function () {
if (pColumns.some(function (i) {
return !['number', 'undefined'].includes(_typeof(i['width']));
})) {
console.error('(antmjs/vantui)[table]: columns配置项的width应该设置为number ');
setError(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [columns]);
useDeepCompareEffect(function () {
setColumns(pColumns);
}, [pColumns]);
// methods
/**
* @description 表头点击事件
* @param item
* @param index
*/
var handleClickTitle = 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 = _toConsumableArray(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 = 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 = useMemo(function () {
return columns.reduce(function (prev, cur) {
return prev + (cur.width || DEFAULT_COL_WIDTH);
}, 0);
}, [columns]);
if (error) {
return null;
}
return /*#__PURE__*/_jsxs(View, {
className: classnames(['van-table', className]),
style: _objectSpread({
width: wrapWidth
}, style),
children: [loading && /*#__PURE__*/_jsx(Loading, {
type: "spinner",
className: "van-table-loading"
}), /*#__PURE__*/_jsxs(ScrollView, {
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)
},
children: [/*#__PURE__*/_jsx(View, {
className: classnames((_classnames = {}, _defineProperty(_classnames, 'van-table_head', true), _defineProperty(_classnames, 'van-table_scroll', scroll.y), _classnames)),
children: columns.length === 0 ? /*#__PURE__*/_jsx(Empty, {
description: loading ? '加载中...' : '暂无数据'
}) : columns.map(function (item, index) {
return /*#__PURE__*/_jsx(Title, {
column: item,
index: index,
handleClickTitle: handleClickTitle,
titleClassName: titleClassName,
getFixedDistance: getFixedDistance,
titleStyle: titleStyle
}, item.key || item.dataIndex);
})
}), /*#__PURE__*/_jsx(View, {
className: "van-table_body",
children: dataSource.length > 0 ? dataSource.map(function (dataSourceItem, index) {
return /*#__PURE__*/_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__*/_jsx(Empty, {
description: loading ? '加载中...' : '暂无数据'
})
})]
})]
});
};
export default /*#__PURE__*/memo(Table);
var getSize = function getSize(size) {
if (typeof size === 'number') {
return 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__*/_jsx(View, {
className: classnames((_classnames2 = {}, _defineProperty(_classnames2, 'van-table_row', true), _defineProperty(_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 (_typeof(render) !== 'object') {
result = /*#__PURE__*/_jsx(Text, {
children: render
});
} else {
result = render;
}
} else {
result = /*#__PURE__*/_jsx(Text, {
children: text || text === false || text === 0 ? String(text) : placeholder
});
}
return /*#__PURE__*/_jsx(View, {
onClick: expandable && setExpansion.bind(_this, !expansion),
className: classnames((_classnames3 = {}, _defineProperty(_classnames3, colClassName, true), _defineProperty(_classnames3, 'van-table_col', true), _defineProperty(_classnames3, 'van-table_fixed', columnItem.fixed), _defineProperty(_classnames3, 'van-table_expansion', expansion), _defineProperty(_classnames3, columnItem.className, true), _classnames3)),
style: _objectSpread(_objectSpread(_objectSpread(_defineProperty({
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__*/_jsxs(View, {
onClick: handleClickTitle.bind(_this, column, index),
className: classnames((_classnames4 = {}, _defineProperty(_classnames4, 'van-table_title', true), _defineProperty(_classnames4, 'van-table_fixed', column.fixed), _defineProperty(_classnames4, column.titleClassName || '', true), _defineProperty(_classnames4, titleClassName, true), _classnames4)),
style: _objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, column.fixed, column.fixed && getFixedDistance(column.fixed, index)), _defineProperty(_objectSpread3, "width", getSize(column.width || DEFAULT_COL_WIDTH)), _objectSpread3), titleStyle), {}, {
justifyContent: JC_TA_MAP[column.align || 'left']
}, column.titleStyle), UNIFY_PADDING),
children: [/*#__PURE__*/_jsx(Text, {
children: column.title
}), column.sort && /*#__PURE__*/_jsxs(View, {
className: "van-table_sortBtn",
children: [/*#__PURE__*/_jsx(View, {
className: classnames((_classnames5 = {}, _defineProperty(_classnames5, 'van-table_btn', true), _defineProperty(_classnames5, 'van-table_ascend', true), _defineProperty(_classnames5, 'van-table_active', column.sortOrder === 'ascend'), _classnames5))
}), /*#__PURE__*/_jsx(View, {
className: classnames((_classnames6 = {}, _defineProperty(_classnames6, 'van-table_btn', true), _defineProperty(_classnames6, 'van-table_descend', true), _defineProperty(_classnames6, 'van-table_active', column.sortOrder === 'descend'), _classnames6))
})]
})]
}, column.key || column.dataIndex);
};