Browse Source

feat: json-schema-editor 头部

master
suanmei 5 years ago
committed by 拾邑
parent
commit
3fc9277c83
  1. 932
      packages/json-schema-editor/package-lock.json
  2. 8
      packages/json-schema-editor/package.json
  3. 3
      packages/json-schema-editor/src/i18n/translations/en.json
  4. 3
      packages/json-schema-editor/src/i18n/translations/zh.json
  5. 71
      packages/json-schema-editor/src/index.tsx
  6. 0
      packages/json-schema-editor/src/utils/styles/antd.ts
  7. 0
      packages/json-schema-editor/src/utils/styles/common.ts
  8. 40
      packages/json-schema-editor/src/utils/styles/global.ts

932
packages/json-schema-editor/package-lock.json

File diff suppressed because it is too large

8
packages/json-schema-editor/package.json

@ -37,25 +37,23 @@
"url": "https://github.com/suanmei/iMove/issues"
},
"devDependencies": {
"@ant-design/icons": "^4.1.0",
"@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"
},
"peerDependencies": {
"@ant-design/icons": "^4.1.0",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"antd": "^4.1.5",
"json-schema-editor-visual": "^1.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-monaco-editor": "^0.36.0"
"react-dom": "^16.13.1"
},
"gitHead": "60b114ff262513544204f33a9bbcb6220d6c1c5d",
"dependencies": {

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

@ -1,5 +1,6 @@
{
"translation": {
"import_json": "Import JSON"
"import_json": "Import JSON",
"select_all": "Select All"
}
}

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

@ -1,5 +1,6 @@
{
"translation": {
"import_json": "导入 JSON"
"import_json": "导入 JSON",
"select_all": "全选"
}
}

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

@ -1,14 +1,26 @@
/** @jsx jsx */
import { useEffect } from 'react';
import { Global, jsx, css } from '@emotion/core';
import { Button } from 'antd';
import styled from '@emotion/styled';
import { Row, Col, Tooltip, Input, Checkbox, Select, Button } from 'antd';
import { CaretDownOutlined, EditOutlined, SettingOutlined, PlusOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import globalStyles from './utils/styles/global';
import './i18n';
interface EditorProps {
lang?: string;
}
const { Option } = Select;
const FieldInput = styled(Input)`
.ant-input-group-addon {
background: transparent;
border: none;
}
`;
function JsonSchemaEditor({ lang }: EditorProps): JSX.Element {
const { t, i18n } = useTranslation();
@ -19,18 +31,61 @@ function JsonSchemaEditor({ lang }: EditorProps): JSX.Element {
return (
<div
className="json-schema-editor"
css={css`
padding: 5px;
`}
>
<Global
styles={css`
* {
font-size: 12px;
}
`}
/>
<Global styles={globalStyles} />
<Button type="primary">{t('import_json')}</Button>
<Row
css={css`
margin-top: 10px;
`}
>
<Col span="24">
<Row align="middle">
<Col span="8">
<Row align="middle">
<Col span="2">
<CaretDownOutlined className="editor-icon" />
</Col>
<Col span="22">
<FieldInput
disabled
value="root"
addonAfter={
<Tooltip placement="top" title={t('select_all')}>
<Checkbox
checked={false}
onChange={(): void => {
// code
}}
/>
</Tooltip>
}
/>
</Col>
</Row>
</Col>
<Col span="3">
<Select value="object" disabled>
<Option value="object">object</Option>
</Select>
</Col>
<Col span="5">
<Input value="" placeholder="Title" addonAfter={<EditOutlined />} />
</Col>
<Col span="5">
<Input value="" placeholder="Description" addonAfter={<EditOutlined />} />
</Col>
<Col span="3">
<SettingOutlined className="editor-icon" style={{ color: '#00a854' }} />
<PlusOutlined className="editor-icon" style={{ color: '#2395f1' }} />
</Col>
</Row>
</Col>
</Row>
</div>
);
}

0
packages/json-schema-editor/src/utils/styles/antd.ts

0
packages/json-schema-editor/src/utils/styles/common.ts

40
packages/json-schema-editor/src/utils/styles/global.ts

@ -0,0 +1,40 @@
import { css } from '@emotion/core';
const globalStyles = css`
.json-schema-editor {
* {
font-size: 12px;
}
.ant-col {
:nth-child(2) {
text-align: center;
}
:nth-child(3),
:nth-child(4) {
padding-right: 10px;
}
}
.ant-input {
height: 30px;
}
.ant-select {
width: 80%;
text-align: left;
}
.editor-icon {
cursor: pointer;
svg {
margin: 0 5px;
font-size: 14px;
}
}
}
`;
export default globalStyles;
Loading…
Cancel
Save