amis/examples/components/Editor.jsx

65 lines
1.7 KiB
React
Raw Normal View History

2019-06-11 17:00:02 +08:00
import React from 'react';
2019-04-30 11:11:25 +08:00
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/Portal';
2019-04-30 11:11:25 +08:00
export default class AMisSchemaEditor extends React.Component {
2019-11-07 10:41:14 +08:00
state = {
preview: localStorage.getItem('editting_preview') ? true : false,
schema: localStorage.getItem('editting_schema')
? JSON.parse(localStorage.getItem('editting_schema'))
: schema
};
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
handleChange = value => {
localStorage.setItem('editting_schema', JSON.stringify(value));
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
this.setState({
schema: value
});
};
handlePreviewChange = preview => {
localStorage.setItem('editting_preview', preview ? 'true' : '');
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
this.setState({
preview: !!preview
});
};
clearCache = () => {
localStorage.removeItem('editting_schema');
this.setState({
schema: schema
});
};
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
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>
2019-04-30 11:11:25 +08:00
2019-11-07 10:41:14 +08:00
<Editor
preview={this.state.preview}
value={this.state.schema}
onChange={this.handleChange}
className="fix-settings"
/>
</div>
);
}
}