@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
314 lines (311 loc) • 14.1 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _typeof from "@babel/runtime/helpers/typeof";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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 { Sticky } from '../sticky';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } 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 _useState = useState(get().Table),
_useState2 = _slicedToArray(_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 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
error = _useState4[0],
setError = _useState4[1];
var _useState5 = useState(pDataSource),
_useState6 = _slicedToArray(_useState5, 2),
dataSource = _useState6[0],
setDataSource = _useState6[1];
var _useState7 = useState(pColumns),
_useState8 = _slicedToArray(_useState7, 2),
columns = _useState8[0],
setColumns = _useState8[1];
var _useState9 = useState(true),
_useState10 = _slicedToArray(_useState9, 2),
expansion = _useState10[0],
setExpansion = _useState10[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]);
var renderSticky = useMemo(function () {
var _classnames;
var main = /*#__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);
})
});
if (sticky) {
var stickyProps = typeof sticky === 'boolean' ? {} : sticky;
return /*#__PURE__*/_jsx(Sticky, _objectSpread(_objectSpread({}, stickyProps), {}, {
children: main
}));
} else {
return main;
}
}, [columns, getFixedDistance, handleClickTitle, loading, scroll.y, sticky, titleClassName, titleStyle]);
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, _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__*/_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: function onClick() {
if (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), column.titleStyle), titleStyle), {}, {
justifyContent: JC_TA_MAP[column.align || 'left']
}, UNIFY_PADDING),
children: [/*#__PURE__*/_jsx(_Fragment, {
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);
};