Fixing merge conflict in script editor web part

This commit is contained in:
VesaJuvonen 2018-09-10 13:47:34 +03:00
parent ffdbbfd3e5
commit e7db64e016
6 changed files with 105 additions and 158 deletions

View File

@ -2283,15 +2283,6 @@
"@types/q": "0.0.32"
}
},
"@types/prop-types": {
"version": "15.5.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz",
"integrity": "sha512-mOrlCEdwX3seT3n0AXNt4KNPAZZxcsABUHwBgFXOt+nvFUXkxCAO6UBJHPrDxWEa2KDMil86355fjo8jbZ+K0Q==",
"dev": true,
"requires": {
"@types/react": "15.6.6"
}
},
"@types/q": {
"version": "0.0.32",
"resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
@ -2462,33 +2453,17 @@
}
},
"@uifabric/merge-styles": {
<<<<<<< .mine
"version": "5.17.1",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
"dev": true,
=======
"version": "5.17.1",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
>>>>>>> .theirs
"requires": {
"tslib": "1.8.1"
}
},
"@uifabric/styling": {
<<<<<<< .mine
"version": "5.31.2",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.2.tgz",
"integrity": "sha512-G7grRENxdB4NcUEtQmSisRDnIeQHQmAfcpIe5AWmVQxnB/e8U/jT+SzYqK6V12SnLf4ufN5nepZkdOjgbtuA1Q==",
"dev": true,
=======
"version": "5.31.2",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.2.tgz",
"integrity": "sha512-G7grRENxdB4NcUEtQmSisRDnIeQHQmAfcpIe5AWmVQxnB/e8U/jT+SzYqK6V12SnLf4ufN5nepZkdOjgbtuA1Q==",
>>>>>>> .theirs
"requires": {
"@microsoft/load-themed-styles": "1.7.53",
"@uifabric/merge-styles": "5.17.1",
@ -2497,17 +2472,9 @@
}
},
"@uifabric/utilities": {
<<<<<<< .mine
"version": "5.34.1",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
"integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
"dev": true,
=======
"version": "5.34.1",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
"integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
>>>>>>> .theirs
"requires": {
"@uifabric/merge-styles": "5.17.1",
"prop-types": "15.6.0",
@ -13681,29 +13648,15 @@
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.118.3.tgz",
"integrity": "sha512-MYRah+boLs75UXkTjh1gYORitjtt7ixrfl5BFtFWkX8AGSau2ulZT4XQ0gOyKumvPfCqLzlNKXv//84tptUm0g==",
"requires": {
<<<<<<< .mine
"@microsoft/load-themed-styles": "1.7.74",
"@uifabric/icons": "5.8.0",
"@uifabric/merge-styles": "5.17.1",
"@uifabric/styling": "5.31.2",
"@uifabric/utilities": "5.34.1",
=======
"@microsoft/load-themed-styles": "1.7.53",
"@uifabric/icons": "5.8.0",
"@uifabric/merge-styles": "5.17.1",
"@uifabric/styling": "5.31.2",
"@uifabric/utilities": "5.34.1",
>>>>>>> .theirs
"prop-types": "15.6.0",
"tslib": "1.8.1"
},
"dependencies": {
<<<<<<< .mine
"@microsoft/load-themed-styles": {
"version": "1.7.74",
"resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.74.tgz",
"integrity": "sha512-zBCIhD3ETnNpPQuLRVFjCUoiLZp7H4BVXR9GDnFwkCP+Q0tBlGya1Q0Gw4iG5ngBUE8+cs3r3zZGDYvezJqJUg=="
},
"@uifabric/icons": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
@ -13712,82 +13665,6 @@
"@uifabric/styling": "5.31.2",
"tslib": "1.8.1"
}
},
"@uifabric/merge-styles": {
"version": "5.17.1",
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
"requires": {
"tslib": "1.8.1"
}
},
"@uifabric/styling": {
"version": "5.31.2",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.31.2.tgz",
"integrity": "sha512-G7grRENxdB4NcUEtQmSisRDnIeQHQmAfcpIe5AWmVQxnB/e8U/jT+SzYqK6V12SnLf4ufN5nepZkdOjgbtuA1Q==",
=======
"@uifabric/icons": {
"version": "5.8.0",
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
"integrity": "sha512-EUhKxYlIPJshg4fQvCNTYSk0p7RhzEWeEAJBV4sao1SKmN0/pZBnkLbDqWjU5VUfdwZZYiIdaLRpM+pyzhniZw==",
>>>>>>> .theirs
"requires": {
<<<<<<< .mine
"@microsoft/load-themed-styles": "1.7.74",
"@uifabric/merge-styles": "5.17.1",
"@uifabric/utilities": "5.34.1",
=======
"@uifabric/styling": "5.31.2",
>>>>>>> .theirs
"tslib": "1.8.1"
}
<<<<<<< .mine
},
"@uifabric/utilities": {
"version": "5.34.1",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.1.tgz",
"integrity": "sha512-xUZ+KlCxmA9PCEOtutfeyYnPmySkEVA/ak3fb8Uj54684GlbrnlqrfNEencVG5YgQDcNEaztTwxW3I7jSCrYJQ==",
"requires": {
"@uifabric/merge-styles": "5.17.1",
"prop-types": "15.6.0",
"tslib": "1.8.1"
}
=======
>>>>>>> .theirs
}
}
},
@ -16632,20 +16509,6 @@
"safe-buffer": "5.1.1"
}
},
"sharepoint-modern-script-editor-propertypane": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/sharepoint-modern-script-editor-propertypane/-/sharepoint-modern-script-editor-propertypane-1.0.5.tgz",
"integrity": "sha512-CcLKJSHaf5hyCHB6O2bloahgfN9WZVp7CH/ROFhZ3d19KxhuoTS91HzPsn8bIB+qaKdimfva+f9ucxhF6AuMvg==",
"dev": true,
"requires": {
"@types/prop-types": "15.5.5",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"office-ui-fabric-react": "5.118.3",
"react": "15.6.2",
"react-dom": "15.6.2"
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

View File

@ -6,27 +6,15 @@
"node": ">=0.10.0"
},
"dependencies": {
<<<<<<< .mine
"@microsoft/sp-core-library": "1.5.1",
"@microsoft/sp-webpart-base": "1.5.1",
=======
"@microsoft/sp-core-library": "1.5.1",
"@microsoft/sp-webpart-base": "1.5.1",
"@types/es6-promise": "0.0.33",
>>>>>>> .theirs
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
<<<<<<< .mine
"@types/webpack-env": "1.13.1",
=======
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "^5.118.3",
>>>>>>> .theirs
"react": "15.6.2",
"react-dom": "15.6.2",
"@types/es6-promise": "0.0.33"
"react-dom": "15.6.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.5.1",
@ -36,13 +24,7 @@
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
<<<<<<< .mine
"sharepoint-modern-script-editor-propertypane": "^1.0.5",
"webpack-bundle-analyzer": "^2.13.1"
=======
"webpack-bundle-analyzer": "^2.13.1"
>>>>>>> .theirs
},
"scripts": {
"build": "gulp bundle",

View File

@ -35,7 +35,7 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
this.domElement.innerHTML = this.properties.script;
this.executeScript(this.domElement);
} else {
// Dynamically load the editor pane to reduce overall bundle size
// Dynamically load the editor pane to reduce overall bundle size
const editorPopUp = await import(
/* webpackChunkName: 'scripteditor' */
'./components/ScriptEditor'
@ -183,4 +183,4 @@ export default class ScriptEditorWebPart extends BaseClientSideWebPart<IScriptEd
onLoads[i]();
}
}
}
}

