Browse Source

feat: json-schema-editor

master
suanmei 5 years ago
committed by 拾邑
parent
commit
57fa6067bf
  1. 7
      .eslintrc.js
  2. 11
      packages/builder/README.md
  3. 30
      packages/builder/src/index.tsx
  4. 1
      packages/builder/types/editor.d.ts
  5. 2
      packages/core/package.json
  6. 0
      packages/core/scripts/prepublish.js
  7. 17
      packages/core/src/components/schema-form.tsx
  8. 9
      packages/core/src/components/setting.tsx
  9. 59
      packages/core/src/data/cells.ts
  10. 0
      packages/json-schema-editor/.babelrc
  11. 0
      packages/json-schema-editor/.npmignore
  12. 11
      packages/json-schema-editor/README.md
  13. 284
      packages/json-schema-editor/package-lock.json
  14. 21
      packages/json-schema-editor/package.json
  15. 0
      packages/json-schema-editor/rollup.config.js
  16. 2
      packages/json-schema-editor/scripts/prepublish.js
  17. 0
      packages/json-schema-editor/src/ace/index.tsx
  18. 20
      packages/json-schema-editor/src/i18n/index.ts
  19. 3
      packages/json-schema-editor/src/i18n/translations/en.json
  20. 3
      packages/json-schema-editor/src/i18n/translations/zh.json
  21. 18
      packages/json-schema-editor/src/index.tsx
  22. 0
      packages/json-schema-editor/tsconfig.json
  23. 1
      tsconfig.json

7
.eslintrc.js

