Sample custom property pane field for SharePoint Framework

InsecurePasswordPropertyField.ts

import * as React from "react";
import * as ReactDom from 'react-dom';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Label } from 'office-ui-fabric-react/lib/Label';

import {
  IPropertyPaneField,
  PropertyPaneFieldType
} from '@microsoft/sp-webpart-base';

/**************
 * Interfaces *
 **************/
// Public properties
export interface ISampleInsecurePasswordProps {
  key: string;
  label?: string;
  description?: string;
  initialValue?: string;
  properties: any;

  /**
 * @function
 * Defines a onPropertyChange function to raise when the selected value changed.
 * Normally this function must be always defined with the 'this.onPropertyChange'
 * method of the web part object.
 */
  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;
}

// Private properties
export interface ISampleInsecurePasswordPropsInternal extends ISampleInsecurePasswordProps {
  label: string;
  description: string;
  initialValue: string;
  properties: any;

  onPropertyChange(propertyPath: string, oldValue: any, newValue: any): void;

  targetProperty: string;
  onRender(elem: HTMLElement, ctx, changeCallback): void;
  onDispose(elem: HTMLElement): void;
  onChanged(targetProperty: string, value: any): void;
}

// React component properties
export interface ISampleInsecurePasswordHostProps extends ISampleInsecurePasswordPropsInternal { }

// React component state
export interface ISampleInsecurePasswordHostState {
  currentPassword: string;
}




/***************************************
 * SampleInsecurePasswordBuilder class *
 ***************************************/
class SampleInsecurePasswordBuilder implements IPropertyPaneField<ISampleInsecurePasswordPropsInternal> {
  // Properties defined by IPropertyPaneField
  public type: PropertyPaneFieldType = PropertyPaneFieldType.Custom;
  public targetProperty: string;
  public properties: ISampleInsecurePasswordPropsInternal;

  // Custom properties
  private label: string;
  private description: string;
  private initialValue: string;
  private customProperties: any;
  private onPropertyChange: (propertyPath: string, oldValue: any, newValue: any) => void;

  public constructor(_targetProperty: string, _properties: ISampleInsecurePasswordPropsInternal) {
    this.label = _properties.label;
    this.description = _properties.description;
    this.initialValue = _properties.initialValue;
    this.customProperties = _properties.properties;

    this.onPropertyChange = _properties.onPropertyChange;

    this.properties = _properties;
    this.properties.onRender = this.render;
    this.properties.onDispose = this.dispose;
  }

  /**
   * @function
   * Renders the picker field content
   */
  private render(elem: HTMLElement, ctx?, changeCallback?: (targetProperty: string, value: any) => void): void {
    const props: ISampleInsecurePasswordHostProps = {
      key: this.properties.key,
      label: typeof this.label === "undefined" ? null : this.label,
      description: typeof this.description === "undefined" ? null : this.description,
      initialValue: typeof this.initialValue === "undefined" ? null : this.initialValue,
      properties: this.properties,
      targetProperty: this.targetProperty,
      onRender: this.render,
      onChanged: changeCallback,
      onDispose: this.dispose,
      onPropertyChange: this.onPropertyChange
    };

    // Construct the JSX properties
    const element: React.ReactElement<ISampleInsecurePasswordProps> = React.createElement(SampleInsecurePasswordHost, props);
    // Calls the REACT content generator
    ReactDom.render(element, elem);
  }

  /**
   * @function
   * Disposes the current object
   */
  private dispose(elem: HTMLElement): void { }
}





/*******************
 * React component *
 *******************/
export class SampleInsecurePasswordHost extends React.Component<ISampleInsecurePasswordHostProps, ISampleInsecurePasswordHostState> {
  constructor(props: ISampleInsecurePasswordHostProps) {
    super(props);

    this.state = {
      currentPassword: this.props.initialValue
    };

    this.onValueChanged = this.onValueChanged.bind(this);
    this.notifyAfterValidate = this.notifyAfterValidate.bind(this);
  }

  private onValueChanged(newValue: any): void {
    if (this.props.initialValue !== newValue) {
      this.setState({
        currentPassword: newValue
      });

      this.notifyAfterValidate(this.props.initialValue, newValue);
    }
  }

  private notifyAfterValidate(oldValue: string, newValue: string) {
    this.props.properties[this.props.targetProperty] = newValue;
    this.props.onPropertyChange(this.props.targetProperty, oldValue, newValue);
    if (typeof this.props.onChanged !== "undefined") {
      this.props.onChanged(this.props.targetProperty, newValue);
    }
  }

  public render(): JSX.Element {
    return (
      <div style={{ marginBottom: '8px' }}>
        {
          (() => {
            if (this.props.label !== null) {
              return <Label>{this.props.label}</Label>;
            }
          })()
        }
        <TextField type="password"
          name="password"
          value={this.state.currentPassword !== null ? this.state.currentPassword.toString() : ''}
          onChanged={this.onValueChanged}
          placeholder={this.props.description !== null ? this.props.description : ''} />
      </div>
    );
  }
}




/***********************************
 * SampleInsecurePassword function *
 ***********************************/
export default function SampleInsecurePassword(targetProperty: string, properties: ISampleInsecurePasswordProps): IPropertyPaneField<ISampleInsecurePasswordPropsInternal> {
  var newProperties: ISampleInsecurePasswordPropsInternal = {
    key: properties.key,
    label: properties.label,
    description: properties.description,
    initialValue: properties.initialValue,
    properties: properties.properties,
    targetProperty: targetProperty,
    onPropertyChange: properties.onPropertyChange,
    onDispose: null,
    onRender: null,
    onChanged: null
  };

  // Calles the SampleInsecurePasswordBuilder builder object
  // This object will simulate a PropertyFieldCustom to manage his rendering process
  return new SampleInsecurePasswordBuilder(targetProperty, newProperties);
}