mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-14 08:51:24 +08:00
622 lines
16 KiB
JavaScript
622 lines
16 KiB
JavaScript
import React from 'react';
|
||
import {toast, render, makeTranslator} from 'amis';
|
||
import {normalizeLink} from 'amis-core';
|
||
import {isMobile} from 'amis-core';
|
||
import {attachmentAdpator} from 'amis-core';
|
||
import {alert, confirm} from 'amis-ui';
|
||
import axios from 'axios';
|
||
import JSON5 from 'json5';
|
||
import {Editor as CodeEditor} from 'amis-ui';
|
||
import copy from 'copy-to-clipboard';
|
||
import {matchPath} from 'react-router-dom';
|
||
import {Drawer} from 'amis-ui';
|
||
|
||
const DEFAULT_CONTENT = `{
|
||
"$schema": "/schemas/page.json#",
|
||
"type": "page",
|
||
"title": "Title",
|
||
"body": "Body",
|
||
"aside": "Aside",
|
||
"toolbar": "Toolbar"
|
||
}`;
|
||
|
||
const scopes = {
|
||
'none': ``,
|
||
|
||
'body': `{
|
||
"type": "page",
|
||
"body": SCHEMA_PLACEHOLDER
|
||
}`,
|
||
|
||
'form': `{
|
||
"type": "page",
|
||
"body": {
|
||
"title": "",
|
||
"type": "form",
|
||
"autoFocus": false,
|
||
"api": "/api/mock/saveForm?waitSeconds=1",
|
||
"mode": "horizontal",
|
||
"body": SCHEMA_PLACEHOLDER,
|
||
"submitText": null,
|
||
"actions": []
|
||
}
|
||
}`,
|
||
|
||
'form2': `{
|
||
"type": "page",
|
||
"body": {
|
||
"title": "",
|
||
"type": "form",
|
||
"autoFocus": false,
|
||
"api": "/api/mock/saveForm?waitSeconds=1",
|
||
"mode": "horizontal",
|
||
"body": SCHEMA_PLACEHOLDER,
|
||
"submitText": null,
|
||
"actions": []
|
||
}
|
||
}`,
|
||
|
||
'form-item': `{
|
||
"type": "page",
|
||
"body": {
|
||
"title": "",
|
||
"type": "form",
|
||
"mode": "horizontal",
|
||
"autoFocus": false,
|
||
"body": [
|
||
SCHEMA_PLACEHOLDER
|
||
],
|
||
"submitText": null,
|
||
"actions": []
|
||
}
|
||
}`,
|
||
|
||
'form-item2': `{
|
||
"type": "page",
|
||
"body": {
|
||
"title": "",
|
||
"type": "form",
|
||
"mode": "horizontal",
|
||
"autoFocus": false,
|
||
"body": [
|
||
SCHEMA_PLACEHOLDER
|
||
],
|
||
"submitText": null,
|
||
"actions": []
|
||
}
|
||
}`
|
||
};
|
||
|
||
export default class PlayGround extends React.Component {
|
||
state = null;
|
||
startX = 0;
|
||
oldContents = '';
|
||
frameTemplate;
|
||
iframeRef;
|
||
|
||
static defaultProps = {
|
||
vertical: false
|
||
};
|
||
|
||
constructor(props) {
|
||
super(props);
|
||
this.iframeRef = React.createRef();
|
||
const {history} = props;
|
||
|
||
const schema = this.buildSchema(props.code || DEFAULT_CONTENT, props);
|
||
this.state = {
|
||
asideWidth: props.asideWidth || Math.max(300, window.innerWidth * 0.3),
|
||
schema: schema,
|
||
schemaCode: JSON.stringify(schema, null, 2),
|
||
isOpened: false
|
||
};
|
||
|
||
this.handleMouseDown = this.handleMouseDown.bind(this);
|
||
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||
this.handleMouseUp = this.handleMouseUp.bind(this);
|
||
this.removeWindowEvents = this.removeWindowEvents.bind(this);
|
||
this.handleChange = this.handleChange.bind(this);
|
||
this.toggleDrawer = this.toggleDrawer.bind(this);
|
||
this.close = this.close.bind(this);
|
||
this.schemaProps = {};
|
||
|
||
const __ = makeTranslator(props.locale);
|
||
|
||
this.env = {
|
||
session: 'doc',
|
||
updateLocation: (location, replace) => {
|
||
history[replace ? 'replace' : 'push'](normalizeLink(location));
|
||
},
|
||
isCurrentUrl: to => {
|
||
if (!to) {
|
||
return false;
|
||
}
|
||
const link = normalizeLink(to);
|
||
return !!matchPath(history.location.pathname, {
|
||
path: link,
|
||
exact: true
|
||
});
|
||
},
|
||
jumpTo: (to, action) => {
|
||
to = normalizeLink(to);
|
||
|
||
if (action && action.actionType === 'url') {
|
||
action.blank === true ? window.open(to) : (window.location.href = to);
|
||
return;
|
||
}
|
||
|
||
if (action && to && action.target) {
|
||
window.open(to, action.target);
|
||
return;
|
||
}
|
||
|
||
if (/^https?:\/\//.test(to)) {
|
||
window.location.replace(to);
|
||
} else {
|
||
history.push(to);
|
||
}
|
||
},
|
||
fetcher: async api => {
|
||
let {url, method, data, responseType, config, headers} = api;
|
||
config = config || {};
|
||
// 如果在 gh-pages 里面
|
||
if (
|
||
/^\/amis/.test(window.location.pathname) &&
|
||
typeof url === 'string' &&
|
||
url.startsWith('/examples/static/')
|
||
) {
|
||
url = url.replace('/examples/static/', '/amis/static/');
|
||
}
|
||
|
||
config.url = url;
|
||
responseType && (config.responseType = responseType);
|
||
|
||
if (config.cancelExecutor) {
|
||
config.cancelToken = new axios.CancelToken(config.cancelExecutor);
|
||
}
|
||
|
||
config.headers = headers || {};
|
||
config.method = method;
|
||
config.data = data;
|
||
|
||
if (method === 'get' && data) {
|
||
config.params = data;
|
||
} else if (data && data instanceof FormData) {
|
||
// config.headers['Content-Type'] = 'multipart/form-data';
|
||
} else if (
|
||
data &&
|
||
typeof data !== 'string' &&
|
||
!(data instanceof Blob) &&
|
||
!(data instanceof ArrayBuffer)
|
||
) {
|
||
data = JSON.stringify(data);
|
||
config.headers['Content-Type'] = 'application/json';
|
||
}
|
||
|
||
// 支持返回各种报错信息
|
||
config.validateStatus = function () {
|
||
return true;
|
||
};
|
||
|
||
let response = await axios(config);
|
||
response = await attachmentAdpator(response, __, api);
|
||
|
||
if (response.status >= 400) {
|
||
if (response.data) {
|
||
// 主要用于 raw: 模式下，后端自己校验登录，
|
||
if (
|
||
response.status === 401 &&
|
||
response.data.location &&
|
||
response.data.location.startsWith('http')
|
||
) {
|
||
location.href = response.data.location.replace(
|
||
'{{redirect}}',
|
||
encodeURIComponent(location.href)
|
||
);
|
||
return new Promise(() => {});
|
||
} else if (response.data.msg) {
|
||
throw new Error(response.data.msg);
|
||
} else {
|
||
throw new Error(
|
||
__('System.requestError') +
|
||
JSON.stringify(response.data, null, 2)
|
||
);
|
||
}
|
||
} else {
|
||
throw new Error(
|
||
`${__('System.requestErrorStatus')} ${response.status}`
|
||
);
|
||
}
|
||
}
|
||
|
||
return response;
|
||
},
|
||
isCancel: value => axios.isCancel(value),
|
||
notify: (type, msg, conf) =>
|
||
toast[type]
|
||
? toast[type](msg, conf)
|
||
: console.warn('[Notify]', type, msg),
|
||
alert,
|
||
confirm,
|
||
copy: (content, options) => {
|
||
copy(content, options);
|
||
toast.success(__('System.copy'));
|
||
},
|
||
tracker(eventTrack) {
|
||
console.debug('eventTrack', eventTrack);
|
||
},
|
||
replaceText: {
|
||
AMIS_HOST: 'https://baidu.gitee.io/amis'
|
||
},
|
||
loadTinymcePlugin: async tinymce => {
|
||
// 参考：https://www.tiny.cloud/docs/advanced/creating-a-plugin/
|
||
/*
|
||
Note: We have included the plugin in the same JavaScript file as the TinyMCE
|
||
instance for display purposes only. Tiny recommends not maintaining the plugin
|
||
with the TinyMCE instance and using the `external_plugins` option.
|
||
*/
|
||
tinymce.PluginManager.add('example', function (editor, url) {
|
||
var openDialog = function () {
|
||
return editor.windowManager.open({
|
||
title: 'Example plugin',
|
||
body: {
|
||
type: 'panel',
|
||
items: [
|
||
{
|
||
type: 'input',
|
||
name: 'title',
|
||
label: 'Title'
|
||
}
|
||
]
|
||
},
|
||
buttons: [
|
||
{
|
||
type: 'cancel',
|
||
text: 'Close'
|
||
},
|
||
{
|
||
type: 'submit',
|
||
text: 'Save',
|
||
primary: true
|
||
}
|
||
],
|
||
onSubmit: function (api) {
|
||
var data = api.getData();
|
||
/* Insert content when the window form is submitted */
|
||
editor.insertContent('Title: ' + data.title);
|
||
api.close();
|
||
}
|
||
});
|
||
};
|
||
/* Add a button that opens a window */
|
||
editor.ui.registry.addButton('example', {
|
||
text: 'My button',
|
||
onAction: function () {
|
||
/* Open window */
|
||
openDialog();
|
||
}
|
||
});
|
||
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
|
||
editor.ui.registry.addMenuItem('example', {
|
||
text: 'Example plugin',
|
||
onAction: function () {
|
||
/* Open window */
|
||
openDialog();
|
||
}
|
||
});
|
||
/* Return the metadata for the help plugin */
|
||
return {
|
||
getMetadata: function () {
|
||
return {
|
||
name: 'Example plugin',
|
||
url: 'http://exampleplugindocsurl.com'
|
||
};
|
||
}
|
||
};
|
||
});
|
||
}
|
||
};
|
||
|
||
this.watchIframeReady = this.watchIframeReady.bind(this);
|
||
window.addEventListener('message', this.watchIframeReady, false);
|
||
}
|
||
|
||
watchIframeReady(event) {
|
||
// iframe 里面的 amis 初始化了就可以发数据
|
||
if (event.data && event.data === 'amisReady') {
|
||
this.updateIframe();
|
||
}
|
||
}
|
||
|
||
updateIframe() {
|
||
if (this.iframeRef && this.iframeRef.current) {
|
||
this.iframeRef.current.contentWindow.postMessage(
|
||
{
|
||
schema: this.state.schema,
|
||
props: {theme: this.props.theme, locale: this.props.locale}
|
||
},
|
||
'*'
|
||
);
|
||
}
|
||
}
|
||
|
||
componentDidUpdate(preProps) {
|
||
const props = this.props;
|
||
|
||
if (preProps.code !== props.code) {
|
||
const schema = this.buildSchema(props.code || DEFAULT_CONTENT, props);
|
||
this.setState({
|
||
schema: schema,
|
||
schemaCode: JSON.stringify(schema, null, 2)
|
||
});
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.props.setAsideFolded && this.props.setAsideFolded(true);
|
||
}
|
||
|
||
componentWillUnmount() {
|
||
this.props.setAsideFolded && this.props.setAsideFolded(false);
|
||
window.removeEventListener('message', this.watchIframeReady, false);
|
||
}
|
||
|
||
buildSchema(schemaContent, props = this.props) {
|
||
const query = props.location.query;
|
||
|
||
try {
|
||
const scope = props.scope;
|
||
|
||
if (scope && scopes[scope]) {
|
||
schemaContent = scopes[scope].replace(
|
||
'SCHEMA_PLACEHOLDER',
|
||
schemaContent
|
||
);
|
||
}
|
||
|
||
schemaContent = schemaContent.replace(/('|")raw:/g, '$1'); // 去掉 raw
|
||
|
||
const json = JSON5.parse(schemaContent);
|
||
|
||
return json;
|
||
} catch (e) {
|
||
console.error(this.formatMessage(e.message, schemaContent));
|
||
}
|
||
|
||
return {};
|
||
}
|
||
|
||
formatMessage(message, input) {
|
||
if (/position\s?(\d+)$/.test(message)) {
|
||
const lines = input
|
||
.substring(0, parseInt(RegExp.$1, 10))
|
||
.split(/\n|\r\n|\r/);
|
||
message = `Json 语法错误，请检测。出错位置：${lines.length}，列：${
|
||
lines[lines.length - 1].length
|
||
}。`;
|
||
}
|
||
|
||
return message;
|
||
}
|
||
|
||
renderPreview() {
|
||
const schema = this.state.schema;
|
||
|
||
const props = {
|
||
...this.schemaProps,
|
||
theme: this.props.theme,
|
||
locale: this.props.locale,
|
||
affixHeader: false,
|
||
affixFooter: false
|
||
};
|
||
|
||
if (this.props.viewMode === 'mobile' && !isMobile()) {
|
||
return (
|
||
<iframe
|
||
width="375"
|
||
height="100%"
|
||
frameBorder={0}
|
||
className="mobile-frame"
|
||
ref={this.iframeRef}
|
||
// @ts-ignore
|
||
src={__uri('../mobile.html')}
|
||
></iframe>
|
||
);
|
||
}
|
||
|
||
return render(schema, props, this.env);
|
||
}
|
||
|
||
handleChange(value) {
|
||
this.setState({
|
||
schemaCode: value
|
||
});
|
||
try {
|
||
const schema = JSON5.parse(value);
|
||
this.setState(
|
||
{
|
||
schema
|
||
},
|
||
() => {
|
||
this.updateIframe();
|
||
}
|
||
);
|
||
} catch (e) {
|
||
//ignore
|
||
}
|
||
}
|
||
|
||
handleMouseDown(e) {
|
||
this.startX = e.clientX;
|
||
this.startWidth = this.state.asideWidth;
|
||
|
||
// this.startPosition.y = e.clientY;
|
||
|
||
window.addEventListener('mouseup', this.handleMouseUp);
|
||
window.addEventListener('mousemove', this.handleMouseMove);
|
||
return false;
|
||
}
|
||
|
||
handleMouseMove(e) {
|
||
const diff = this.startX - e.clientX;
|
||
e.preventDefault();
|
||
|
||
this.setState({
|
||
asideWidth: Math.min(800, Math.max(200, this.startWidth + diff))
|
||
});
|
||
}
|
||
|
||
handleMouseUp() {
|
||
this.removeWindowEvents();
|
||
}
|
||
|
||
removeWindowEvents() {
|
||
window.removeEventListener('mouseup', this.handleMouseUp);
|
||
window.removeEventListener('mousemove', this.handleMouseMove);
|
||
}
|
||
|
||
toggleDrawer() {
|
||
this.setState({
|
||
isOpened: !this.state.isOpened
|
||
});
|
||
}
|
||
|
||
close() {
|
||
this.setState({
|
||
isOpened: false
|
||
});
|
||
}
|
||
|
||
editorDidMount = (editor, monaco) => {
|
||
this.editor = editor;
|
||
this.monaco = monaco;
|
||
|
||
let host = `${window.location.protocol}//${window.location.host}`;
|
||
|
||
// 如果在 gh-pages 里面
|
||
if (/^\/amis/.test(window.location.pathname)) {
|
||
host += '/amis';
|
||
}
|
||
|
||
const schemaUrl = `${host}/schema.json`;
|
||
|
||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||
schemas: [
|
||
{
|
||
uri: schemaUrl,
|
||
fileMatch: ['*']
|
||
}
|
||
],
|
||
validate: true,
|
||
enableSchemaRequest: true,
|
||
allowComments: true
|
||
});
|
||
};
|
||
|
||
// editorFactory = (containerElement, monaco, options) => {
|
||
// this.model = monaco.editor.createModel(
|
||
// this.state.schemaCode,
|
||
// 'json',
|
||
// monaco.Uri.parse(`isuda://schemas/page.json`)
|
||
// );
|
||
|
||
// return monaco.editor.create(containerElement, {
|
||
// autoIndent: true,
|
||
// formatOnType: true,
|
||
// formatOnPaste: true,
|
||
// selectOnLineNumbers: true,
|
||
// scrollBeyondLastLine: false,
|
||
// folding: true,
|
||
// minimap: {
|
||
// enabled: false
|
||
// },
|
||
// ...options,
|
||
// model: this.model
|
||
// });
|
||
// };
|
||
|
||
renderEditor() {
|
||
const {theme} = this.props;
|
||
return (
|
||
<CodeEditor
|
||
value={this.state.schemaCode}
|
||
onChange={this.handleChange}
|
||
options={{
|
||
lineNumbers: 'off'
|
||
}}
|
||
// editorFactory={this.editorFactory}
|
||
editorDidMount={this.editorDidMount}
|
||
language="json"
|
||
editorTheme={theme === 'dark' ? 'vs-dark' : 'vs'}
|
||
/>
|
||
);
|
||
}
|
||
|
||
render() {
|
||
const {vertical, mini, height, theme, classPrefix} = this.props;
|
||
if (mini) {
|
||
return (
|
||
<div className="Playgroud Playgroud--mini">
|
||
<a onClick={this.toggleDrawer} className="Playgroud-edit-btn">
|
||
编辑代码 <i className="fa fa-code p-l-xs"></i>
|
||
</a>
|
||
<Drawer
|
||
showCloseButton
|
||
closeOnOutside
|
||
resizable
|
||
theme={theme}
|
||
overlay={false}
|
||
position="right"
|
||
show={this.state.isOpened}
|
||
onHide={this.close}
|
||
>
|
||
<div className={`${classPrefix}Drawer-header`}>
|
||
编辑代码（支持编辑实时预览）
|
||
</div>
|
||
<div className={`${classPrefix}Drawer-body no-padder`}>
|
||
{this.renderEditor()}
|
||
</div>
|
||
</Drawer>
|
||
<div style={{minHeight: height}} className="Playgroud-preview">
|
||
{this.renderPreview()}
|
||
</div>
|
||
</div>
|
||
);
|
||
} else if (vertical) {
|
||
return (
|
||
<div className="Playgroud">
|
||
<div style={{minHeight: height}} className="Playgroud-preview">
|
||
{this.renderPreview()}
|
||
</div>
|
||
<div className="Playgroud-code">{this.renderEditor()}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: 50,
|
||
bottom: 0
|
||
}}
|
||
>
|
||
<div className="hbox">
|
||
<div className="col pos-rlt">
|
||
<div className="scroll-y h-full pos-abt w-full b-b">
|
||
{this.renderPreview()}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="col bg-light lter b-l bg-auto pos-rlt"
|
||
style={{width: this.state.asideWidth}}
|
||
>
|
||
<div className="resizer" onMouseDown={this.handleMouseDown} />
|
||
{this.renderEditor()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|