forked from vesoft-inc/nebula-studio
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: init schema & space create page (vesoft-inc#115)
- Loading branch information
Showing
33 changed files
with
849 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .CodeMirror-wrap pre.CodeMirror-line, | ||
| .CodeMirror-wrap pre.CodeMirror-line-like { | ||
| word-break: break-all !important; | ||
| } | ||
|
|
||
| .CodeMirror { | ||
| resize: vertical; | ||
| overflow: auto !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| import CodeMirror from 'codemirror'; | ||
| import 'codemirror/addon/comment/comment'; | ||
| import 'codemirror/addon/display/autorefresh'; | ||
| import 'codemirror/addon/edit/matchbrackets'; | ||
| import 'codemirror/addon/hint/show-hint'; | ||
| import 'codemirror/addon/hint/show-hint.css'; | ||
| import 'codemirror/keymap/sublime'; | ||
| import 'codemirror/lib/codemirror.css'; | ||
| import 'codemirror/mode/meta'; | ||
| import 'codemirror/theme/monokai.css'; | ||
| import React from 'react'; | ||
|
|
||
| import { ban, keyWords, maxLineNum, operators } from '@appv2/config/nebulaQL'; | ||
|
|
||
| import './index.less'; | ||
|
|
||
| interface IProps { | ||
| options?: object; | ||
| value: string; | ||
| ref?: any; | ||
| width?: string; | ||
| height?: string; | ||
| onShiftEnter?: () => void; | ||
| onChange?: (value: string) => void; | ||
| onBlur?: (value: string) => void; | ||
| onChangeLine?: () => void; | ||
| } | ||
|
|
||
| export default class ReactCodeMirror extends React.PureComponent<IProps, any> { | ||
| codemirror; | ||
| editor; | ||
| textarea; | ||
| constructor(props) { | ||
| super(props); | ||
| } | ||
| public componentDidMount() { | ||
| CodeMirror.defineMode('nebula', () => { | ||
| return { | ||
| token: stream => { | ||
| if (stream.eatSpace()) { | ||
| return null; | ||
| } | ||
| stream.eatWhile(/[\$:\w\u4e00-\u9fa5]/); | ||
| const cur = stream.current(); | ||
| if (keyWords.some(item => item === cur)) { | ||
| return 'keyword'; | ||
| } else if (operators.some(item => item === cur)) { | ||
| return 'def'; | ||
| } else if (ban.some(item => item === cur)) { | ||
| return 'error'; | ||
| } | ||
| stream.next(); | ||
| }, | ||
| }; | ||
| }); | ||
|
|
||
| CodeMirror.registerHelper('hint', 'nebula', cm => { | ||
| const cur = cm.getCursor(); | ||
| const token = cm.getTokenAt(cur); | ||
| const str = token.string; | ||
| const start = token.start; | ||
| const end = cur.ch; | ||
|
|
||
| if (str === '') { | ||
| return; | ||
| } | ||
|
|
||
| const list = [...keyWords, ...operators, ...ban].filter(item => { | ||
| return item.indexOf(str) === 0; | ||
| }); | ||
|
|
||
| if (list.length) { | ||
| return { | ||
| list, | ||
| from: CodeMirror.Pos(cur.line, start), | ||
| to: CodeMirror.Pos(cur.line, end), | ||
| }; | ||
| } | ||
| }); | ||
| this.renderCodeMirror(); | ||
| } | ||
| renderCodeMirror() { | ||
| // parameters of the combined | ||
| const options = { | ||
| tabSize: 2, | ||
| fontSize: '14px', | ||
| autoCloseBrackets: true, | ||
| matchBrackets: true, | ||
| showCursorWhenSelecting: true, | ||
| lineWrapping: true, | ||
| // show number of rows | ||
| lineNumbers: true, | ||
| fullScreen: true, | ||
| mode: 'nebula', | ||
| ...this.props.options, | ||
| }; | ||
| this.editor = CodeMirror.fromTextArea(this.textarea, options); | ||
| // Getting CodeMirror is used to get some of these constants | ||
| this.codemirror = CodeMirror; | ||
| // event | ||
| this.editor.on('change', this.codemirrorValueChange); | ||
| this.editor.on('keydown', this.keydown); | ||
| this.editor.on('blur', this.blur); | ||
| const { value, width, height } = this.props; | ||
| this.editor.setValue(value || ''); | ||
| if (width || height) { | ||
| // set size | ||
| this.editor.setSize(width, height); | ||
| } | ||
| } | ||
|
|
||
| blur = instance => { | ||
| if (this.props.onBlur) { | ||
| this.props.onBlur(instance.doc.getValue()); | ||
| } | ||
| }; | ||
|
|
||
| keydown = (_, change) => { | ||
| if (change.shiftKey === true && change.keyCode === 13) { | ||
| if (this.props.onShiftEnter) { | ||
| this.props.onShiftEnter(); | ||
| } | ||
| change.preventDefault(); | ||
| } | ||
| }; | ||
|
|
||
| codemirrorValueChange = (doc, change) => { | ||
| if (change.origin !== 'setValue') { | ||
| if (this.props.onChange) { | ||
| this.props.onChange(doc.getValue()); | ||
| } | ||
| } | ||
| if (change.origin === '+input') { | ||
| CodeMirror.commands.autocomplete(this.editor, null, { | ||
| completeSingle: false, | ||
| }); | ||
| } | ||
| if ( | ||
| this.props.onChangeLine && | ||
| (change.origin === '+delete' || change.origin === '+input') | ||
| ) { | ||
| this.props.onChangeLine(); | ||
| } | ||
| }; | ||
|
|
||
| async UNSAFE_componentWillReceiveProps(nextProps) { | ||
| const { options, value } = nextProps; | ||
| await this.setOptions(options); | ||
| if (value !== this.editor.getValue()) { | ||
| this.editor.setValue(value || ''); | ||
| let line; | ||
| if (this.editor.lineCount() > maxLineNum) { | ||
| line = maxLineNum; | ||
| } else if (this.editor.lineCount() < 5) { | ||
| line = 5; | ||
| } else { | ||
| line = this.editor.lineCount(); | ||
| } | ||
| this.editor.setSize(undefined, line * 24 + 10 + 'px'); | ||
| } | ||
| } | ||
|
|
||
| async setOptions(options) { | ||
| if (typeof options === 'object') { | ||
| const mode = CodeMirror.findModeByName(options.mode); | ||
| if (mode && mode.mode) { | ||
| await import(`codemirror/mode/${mode.mode}/${mode.mode}.js`); | ||
| } | ||
| if (mode) { | ||
| options.mode = mode.mime; | ||
| } | ||
| Object.keys(options).forEach(name => { | ||
| if (options[name] && JSON.stringify(options[name])) { | ||
| this.editor.setOption(name, options[name]); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| if (this.editor) { | ||
| this.editor.toTextArea(); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <textarea | ||
| ref={instance => { | ||
| this.textarea = instance; | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @import '~@appv2/common.less'; | ||
| .export-gql { | ||
| text-align: left; | ||
| margin-top: 24px; | ||
| background: #FFFFFF; | ||
| border: 1px solid @gray; | ||
| .ant-collapse-item { | ||
| border-bottom: none; | ||
| } | ||
| box-sizing: border-box; | ||
| border-radius: 3px; | ||
| } | ||
|
|
||
| .export-gql .ant-collapse-content-box div { | ||
| cursor: not-allowed; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { Collapse } from 'antd'; | ||
| import React from 'react'; | ||
| import intl from 'react-intl-universal'; | ||
|
|
||
| import CodeMirror from '@appv2/components/CodeMirror'; | ||
|
|
||
| import './index.less'; | ||
| const Panel = Collapse.Panel; | ||
| interface IOptions { | ||
| [propName: string]: any; | ||
| } | ||
| const GQLCodeMirror = (props: { currentGQL: string; option?: IOptions }) => { | ||
| const options = { | ||
| keyMap: 'sublime', | ||
| fullScreen: true, | ||
| mode: 'nebula', | ||
| readOnly: true, | ||
| ...props.option, | ||
| }; | ||
| return ( | ||
| <Collapse className="export-gql"> | ||
| <Panel header={intl.get('common.exportNGQL')} key="ngql"> | ||
| <CodeMirror value={props.currentGQL} options={options} height="80px" /> | ||
| </Panel> | ||
| </Collapse> | ||
| ); | ||
| }; | ||
|
|
||
| export default GQLCodeMirror; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.