@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
104 lines • 4.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownTreeItemAction = void 0;
var tslib_1 = require("tslib");
var Button_1 = require("@fluentui/react/lib/Button");
var React = tslib_1.__importStar(require("react"));
var TreeView_module_scss_1 = tslib_1.__importDefault(require("./TreeView.module.scss"));
/**
* Renders the controls for Dropdown TreeItem action component
*/
var DropdownTreeItemAction = /** @class */ (function (_super) {
tslib_1.__extends(DropdownTreeItemAction, _super);
function DropdownTreeItemAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
/**
* Prepates contextual menu items for dropdown.
*/
_this.prepareContextualMenuProps = function (treeItem, treeItemActions) {
var items = [];
var useTargetWidth = true;
var _loop_1 = function (treeItemAction) {
if (!treeItemAction.hidden) {
var treeItemActionMenuItem = {
key: treeItem.key.toString(),
onClick: function () {
_this.onActionExecute(treeItemAction)
.then(function () {
// no-op;
})
.catch(function () {
// no-op;
});
}
};
treeItemActionMenuItem.text = treeItemAction.title;
treeItemActionMenuItem.name = treeItemAction.title;
treeItemActionMenuItem.iconProps = treeItemAction.iconProps;
useTargetWidth = treeItemActionMenuItem.iconProps ? false : true;
items.push(treeItemActionMenuItem);
}
};
for (var _i = 0, treeItemActions_1 = treeItemActions; _i < treeItemActions_1.length; _i++) {
var treeItemAction = treeItemActions_1[_i];
_loop_1(treeItemAction);
}
var contextualMenuProps = {
items: items,
useTargetWidth: useTargetWidth
};
return contextualMenuProps;
};
/**
* Handler to execute selected action.
*/
_this.onActionExecute = function (treeItemAction) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, treeItemAction.actionCallback(this.props.treeItem)];
case 1:
_a.sent();
this.props.treeItemActionCallback();
return [2 /*return*/];
}
});
}); };
return _this;
}
/**
* componentWillMount lifecycle hook
*/
DropdownTreeItemAction.prototype.UNSAFE_componentWillMount = function () {
this.checkForImmediateInvocations();
};
/**
* Check if there are action to immediatly invoke
*/
DropdownTreeItemAction.prototype.checkForImmediateInvocations = function () {
var treeItemActions = this.props.treeItemActions;
for (var _i = 0, treeItemActions_2 = treeItemActions; _i < treeItemActions_2.length; _i++) {
var action = treeItemActions_2[_i];
if (action.invokeActionOnRender) {
this.onActionExecute(action)
.then(function () {
// no-op;
})
.catch(function () {
// no-op;
});
}
}
};
/**
* Default React render method
*/
DropdownTreeItemAction.prototype.render = function () {
var _a = this.props, treeItem = _a.treeItem, treeItemActions = _a.treeItemActions;
var contextualMenuProps = this.prepareContextualMenuProps(treeItem, treeItemActions);
return (React.createElement("div", null,
React.createElement(Button_1.IconButton, { menuProps: contextualMenuProps, menuIconProps: { iconName: 'MoreVertical' }, className: TreeView_module_scss_1.default.actionMore, title: "More", ariaLabel: "More", theme: this.props.theme })));
};
return DropdownTreeItemAction;
}(React.Component));
exports.DropdownTreeItemAction = DropdownTreeItemAction;
//# sourceMappingURL=DropdownTreeItemAction.js.map