gd-sprest-react - npm Package Compare versions

Comparing version 2.4.7 to 2.4.8

build/definitions/wp.d.ts

 /// <reference types="react" />
-import { IWebPartCfg } from ".";
+import { IWebPart, IWebPartCfg } from "gd-sp-webpart";
 /**
- * Web Part Information
+ * Fabric Web Part Information
  */
-export interface IWebPartInfo {
+export interface IFabricWebPartInfo {
     cfg?: IWebPartCfg;
 }
 /**
- * Web Part Properties
+ * Fabric Web Part Properties
  */
-export interface IWebPartProps {
+export interface IFabricWebPartProps {
     cfgElementId?: string;
@@ -18,13 +18,6 @@ displayElement?: React.ComponentClass<any>;
     helpUrl?: string;
-    onPostRender?: (targetInfo?: IWebPartTargetInfo) => void;
-    onRenderDisplayElement?: (targetInfo: IWebPartTargetInfo) => any;
-    onRenderEditElement?: (targetInfo: IWebPartTargetInfo) => any;
+    onPostRender?: (targetInfo?: IWebPart) => void;
+    onRenderDisplayElement?: (targetInfo: IWebPart) => any;
+    onRenderEditElement?: (targetInfo: IWebPart) => any;
     targetElementId: string;
 }
-/**
- * Web Part Target Information
- */
-export interface IWebPartTargetInfo {
-    cfg?: IWebPartCfg;
-    element: HTMLElement;
-}

build/definitions/wpCfg.d.ts

 /// <reference types="react" />
+import { IWebPartCfg } from "gd-sp-webpart";
 import { Panel } from "..";
 /**
- * WebPart Configuration
- */
-export interface IWebPartCfg {
-    WebPartId?: string;
-}
-/**
  * WebPart Configuration Panel
@@ -11,0 +6,0 @@ */

build/definitions/wpList.d.ts

 /// <reference types="react" />
 import { Types } from "gd-sprest";
+import { IWebPartCfg } from "gd-sp-webpart";
 import { Dropdown, IDropdownOption, PrimaryButton, TextField } from "office-ui-fabric-react";
-import { IWebPartCfg, IWebPartCfgProps, IWebPartCfgState, IWebPartCfgPanel } from ".";
+import { IWebPartCfgProps, IWebPartCfgState, IWebPartCfgPanel } from ".";
 /**
@@ -6,0 +7,0 @@ * List Configuration

build/webparts/wp.d.ts

@@ -1,28 +0,5 @@
-import { IWebPartProps } from "../definitions";
+import { IFabricWebPartProps } from "../definitions";
 /**
- * Web Part
+ * Fabric Web Part
  */
-export declare class WebPart {
-    private _props;
-    /**
-     * Constructor
-     * @param props - The webpart properties.
-     */
-    constructor(props: IWebPartProps);
-    /**
-     * Methods
-     */
-    /**
-     * Method to add the help link
-     * @wpId - The webpart id.
-     */
-    private addHelpLink;
-    /**
-     * Method to get the target information
-     */
-    private getTargetInformation;
-    /**
-     * Method to render the webpart
-     */
-    private render;
-}
+export declare const FabricWebPart: (props: IFabricWebPartProps) => void;

build/webparts/wp.js

@@ -5,182 +5,48 @@ "use strict";
 var react_dom_1 = require("react-dom");
+var gd_sp_webpart_1 = require("gd-sp-webpart");
 var office_ui_fabric_react_1 = require("office-ui-fabric-react");
-var common_1 = require("../common");
 /**
- * Web Part
+ * Fabric Web Part
  */
-var WebPart = /** @class */ (function () {
-    /**
-     * Constructor
-     * @param props - The webpart properties.
-     */
-    function WebPart(props) {
-        var _this = this;
-        this._props = null;
-        /**
-         * Methods
-         */
-        /**
-         * Method to add the help link
-         * @wpId - The webpart id.
-         */
-        this.addHelpLink = function (wpId) {
-            // Ensure the help url exists
-            if (_this._props.helpUrl) {
-                // Get the webpart's "Snippet"
-                var link = document.querySelector("div[webpartid='" + wpId + "'] a[title='Edit Snippet']");
-                if (link) {
-                    // Create the help link
-                    var helpLink = document.createElement("a");
-                    helpLink.href = _this._props.helpUrl;
-                    helpLink.style.paddingLeft = "10px";
-                    helpLink.setAttribute("role", "button");
-                    helpLink.title = _this._props.helpTitle || "Help";
-                    helpLink.innerHTML = "<span class='ms-metadata'>" + helpLink.title + "</span>";
-                    helpLink.target = "_blank";
-                    // Append the link
-                    link.parentElement.appendChild(helpLink);
-                }
-            }
-        };
-        /**
-         * Method to get the target information
-         */
-        this.getTargetInformation = function () {
-            var targetInfo = {
-                cfg: null,
-                element: null
-            };
-            // Ensure the target element id exists
-            if (_this._props.targetElementId) {
-                var cfg = {};
-                var elTarget = null;
-                // Get the elements
-                var elements = document.querySelectorAll("#" + _this._props.targetElementId);
-                for (var i = 0; i < elements.length; i++) {
-                    var elWebPart = elements[i];
-                    // See if we have already configured this element
-                    if (elWebPart.getAttribute("data-isConfigured")) {
-                        continue;
-                    }
-                    // Get the webpart id
-                    var wpId = common_1.Page.getWebPartId(elWebPart);
-                    // See if the configuration element exists
-                    var elTargetCfg = (_this._props.cfgElementId ? elWebPart.parentElement.querySelector("#" + _this._props.cfgElementId) : null);
-                    if (elTargetCfg) {
-                        try {
-                            // Set the configuration
-                            var wpCfg = elTargetCfg.innerText.trim().length == 0 ? {} : JSON.parse(elTargetCfg.innerText);
-                            // See if the webaprt id exists
-                            if (wpCfg.WebPartId) {
-                                // See if it's for this webpart
-                                if (wpCfg.WebPartId == wpId) {
-                                    // Set the configuration and target element
-                                    cfg = wpCfg;
-                                    elTarget = elWebPart;
-                                    // Break from the loop
-                                    break;
-                                }
-                            }
-                            else {
-                                // Set the configuration and target element
-                                cfg = wpCfg;
-                                cfg.WebPartId = wpId;
-                                elTarget = elWebPart;
-                                // Break from the loop
-                                break;
-                            }
-                        }
-                        catch (ex) {
-                            // Log
-                            console.log("[gd-sprest-react] Error parsing the configuration for element '" + _this._props.cfgElementId + "'.");
-                        }
-                    }
-                    else {
-                        // Set the configuration and target element
-                        cfg.WebPartId = wpId;
-                        elTarget = elWebPart;
-                        // Break from the loop
-                        break;
-                    }
-                }
-                // Set the target information
-                targetInfo = {
-                    cfg: cfg,
-                    element: elTarget
-                };
-                // Ensure elements were found
-                if (elements.length == 0) {
-                    // Log
-                    console.log("[gd-sprest-react] Error - Unable to find elements with id '" + _this._props.targetElementId + "'.");
-                }
-            }
-            else {
-                // Log
-                console.log("[gd-sprest-react] The target element id is not defined.");
-            }
-            // Ensure the target element exists
-            if (targetInfo.element) {
-                // Set the configuration flag
-                targetInfo.element.setAttribute("data-isConfigured", "true");
-            }
-            // Return the target information
-            return targetInfo;
-        };
-        /**
-         * Method to render the webpart
-         */
-        this.render = function () {
-            var element = null;
-            // Get the target information
-            var targetInfo = _this.getTargetInformation();
-            // Ensure the target element exists
-            if (targetInfo.element == null) {
-                // Log
-                console.log("[gd-sprest-react] The target element '" + _this._props.targetElementId + "' was not found.");
-                return;
-            }
-            // Ensure the configuration exists
-            if (_this._props.cfgElementId != null && targetInfo.cfg == null) {
-                // Log
-                console.log("[gd-sprest-react] The configuration element '" + _this._props.cfgElementId + "' was not found.");
-                return;
-            }
-            // See if the page is being edited
-            if (common_1.Page.isEditMode()) {
-                // Set the element
-                element = _this._props.editElement ? React.createElement(_this._props.editElement, { cfg: targetInfo.cfg, cfgElementId: _this._props.cfgElementId }) : null;
-                element = _this._props.onRenderEditElement ? _this._props.onRenderEditElement(targetInfo) : element;
-                // Add the help link
-                targetInfo.cfg ? _this.addHelpLink(targetInfo.cfg.WebPartId) : null;
-            }
-            else {
-                // See if the configuration exists
-                if (targetInfo.cfg || _this._props.cfgElementId == null) {
-                    // Set the element
-                    element = _this._props.displayElement ? React.createElement(_this._props.displayElement, { cfg: targetInfo.cfg }) : null;
-                    element = _this._props.onRenderDisplayElement ? _this._props.onRenderDisplayElement(targetInfo) : element;
-                }
-                else {
-                    element = React.createElement("div", { className: "ms-fontSize-l" }, "Please edit the page and configure the webpart.");
-                }
-            }
-            // See if the element exists
-            if (element) {
-                // Render the element
-                react_dom_1.render(React.createElement(office_ui_fabric_react_1.Fabric, null, element), targetInfo.element);
-            }
-            // Execute the post render event
-            _this._props.onPostRender ? _this._props.onPostRender(targetInfo) : null;
-        };
-        // Set the properties
-        this._props = props;
-        // Add a load event
-        window.addEventListener("load", function () {
-            // Render the component
-            _this.render();
-        });
-    }
-    return WebPart;
-}());
-exports.WebPart = WebPart;
+exports.FabricWebPart = function (props) {
+    var element = null;
+    // The render display component
+    var renderDisplay = function (wp) {
+        var element = props.onRenderDisplayElement ? props.onRenderDisplayElement(wp) : null;
+        if (element == null) {
+            // Default the element
+            element = props.displayElement ? React.createElement(props.displayElement, { cfg: wp.cfg }) : null;
+        }
+        // See if the element exists
+        if (element) {
+            // Render the element
+            react_dom_1.render(React.createElement(office_ui_fabric_react_1.Fabric, null, element), wp.el);
+        }
+    };
+    // The render edit component
+    var renderEdit = function (wp) {
+        var element = props.onRenderEditElement ? props.onRenderEditElement(wp) : null;
+        if (element) {
+            // Default the element
+            element = props.editElement ? React.createElement(props.editElement, { cfg: wp.cfg, cfgElementId: props.cfgElementId }) : null;
+        }
+        // See if the element exists
+        if (element) {
+            // Render the element
+            react_dom_1.render(React.createElement(office_ui_fabric_react_1.Fabric, null, element), wp.el);
+        }
+    };
+    // Create an instance of the webpart
+    new gd_sp_webpart_1.WebPart({
+        cfgElementId: props.cfgElementId,
+        elementId: props.targetElementId,
+        helpProps: {
+            title: props.helpTitle,
+            url: props.helpUrl
+        },
+        onPostRender: props.onPostRender,
+        onRenderDisplay: renderDisplay,
+        onRenderEditElement: renderEdit
+    });
+};
 //# sourceMappingURL=wp.js.map

build/webparts/wpCfg.d.ts

 /// <reference types="react" />
 import * as React from "react";
-import { IWebPartCfgPanel, IWebPartCfg, IWebPartCfgProps, IWebPartCfgState } from "../definitions";
+import { IWebPartCfg } from "gd-sp-webpart";
+import { IWebPartCfgPanel, IWebPartCfgProps, IWebPartCfgState } from "../definitions";
 import { Panel } from '..';
@@ -5,0 +6,0 @@ /**

package.json

 {
   "name": "gd-sprest-react",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "SharePoint react components.",
@@ -32,3 +32,5 @@ "main": "build/index.js",
   "homepage": "https://github.com/gunjandatta/sprest-react#readme",
-  "dependencies": {},
+  "dependencies": {
+    "gd-sp-webpart": "0.0.4"
+  },
   "devDependencies": {
@@ -43,5 +45,5 @@ "@types/core-js": "^0.9.44",
     "css-loader": "^0.28.8",
-    "gd-sprest": "^2.5.8",
+    "gd-sprest": "^2.5.9",
     "node-sass": "^4.7.2",
-    "office-ui-fabric-react": "^5.38.0",
+    "office-ui-fabric-react": "^5.39.0",
     "react": "^16.2.0",
@@ -48,0 +50,0 @@ "react-dom": "^16.2.0",

No alert changes

Worsened metrics

Total package byte prevSize

391727

decreased by-2.66%

Dependency count

1

increased byInfinity%

Lines of code

6726

decreased by-2.42%

Dependency changes

• + Addedgd-sp-webpart@0.0.4