@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
97 lines • 4.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FieldNameRenderer = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ReactDOM = tslib_1.__importStar(require("react-dom"));
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Link_1 = require("@fluentui/react/lib/Link");
var FieldBaseTextRenderer_1 = require("../fieldBaseTextRenderer/FieldBaseTextRenderer");
var telemetry = tslib_1.__importStar(require("../../../common/telemetry"));
var FieldNameRenderer_module_scss_1 = tslib_1.__importDefault(require("./FieldNameRenderer.module.scss"));
/**
* Field Title Renderer.
* Used for:
* - Title
*/
var FieldNameRenderer = /** @class */ (function (_super) {
tslib_1.__extends(FieldNameRenderer, _super);
function FieldNameRenderer(props, state) {
var _this = _super.call(this, props, state) || this;
telemetry.track('FieldNameRenderer', {});
_this.state = {};
_this._onDoubleClick = _this._onDoubleClick.bind(_this);
return _this;
}
FieldNameRenderer.prototype.componentDidMount = function () {
//
// 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) {
var domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
this._button = domNode.querySelector('button');
this._button.addEventListener('dblclick', this._onDoubleClick, false);
}
};
FieldNameRenderer.prototype.componentWillUnmount = function () {
if (this._button) {
this._button.removeEventListener('dblclick', this._onDoubleClick);
}
};
FieldNameRenderer.prototype.render = function () {
var isLink = this.props.isLink;
//
// for now only signal for New documents is implemented
//
var signal = this.props.isNew ? React.createElement("span", { className: (0, Utilities_1.css)(FieldNameRenderer_module_scss_1.default.signal, FieldNameRenderer_module_scss_1.default.newItem) },
React.createElement(Icon_1.Icon, { iconName: 'Glimmer', className: (0, Utilities_1.css)(FieldNameRenderer_module_scss_1.default.newIcon) })) : null;
var value;
if (isLink) {
if (this.props.onClick) {
value = React.createElement(Link_1.Link, { onClick: this._onClick.bind(this), style: this.props.cssProps, className: FieldNameRenderer_module_scss_1.default.value }, this.props.text);
}
else {
var url = void 0;
var filePath = this.props.filePath;
var parentPath = filePath.substring(0, filePath.lastIndexOf('/'));
if (this.props.hasPreview !== false) {
url = "#id=".concat(encodeURIComponent(filePath), "&parent=").concat(encodeURIComponent(parentPath));
}
else {
url = filePath;
}
value = React.createElement(Link_1.Link, { href: url, style: this.props.cssProps, className: FieldNameRenderer_module_scss_1.default.value }, this.props.text);
}
}
else {
value = React.createElement(FieldBaseTextRenderer_1.FieldBaseTextRenderer, { cssProps: this.props.cssProps, text: this.props.text });
}
return React.createElement("span", { className: (0, Utilities_1.css)(FieldNameRenderer_module_scss_1.default.signalField, this.props.className), style: this.props.cssProps },
signal,
React.createElement("span", { className: FieldNameRenderer_module_scss_1.default.signalFieldValue }, value));
};
FieldNameRenderer.prototype._onClick = function (e) {
if (this.props.onClick) {
e.stopPropagation();
e.preventDefault();
var args = this.props;
this.props.onClick(args);
return false;
}
};
FieldNameRenderer.prototype._onDoubleClick = function (e) {
if (this.props.onDoubleClick) {
e.stopPropagation();
e.preventDefault();
var args = this.props;
this.props.onDoubleClick(args);
return false;
}
};
return FieldNameRenderer;
}(React.Component));
exports.FieldNameRenderer = FieldNameRenderer;
//# sourceMappingURL=FieldNameRenderer.js.map