From 7bdd2820ead16ee4bd2c88f1918faefc99a51f40 Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Wed, 3 Jun 2020 09:56:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/monaco-editor/index.jsx | 155 ++++++----- src/forge/Branch/SelectBranch.js | 75 +++-- src/forge/Branch/branch.css | 12 + src/forge/Main/CoderRootCommit.js | 13 +- src/forge/Main/CoderRootDirectory.js | 17 +- src/forge/Main/CoderRootDirectorytext.js | 333 ----------------------- src/forge/Main/CoderRootIndex.js | 2 +- src/forge/Main/Detail.js | 31 ++- src/forge/Main/Diff.jsx | 236 +++++++++++----- src/forge/Main/list.css | 12 + src/forge/New/Index.js | 65 ++++- src/forge/common/util.js | 2 +- src/modules/tpm/TPMIndexHOC.js | 29 +- 13 files changed, 455 insertions(+), 527 deletions(-) delete mode 100644 src/forge/Main/CoderRootDirectorytext.js diff --git a/src/components/monaco-editor/index.jsx b/src/components/monaco-editor/index.jsx index 9f944461c..35bd5e023 100644 --- a/src/components/monaco-editor/index.jsx +++ b/src/components/monaco-editor/index.jsx @@ -1,7 +1,5 @@ import React, { useEffect, useRef, useState } from 'react' -import * as monaco from 'monaco-editor' import ResizeObserver from 'resize-observer-polyfill'; -import './TPIMonacoConfig' import './index.css' function processSize(size) { @@ -10,24 +8,6 @@ function processSize(size) { function noop() { } let __prevent_trigger_change_event = false -function debounce(func, wait, immediate) { - var timeout - return function () { - var context = this, args = arguments - var later = function () { - timeout = null - if (!immediate) func.apply(context, args) - }; - var callNow = immediate && !timeout - clearTimeout(timeout) - timeout = setTimeout(later, wait) - if (callNow) func.apply(context, args) - } -} - -//monaco-language -// 'abap' | 'apex' | 'azcli' | 'bat' | 'cameligo' | 'clojure' | 'coffee' | 'cpp' | 'csharp' | 'csp' | 'css' | 'dockerfile' | 'fsharp' | 'go' | 'graphql' | 'handlebars' | 'html' | 'ini' | 'java' | 'javascript' | 'json' | 'kotlin' | 'less' | 'lua' | 'markdown' | 'mips' | 'msdax' | 'mysql' | 'objective-c' | 'pascal' | 'pascaligo' | 'perl' | 'pgsql' | 'php' | 'postiats' | 'powerquery' | 'powershell' | 'pug' | 'python' | 'r' | 'razor' | 'redis' | 'redshift' | 'restructuredtext' | 'ruby' | 'rust' | 'sb' | 'scheme' | 'scss' | 'shell' | 'solidity' | 'sophia' | 'sql' | 'st' | 'swift' | 'tcl' | 'twig' | 'typescript' | 'vb' | 'xml' | 'yaml'; - const DICT = { "Python3.6": 'python', "Python2.7": 'python', @@ -86,6 +66,7 @@ export function getLanguageByMirrorName(mirror_name = []) { return DICT[lang] || lang } +let monaco = null export default ({ width = '100%', height = '100%', @@ -117,7 +98,7 @@ export default ({ ro.observe(editorEl.current) } return ro - } + } useEffect(() => { let instance = editor.current.instance @@ -143,56 +124,57 @@ export default ({ } useEffect(() => { - editor.current.instance = monaco.editor.create( - editorEl.current, { - value, - language: getLanguageByMirrorName(language), - theme, - ...options - }, - overrideServices - ) - const instance = editor.current.instance - window.editor_monaco = instance //兼容之前的业务代码 - editorDidMount(instance, monaco) + import(/* webpackChunkName: "monaco-editor" */ 'monaco-editor/esm/vs/editor/editor.api.js').then((mod) => { + monaco = mod + editor.current.instance = monaco.editor.create( + editorEl.current, { + value, + language: getLanguageByMirrorName(language), + theme, + ...options + }, + overrideServices + ) + const instance = editor.current.instance + editorDidMount(instance, monaco) - editor.current.subscription = instance.onDidChangeModelContent(event => { - if (!__prevent_trigger_change_event) { - onChange(instance.getValue(), event); + editor.current.subscription = instance.onDidChangeModelContent(event => { + if (!__prevent_trigger_change_event) { + onChange(instance.getValue(), event); + } + }) + + if (onEditBlur) { + instance.onDidBlurEditorWidget(() => { onEditBlur(instance.getValue()) }) } - }) - - if (onEditBlur) { - instance.onDidBlurEditorWidget(() => { onEditBlur(instance.getValue()) }) - } - if (onFocus) { - instance.onDidFocusEditorText(() => { onFocus(instance.getValue()) }) - } - if (forbidCopy) { - instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C, () => null) - instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V, () => null) - instance.onDidPaste((pos) => { editor.current.pastePos = pos }) - window.addEventListener('paste', onPaste) - } - - let ro = onLayout() - setInit(true) - - return () => { - const el = editor.current.instance - el.dispose() - const model = el.getModel() - if (model) { - model.dispose() - } - if (editor.current.subscription) { - editor.current.subscription.dispose() + if (onFocus) { + instance.onDidFocusEditorText(() => { onFocus(instance.getValue()) }) } if (forbidCopy) { - window.removeEventListener('paste', onPaste) + instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_V, () => null) + instance.onDidPaste((pos) => { editor.current.pastePos = pos }) + window.addEventListener('paste', onPaste) } - ro.unobserve(editorEl.current) - } + + let ro = onLayout() + setInit(true) + + return () => { + const el = editor.current.instance + el.dispose() + const model = el.getModel() + if (model) { + model.dispose() + } + if (editor.current.subscription) { + editor.current.subscription.dispose() + } + if (forbidCopy) { + window.removeEventListener('paste', onPaste) + } + ro.unobserve(editorEl.current) + } + }) }, []) useEffect(() => { @@ -200,7 +182,6 @@ export default ({ if (instance && init) { let lang = getLanguageByMirrorName(language) monaco.editor.setModelLanguage(instance.getModel(), lang) - console.log(`model language was changed to ${instance.getModel().getLanguageIdentifier().language}`) } }, [language, init]) @@ -235,4 +216,42 @@ export default ({ return (
) -} \ No newline at end of file +} + +export function DiffEditor({ width, height, original, modified, language, options = {} }) { + const editorEl = useRef() + + useEffect(() => { + if (editorEl.current) { + import(/* webpackChunkName: "monaco-editor" */ 'monaco-editor/esm/vs/editor/editor.api.js').then((mod) => { + monaco = mod + editorEl.current.instance = monaco.editor.createDiffEditor(editorEl.current, { + readOnly: true, + ...options, + }) + }) + } + }, [editorEl.current]) + + useEffect(() => { + if (editorEl.current) { + let instance = editorEl.current.instance + instance.setModel({ + original: monaco.editor.createModel(original, language), + modified: monaco.editor.createModel(modified, language) + }) + } + + }, [original, modified, language, editorEl.current]) + + const fixedWidth = processSize(width) + const fixedHeight = processSize(height) + const style = { + width: fixedWidth, + height: fixedHeight + } + + return ( + + ) +} \ No newline at end of file diff --git a/src/forge/Branch/SelectBranch.js b/src/forge/Branch/SelectBranch.js index b4435f9f1..b66a47e7d 100644 --- a/src/forge/Branch/SelectBranch.js +++ b/src/forge/Branch/SelectBranch.js @@ -2,31 +2,56 @@ import React , { Component } from 'react'; import { Dropdown , Icon , Input } from 'antd'; import "./branch.css" +import axios from 'axios'; const $ = window.$; class SelectBranch extends Component{ constructor(props){ super(props); this.state={ visible:false, - value:undefined + value:undefined, + search:"branch", + tags:undefined } } componentDidMount() { document.body.addEventListener('click', e => { - if (e.target && (e.target.matches('#m-btn') || e.target.matches("#input-btn")|| e.target.matches("#ul-btn"))) { + let v= this.state.visible; + let other = e.target && (e.target.matches('#m-btn') || e.target.matches("#navUl-btn") || e.target.matches("#input-btn")|| e.target.matches("#ul-btn")); + let classF = e.target.className === "navs" || e.target.className === "navs active"; + if(e.target && e.target.matches("#down-btn")){ + this.setState({ + visible:!v, + value:undefined + }) + return; + }else if (other || classF) { return; - } - if($(e.target)[0].className === "task-hide ulALink")return; - this.setState({ - visible:false, - value:undefined - }) + } else{ + this.setState({ + visible:false, + value:undefined + }) + } }); } + componentDidUpdate=(prevProps)=>{ + if(this.props.repo_id && prevProps.repo_id != this.props.repo_id){ + this.getTagList(); + } + } - ChangeVisible=(visible)=>{ - this.setState({ - visible:!visible + getTagList=()=>{ + const { repo_id } = this.props; + const url = `/repositories/${repo_id}/tags.json`; + axios.get(url).then((result)=>{ + if(result){ + this.setState({ + tags:result.data + }) + } + }).catch(error=>{ + console.log(error); }) } @@ -56,15 +81,31 @@ class SelectBranch extends Component{ changeBranch && changeBranch(value); } + // 切换搜索的列表 + changeSearch=(search)=>{ + this.setState({ + search + }) + } + render(){ - const { visible , value } = this.state; + const { visible , value , search , tags } = this.state; const { branchs , branch } = this.props; - let branchsFilter = value ? (branchs && branchs.length>0 && branchs.filter(item=>item.name.indexOf(value)>-1)):branchs; + let array = branchs; + if(search === "tag"){ + array = tags; + } + + let branchsFilter = value ? (array && array.length>0 && array.filter(item=>item.name.indexOf(value)>-1)) : array; const menu = (- 新建文件 - {/* 上传文件 */} -
- } - { - filePath && filePath.length === 0 &&- title - -
-I wanner be a dancer \n I wanner be a dancer I wanner be a dancer-
+ + { commit && commit.title } + + +
+ {commit && commit.message ? ( +{commit.message}
+ ) : (
+ ""
+ )}
+ 示例:https://github.com/facebook/reack.git
} + { + projectsType !== "deposit" && +需要授权验证
+ { + mirrorCheck && +