@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
185 lines (183 loc) • 9.53 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ReactDom = tslib_1.__importStar(require("react-dom"));
var sp_property_pane_1 = require("@microsoft/sp-property-pane");
var sp_component_base_1 = require("@microsoft/sp-component-base");
var sp_webpart_base_1 = require("@microsoft/sp-webpart-base");
var ControlsTest_1 = tslib_1.__importDefault(require("./components/ControlsTest"));
var PropertyPaneControlToggles_1 = require("./propertyPane/PropertyPaneControlToggles");
var PropertyPaneListPicker_1 = require("./propertyPane/PropertyPaneListPicker");
var sp_core_library_1 = require("@microsoft/sp-core-library");
/**
* Web part to test the React controls
*/
var ControlsTestWebPart = /** @class */ (function (_super) {
tslib_1.__extends(ControlsTestWebPart, _super);
function ControlsTestWebPart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._containerWidth = 0;
// Apply btheme id in Teams
_this._applyTheme = function (theme) {
_this.context.domElement.setAttribute("data-theme", theme);
document.body.setAttribute("data-theme", theme);
};
return _this;
}
ControlsTestWebPart.prototype.onInit = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var context;
return tslib_1.__generator(this, function (_a) {
this._themeProvider = this.context.serviceScope.consume(sp_component_base_1.ThemeProvider.serviceKey);
// If it exists, get the theme variant
this._themeVariant = this._themeProvider.tryGetTheme();
// Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
if (this.context.sdks.microsoftTeams) {
context = this.context.sdks.microsoftTeams.context;
this._applyTheme(context.theme || "default");
this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(this._applyTheme);
}
return [2 /*return*/, Promise.resolve()];
});
});
};
/**
* Update the current theme variant reference and re-render.
*
* @param args The new theme
*/
ControlsTestWebPart.prototype._handleThemeChangedEvent = function (args) {
this._themeVariant = args.theme;
this.render();
};
ControlsTestWebPart.prototype.render = function () {
var _this = this;
var _a, _b;
/* const element: React.ReactElement<ITestControlProps> = React.createElement(
TestControl,
{
context: this.context,
themeVariant: this._themeVariant,
}
);
*/
var listItemId = Number(this.properties.dynamicFormListItemId);
if (listItemId < 1 || isNaN(listItemId)) {
listItemId = undefined;
}
var element = React.createElement(ControlsTest_1.default, {
themeVariant: this._themeVariant,
context: this.context,
controlVisibility: this.properties.controlVisibility,
description: this.properties.description,
title: (_a = this.properties.title) !== null && _a !== void 0 ? _a : "Sample title",
displayMode: this.displayMode,
dynamicFormListId: this.properties.dynamicFormListId,
dynamicFormListItemId: (_b = listItemId === null || listItemId === void 0 ? void 0 : listItemId.toString()) !== null && _b !== void 0 ? _b : undefined,
dynamicFormErrorDialogEnabled: this.properties.dynamicFormErrorDialogEnabled,
dynamicFormCustomFormattingEnabled: this.properties.dynamicFormCustomFormattingEnabled,
dynamicFormClientSideValidationEnabled: this.properties.dynamicFormClientSideValidationEnabled,
dynamicFormFieldValidationEnabled: this.properties.dynamicFormFieldValidationEnabled,
dynamicFormFileSelectionEnabled: this.properties.dynamicFormFileSelectionEnabled,
dynamicFormToggleTaxonomyPicker: this.properties.dynamicFormToggleTaxonomyPicker,
onOpenPropertyPane: function () {
_this.context.propertyPane.open();
},
updateProperty: function (value) {
_this.properties.title = value;
if (_this.context.propertyPane.isPropertyPaneOpen()) {
_this.context.propertyPane.refresh();
}
},
paginationTotalPages: this.properties.paginationTotalPages
});
ReactDom.render(element, this.domElement);
};
Object.defineProperty(ControlsTestWebPart.prototype, "dataVersion", {
get: function () {
return sp_core_library_1.Version.parse('1.0');
},
enumerable: false,
configurable: true
});
ControlsTestWebPart.prototype.onAfterResize = function (newWidth) {
this._containerWidth = newWidth;
this.render();
};
ControlsTestWebPart.prototype.getPropertyPaneConfiguration = function () {
var _this = this;
return {
pages: [
{
header: {
description: 'Change settings below'
},
groups: [
{
groupName: 'Control Settings',
groupFields: [
(0, sp_property_pane_1.PropertyPaneTextField)('title', {
label: 'Web Part Title'
}),
(0, sp_property_pane_1.PropertyPaneTextField)('paginationTotalPages', {
label: 'Total pages in pagination'
}),
new PropertyPaneListPicker_1.PropertyPaneListPicker('dynamicFormListId', {
label: 'List for Dynamic Form',
wpContext: this.context,
selectedKey: this.properties.dynamicFormListId,
disabled: false,
onPropertyChange: function (propertyPath, newValue) {
_this.properties.dynamicFormListId = newValue;
_this.render();
_this.context.propertyPane.refresh();
}
}),
(0, sp_property_pane_1.PropertyPaneTextField)('dynamicFormListItemId', {
label: 'List Item ID for Dynamic Form',
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormErrorDialogEnabled', {
label: 'Dynamic Form Error Dialog'
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormCustomFormattingEnabled', {
label: 'Dynamic Form Custom Formatting'
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormClientSideValidationEnabled', {
label: 'Dynamic Form Client Side Show/Hide Validation'
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormFieldValidationEnabled', {
label: 'Dynamic Form Field Validation'
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormFileSelectionEnabled', {
label: 'Dynamic Form File Selection'
}),
(0, sp_property_pane_1.PropertyPaneToggle)('dynamicFormToggleTaxonomyPicker', {
label: 'Dynamic Form Use Modern Taxonomy Picker'
}),
]
},
{
groupName: 'Controls',
groupFields: [
new PropertyPaneControlToggles_1.PropertyPaneControlToggles('controlVisibility', {
controlVisibility: this.properties.controlVisibility,
label: 'Toggle controls',
onPropertyChange: function (newValue) {
_this.properties.controlVisibility = newValue;
_this.render();
_this.context.propertyPane.refresh();
}
})
]
}
]
}
]
};
};
return ControlsTestWebPart;
}(sp_webpart_base_1.BaseClientSideWebPart));
exports.default = ControlsTestWebPart;
//# sourceMappingURL=ControlsTestWebPart.js.map