fix monaco editor layout with resizeObserve

dev_aliyun2
harry 5 years ago
parent 54a44ebb61
commit d4c032420f

@ -64,7 +64,7 @@ function getLanguageByMirrorName(mirror_name) {
export default ({ export default ({
width = '100%', width = '100%',
height = '100%', height = '445px',
value, value,
language = 'javascript', language = 'javascript',
options = {}, options = {},
@ -78,20 +78,9 @@ export default ({
const [init, setInit] = useState(false) const [init, setInit] = useState(false)
function onLayout() { function onLayout() {
if (window.ResizeObserver) {
const ro = new window.ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target.offsetHeight > 0) {
editor.current.instance.layout()
}
}
})
ro.observe(editorEl.current.parentElement)
} else {
setTimeout(() => { setTimeout(() => {
editor.current.instance.layout() editor.current.instance.layout()
}, 100); }, 100)
}
} }
useEffect(() => { useEffect(() => {

@ -155,7 +155,7 @@ class MainContent extends Component {
<div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}> <div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
<span style={{ color: '#ddd', display: 'block' }}>正在加载中请稍后...</span> <span style={{ color: '#ddd', display: 'block' }}>正在加载中请稍后...</span>
</div> </div>
<div style={{ display: (codeLoading ? 'none' : 'block') }}> <div style={{ display: (codeLoading ? 'none' : 'block'), height: '100%' }}>
<CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer> <CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer>
</div> </div>
</React.Fragment> </React.Fragment>

@ -37,7 +37,7 @@ function getNewTreeData(treeData, curKey, child, level) {
} }
function fileData2TreeData(repoFilesData) { function fileData2TreeData(repoFilesData) {
if(repoFilesData!=null){ if (repoFilesData != null) {
const fileTreeData = []; const fileTreeData = [];
repoFilesData.forEach((item) => { repoFilesData.forEach((item) => {
if (item.kind === 'file') { if (item.kind === 'file') {
@ -79,17 +79,17 @@ class CodeRepositoryViewContainer extends Component {
} }
} }
showSettingDrawer = (open) => { showSettingDrawer = (open) => {
this.setState({settingDrawerOpen: open}) this.setState({ settingDrawerOpen: open })
} }
tabIndexChange = (index) => { tabIndexChange = (index) => {
this.setState({tabIndex: index}); this.setState({ tabIndex: index });
} }
onRepositoryViewExpand() { onRepositoryViewExpand() {
window.repository_extend_and_zoom(); window.repository_extend_and_zoom();
this.setState({ this.setState({
evaluateViewExpanded: !this.state.evaluateViewExpanded evaluateViewExpanded: !this.state.evaluateViewExpanded
}, () => { }, () => {
setTimeout(()=>{ setTimeout(() => {
window.__tpiOnResize() window.__tpiOnResize()
}, 300) }, 300)
}) })
@ -122,20 +122,20 @@ class CodeRepositoryViewContainer extends Component {
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
const { game, challenge } = this.props const { game, challenge } = this.props
if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier) ) { if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier)) {
this.setState({ this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ] fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
}) })
// 初始化 // 初始化
} else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) { } else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) {
this.setState({ this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ] fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
}) })
} else if (challenge && prevProps && prevProps.challenge } else if (challenge && prevProps && prevProps.challenge
&& challenge.pathIndex != prevProps.challenge.pathIndex && challenge.pathIndex != prevProps.challenge.pathIndex
&& challenge.pathIndex !== -1) { && challenge.pathIndex !== -1) {
this.setState({ this.setState({
fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path ] fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path]
}) })
} }
} }
@ -179,7 +179,7 @@ class CodeRepositoryViewContainer extends Component {
// var ar = this.props.challenge.path.split('/'); // var ar = this.props.challenge.path.split('/');
// ar.length = ar.length - 2; // ar.length = ar.length - 2;
// var _path = ar.join('/'); // var _path = ar.join('/');
var _path = treeNode ? treeNode.props.eventKey : '' ; var _path = treeNode ? treeNode.props.eventKey : '';
if (_path.charAt(0) === '/') { if (_path.charAt(0) === '/') {
_path = _path.substring(1) _path = _path.substring(1)
} }
@ -292,43 +292,17 @@ class CodeRepositoryViewContainer extends Component {
} }
} }
} }
// /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88 // /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
render() { render() {
return ( return (
// <React.Fragment>
// {this.props.isOnlyContainer == true ?
// React.Children.map(this.props.children, child => {
// if(!child) {
// return ''
// }
// return React.cloneElement(child, Object.assign({...this.state}, {
// loadRepoFiles: this.loadRepoFiles,
// onTreeSelect: this.onTreeSelect,
// onLoadData: this.onLoadData,
// }))
// })
// :
// <CodeRepositoryView {...this.props}
// {...this.state}
// showFilesDrawer={this.showFilesDrawer}
// loadRepoFiles={this.loadRepoFiles}
// onLoadData={this.onLoadData}
// onTreeSelect={ this.onTreeSelect }
// onRepositoryViewExpand={this.onRepositoryViewExpand}
// tabIndexChange={this.tabIndexChange}
// showSettingDrawer={this.showSettingDrawer}
// ></CodeRepositoryView> }
// </React.Fragment>
<React.Fragment> <React.Fragment>
{this.props.isOnlyContainer == true ? {this.props.isOnlyContainer == true ?
React.Children.map(this.props.children, child => { React.Children.map(this.props.children, child => {
if(!child) { if (!child) {
return '' return ''
} }
return React.cloneElement(child, Object.assign({...this.state}, { return React.cloneElement(child, Object.assign({ ...this.state }, {
loadRepoFiles: this.loadRepoFiles, loadRepoFiles: this.loadRepoFiles,
onTreeSelect: this.onTreeSelect, onTreeSelect: this.onTreeSelect,
onLoadData: this.onLoadData, onLoadData: this.onLoadData,
@ -342,11 +316,11 @@ class CodeRepositoryViewContainer extends Component {
showFilesDrawer={this.showFilesDrawer} showFilesDrawer={this.showFilesDrawer}
loadRepoFiles={this.loadRepoFiles} loadRepoFiles={this.loadRepoFiles}
onLoadData={this.onLoadData} onLoadData={this.onLoadData}
onTreeSelect={ this.onTreeSelect } onTreeSelect={this.onTreeSelect}
onRepositoryViewExpand={this.onRepositoryViewExpand} onRepositoryViewExpand={this.onRepositoryViewExpand}
tabIndexChange={this.tabIndexChange} tabIndexChange={this.tabIndexChange}
showSettingDrawer={this.showSettingDrawer} showSettingDrawer={this.showSettingDrawer}
></CodeRepositoryView> } ></CodeRepositoryView>}
</React.Fragment> </React.Fragment>
); );
} }

Loading…
Cancel
Save