Skip to content

Commit

Permalink
feat: add space create page
Browse files Browse the repository at this point in the history
  • Loading branch information
hetao92 committed Feb 18, 2022
1 parent 95c0e4b commit 80e8e58
Show file tree
Hide file tree
Showing 24 changed files with 545 additions and 38 deletions.
5 changes: 5 additions & 0 deletions app-v2/common.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@gray: #D5DDEB;
@lightGray: #F8F8F8;
@containerWidth: 1180px;

@font-face {
font-family: 'Roboto-Black';
Expand All @@ -25,3 +26,7 @@
font-family: 'Roboto-Regular';
src: url(~@appv2/static/fonts/Roboto-Regular.ttf);
}
.center-layout {
width: @containerWidth;
margin: 0 auto;
}
3 changes: 2 additions & 1 deletion app-v2/components/Breadcrumb/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
font-size: 18px;
align-items: center;
display: flex;
padding-left: 40px;
padding-left: 0;
padding-right: 0;
.arrow-icon {
width: 23px;
height: 23px;
Expand Down
18 changes: 13 additions & 5 deletions app-v2/components/Breadcrumb/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PageHeader } from 'antd';
import { Breadcrumb, PageHeader } from 'antd';
import React from 'react';
import { Link } from 'react-router-dom';

Expand Down Expand Up @@ -31,16 +31,24 @@ const itemRender = (route, _params, routes, _paths) => {
);
};

const Breadcrumb: React.FC<IProps> = (props: IProps) => {
const NebulaBreadcrumb: React.FC<IProps> = (props: IProps) => {
const { routes, ExtraNode } = props;
return (
<PageHeader
title={null}
className="nebula-breadcrumb"
breadcrumb={{ routes, itemRender }}
extra={ExtraNode}
breadcrumbRender={() => {
return <>
<Breadcrumb
className="center-layout"
routes={routes}
itemRender={itemRender}
/>
{ExtraNode}
</>;
}}
/>
);
};

export default Breadcrumb;
export default NebulaBreadcrumb;
9 changes: 9 additions & 0 deletions app-v2/components/CodeMirror/index.less
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;
}
195 changes: 195 additions & 0 deletions app-v2/components/CodeMirror/index.tsx
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;
}}
/>
);
}
}
16 changes: 16 additions & 0 deletions app-v2/components/GQLCodeMirror/index.less
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;
}
29 changes: 29 additions & 0 deletions app-v2/components/GQLCodeMirror/index.tsx
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;
2 changes: 1 addition & 1 deletion app-v2/config/locale/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"name": "Name",
"operation": "Operations",
"delete": "Delete",
"optionalParameters": "Optional Parameters",
"optional": "Optional",
"exportNGQL": "View nGQL",
"field": "Field",
"relatedProperties": "Related Properties",
Expand Down
2 changes: 1 addition & 1 deletion app-v2/config/locale/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"name": "名称",
"operation": "操作",
"delete": "删除",
"optionalParameters": "可选参数",
"optional": "可选",
"exportNGQL": "对应的nGQL语句",
"field": "字段",
"relatedProperties": "相关属性",
Expand Down
2 changes: 1 addition & 1 deletion app-v2/config/rules.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '#app/utils/constant';
import { NAME_REGEX, POSITIVE_INTEGER_REGEX } from '@appv2/utils/constant';

export const hostRulesFn = intl => [
{
Expand Down
1 change: 1 addition & 0 deletions app-v2/interfaces/schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface IProperty {
value?: string;
allowNull?: boolean;
fixedLength?: string;
comment?: string;
}

export type IndexType = 'TAG' | 'EDGE';
Expand Down
2 changes: 1 addition & 1 deletion app-v2/pages/Import/TaskCreate/index.less
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import '~@appv2/common.less';
.nebula-import-create {
.create-form {
padding: 32px 35px 100px;
padding: 32px 0 100px;
.basic-config {
border-bottom: 1px solid @gray;
}
Expand Down
2 changes: 1 addition & 1 deletion app-v2/pages/Import/TaskCreate/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ const TaskCreate = () => {
return (
<div className="nebula-import-create">
<Breadcrumb routes={routes} />
<div className="create-form">
<div className="create-form center-layout">
<Form className="basic-config" layout="vertical" {...formItemLayout}>
<Row>
<Col span={12}>
Expand Down
2 changes: 1 addition & 1 deletion app-v2/pages/Import/index.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import '~@appv2/common.less';
.nebua-import-page {
padding: 25px 35px;
padding: 25px 0;
.tab-header {
display: flex;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion app-v2/pages/Import/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const NewImport = () => {
history.push(`/import/${e.target.value}`);
};
return (
<div className="nebua-import-page">
<div className="nebua-import-page center-layout">
<div className="tab-header">
<Radio.Group
className="import-tab"
Expand Down
5 changes: 5 additions & 0 deletions app-v2/pages/MainPage/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@

@import '~@appv2/common.less';
.nebula-studio {
min-width: @containerWidth;
}
Loading

0 comments on commit 80e8e58

Please sign in to comment.