View File

@ -0,0 +1,13 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.scriptEditor {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
}

View File

@ -0,0 +1,85 @@
import * as React from 'react';
import styles from './ScriptEditor.module.scss';
import { IScriptEditorProps } from './IScriptEditorProps';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { loadStyles } from '@microsoft/load-themed-styles';
require('./overrides.css');
export default class ScriptEditor extends React.Component<IScriptEditorProps, any> {
constructor() {
super();
this._showDialog = this._showDialog.bind(this);
this._closeDialog = this._closeDialog.bind(this);
this._cancelDialog = this._cancelDialog.bind(this);
this._onScriptEditorTextChanged = this._onScriptEditorTextChanged.bind(this);
const uiFabricCSS: string = `
.pzl-bgColor-themeDark, .pzl-bgColor-themeDark--hover:hover {
background-color: "[theme:themeDark, default:#005a9e]";
}
`;
loadStyles(uiFabricCSS);
this.state = {
showDialog: false
};
}
public componentDidMount(): void {
this.setState({ script: this.props.script, loaded: this.props.script });
}
private _showDialog() {
this.setState({ showDialog: true });
}
private _closeDialog() {
this.setState({ showDialog: false });
this.props.save(this.state.script);
}
private _cancelDialog() {
this.props.save(this.state.loaded);
this.setState({ showDialog: false, script: this.state.loaded });
}
private _onScriptEditorTextChanged(text: string) {
this.setState({ script: text });
}
public render(): React.ReactElement<IScriptEditorProps> {
const viewMode = <span dangerouslySetInnerHTML={{ __html: this.state.script }}></span>;
return (
<div >
<div className={styles.scriptEditor}>
<div className={styles.container}>
<div className={`ms-Grid-row pzl-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
<div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
<span className="ms-font-xl ms-fontColor-white">{this.props.title}</span>
<p className="ms-font-l ms-fontColor-white"></p>
<DefaultButton description='Opens the snippet dialog' onClick={this._showDialog}>Edit snippet</DefaultButton>
</div>
</div>
</div>
</div>
<Dialog
isOpen={this.state.showDialog}
type={DialogType.normal}
onDismiss={this._closeDialog}
title='Embed'
subText='Paste your script, markup or embed code below. Note that scripts will only run in view mode.'
isBlocking={true}
className={'ScriptPart'}
>
<TextField multiline rows={15} onChanged={this._onScriptEditorTextChanged} value={this.state.script} />
<DialogFooter>
<PrimaryButton onClick={this._closeDialog}>Save</PrimaryButton>
<DefaultButton onClick={this._cancelDialog}>Cancel</DefaultButton>
</DialogFooter>
{viewMode}
</Dialog>
</div >);
}
}

View File

@ -0,0 +1,4 @@
.ScriptPart .ms-Dialog-main {
width: 65%;
max-width: 65%;
}