@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
69 lines • 3.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@fluentui/react");
const PropertyControlStrings_1 = tslib_1.__importDefault(require("PropertyControlStrings"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const monacoEditorControl_1 = require("./monacoEditorControl");
const DEFAULT_PANEL_WIDTH = "800px";
class PropertyFieldMonacoEditorHost extends React.Component {
constructor(props) {
super(props);
this.showPanel = (indicator) => {
this.setState({ showPanel: indicator });
};
this.controlClasses = (0, react_1.mergeStyleSets)({
headerTitle: (0, react_1.mergeStyles)({
paddingTop: 20,
}),
textFieldStyles: (0, react_1.mergeStyles)({
paddingBottom: 5,
}),
});
this._onValueChange = (newValue, errors) => {
this.setState({ value: newValue, validationErrors: errors });
};
this.onRenderFooterContent = () => {
return (React.createElement(react_1.Stack, { horizontal: true, horizontalAlign: "start", tokens: { childrenGap: 5 } },
React.createElement(react_1.PrimaryButton, { onClick: (ev) => {
ev.preventDefault();
this.props.onPropertyChange(this.state.value);
this.showPanel(false);
} }, PropertyControlStrings_1.default.MonacoEditorSaveButtonLabel),
React.createElement(react_1.DefaultButton, { onClick: (ev) => {
ev.preventDefault();
this.props.onPropertyChange(this.props.value);
this.showPanel(false);
} }, PropertyControlStrings_1.default.MonacoEditorCancelButtonLabel)));
};
telemetry.track("PropertyFieldOrder", {});
this.state = {
value: this.props.value,
validationErrors: [],
showPanel: false,
};
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
this.setState({ value: this.props.value });
}
}
render() {
const { panelWidth } = this.props;
const _panelWidth = panelWidth ? `${panelWidth}px` : DEFAULT_PANEL_WIDTH;
return (React.createElement(React.Fragment, null,
React.createElement(react_1.TextField, { value: this.props.value, readOnly: true, className: this.controlClasses.textFieldStyles }),
React.createElement(react_1.PrimaryButton, { text: PropertyControlStrings_1.default.MonacoEditorOpenButtonLabel, onClick: (ev) => {
ev.preventDefault();
this.showPanel(true);
} }),
React.createElement(react_1.Panel, { type: react_1.PanelType.custom, customWidth: _panelWidth, isOpen: this.state.showPanel, onDismiss: () => {
this.showPanel(false);
}, headerText: PropertyControlStrings_1.default.MonacoEditorPanelTitle, onRenderFooterContent: this.onRenderFooterContent, isFooterAtBottom: true, layerProps: { eventBubblingEnabled: true } },
React.createElement("div", { className: this.controlClasses.headerTitle },
React.createElement(monacoEditorControl_1.MonacoEditor, Object.assign({}, this.props, { onValueChange: this._onValueChange }))))));
}
}
exports.default = PropertyFieldMonacoEditorHost;
//# sourceMappingURL=PropertyFieldMonacoEditorHost.js.map