Browse Source

fix: ts error

master
yangpei 4 years ago
parent
commit
f83c57f8f1
  1. 59
      packages/core/src/mods/settingBar/components/json/index.tsx

59
packages/core/src/mods/settingBar/components/json/index.tsx

@ -11,19 +11,28 @@ import SchemaForm from '../../../../components/schemaForm'
import { compData } from './json'
import styles from './index.module.less';
const { TabPane } = Tabs;
const JSON_TAB = 'JsonTab'
const VISUAL_TAB = 'VisualTab'
interface IJsonProps {
value: any;
name: string;
title: string;
selectedCell?: any;
isConfig?: boolean; // true为为可视化、json联动输入框,false为普通json输入框
isConfig?: boolean;
onValueChange: (value: string) => void;
}
interface ISchemaProps {
type: string,
properties: { [key: string]: any }
}
const Json: React.FC<IJsonProps> = (props) => {
const { title, value, isConfig, onValueChange, selectedCell } = props;
const [visible, setVisible] = useState<boolean>(false);
const [schema, setSchema] = useState({})
const [schema, setSchema] = useState<ISchemaProps>({ type: '', properties: {} })
const defaultSchema = useMemo(() => {
if (selectedCell) {
@ -36,7 +45,6 @@ const Json: React.FC<IJsonProps> = (props) => {
}
}, [selectedCell])
// events
const onClickEdit = (): void => {
setVisible(true);
};
@ -47,7 +55,7 @@ const Json: React.FC<IJsonProps> = (props) => {
setVisible(false);
onValueChange(newJson);
};
const changeSchema = (schema: object) => {
const changeSchema = (schema: ISchemaProps) => {
setVisible(false);
setSchema(schema);
}
@ -63,7 +71,6 @@ const Json: React.FC<IJsonProps> = (props) => {
src={safeParse(value)}
/>}
{/* @ts-ignore */}
{isConfig && <SchemaForm schema={schema} />}
<EditModal
@ -88,31 +95,42 @@ interface IEditorModalProps {
defaultSchema: object;
onOk: (val: string) => void;
onCancel: () => void;
changeSchema: (val: object) => void
changeSchema: (val: ISchemaProps) => void
}
interface FormInstance {
setValue: (val: object) => void;
getValue: () => {
schema: ISchemaProps
}
}
const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel, defaultSchema } = props;
const [json, setJson] = useState<string>('');
const formRef = useRef()
const [tab, setTab] = useState<string>(VISUAL_TAB)
const formRef = useRef<FormInstance>(null);
useEffect(() => {
const defaultValue = useMemo(() => {
if (defaultSchema && Object.keys(defaultSchema).length > 0) {
let codeObj = {
"schema": Object.assign({}, defaultSchema),
"displayType": "row",
"showDescIcon": true
}
formRef.current && formRef.current.setValue(codeObj)
setJson(JSON.stringify(codeObj, null, 2))
return codeObj
}
}, [formRef.current])
}, [defaultSchema])
const tabChange = (tab: string) => {
const JSON_TAB = 'JsonTab'
const VISUAL_TAB = 'VisualTab'
if (tab === JSON_TAB) form2code() // 可视化同步到编辑器
if (tab === VISUAL_TAB) code2form() // 编辑器同步到可视化
if (tab === JSON_TAB) {
setTab(JSON_TAB)
form2code()
}
if (tab === VISUAL_TAB) {
setTab(VISUAL_TAB)
code2form()
}
}
const form2code = () => {
@ -123,7 +141,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const code2form = () => {
try {
const codeObj = JSON.parse(json)
formRef.current.setValue(codeObj)
formRef.current && formRef.current.setValue(codeObj)
} catch (error) {
console.log('can\'t parse code string to form schema, the error is:', error.message);
}
@ -136,8 +154,6 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
// life
useEffect(() => {
// set value when opening modal
// clear content when closing modal
if (visible) {
setJson(value);
} else {
@ -149,9 +165,9 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const onClickOk = (): void => {
try {
if (props.isConfig) {
if (JSON.stringify(JSON.parse(json)) === '{}') {
const value = formRef.current && formRef.current.getValue()
props.changeSchema(value.schema)
if (tab === VISUAL_TAB && formRef.current) {
const value = formRef.current.getValue()
props.changeSchema(formRef.current.getValue().schema)
setJson(JSON.stringify(value, null, 2))
onOk(JSON.stringify(value));
} else {
@ -195,6 +211,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
title: '表单组件库',
widgets: compData,
}]}
defaultValue={defaultValue}
/>
</div>
</TabPane>

Loading…
Cancel
Save