You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

94 lines
2.6 KiB

/** @jsx jsx */
import { useEffect } from 'react';
import { Global, jsx, css } from '@emotion/core';
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();
useEffect(() => {
if (!lang) return;
i18n.changeLanguage(lang);
}, [i18n, lang]);
return (
<div
className="json-schema-editor"
css={css`
padding: 5px;
`}
>
<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>
);
}
export default JsonSchemaEditor;