import React from 'react'; import {render} from '../../src/index'; import axios from 'axios'; import {toast} from '../../src/components/Toast'; import {alert, confirm} from '../../src/components/Alert'; import Button from '../../src/components/Button'; import LazyComponent from '../../src/components/LazyComponent'; import {default as DrawerContainer} from '../../src/components/Drawer'; import {Portal} from 'react-overlays'; import {withRouter} from 'react-router'; import copy from 'copy-to-clipboard'; function loadEditor() { return new Promise(resolve => require(['../../src/components/Editor'], component => resolve(component.default)) ); } export default function (schema) { if (!schema['$schema']) { schema = { $schema: 'https://houtai.baidu.com/v2/schemas/page.json', ...schema }; } return withRouter( class extends React.Component { static displayName = 'SchemaRenderer'; state = {open: false}; toggleCode = () => this.setState({ open: !this.state.open }); copyCode = () => { copy(JSON.stringify(schema)); toast.success('页面配置JSON已复制到粘贴板'); }; close = () => this.setState({ open: false }); constructor(props) { super(props); const {router} = props; const normalizeLink = to => { to = to || ''; const location = router.getCurrentLocation(); if (to && to[0] === '#') { to = location.pathname + location.search + to; } else if (to && to[0] === '?') { to = location.pathname + to; } const idx = to.indexOf('?'); const idx2 = to.indexOf('#'); let pathname = ~idx ? to.substring(0, idx) : ~idx2 ? to.substring(0, idx2) : to; let search = ~idx ? to.substring(idx, ~idx2 ? idx2 : undefined) : ''; let hash = ~idx2 ? to.substring(idx2) : location.hash; if (!pathname) { pathname = location.pathname; } else if (pathname[0] != '/' && !/^https?:\/\//.test(pathname)) { let relativeBase = location.pathname; const paths = relativeBase.split('/'); paths.pop(); let m; while ((m = /^\.\.?\//.exec(pathname))) { if (m[0] === '../') { paths.pop(); } pathname = pathname.substring(m[0].length); } pathname = paths.concat(pathname).join('/'); } return pathname + search + hash; }; this.env = { updateLocation: (location, replace) => { router[replace ? 'replace' : 'push'](normalizeLink(location)); }, isCurrentUrl: to => { const link = normalizeLink(to); return router.isActive(link); }, jumpTo: to => { to = normalizeLink(to); if (/^https?:\/\//.test(to)) { window.location.replace(to); } else { router.push(to); } }, fetcher: ({url, method, data, config, headers}) => { config = config || {}; config.headers = headers || {}; if (config.cancelExecutor) { config.cancelToken = new axios.CancelToken(config.cancelExecutor); } if (data && data instanceof FormData) { // config.headers = config.headers || {}; // 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'; } if (method !== 'post' && method !== 'put' && method !== 'patch') { if (data) { if (method === 'delete') { config.data = data; } else { config.params = data; } } return axios[method](url, config); } return axios[method](url, data, config); }, isCancel: value => axios.isCancel(value), notify: (type, msg) => toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg), alert, confirm, copy: content => { copy(content); toast.success('内容已复制到粘贴板'); } }; this.handleEditorMount = this.handleEditorMount.bind(this); } handleEditorMount(editor, monaco) { monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ enableSchemaRequest: true, validate: true }); } renderCode() { return ( ); } renderSchema() { const {router, location, theme, locale} = this.props; return render( schema, { location, theme, locale }, this.env ); } render() { const ns = this.props.classPrefix; const showCode = this.props.showCode; return ( <>
{showCode !== false ? ( {this.state.open ? this.renderCode() : null} ) : null} {this.renderSchema()}
{showCode !== false ? ( //
//
// 查看页面配置 //
//
// 复制页面配置 //
//
查看页面配置
复制页面配置
) : null} ); } } ); }