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

Loading…
Cancel
Save