amis/examples/components/Editor.jsx

65 lines
1.7 KiB
JavaScript

import React from 'react';
import Editor from '../../src/editor/Editor';
import Switch from '../../src/components/Switch';
import Button from '../../src/components/Button';
import schema from './Form/Test';
import {Portal} from 'react-overlays';
export default class AMisSchemaEditor extends React.Component {
state = {
preview: localStorage.getItem('editting_preview') ? true : false,
schema: localStorage.getItem('editting_schema')
? JSON.parse(localStorage.getItem('editting_schema'))
: schema
};
handleChange = value => {
localStorage.setItem('editting_schema', JSON.stringify(value));
this.setState({
schema: value
});
};
handlePreviewChange = preview => {
localStorage.setItem('editting_preview', preview ? 'true' : '');
this.setState({
preview: !!preview
});
};
clearCache = () => {
localStorage.removeItem('editting_schema');
this.setState({
schema: schema
});
};
render() {
return (
<div className="h-full">
<Portal container={() => document.querySelector('#headerBar')}>
<div className="inline m-l">
预览{' '}
<Switch
value={this.state.preview}
onChange={this.handlePreviewChange}
className="v-middle"
inline
/>
<Button size="sm" className="m-l" onClick={this.clearCache}>
清除缓存
</Button>
</div>
</Portal>
<Editor
preview={this.state.preview}
value={this.state.schema}
onChange={this.handleChange}
className="fix-settings"
/>
</div>
);
}
}