+
+ {this.props.label}
+
+
+ { this._infoIcon = infoIcon; }}
+ onMouseOver={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOver.bind(this) : null}
+ onMouseOut={this.props.calloutTrigger === CalloutTriggers.Hover ? this._onInfoIconMouseOut.bind(this) : null}
+ onClick={this.props.calloutTrigger === CalloutTriggers.Click ? this._onInfoIconClick.bind(this) : null}>
+
+ {this.state.isCalloutVisible && (
+
+ {this.props.calloutContent}
+
+ )
+ }
+
);
+ }
+
+
+ private _onCalloutDismiss() {
+ if (this.state.isCalloutVisible) {
+ this.setState({
+ isCalloutVisible: false
+ });
+ }
+ }
+
+ private _onInfoIconMouseOver(): void {
+ if (this.props.calloutTrigger !== CalloutTriggers.Hover) {
+ return;
+ }
+
+ if (!this.state.isCalloutVisible) {
+ this.setState({
+ isCalloutVisible: true
+ });
+ }
+ }
+
+ private _onInfoIconMouseOut(e: MouseEvent): void {
+ if (this.props.calloutTrigger !== CalloutTriggers.Hover) {
+ return;
+ }
+
+ if (e.relatedTarget) {
+
+ let relatedTarget: HTMLElement = (e.relatedTarget as HTMLElement);
+ if (relatedTarget && relatedTarget.closest('.ms-Callout-container')) {
+ return;
+ }
+ }
+
+ this.setState({
+ isCalloutVisible: false
+ });
+
+ }
+
+ private _onInfoIconClick(): void {
+ if (this.props.calloutTrigger !== CalloutTriggers.Click) {
+ return;
+ }
+
+ this.setState({
+ isCalloutVisible: !this.state.isCalloutVisible
+ });
+ }
+ }
\ No newline at end of file
diff --git a/samples/react-file-upload/src/common/propertyFieldHeader/index.ts b/samples/react-file-upload/src/common/propertyFieldHeader/index.ts
new file mode 100644
index 000000000..f0aa8e1e6
--- /dev/null
+++ b/samples/react-file-upload/src/common/propertyFieldHeader/index.ts
@@ -0,0 +1,2 @@
+export * from './IPropertyFieldHeader';
+export * from './PropertyFieldHeader';
\ No newline at end of file
diff --git a/samples/react-file-upload/src/propertyFields/errorMessage/FieldErrorMessage.tsx b/samples/react-file-upload/src/propertyFields/errorMessage/FieldErrorMessage.tsx
new file mode 100644
index 000000000..2316fb657
--- /dev/null
+++ b/samples/react-file-upload/src/propertyFields/errorMessage/FieldErrorMessage.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+
+export interface IFieldErrorMessageProps {
+
+ errorMessage: string;
+}
+
+/**
+ * Component that shows an error message when something went wront with the property control
+ */
+export default class FieldErrorMessage extends React.Component