Initial commit

src/webparts/fullWidthSectionWebPart/FullWidthSectionWebPartWebPart.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { DisplayMode, Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneSlider
+} from '@microsoft/sp-webpart-base';
+
+import * as strings from 'FullWidthSectionWebPartWebPartStrings';
+import FullWidthSectionWebPart from './components/FullWidthSectionWebPart';
+import { IFullWidthSectionWebPartProps } from './components/IFullWidthSectionWebPartProps';
+
+export interface IFullWidthSectionWebPartWebPartProps {
+  horizontalPadding: number;
+  padding?: number;
+}
+
+export default class FullWidthSectionWebPartWebPart extends BaseClientSideWebPart<IFullWidthSectionWebPartWebPartProps> {
+
+  protected onInit(): Promise<void> {
+    return super.onInit().then(() => {
+      if (typeof this.properties.horizontalPadding !== 'number' && typeof this.properties.padding === 'number') {
+        this.properties.horizontalPadding = this.properties.padding;
+      }
+    });
+  }
+
+  public render(): void {
+    let horizontalPadding = 20;
+
+    if (typeof this.properties.horizontalPadding === 'number') {
+      horizontalPadding = this.properties.horizontalPadding;
+    } else if (typeof this.properties.padding === 'number') {
+      horizontalPadding = this.properties.padding;
+    }
+
+    const element: React.ReactElement<IFullWidthSectionWebPartProps> = React.createElement(
+      FullWidthSectionWebPart,
+      {
+        horizontalPadding: horizontalPadding,
+        domElement: this.domElement,
+        displayMode: this.displayMode
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneSlider('horizontalPadding', {
+                  label: strings.HorizontalPaddingFieldLabel,
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  showValue: true
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}