/** @jsx jsx */
import { useRef } from 'react';
import { jsx } from '@emotion/core';
import { Row, Col, Tooltip, Input, Checkbox, Select } from 'antd';
import { useTranslation } from 'react-i18next';
import { useUIState, useSetUIState } from '../store/ui';
import { useSchemaDispatch } from '../store/schema';
import { schemaType } from '../utils/schema';
import { SchemaType, SchemaItem, KeyRoute } from '../model';
import FieldInput from './field-input';
import AddNode from './add-node';
import {
CaretDownIcon,
CaretRightIcon,
EditIcon,
SettingIcon,
PlusIcon,
CloseIcon,
} from '../utils/styles/common';
const { Option } = Select;
interface SchemaItemProps {
field: string;
data: SchemaItem;
required: boolean;
keyRoute: KeyRoute;
children: React.ReactChild | null;
}
function SchemaFormItem({
field,
data,
required,
keyRoute,
children,
}: SchemaItemProps): JSX.Element {
const fieldRef = useRef(null);
const { t } = useTranslation();
const schemaDispatch = useSchemaDispatch();
const setUIState = useSetUIState();
const uiState = useUIState();
const key = keyRoute.join('-');
const visible = uiState[key] !== false;
const toggleFormVisible = (): void => {
setUIState((prev) => ({ ...prev, [key]: !visible }));
};
const toggleRequired = (): void => {
if (!fieldRef.current) return;
const newField = fieldRef.current.state.value;
const fieldKeyRoute = keyRoute.slice(0, -1).concat(newField);
if (required) {
schemaDispatch({ type: 'REMOVE_REQUIRED', keyRoute: fieldKeyRoute });
} else {
schemaDispatch({ type: 'ADD_REQUIRED', keyRoute: fieldKeyRoute });
}
};
const addChildField = (): void => {
schemaDispatch({ type: 'ADD_CHILD_FIELD', keyRoute: keyRoute.concat('properties') });
};
const addSiblingField = (): void => {
schemaDispatch({ type: 'ADD_SIBLING_FIELD', keyRoute });
};
const removeField = (): void => {
schemaDispatch({ type: 'REMOVE_FIELD', keyRoute });
};
const changeField = (value: string): void => {
schemaDispatch({ type: 'CHANGE_FIELD', keyRoute, field: value });
};
const changeType = (value: SchemaType): void => {
schemaDispatch({ type: 'CHANGE_TYPE', keyRoute, fieldType: value });
};
const changeTitle = (e: React.ChangeEvent): void => {
schemaDispatch({ type: 'CHANGE_TITLE', keyRoute, title: e.target.value });
};
const changeDesc = (e: React.ChangeEvent): void => {
schemaDispatch({ type: 'CHANGE_DESC', keyRoute, desc: e.target.value });
};
return (
);
}
export default SchemaFormItem;