tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
638 lines (636 loc) • 14.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.Loading = exports.Empty = exports.Default = exports.ColumnFilter = exports.All = void 0;
var _react = _interopRequireDefault(require("react"));
var _tag = _interopRequireDefault(require("../tag"));
var _2 = require(".");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
var Column = _2.Table.Column,
ColumnGroup = _2.Table.ColumnGroup;
var _default = exports["default"] = {
component: _2.Table,
title: 'Table',
parameters: {
backgrounds: {
"default": 'gary',
values: [{
name: 'gary',
value: '#f1f2f5'
}]
}
}
};
var Template = function Template(args) {
return _react["default"].createElement("div", {
style: {
marginTop: '20px'
}
}, _react["default"].createElement(_2.Table, Object.assign({}, args)));
};
var Empty = exports.Empty = Template.bind({});
Empty.args = {
columns: [{
title: '姓名',
dataIndex: 'name',
key: 'name'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age'
}, {
title: '住址',
dataIndex: 'address',
key: 'address'
}]
};
var Loading = exports.Loading = Template.bind({});
Loading.args = {
columns: [{
title: '姓名',
dataIndex: 'name',
key: 'name'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age'
}, {
title: '住址',
dataIndex: 'address',
key: 'address'
}],
loading: true
};
var Default = exports.Default = Template.bind({});
Default.args = {
columns: [{
title: '姓名',
dataIndex: 'name',
key: 'name'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
render: function render(cellData) {
return _react["default"].createElement(_tag["default"], {
color: "green"
}, cellData);
}
}, {
title: '住址',
dataIndex: 'address',
key: 'address'
}],
dataSource: [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}],
pagination: {
total: 50,
position: 'bottom',
showSizeChanger: true,
showQuickJumper: true,
showTotal: function showTotal(total, range) {
return "".concat(range[0], "-").concat(range[1], ", \u5171 ").concat(total, " \u6761\u8BB0\u5F55");
}
},
loading: false
};
var ColumnFilter = exports.ColumnFilter = function ColumnFilter(args) {
return _react["default"].createElement("div", {
style: {
marginTop: '20px'
}
}, _react["default"].createElement(_2.Table, Object.assign({}, args), _react["default"].createElement(ColumnGroup, {
title: "Name"
}, _react["default"].createElement(Column, {
title: "First Name",
dataIndex: "firstName",
key: "firstName"
}), _react["default"].createElement(Column, {
title: "Last Name",
dataIndex: "lastName",
key: "lastName"
})), _react["default"].createElement(Column, {
title: "Age",
dataIndex: "age",
key: "age"
}), _react["default"].createElement(Column, {
title: "Address",
dataIndex: "address",
key: "address"
}), _react["default"].createElement(Column, {
title: "Tags",
dataIndex: "tags",
key: "tags",
render: function render(tags) {
return _react["default"].createElement("span", null, tags.map(function (tag) {
return _react["default"].createElement(_tag["default"], {
color: "blue",
key: tag
}, tag);
}));
}
}), _react["default"].createElement(Column, {
title: "Action",
key: "action",
render: function render(_, record) {
return _react["default"].createElement("span", null, _react["default"].createElement("a", null, "Invite ", record.lastName), _react["default"].createElement("a", null, "Delete"));
}
})));
};
ColumnFilter.args = {
dataSource: [{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
}, {
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser']
}, {
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher']
}],
pagination: {
total: 50,
position: 'bottom',
showSizeChanger: true,
showQuickJumper: true,
showTotal: function showTotal(total, range) {
return "".concat(range[0], "-").concat(range[1], " of ").concat(total, " items");
}
},
loading: false
};
var All = exports.All = function All() {
var dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}];
var dataSource2 = [{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park'
}, {
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park'
}]
}, {
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park'
}, {
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park'
}]
}]
}]
}, {
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}];
var dataSource3 = [];
for (var i = 0; i < 100; i++) {
dataSource3.push({
key: i,
name: "Edward King ".concat(i),
age: 32,
address: "London, Park Lane no. ".concat(i)
});
}
var columns = [{
title: '姓名',
dataIndex: 'name',
key: 'name'
}, {
title: '年龄',
dataIndex: 'age',
key: 'age'
}, {
title: '住址',
dataIndex: 'address',
key: 'address'
}];
// const columns2 = [
// {
// title: 'Full Name',
// width: 100,
// dataIndex: 'name',
// key: 'name',
// fixed: 'left',
// },
// {
// title: 'Age',
// width: 100,
// dataIndex: 'age',
// key: 'age',
// fixed: 'left',
// },
// { title: 'Column 1', dataIndex: 'address', key: '1' },
// { title: 'Column 2', dataIndex: 'address', key: '2' },
// { title: 'Column 3', dataIndex: 'address', key: '3' },
// { title: 'Column 4', dataIndex: 'address', key: '4' },
// { title: 'Column 5', dataIndex: 'address', key: '5' },
// { title: 'Column 6', dataIndex: 'address', key: '6' },
// { title: 'Column 7', dataIndex: 'address', key: '7' },
// { title: 'Column 8', dataIndex: 'address', key: '8' },
// {
// title: 'Action',
// key: 'operation',
// fixed: 'right',
// width: 100,
// render: () => <a>action</a>,
// },
// ]
var columns1 = [{
title: 'Full Name',
width: 120,
dataIndex: 'name',
key: 'name'
}, {
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age'
}, {
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150
}, {
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150
}, {
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150
}, {
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150
}, {
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150
}, {
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150
}, {
title: 'Column 7',
dataIndex: 'address',
key: '7',
width: 150
}, {
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150
}, {
title: 'Action',
key: 'operation',
width: 200,
render: function render() {
return _react["default"].createElement("a", null, "action");
}
}];
var columns2 = [{
title: 'Full Name',
width: 120,
dataIndex: 'name',
key: 'name',
fixed: 'left'
}, {
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age',
fixed: 'left'
}, {
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150
}, {
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150
}, {
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150
}, {
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150
}, {
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150
}, {
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150
}, {
title: 'Column 7',
dataIndex: 'address',
key: '7',
width: 150
}, {
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150
}, {
title: 'Action',
key: 'operation',
width: 200,
render: function render() {
return _react["default"].createElement("a", null, "action");
}
}];
var columns3 = [{
title: 'Full Name',
width: 120,
dataIndex: 'name',
key: 'name'
}, {
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age'
}, {
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150
}, {
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150
}, {
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150
}, {
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150
}, {
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150
}, {
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150
}, {
title: 'Column 7',
dataIndex: 'address',
key: '7',
width: 150
}, {
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150
}, {
title: 'Action',
key: 'operation',
fixed: 'right',
width: 200,
render: function render() {
return _react["default"].createElement("a", null, "action");
}
}];
var columns4 = [{
title: 'Full Name',
width: 120,
dataIndex: 'name',
key: 'name',
fixed: 'left'
}, {
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age',
fixed: 'left'
}, {
title: 'Column 1',
dataIndex: 'address',
key: '1',
width: 150
}, {
title: 'Column 2',
dataIndex: 'address',
key: '2',
width: 150
}, {
title: 'Column 3',
dataIndex: 'address',
key: '3',
width: 150
}, {
title: 'Column 4',
dataIndex: 'address',
key: '4',
width: 150
}, {
title: 'Column 5',
dataIndex: 'address',
key: '5',
width: 150
}, {
title: 'Column 6',
dataIndex: 'address',
key: '6',
width: 150
}, {
title: 'Column 7',
dataIndex: 'address',
key: '7',
width: 150
}, {
title: 'Column 8',
dataIndex: 'address',
key: '8',
width: 150
}, {
title: 'Action',
key: 'operation',
fixed: 'right',
width: 200,
render: function render() {
return _react["default"].createElement("a", null, "action");
}
}];
var style = {
marginBottom: 20
};
var propsMap = {
// bordered: [true, false],
bordered: [true],
showCellBorders: [true, false],
// showCellBorders: [true],
striped: [true, false],
shadowed: [true, false],
// scroll: [{ x: 1600 }, { y: 240 }, { x: 1600, y: 300 }],
scroll: [{
x: 1600
}, {
x: 1600,
y: 300
}],
columns: [columns1, columns2, columns3, columns4],
// size: ['default', 'middle', 'small'],
size: ['default'],
dataSource: [dataSource3]
// dataSource: [[]],
};
var propsList = Object.keys(propsMap).reduce(function (arr, key) {
var data = propsMap[key];
if (arr.length === 0) {
return data.map(function (value) {
return _defineProperty({}, key, value);
});
} else {
var back = [];
for (var _i = 0; _i < data.length; _i++) {
var value = data[_i];
for (var j = 0; j < arr.length; j++) {
var item = arr[j];
back.push(Object.assign(Object.assign({}, item), _defineProperty({}, key, value)));
}
}
return back;
}
}, []);
return _react["default"].createElement("div", {
style: {
background: '#fff',
padding: 20
}
}, propsList.map(function (props, i) {
return _react["default"].createElement(_2.Table, Object.assign({}, props, {
key: i,
style: style,
pagination: {
pageSize: 5
}
}));
}));
};
All.args = {};
/*
bordered 边框 2
striped 斑马线 2
shadowed 阴影 2
showCellBorders 单元格边框 2
scroll 滚动 3
fixed 是否固定 3
size: 3
*/