@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
187 lines • 9.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const Button_1 = require("@fluentui/react/lib/Button");
const Panel_1 = require("@fluentui/react/lib/Panel");
const IPropertyFieldCodeEditor_1 = require("./IPropertyFieldCodeEditor");
const Label_1 = require("@fluentui/react/lib/Label");
const TextField_1 = require("@fluentui/react/lib/TextField");
const CodeFormatter_1 = require("./CodeFormatter");
const PropertyFieldCodeEditorHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldCodeEditorHost.module.scss"));
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const react_ace_1 = tslib_1.__importDefault(require("react-ace"));
require("brace/mode/json");
require("brace/mode/javascript");
require("brace/mode/sass");
require("brace/mode/typescript");
require("brace/mode/html");
require("brace/mode/handlebars");
require("brace/mode/xml");
require("brace/theme/monokai");
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
/**
* Renders the controls for PropertyFieldCodeEditor component
*/
class PropertyFieldCodeEditorHost extends React.Component {
/**
* Constructor method
*/
constructor(props) {
super(props);
this.cancel = true;
telemetry.track('PropertyFieldCodeEditor', {
language: props.language,
disabled: props.disabled
});
this.state = {
code: typeof this.props.initialValue !== 'undefined' ? this.props.initialValue : '',
loaded: false,
openPanel: false,
errorMessage: ''
};
this.onOpenPanel = this.onOpenPanel.bind(this);
this.onClosePanel = this.onClosePanel.bind(this);
this.onFormatCode = this.onFormatCode.bind(this);
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
this.async = new Utilities_1.Async(this);
}
/**
* UNSAFE_componentWillUpdate lifecycle hook
*
* @param nextProps
* @param nextState
*/
UNSAFE_componentWillUpdate(nextProps, nextState) {
if (nextProps.initialValue !== this.props.initialValue) {
this.setState({
code: typeof nextProps.initialValue !== 'undefined' ? nextProps.initialValue : ''
});
}
}
/**
* Open the right Panel
*/
onOpenPanel() {
if (this.props.disabled) {
return;
}
// Store the current code value
this.previousValue = this.state.code;
this.cancel = true;
this.setState({
openPanel: true,
loaded: false
});
}
/**
* Close the panel
*/
onClosePanel() {
this.setState((crntState) => {
const newState = {
openPanel: false,
loaded: false
};
// Check if the property has to be reset
if (this.cancel) {
newState.code = this.previousValue;
}
return newState;
});
}
/**
* Format the code
*/
onFormatCode() {
let formattedCode;
const codeFormatter = new CodeFormatter_1.CodeFormatter();
switch (this.props.language) {
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.JSON: {
formattedCode = codeFormatter.formatJSON(this.state.code.trim());
break;
}
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.XML:
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.HTML: {
formattedCode = codeFormatter.formatHTML(this.state.code.trim());
break;
}
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.Sass:
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.css: {
formattedCode = codeFormatter.formatCSS(this.state.code.trim());
break;
}
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.JavaScript:
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.TypeScript:
case IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages.Handlebars: {
formattedCode = codeFormatter.formatScript(this.state.code.trim());
break;
}
}
// const beautify = require('beautify');
// let formattedCode: any = beautify(this.state.code.trim(), { format: codeLanguage });
this.setState({ code: formattedCode });
}
/**
* Called when the component will unmount
*/
componentWillUnmount() {
if (typeof this.async !== 'undefined') {
this.async.dispose();
}
}
/**
* Called when the save button gets clicked
*/
onSave() {
this.cancel = false;
(0, GeneralHelper_1.setPropertyValue)(this.props.properties, this.props.targetProperty, this.state.code);
this.props.onPropertyChange(this.props.targetProperty, this.props.initialValue, this.state.code);
// Trigger the apply button
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, this.state.code);
}
this.setState((current) => (Object.assign(Object.assign({}, current), { openPanel: false })));
}
/**
* Called when the code gets changed
*/
onChange(newValue) {
this.setState((current) => (Object.assign(Object.assign({}, current), { code: newValue })));
}
/**
* Renders the SPListpicker controls with Office UI Fabric
*/
render() {
return (React.createElement("div", null,
this.props.label && React.createElement(Label_1.Label, null, this.props.label),
React.createElement("table", { className: PropertyFieldCodeEditorHost_module_scss_1.default.codeFieldTable },
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", null,
React.createElement(TextField_1.TextField, { disabled: this.props.disabled, readOnly: true, value: this.state.code, onClick: this.onOpenPanel })),
React.createElement("td", { className: PropertyFieldCodeEditorHost_module_scss_1.default.codeFieldRow },
React.createElement(Button_1.IconButton, { disabled: this.props.disabled, iconProps: { iconName: 'Code' }, onClick: this.onOpenPanel }))))),
React.createElement(FieldErrorMessage_1.default, { errorMessage: this.state.errorMessage }),
React.createElement(Panel_1.Panel, { isOpen: this.state.openPanel, hasCloseButton: true, onDismiss: this.onClosePanel, isLightDismiss: true, type: this.props.panelWidth ? Panel_1.PanelType.custom : Panel_1.PanelType.medium, customWidth: this.props.panelWidth, headerText: this.props.panelTitle, isFooterAtBottom: true, styles: {
content: {
height: '100%',
width: '100%',
boxSizing: 'border-box'
}
}, layerProps: { eventBubblingEnabled: true }, onRenderFooterContent: () => (React.createElement("div", { className: PropertyFieldCodeEditorHost_module_scss_1.default.actions },
React.createElement("div", { className: "ms-Grid", dir: "ltr" },
React.createElement("div", { className: "ms-Grid-row" },
React.createElement(Button_1.PrimaryButton, { iconProps: { iconName: 'Save' }, text: strings.SaveButtonLabel, value: strings.SaveButtonLabel, onClick: this.onSave }),
React.createElement(Button_1.DefaultButton, { iconProps: { iconName: 'Cancel' }, text: strings.CancelButtonLabel, value: strings.CancelButtonLabel, onClick: this.onClosePanel }),
this.props.language !== IPropertyFieldCodeEditor_1.PropertyFieldCodeEditorLanguages["Plain Text"] &&
React.createElement(Button_1.DefaultButton, { color: "ms-bgColor-themeLight", iconProps: { iconName: 'ClearFormatting' }, text: strings.FormatCodeButtonLabel, value: strings.ExportButtonLabel, onClick: this.onFormatCode }))))) },
React.createElement(react_ace_1.default, { mode: this.props.language, theme: "monokai", onChange: this.onChange, value: this.state.code, name: `code-${this.props.targetProperty}`, editorProps: { $blockScrolling: true }, setOptions: this.props.options, width: "100%", height: "100%" }))));
}
}
exports.default = PropertyFieldCodeEditorHost;
//# sourceMappingURL=PropertyFieldCodeEditorHost.js.map