@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
201 lines • 10.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FluentUIToggleVisibilityAction = exports.FluentUISubmitAction = exports.FluentUIShowCardAction = exports.FluentUIOpenUrlAction = exports.FluentUIExecuteAction = void 0;
exports.registerFluentUIActions = registerFluentUIActions;
var tslib_1 = require("tslib");
var card_elements_1 = require("adaptivecards/lib/card-elements");
var enums_1 = require("adaptivecards/lib/enums");
var Button_1 = require("@fluentui/react/lib/Button");
var Icons_1 = require("@fluentui/react/lib/Icons");
var Styling_1 = require("@fluentui/react/lib/Styling");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var FluentUIDefaultTheme_1 = require("../../../common/fluentUIThemes/FluentUIDefaultTheme");
var HostCapability_1 = require("./HostCapability");
var redPalette = {
themePrimary: "#d40004",
themeLighterAlt: "#fdf3f3",
themeLighter: "#f8d0d1",
themeLight: "#f2a9ab",
themeTertiary: "#e55c5e",
themeSecondary: "#d91a1d",
themeDarkAlt: "#be0003",
themeDark: "#a10003",
themeDarker: "#770002",
neutralLighterAlt: "#faf9f8",
neutralLighter: "#f3f2f1",
neutralLight: "#edebe9",
neutralQuaternaryAlt: "#e1dfdd",
neutralQuaternary: "#d0d0d0",
neutralTertiaryAlt: "#c8c6c4",
neutralTertiary: "#a19f9d",
neutralSecondary: "#605e5c",
neutralPrimaryAlt: "#3b3a39",
neutralPrimary: "#323130",
neutralDark: "#201f1e",
black: "#000000",
white: "#ffffff"
};
var ActionButton = function (props) {
var control;
var theme = (props.theme) ? props.theme : (0, FluentUIDefaultTheme_1.fluentUIDefaultTheme)();
if (props.iconUrl) {
control =
React.createElement(Button_1.CompoundButton, { className: props.className, onClick: props.actionClickHandler, theme: theme },
React.createElement("div", { style: {
display: "flex",
flexDirection: props.iconPlacement === enums_1.ActionIconPlacement.LeftOfTitle ? "row" : "column",
justifyContent: "center",
} },
React.createElement("img", { src: props.iconUrl, style: {
alignSelf: "center",
width: props.iconSize,
height: props.iconSize,
flex: "0 0 auto",
} }),
React.createElement("span", { style: { alignSelf: "center" } }, props.text)));
}
else {
if (props.style.toLocaleLowerCase().trim() === 'positive') {
control = React.createElement(Button_1.PrimaryButton, { className: props.className, text: props.text, theme: theme, onClick: props.actionClickHandler });
}
else if (props.style.toLocaleLowerCase().trim() === 'destructive') {
var dangerButtonTheme = (0, Styling_1.createTheme)({ palette: redPalette });
control = React.createElement(Button_1.PrimaryButton, { className: props.className, text: props.text, theme: dangerButtonTheme, onClick: props.actionClickHandler });
}
else {
control = React.createElement(Button_1.DefaultButton, { className: props.className, text: props.text, theme: theme, onClick: props.actionClickHandler });
}
}
return control;
};
var createActionDiv = function (title, iconUrl, baseCssClass, iconPlacement, iconSize, actionClickHandler, style, theme) {
var div = document.createElement("div");
div.className = "fluentUI";
// eslint-disable-next-line @microsoft/spfx/pair-react-dom-render-unmount
ReactDOM.render(React.createElement(ActionButton, { text: title, className: baseCssClass, iconUrl: iconUrl, iconPlacement: iconPlacement, iconSize: iconSize, actionClickHandler: actionClickHandler, style: style, theme: theme }), div);
return div;
};
var FluentUIExecuteAction = /** @class */ (function (_super) {
tslib_1.__extends(FluentUIExecuteAction, _super);
function FluentUIExecuteAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.actionClickHandler = function (e) {
e.stopPropagation();
e.preventDefault();
_this.execute();
};
return _this;
}
FluentUIExecuteAction.prototype.updateCssClasses = function () {
// no-op;
};
FluentUIExecuteAction.prototype.render = function (baseCssClass) {
var theme = this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
var actionsConfig = this.parent.hostConfig.actions;
this._renderedElement = createActionDiv(this.title, this.iconUrl, baseCssClass, actionsConfig.iconPlacement, actionsConfig.iconSize, this.actionClickHandler, this.style, theme);
};
return FluentUIExecuteAction;
}(card_elements_1.ExecuteAction));
exports.FluentUIExecuteAction = FluentUIExecuteAction;
var FluentUIOpenUrlAction = /** @class */ (function (_super) {
tslib_1.__extends(FluentUIOpenUrlAction, _super);
function FluentUIOpenUrlAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.actionClickHandler = function (e) {
e.stopPropagation();
e.preventDefault();
_this.execute();
};
return _this;
}
FluentUIOpenUrlAction.prototype.updateCssClasses = function () {
// no-op;
};
FluentUIOpenUrlAction.prototype.render = function (baseCssClass) {
var theme = this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
var actionsConfig = this.parent.hostConfig.actions;
this._renderedElement = createActionDiv(this.title, this.iconUrl, baseCssClass, actionsConfig.iconPlacement, actionsConfig.iconSize, this.actionClickHandler, this.style, theme);
};
return FluentUIOpenUrlAction;
}(card_elements_1.OpenUrlAction));
exports.FluentUIOpenUrlAction = FluentUIOpenUrlAction;
var FluentUIShowCardAction = /** @class */ (function (_super) {
tslib_1.__extends(FluentUIShowCardAction, _super);
function FluentUIShowCardAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.actionClickHandler = function (e) {
e.stopPropagation();
e.preventDefault();
_this.execute();
};
return _this;
}
FluentUIShowCardAction.prototype.updateCssClasses = function () {
if (this.renderedElement) {
this.renderedElement.setAttribute("aria-expanded", (this.state === 1 /* ActionButtonState.Expanded */).toString());
}
};
FluentUIShowCardAction.prototype.render = function (baseCssClass) {
var theme = this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
var actionsConfig = this.parent.hostConfig.actions;
this._renderedElement = createActionDiv(this.title, this.iconUrl, baseCssClass, actionsConfig.iconPlacement, actionsConfig.iconSize, this.actionClickHandler, this.style, theme);
};
return FluentUIShowCardAction;
}(card_elements_1.ShowCardAction));
exports.FluentUIShowCardAction = FluentUIShowCardAction;
var FluentUISubmitAction = /** @class */ (function (_super) {
tslib_1.__extends(FluentUISubmitAction, _super);
function FluentUISubmitAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.actionClickHandler = function (e) {
e.stopPropagation();
e.preventDefault();
_this.execute();
};
return _this;
}
FluentUISubmitAction.prototype.updateCssClasses = function () {
// no-op;
};
FluentUISubmitAction.prototype.render = function (baseCssClass) {
var theme = this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
var actionsConfig = this.parent.hostConfig.actions;
this._renderedElement = createActionDiv(this.title, this.iconUrl, baseCssClass, actionsConfig.iconPlacement, actionsConfig.iconSize, this.actionClickHandler, this.style, theme);
};
return FluentUISubmitAction;
}(card_elements_1.SubmitAction));
exports.FluentUISubmitAction = FluentUISubmitAction;
var FluentUIToggleVisibilityAction = /** @class */ (function (_super) {
tslib_1.__extends(FluentUIToggleVisibilityAction, _super);
function FluentUIToggleVisibilityAction() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.actionClickHandler = function (e) {
e.stopPropagation();
e.preventDefault();
_this.execute();
};
return _this;
}
FluentUIToggleVisibilityAction.prototype.updateCssClasses = function () {
if (this.renderedElement) {
this.renderedElement.setAttribute("aria-expanded", (this.state === 1 /* ActionButtonState.Expanded */).toString());
}
};
FluentUIToggleVisibilityAction.prototype.render = function (baseCssClass) {
var theme = this.hostConfig.hostCapabilities.getCustomProperty(HostCapability_1.hostCapabilitiesFluentUIThemeKey);
var actionsConfig = this.parent.hostConfig.actions;
this._renderedElement = createActionDiv(this.title, this.iconUrl, baseCssClass, actionsConfig.iconPlacement, actionsConfig.iconSize, this.actionClickHandler, this.style, theme);
};
return FluentUIToggleVisibilityAction;
}(card_elements_1.ToggleVisibilityAction));
exports.FluentUIToggleVisibilityAction = FluentUIToggleVisibilityAction;
function registerFluentUIActions(registry) {
(0, Icons_1.initializeIcons)();
registry.register("Action.Submit", FluentUISubmitAction);
registry.register("Action.OpenUrl", FluentUIOpenUrlAction);
registry.register("Action.ShowCard", FluentUIShowCardAction);
registry.register("Action.ToggleVisibility", FluentUIToggleVisibilityAction);
registry.register("Action.Execute", FluentUIExecuteAction);
}
//# sourceMappingURL=Actions.js.map