diff --git a/docs/documentation/docs/controls/fields/FieldNameRenderer.md b/docs/documentation/docs/controls/fields/FieldNameRenderer.md index 065ff7e9e..c4edb274a 100644 --- a/docs/documentation/docs/controls/fields/FieldNameRenderer.md +++ b/docs/documentation/docs/controls/fields/FieldNameRenderer.md @@ -37,9 +37,9 @@ The FieldNameRenderer component can be configured with the following properties: | isLink | boolean | yes | True if the name should be rendered as a link. | | isNew | boolean | no | True if the document is new. | | filePath | string | no | Path to the document. | -| hasPreview | boolean | no | True if the document has preview (true by default) | -| onClick | (args: INameClickEventArgs) => {} | no | Custom handler for link click. If not set link click will lead to rendering document preview. | - +| hasPreview | boolean | no | True if the document has preview and link href should be constructed to display the preview (instead of direct document's link). The flag works only if `onClick` property is NOT defined. | +| onClick | (args: INameClickEventArgs) => {} | no | Custom handler for link click. If not set link click will lead to rendering document preview. Works if `isLink` is set to `true` | +| onDoubleClick | (args: INameClickEventArgs) => {} | no | Custom handler for link double click. If not set link If not set link will use OOTB behavior. Works if `isLink` is set to `true` | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/fields/FieldNameRenderer) diff --git a/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx b/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx index dca80c4dc..d5332d504 100644 --- a/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx +++ b/src/controls/fields/fieldNameRenderer/FieldNameRenderer.tsx @@ -1,5 +1,7 @@ import { override } from '@microsoft/decorators'; import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + import { css } from 'office-ui-fabric-react/lib/Utilities'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { Link } from 'office-ui-fabric-react/lib/Link'; @@ -28,13 +30,20 @@ export interface IFieldNameRendererProps extends IFieldRendererProps { */ isNew?: boolean; /** - * true if the document type has preview (true by default) + * true if the document type has preview (true by default). + * The flag impacts on the link's href: + * if the flag is tru then the href is constructed like #id=${filePath}&parent=${filePath.substring(0, filePath.lastIndexOf('/'))}, + * otherwise the href will contain filePath only. */ hasPreview?: boolean; /** * custom handler for link click. If not set link click will lead to rendering document preview */ onClick?: (args: IFieldNameClickEventArgs) => {}; + /** + * custom handler for link double click. If not set link will use OOTB behavior. + */ + onDoubleClick?: (args: IFieldNameClickEventArgs) => {}; } /** @@ -57,12 +66,37 @@ export interface IFieldNameClickEventArgs { * - Title */ export class FieldNameRenderer extends React.Component { + private _button: HTMLButtonElement; + public constructor(props: IFieldNameRendererProps, state: IFieldNameRendererState) { super(props, state); telemetry.track('FieldNameRenderer', {}); this.state = {}; + + this._onDoubleClick = this._onDoubleClick.bind(this); + } + + @override + public componentDidMount() { + // + // small hack for double click. + // unfortunately, we can't use React onDoubleClick because React doesn't guaranty the sequence of handlers. + // And stopPropagation could not make effect. + // + if (this.props.onDoubleClick && this.props.isLink) { + const domNode = ReactDOM.findDOMNode(this); + this._button = domNode.querySelector('button'); + this._button.addEventListener('dblclick', this._onDoubleClick, false); + } + } + + @override + public componentWillUnmount() { + if (this._button) { + this._button.removeEventListener('dblclick', this._onDoubleClick); + } } @override @@ -76,7 +110,10 @@ export class FieldNameRenderer extends React.Component{this.props.text}; + value = {this.props.text}; } else { let url: string; @@ -103,13 +140,23 @@ export class FieldNameRenderer extends React.Component; } - private _onClick(e): void { + private _onClick(e): boolean { if (this.props.onClick) { e.stopPropagation(); e.preventDefault(); const args: IFieldNameClickEventArgs = this.props as IFieldNameClickEventArgs; this.props.onClick(args); - return; + return false; + } + } + + private _onDoubleClick(e): boolean { + if (this.props.onDoubleClick) { + e.stopPropagation(); + e.preventDefault(); + const args: IFieldNameClickEventArgs = this.props as IFieldNameClickEventArgs; + this.props.onDoubleClick(args); + return false; } } }