diff --git a/package.json b/package.json
index 0be8e47..d2216cc 100644
--- a/package.json
+++ b/package.json
@@ -157,7 +157,6 @@
"react-i18next": "^7.3.6",
"style-loader": "^0.20.1",
"svg-react-loader": "^0.4.5",
- "throttle-debounce": "^1.0.1",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^3.10.0",
"webpack-merge": "^4.1.1",
diff --git a/src/components/App/__snapshots__/test.js.snap b/src/components/App/__snapshots__/test.js.snap
index be4115a..c75a758 100644
--- a/src/components/App/__snapshots__/test.js.snap
+++ b/src/components/App/__snapshots__/test.js.snap
@@ -29,10 +29,5 @@ exports[`App rendering 1`] = `
Sample warning message
-
- Testing image
-
`;
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 1d9fab7..d5537c6 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
-import { debounce } from 'throttle-debounce';
import style from './style.css';
@@ -12,13 +11,13 @@ import { syntaxes, demoImage } from 'devel';
class App extends React.PureComponent {
state = {
- syntaxes,
- image: demoImage
+ syntaxes
}
- setSvgUrl({ markup }) {
+ setSvgUrl(element) {
try {
const type = 'image/svg+xml';
+ const markup = element.outerHTML;
const blob = new Blob([markup], { type });
this.setState({
@@ -35,9 +34,10 @@ class App extends React.PureComponent {
}
}
- async setPngUrl({ element, markup }) {
+ async setPngUrl(element) {
try {
const type = 'image/png';
+ const markup = element.outerHTML;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const loader = new Image();
@@ -67,15 +67,19 @@ class App extends React.PureComponent {
}
}
- handleRender = debounce(0, result => {
- this.setSvgUrl(result);
- this.setPngUrl(result);
- })
-
handleSubmit = ({expr, syntax}) => {
console.log(syntax, expr); // eslint-disable-line no-console
+ this.setState({
+ image: demoImage
+ }, async () => {
+ await this.image.doReflow();
+ this.setSvgUrl(this.image.svg);
+ this.setPngUrl(this.image.svg);
+ });
}
+ imageRef = image => this.image = image
+
render() {
const { svgUrl, pngUrl, syntaxes, image } = this.state;
const downloadUrls = [
@@ -95,9 +99,9 @@ class App extends React.PureComponent {
Sample warning message
-
- { renderImage(image, { onRender: this.handleRender }) }
-
+ { image &&
+ { renderImage(image, { ref: this.imageRef }) }
+
}
;
}
}
diff --git a/src/components/SVG/Image.js b/src/components/SVG/Image.js
index f106f0d..4caf920 100644
--- a/src/components/SVG/Image.js
+++ b/src/components/SVG/Image.js
@@ -32,24 +32,6 @@ class Image extends Base {
height: 0
}
- componentDidMount() {
- this.doReflow().then(() => this.publishMarkup());
- }
-
- componentDidUpdate() {
- this.doReflow().then(() => this.publishMarkup());
- }
-
- publishMarkup() {
- const { onRender } = this.props;
- const markup = this.svg.outerHTML;
-
- if (onRender && this.publishedMarkup !== markup) {
- this.publishedMarkup = markup;
- onRender({ element: this.svg, markup: this.svg.outerHTML });
- }
- }
-
preReflow() {
return this.contained;
}
@@ -96,7 +78,6 @@ class Image extends Base {
Image.propTypes = {
children: PropTypes.node,
- onRender: PropTypes.func,
padding: PropTypes.number
};
diff --git a/yarn.lock b/yarn.lock
index 3c9f3cd..fa32320 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7785,10 +7785,6 @@ throat@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
-throttle-debounce@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
-
throttleit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"