@ -18,13 +18,6 @@ module.exports = {
// 修复 tsx 文件引用 tsx 文件报错的问题
'react/jsx-filename-extension': ['error', { extensions: ['.ts', '.tsx'] }],
'unicorn/prevent-abbreviations': 'off',
'unicorn/filename-case': [
'off',
{
case: 'pascalCase',
ignore: [/prepublish/i],
},
],
},
overrides: [
{

11
packages/builder/README.md

@ -1,11 +0,0 @@
# `builder`
> TODO: description
## Usage
```
const builder = require('builder');
// TODO: DEMONSTRATE API
```

30
packages/builder/src/index.tsx

@ -1,30 +0,0 @@
import * as React from 'react';
import { Form, Input } from 'antd';
import schemaEditor from 'json-schema-editor-visual';
const SchemaEditor = schemaEditor({});
const { Item } = Form;
const Builder: React.FC<{}> = () => {
const labelCol = { span: 7 };
return (
<div>
<Form labelCol={labelCol}>
<Item label="元件名称" name="name">
<Input />
</Item>
<Item label="元件描述" name="name">
<Input />
</Item>
<Item label="元件描述" name="name">
<Input />
</Item>
{/* <SchemaEditor /> */}
</Form>
</div>
);
};
export default Builder;

1
packages/builder/types/editor.d.ts

@ -1 +0,0 @@
declare module 'json-schema-editor-visual';

2
packages/core/package.json

@ -27,7 +27,7 @@
"url": "git+https://github.com/suanmei/iMove.git"
},
"scripts": {
"prepublishOnly": "node scripts/prepublishOnly.js",
"prepublishOnly": "node scripts/prepublish.js",
"declare-type": "tsc --emitDeclarationOnly",
"build": "rollup -c & npm run declare-type",
"watch": "watch 'npm run build' ./src"

0
packages/core/scripts/prepublishOnly.js → packages/core/scripts/prepublish.js

17
packages/core/src/components/schema-form.tsx

@ -1,5 +1,6 @@
import * as React from 'react';
import { Form, Input, InputNumber } from 'antd';
import 'antd/lib/input-number/style';
const { Item } = Form;
@ -26,13 +27,19 @@ class SchemaForm extends React.Component<SchemaFormProps, SchemaFormState> {
changeValue = (e: React.ChangeEvent<HTMLInputElement>, key: string): void => {
const { data } = this.state;
const value = e.target.value.trim();
data[key] = value;
if (!data.input) {
data.input = {};
}
data.input[key] = value;
this.setState({ data });
};
changeNumValue = (value: number | undefined, key: string): void => {
const { data } = this.state;
data[key] = value;
if (!data.input) {
data.input = {};
}
data.input[key] = value;
this.setState({ data });
};
@ -45,7 +52,11 @@ class SchemaForm extends React.Component<SchemaFormProps, SchemaFormState> {
return (
<Form labelCol={labelCol} initialValues={data}>
{Object.keys(properties).map((key) => (
<Item label={properties[key].title} name={properties[key].title}>
<Item
key={properties[key].title}
label={properties[key].title}
name={`input.${properties[key].title}`}
>
{properties[key].type === 'string' ? (
<Input
onChange={(e): void => {

9
packages/core/src/components/setting.tsx

@ -128,7 +128,7 @@ class Setting extends Component<SettingProps, SettingState> {
</Item>
</Form>
</Panel> */}
{cell.data && cell.data.schema && (
{cell.data && cell.data.schema && Object.keys(cell.data.schema.properties).length && (
<Panel header="Input" key="input">
<SchemaForm schema={cell.data.schema} data={cell.data.data} />
</Panel>
@ -138,13 +138,16 @@ class Setting extends Component<SettingProps, SettingState> {
labelCol={labelCol}
initialValues={{ event: cell.data && cell.data.data && cell.data.data.contextKey }}
>
<Item label="存储字段" name="contextKey">
<Item label="存储字段" name="output.contextKey">
<Input
onChange={(e): void => {
if (!cell.data.data) {
cell.data.data = {};
}
cell.data.data.contextKey = e.target.value.trim();
if (!cell.data.data.output) {
cell.data.data.output = {};
}
cell.data.data.output.contextKey = e.target.value.trim();
graph.setCellData(cell, cell.data);
}}
/>

59
packages/core/src/data/cells.ts

@ -36,46 +36,33 @@ export const generals: DataItem[] = [
},
];
export const gists: DataItem[] = [
{
label: '查询库存',
type: 'action',
style: {
width: 48,
height: 30,
scale: 2,
},
data: {
code: '',
dependencies: [],
},
schema: {
type: 'object',
properties: {
activity: {
type: 'string',
title: 'activity',
},
initAmount: {
type: 'string',
title: 'initAmount',
},
},
required: ['initAmount', 'activity'],
title: '参数',
},
},
{
label: '判断是否登录',
type: 'decision',
const items: any = [];
new Array(localStorage.length).fill(1).forEach((val, index) => {
const item = localStorage.key(index);
if (item && item?.startsWith('cell')) {
let data: any = localStorage.getItem(item);
if (data) {
data = JSON.parse(data);
(data as any).type = data.type.toLowerCase();
items.push(data);
}
}
});
export const gists: DataItem[] = items.map((item: any) => {
return {
label: item.label,
type: item.type,
style: {
width: 48,
height: 30,
scale: 2,
},
data: {
code: '',
dependencies: [],
code: item.code,
dependencies: [{ '@ali/rax-base': '^2.1.9' }],
},
},
];
schema: item.schema,
};
});

0
packages/builder/.babelrc → packages/json-schema-editor/.babelrc

0
packages/builder/.npmignore → packages/json-schema-editor/.npmignore

11
packages/json-schema-editor/README.md

@ -0,0 +1,11 @@
# `json-schema-editor`
> TODO: description
## Usage
```
const schemaEditor = require('@imove/json-schema-editor');
// TODO: DEMONSTRATE API
```

284
packages/builder/package-lock.json → packages/json-schema-editor/package-lock.json

File diff suppressed because it is too large

21
packages/builder/package.json → packages/json-schema-editor/package.json

@ -1,9 +1,9 @@
{
"name": "@imove/builder",
"name": "@imove/json-schema-editor",
"version": "0.2.1",
"description": "build cells for your flow",
"description": "visual editor for json schema",
"keywords": [
"react-monaco-editor",
"ace-editor",
"json-schema"
],
"author": "suanmei <mr_suanmei@163.com>",
@ -11,6 +11,7 @@
"license": "MIT",
"main": "dist/core.common.js",
"module": "dist/core.esm.js",
"types": "dist/types/index.d.ts",
"directories": {
"lib": "lib",
"test": "__tests__"
@ -27,7 +28,7 @@
"url": "git+https://github.com/suanmei/iMove.git"
},
"scripts": {
"prepublishOnly": "node scripts/prepublishOnly.js",
"prepublishOnly": "node scripts/prepublish.js",
"declare-type": "tsc --emitDeclarationOnly",
"build": "rollup -c & npm run declare-type",
"watch": "watch 'npm run build' ./src"
@ -39,9 +40,11 @@
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"antd": "^4.1.5",
"json-schema-editor-visual": "^1.1.1",
"react": "^16.13.1",
"react-monaco-editor": "^0.36.0",
"rollup": "^2.7.3",
"watch": "^1.0.2"
},
@ -50,7 +53,13 @@
"@emotion/styled": "^10.0.27",
"antd": "^4.1.5",
"json-schema-editor-visual": "^1.1.1",
"react": "^16.13.1"
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.36.0"
},
"gitHead": "60b114ff262513544204f33a9bbcb6220d6c1c5d"
"gitHead": "60b114ff262513544204f33a9bbcb6220d6c1c5d",
"dependencies": {
"i18next": "^19.4.4",
"react-i18next": "^11.4.0"
}
}

0
packages/builder/rollup.config.js → packages/json-schema-editor/rollup.config.js

2
packages/builder/scripts/prepublishOnly.js → packages/json-schema-editor/scripts/prepublish.js

@ -3,4 +3,4 @@
const path = require('path');
const prePublish = require('../../../scripts/prepublish');
prePublish('@imove/builder', path.join(__dirname, '../'));
prePublish('@imove/json-schema-editor', path.join(__dirname, '../'));

0
packages/json-schema-editor/src/ace/index.tsx

20
packages/json-schema-editor/src/i18n/index.ts

@ -0,0 +1,20 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as en from './translations/en.json';
import * as zh from './translations/zh.json';
i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
fallbackLng: 'en',
resources: {
en,
zh,
},
keySeparator: false, // we do not use keys in form messages.welcome
interpolation: {
escapeValue: false, // react already safes from xss
},
});
export default i18n;

3
packages/json-schema-editor/src/i18n/translations/en.json

@ -0,0 +1,3 @@
{
"home": "home"
}

3
packages/json-schema-editor/src/i18n/translations/zh.json

@ -0,0 +1,3 @@
{
"home": "首页"
}

18
packages/json-schema-editor/src/index.tsx

@ -0,0 +1,18 @@
/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Button } from 'antd';
import { useTranslation } from 'react-i18next';
import i18n from './i18n';
i18n.changeLanguage('en');
function JsonSchemaEditor(): JSX.Element {
const { t } = useTranslation();
return (
<div>
<Button>{t('home')}</Button>
</div>
);
}
export default JsonSchemaEditor;

0
packages/builder/tsconfig.json → packages/json-schema-editor/tsconfig.json

1
tsconfig.json

@ -8,6 +8,7 @@
"declaration": true,
"types": [],
"strict": true,
"resolveJsonModule": true,
"experimentalDecorators": true,
"skipLibCheck": true
}

Loading…
Cancel
Save