diff --git a/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap b/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
index 323d6b176..72446486c 100644
--- a/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
+++ b/__tests__/renderers/Form/__snapshots__/initData.test.tsx.snap
@@ -112,7 +112,6 @@ exports[`Form:initData:remote 1`] = `
-
1
item
-
diff --git a/__tests__/renderers/__snapshots__/Markdown.test.tsx.snap b/__tests__/renderers/__snapshots__/Markdown.test.tsx.snap
index 93814972d..bc19a6619 100644
--- a/__tests__/renderers/__snapshots__/Markdown.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Markdown.test.tsx.snap
@@ -12,7 +12,6 @@ exports[`Renderer:markdown 1`] = `
-
diff --git a/__tests__/renderers/__snapshots__/Page.test.tsx.snap b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
index d8eaaaac4..9d319bab5 100644
--- a/__tests__/renderers/__snapshots__/Page.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Page.test.tsx.snap
@@ -821,7 +821,6 @@ exports[`Renderer:Page handleAction actionType=drawer 1`] = `
-
-
-
diff --git a/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap b/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
index 71521fee4..aaa2a41ce 100644
--- a/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Wizard.test.tsx.snap
@@ -1755,7 +1755,6 @@ exports[`Renderer:Wizard initApi show loading 1`] = `
-
`;
diff --git a/examples/components/MdRenderer.tsx b/examples/components/MdRenderer.jsx
similarity index 92%
rename from examples/components/MdRenderer.tsx
rename to examples/components/MdRenderer.jsx
index 5b45510a4..3a37c14a7 100644
--- a/examples/components/MdRenderer.tsx
+++ b/examples/components/MdRenderer.jsx
@@ -1,6 +1,7 @@
/* eslint-disable no-unused-vars */
import React from 'react';
-import ReactDOM from 'react-dom';
+import {findDOMNode} from 'react-dom';
+import {createRoot} from 'react-dom/client';
import {getTheme, render} from '../../src/index';
import axios from 'axios';
import TitleBar from '../../src/components/TitleBar';
@@ -12,7 +13,7 @@ import classnames from 'classnames';
import {Link} from 'react-router-dom';
import Play from './Play';
-class CodePreview extends React.Component {
+class CodePreview extends React.Component {
state = {
PlayGround: null
};
@@ -24,7 +25,7 @@ class CodePreview extends React.Component {
}
}
-function eachDom(dom: HTMLElement, iterator: (dom: HTMLElement) => void) {
+function eachDom(dom, iterator) {
if (!dom) {
return;
}
@@ -39,7 +40,7 @@ function eachDom(dom: HTMLElement, iterator: (dom: HTMLElement) => void) {
class Preview extends React.Component {
static displayName = 'MarkdownRenderer';
ref = null;
- doms = [];
+ roots = [];
constructor(props) {
super(props);
this.divRef = this.divRef.bind(this);
@@ -64,12 +65,12 @@ class Preview extends React.Component {
componentDidUpdate() {
this.renderSchema();
-
this.fixHtmlPreview();
}
componentWillUnmount() {
- this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom));
+ // TODO: 会报错，可能得后续 amis 内部的 render 也改才行
+ // this.roots.forEach(root => root.unmount());
}
divRef(ref) {
@@ -108,20 +109,19 @@ class Preview extends React.Component {
const origin = script.parentNode;
origin.parentNode.replaceChild(dom, origin);
- this.doms.push(dom);
- ReactDOM.unstable_renderSubtreeIntoContainer(
- this,
+ const root = createRoot(dom);
+ this.roots.push(root);
+ root.render(
ReactDOM.findDOMNode(this)}
+ container={() => findDOMNode(this)}
component={CodePreview}
code={script.innerText}
scope={props.scope}
// unMountOnHidden
height={height}
placeholder="加载中，请稍后。。。"
- />,
- dom
+ />
);
}
}
@@ -131,9 +131,9 @@ class Preview extends React.Component {
if (!htmlPreviews && !htmlPreviews.length) {
return;
}
- const ns = getTheme((this.props as any).theme)?.classPrefix;
+ const ns = getTheme(this.props.theme)?.classPrefix;
[].slice.call(htmlPreviews).forEach(dom => {
- eachDom(dom as HTMLElement, dom => {
+ eachDom(dom, dom => {
if (typeof dom.className !== 'string') {
return;
}
@@ -157,7 +157,7 @@ class Preview extends React.Component {
}
}
-export default function (doc: any) {
+export default function (doc) {
return class extends React.Component {
popoverDom = null;
@@ -167,7 +167,7 @@ export default function (doc: any) {
headingPopover: false
};
- popoverRef = (ref: HTMLDivElement) => {
+ popoverRef = ref => {
this.popoverDom = ref;
};
@@ -188,7 +188,7 @@ export default function (doc: any) {
));
}
- handlePopOverClick = (e: React.MouseEvent) => {
+ handlePopOverClick = e => {
this.setState({headingPopover: false});
e.stopPropagation();
// e.preventDefault();
diff --git a/examples/embed.tsx b/examples/embed.tsx
index 4c6b80442..a8734cff8 100644
--- a/examples/embed.tsx
+++ b/examples/embed.tsx
@@ -1,6 +1,6 @@
import './polyfills/index';
import React from 'react';
-import {render as renderReact, unmountComponentAtNode} from 'react-dom';
+import {createRoot} from 'react-dom/client';
import axios from 'axios';
import {match} from 'path-to-regexp';
import copy from 'copy-to-clipboard';
@@ -272,15 +272,16 @@ export function embed(
);
}
- renderReact(createElements(props), container);
+ const root = createRoot(container);
+ root.render(createElements(props));
return {
...scoped,
updateProps: (props: any, callback?: () => void) => {
- renderReact(createElements(props), container as HTMLElement, callback);
+ root.render(createElements(props));
},
unmount: () => {
- unmountComponentAtNode(container as HTMLElement);
+ root.unmount();
}
};
}
diff --git a/examples/index.jsx b/examples/index.jsx
index 5d34e725f..c54845514 100644
--- a/examples/index.jsx
+++ b/examples/index.jsx
@@ -3,12 +3,13 @@
* @author liaoxuezhi@cloud.com
*/
import './polyfills/index';
-import React from 'react';
-import {render} from 'react-dom';
+import React, {useEffect} from 'react';
+
+import {createRoot} from 'react-dom/client';
import App from './components/App';
-export function bootstrap(mountTo, initalState) {
- render(, mountTo, () => {
+function AppWithCallbackAfterRender() {
+ useEffect(() => {
// 由于延迟加载导致初始锚点经常不正确
// 延迟再设置一下锚点，这个问题暂时没想到其它方法
setTimeout(() => {
@@ -21,4 +22,11 @@ export function bootstrap(mountTo, initalState) {
}
}, 2000);
});
+
+ return ;
+}
+
+export function bootstrap(mountTo, initalState) {
+ const root = createRoot(mountTo);
+ root.render();
}
diff --git a/examples/mobile.jsx b/examples/mobile.jsx
index 8608b6ff2..3d3fc79e2 100644
--- a/examples/mobile.jsx
+++ b/examples/mobile.jsx
@@ -5,7 +5,7 @@
import './polyfills/index';
import React from 'react';
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
import axios from 'axios';
import copy from 'copy-to-clipboard';
import {toast} from '../src/components/Toast';
@@ -95,5 +95,6 @@ class AMISComponent extends React.Component {
}
export function bootstrap(mountTo) {
- render(, mountTo);
+ const root = createRoot(mountTo);
+ root.render();
}
diff --git a/package.json b/package.json
index 77e980adf..c3fdfbbdc 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
]
},
"dependencies": {
- "amis-formula": "^1.3.11",
+ "amis-formula": "^1.3.12",
"ansi-to-react": "^6.1.6",
"async": "2.6.0",
"attr-accept": "2.2.2",
@@ -51,7 +51,7 @@
"classnames": "2.3.1",
"codemirror": "^5.63.0",
"downshift": "6.1.7",
- "echarts": "5.3.0",
+ "echarts": "5.3.1",
"echarts-stat": "^1.2.0",
"exceljs": "^4.3.0",
"file-saver": "^2.0.2",
@@ -70,12 +70,12 @@
"mobx-react": "^6.3.1",
"mobx-state-tree": "^3.17.3",
"moment": "^2.19.3",
- "monaco-editor": "0.31.1",
+ "monaco-editor": "0.33.0",
"mpegts.js": "^1.6.10",
"papaparse": "^5.3.0",
"prop-types": "^15.6.1",
"punycode": "^2.1.1",
- "qrcode.react": "^1.0.1",
+ "qrcode.react": "^3.0.0",
"qs": "6.9.7",
"rc-input-number": "^7.3.4",
"rc-overflow": "^1.2.4",
@@ -96,8 +96,8 @@
"video-react": "0.15.0"
},
"devDependencies": {
- "@fortawesome/fontawesome-free": "^6.0.0",
- "@testing-library/react": "^12.1.2",
+ "@fortawesome/fontawesome-free": "^6.1.1",
+ "@testing-library/react": "^12.1.4",
"@types/async": "^2.0.45",
"@types/codemirror": "^5.60.3",
"@types/echarts": "^4.9.2",
@@ -105,7 +105,6 @@
"@types/history": "^4.6.0",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/jest": "^27.0.2",
- "@types/jquery": "^3.3.1",
"@types/lodash": "^4.14.175",
"@types/markdown-it": "^12.2.1",
"@types/mkdirp": "^1.0.1",
@@ -149,7 +148,7 @@
"jest": "^27.5.1",
"jest-canvas-mock": "^2.3.0",
"js-yaml": "^4.1.0",
- "json5": "^2.2.0",
+ "json5": "^2.2.1",
"lint-staged": "^12.3.3",
"marked": ">=4.0.12",
"mkdirp": "^1.0.4",
@@ -157,16 +156,16 @@
"path-to-regexp": "^6.2.0",
"postcss": "^8.4.6",
"postcss-cli": "^9.1.0",
- "postcss-custom-properties": "^12.1.4",
- "prettier": "^2.4.1",
+ "postcss-custom-properties": "^12.1.5",
+ "prettier": "^2.6.1",
"pretty-quick": "^3.1.1",
"prismjs": "^1.25.0",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
"react-router": "^5.2.1",
"react-router-dom": "5.3.0",
- "react-test-renderer": "^17.0.2",
- "ts-jest": "^27.0.5",
+ "react-test-renderer": "^18.0.0",
+ "ts-jest": "^27.1.4",
"ts-json-schema-generator": "0.96.0",
"ts-node": "^10.5.0",
"typescript": "~4.5.5"
diff --git a/src/renderers/QRCode.tsx b/src/renderers/QRCode.tsx
index 24aed1edf..1f9acdbf7 100644
--- a/src/renderers/QRCode.tsx
+++ b/src/renderers/QRCode.tsx
@@ -3,8 +3,7 @@ import cx from 'classnames';
import {Renderer, RendererProps} from '../factory';
import {FormItem, FormControlProps} from './Form/Item';
import {filter} from '../utils/tpl';
-// @ts-ignore
-import QrCode from 'qrcode.react';
+import {QRCodeSVG} from 'qrcode.react';
import {BaseSchema, SchemaClassName} from '../Schema';
import {getPropValue} from '../utils/helper';
@@ -95,10 +94,10 @@ export default class QRCode extends React.Component {
二维码值过长，请设置2953个字符以下的文本
) : (
-