@alicloud/console-components
Version:
Alibaba Cloud React Components
184 lines (183 loc) • 7.82 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;
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* @title 排序与过滤
* @description 示例演示了排序和过滤的特性
*/
// @ts-nocheck
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var console_components_1 = require("@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(console_components_1.Button, { onClick: this.changeMode.bind(this) }, "Change filter menu to single select")),
React.createElement(console_components_1.Table, { dataSource: this.state.dataSource, onSort: this.onSort.bind(this), onFilter: this.onFilter.bind(this) },
React.createElement(console_components_1.Table.Column, { title: "Id", dataIndex: "id", sortable: true }),
React.createElement(console_components_1.Table.Column, { title: "Title", dataIndex: "title", filters: filters, filterMode: this.state.filterMode }),
React.createElement(console_components_1.Table.Column, { title: "Time", dataIndex: "time" }),
React.createElement(console_components_1.Table.Column, { cell: render, width: 200 })),
React.createElement("br", null),
"Customize sortIcons:",
React.createElement("br", null),
React.createElement(console_components_1.Table, { dataSource: [], onSort: function () { }, sortIcons: {
desc: (React.createElement(console_components_1.Icon, { style: { top: '6px', left: '4px' }, type: 'arrow-down', size: "small" })),
asc: (React.createElement(console_components_1.Icon, { style: { top: '-6px', left: '4px' }, type: 'arrow-up', size: "small" }))
} },
React.createElement(console_components_1.Table.Column, { title: "Id", dataIndex: "id", sortable: true }),
React.createElement(console_components_1.Table.Column, { title: "Title", dataIndex: "title", filters: filters, filterMode: this.state.filterMode }),
React.createElement(console_components_1.Table.Column, { title: "Time", dataIndex: "time" }))));
};
return App;
}(React.Component));
function DemoComponent() {
var content = React.createElement(App, null);
return React.createElement(Style, null, content);
}
exports.default = DemoComponent;
var Style = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
var templateObject_1;