@aappddeevv/dynamics-client-ui
Version:
## What is it? A library to help you create great dynamics applications.
104 lines • 5.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Sortable details list using helpers.
*/
const React = require("react");
const cx = require("classnames");
const DetailsList_1 = require("office-ui-fabric-react/lib/DetailsList");
const ScrollablePane_1 = require("office-ui-fabric-react/lib/ScrollablePane");
const Sticky_1 = require("office-ui-fabric-react/lib/Sticky");
// remove when #4099 is pushed to a release
//import { Sticky } from "./StickyX"
const Helpers = require("./DetailsListHelpers");
var DetailsListHelpers_1 = require("./DetailsListHelpers");
exports.defaultOrder = DetailsListHelpers_1.defaultOrder;
exports.OTHER = DetailsListHelpers_1.OTHER;
/**
* Maintains sorting state and sort data when requested. Columns can be augmented with
* `data.sortAttribute` to specify the attribute to sort on otherwise it defaults
* to `fieldName.` `data.isSortable=true/false` indicates whether a column can
* be sorted on. defaultSortState can hold the initial sort state to provide e.g.
* `{ column1Key: { position: 0, direction: "asc"}}` indicates that column 1 (indicated
* by the key column1Key), should be sorted first in ascending order. position indicates the
* order/priority of the column sorts since you can sort on more than one column. A lower
* position means that column is sorted before other columns with a lower position.
* `data.sortAttribute` should indicate the attribute to sort on if its different than
* fieldname.
*
* The DetailsList component is wrapped in ScrollablePane and the header is made sticky.
* The class name `sortableDeailsList` that helps you constrain the size of the list and is
* marked with a `data-is-scrollable` attribute per github.
*
* @see https://github.com/OfficeDev/office-ui-fabric-react/issues/3267
*/
class SortableDetailsList extends React.Component {
constructor(props) {
super(props);
this.onSort = (items) => {
if (this.props.onSort)
this.props.onSort(items);
};
this.onSortColumn = (col) => {
const somestate = Helpers.onSortColumn(col, this.state.columns, this.state.sortState, Helpers.defaultOrder);
const sorted = somestate.sorter(this.state.items);
this.onSort(sorted);
this.setState(Object.assign({}, somestate, { sorted }), () => {
if (this.props.onSortStateChanged)
this.props.onSortStateChanged(somestate.sortState);
});
};
this.updateSortState = (props) => {
const columns = Helpers.augmentColumns(props.columns, this.state.sortState, this.onSortColumn);
const sorter = Helpers.sorter({
columns,
state: this.state.sortState,
});
const sorted = this.state.sorter(props.items);
this.setState({
columns,
origColumns: props.columns,
sorted,
items: props.items,
}, () => this.onSort(sorted));
};
const iss = props.defaultSortState || {};
const columns = Helpers.augmentColumns(props.columns, iss, this.onSortColumn);
const sorter = Helpers.sorter({
columns,
state: iss,
});
const items = props.items || [];
const sorted = sorter(items);
this.onSort(sorted);
this.state = {
columns,
origColumns: props.columns,
sortState: iss,
sorter,
items,
sorted,
};
}
get sortState() { return this.state.sortState; }
componentWillReceiveProps(nextProps) {
if (nextProps.items !== this.state.items ||
nextProps.columns !== this.state.origColumns) {
this.updateSortState(nextProps);
}
}
render() {
const props = this.props;
const selection = props.selection ?
{ selection: props.selection } :
{};
return (React.createElement(ScrollablePane_1.ScrollablePane, { className: cx("sortableDetailsList", "sortedDetailsList", props.className), "data-is-scrollable": true, "data-ctag": "SortableDetailsList" },
React.createElement(DetailsList_1.DetailsList, Object.assign({ onRenderDetailsHeader:
// tslint:disable-next-line:jsx-no-lambda
(detailsHeaderProps, defaultRender) => React.createElement(Sticky_1.Sticky, null, defaultRender(detailsHeaderProps)), columns: this.state.columns, items: this.state.sorted, compact: true, isHeaderVisible: true, selectionPreservedOnEmptyClick: true, selectionMode: props.allowSelection ? DetailsList_1.SelectionMode.multiple : DetailsList_1.SelectionMode.none, layoutMode: DetailsList_1.DetailsListLayoutMode.justified, constrainMode: DetailsList_1.ConstrainMode.horizontalConstrained, checkboxVisibility: props.allowSelection ? DetailsList_1.CheckboxVisibility.onHover :
DetailsList_1.CheckboxVisibility.hidden }, props.detailsListProps, selection))));
}
}
exports.SortableDetailsList = SortableDetailsList;
exports.default = SortableDetailsList;
//# sourceMappingURL=SortableDetailsList.js.map