@alicloud/console-components
Version:
Alibaba Cloud React Components
155 lines (154 loc) • 6.25 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
/**
* @title 排序与过滤
* @description 示例演示了排序和过滤的特性
*/
// @ts-nocheck
import * as React from 'react';
import styled from 'styled-components';
import { Table, Button, Icon } from '@alicloud/console-components';
var dataSource = function () {
var result = [];
for (var i = 0; i < 5; i++) {
result.push({
title: "Quotation for 1PCS Nano ".concat(3 + i, ".0 controller compatible"),
id: 100306660940 + i,
time: 2000 + i
});
}
return result;
}, render = function (value, index, record) {
return React.createElement("a", { href: "javascript:;" },
"Remove(",
record.id,
")");
};
var App = /** @class */ (function (_super) {
__extends(App, _super);
function App(props) {
var _this = _super.call(this, props) || this;
_this.state = {
dataSource: dataSource(),
filterMode: 'multiple'
};
return _this;
}
App.prototype.onSort = function (dataIndex, order) {
var dataSource = this.state.dataSource.sort(function (a, b) {
var result = a[dataIndex] - b[dataIndex];
return order === 'asc' ? (result > 0 ? 1 : -1) : result > 0 ? -1 : 1;
});
this.setState({
dataSource: dataSource,
sort: { id: order }
});
};
App.prototype.onFilter = function (filterParams) {
var ds = dataSource();
Object.keys(filterParams).forEach(function (key) {
var selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(function (record) {
return selectedKeys.some(function (value) {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({ dataSource: ds });
};
App.prototype.changeMode = function () {
this.setState({
filterMode: 'single'
});
};
App.prototype.render = function () {
var filters = [
{
label: 'Nano 3',
value: 3
},
{
label: 'Nano 678',
value: 678,
children: [
{
label: 'Nano 67',
value: 67,
children: [
{
label: 'Nano 6',
value: 6
},
{
label: 'Nano 7',
value: 7
}
]
},
{
label: 'Nano 8',
value: 8
}
]
},
{
label: 'Other',
value: 'other',
children: [
{
label: 'Nano 4',
value: 4
},
{
label: 'Nano 5',
value: 5
}
]
}
];
return (React.createElement("div", null,
React.createElement("p", null,
React.createElement(Button, { onClick: this.changeMode.bind(this) }, "Change filter menu to single select")),
React.createElement(Table, { dataSource: this.state.dataSource, onSort: this.onSort.bind(this), onFilter: this.onFilter.bind(this) },
React.createElement(Table.Column, { title: "Id", dataIndex: "id", sortable: true }),
React.createElement(Table.Column, { title: "Title", dataIndex: "title", filters: filters, filterMode: this.state.filterMode }),
React.createElement(Table.Column, { title: "Time", dataIndex: "time" }),
React.createElement(Table.Column, { cell: render, width: 200 })),
React.createElement("br", null),
"Customize sortIcons:",
React.createElement("br", null),
React.createElement(Table, { dataSource: [], onSort: function () { }, sortIcons: {
desc: (React.createElement(Icon, { style: { top: '6px', left: '4px' }, type: 'arrow-down', size: "small" })),
asc: (React.createElement(Icon, { style: { top: '-6px', left: '4px' }, type: 'arrow-up', size: "small" }))
} },
React.createElement(Table.Column, { title: "Id", dataIndex: "id", sortable: true }),
React.createElement(Table.Column, { title: "Title", dataIndex: "title", filters: filters, filterMode: this.state.filterMode }),
React.createElement(Table.Column, { title: "Time", dataIndex: "time" }))));
};
return App;
}(React.Component));
export default function DemoComponent() {
var content = React.createElement(App, null);
return React.createElement(Style, null, content);
}
var Style = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
var templateObject_1;