office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
169 lines • 7.72 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Announced } from 'office-ui-fabric-react/lib/Announced';
import { DetailsList, DetailsListLayoutMode, Selection, DetailsRow } from 'office-ui-fabric-react/lib/DetailsList';
import { Async } from 'office-ui-fabric-react/lib/Utilities';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { IconButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
var _items = [];
var _columns = ['Name', 'Modified', 'Modified By', 'File Size'].map(function (name) {
var fieldName = name.replace(' ', '').toLowerCase();
return {
fieldName: fieldName,
name: name,
key: fieldName,
minWidth: 100,
maxWidth: 200,
isResizable: true
};
});
var _names = [
'Annie Lindqvist',
'Aaron Reid',
'Alex Lundberg',
'Roko Kolar',
'Christian Bergqvist',
'Valentina Lovric',
'Makenzie Sharett'
];
function getMockDateString() {
return 'Thu Jan 05 2017';
}
var AnnouncedQuickActionsExample = /** @class */ (function (_super) {
tslib_1.__extends(AnnouncedQuickActionsExample, _super);
function AnnouncedQuickActionsExample(props) {
var _this = _super.call(this, props) || this;
_this._detailsList = React.createRef();
_this._textField = React.createRef();
_this._onRenderRow = function (props) {
return React.createElement(DetailsRow, tslib_1.__assign({}, props));
};
_this._onRenderItemColumn = function (item, index, column) {
var fieldContent = item[column.fieldName];
if (column.key === 'name') {
return (React.createElement("div", null,
fieldContent,
React.createElement(IconButton, { menuIconProps: { iconName: 'MoreVertical' }, role: "button", "aria-haspopup": true, "aria-label": "Show actions", styles: { root: { float: 'right', height: 'inherit' } }, menuProps: {
items: [
{
key: 'delete',
text: 'Delete',
onClick: function () { return _this._deleteItem(index); }
},
{
key: 'rename',
text: 'Rename',
onClick: function () { return _this._renameItem(item, index); }
}
]
} })));
}
else {
return React.createElement("span", null, fieldContent);
}
};
_this._renderAnnounced = function () {
var announced = _this.state.announced;
return announced;
};
_this._deleteItem = function (index) {
var items = _this.state.items;
items.splice(items.indexOf(items[index]), 1);
_this.setState({
items: items.slice(),
announced: React.createElement(Announced, { message: "Item deleted", "aria-live": "assertive" })
});
return;
};
_this._closeRenameDialog = function () {
_this.setState({
renameDialogOpen: false
});
};
_this._async = new Async(_this);
// Populate with items for demos.
if (_items.length === 0) {
for (var i = 0; i < 20; i++) {
_items.push({
key: i,
name: 'Item ' + i,
modified: getMockDateString(),
modifiedby: _names[Math.floor(Math.random() * _names.length)],
filesize: Math.floor(Math.random() * 30).toString() + ' MB'
});
}
}
_this._selection = new Selection({
onSelectionChanged: function () { return _this.setState({ selectionDetails: _this._getSelectionDetails() }); }
});
_this.state = {
items: _items,
selectionDetails: _this._getSelectionDetails(),
renameDialogOpen: false,
dialogContent: undefined,
announced: undefined
};
return _this;
}
AnnouncedQuickActionsExample.prototype.componentDidUpdate = function (prevState) {
var _this = this;
if (prevState.announced !== this.state.announced && this.state.announced !== undefined) {
this._async.setTimeout(function () {
_this.setState({
announced: undefined
});
}, 2000);
}
};
AnnouncedQuickActionsExample.prototype.componentWillUnmount = function () {
this._async.dispose();
};
AnnouncedQuickActionsExample.prototype.render = function () {
var _a = this.state, items = _a.items, renameDialogOpen = _a.renameDialogOpen, dialogContent = _a.dialogContent;
return (React.createElement(React.Fragment, null,
this._renderAnnounced(),
React.createElement(MarqueeSelection, { selection: this._selection },
React.createElement(DetailsList, { componentRef: this._detailsList, items: items, columns: _columns, setKey: "set", layoutMode: DetailsListLayoutMode.fixedColumns, selection: this._selection, selectionPreservedOnEmptyClick: true, ariaLabelForSelectionColumn: "Toggle selection", ariaLabelForSelectAllCheckbox: "Toggle selection for all items", onRenderItemColumn: this._onRenderItemColumn, onRenderRow: this._onRenderRow }),
React.createElement(Dialog, { hidden: !renameDialogOpen, onDismiss: this._closeRenameDialog, closeButtonAriaLabel: "Close" }, dialogContent))));
};
AnnouncedQuickActionsExample.prototype._renameItem = function (item, index) {
this.setState({
renameDialogOpen: true,
dialogContent: (React.createElement(React.Fragment, null,
React.createElement(TextField, { componentRef: this._textField, label: "Rename", defaultValue: item.name }),
React.createElement(DialogFooter, null,
React.createElement(PrimaryButton, { onClick: this._updateItemName.bind(this, index), text: "Save" }))))
});
return;
};
AnnouncedQuickActionsExample.prototype._updateItemName = function (index) {
if (this._textField && this._textField.current) {
var items = this.state.items;
items[index].name = this._textField.current.value || items[index].name;
this.setState({
renameDialogOpen: false,
items: items.slice(),
announced: React.createElement(Announced, { message: "Item renamed", "aria-live": "assertive" })
});
}
else {
return;
}
};
AnnouncedQuickActionsExample.prototype._getSelectionDetails = function () {
var selectionCount = this._selection.getSelectedCount();
switch (selectionCount) {
case 0:
return 'No items selected';
case 1:
return '1 item selected: ' + this._selection.getSelection()[0].name;
default:
return selectionCount + " items selected";
}
};
return AnnouncedQuickActionsExample;
}(React.Component));
export { AnnouncedQuickActionsExample };
//# sourceMappingURL=Announced.QuickActions.Example.js.map