From 06a90429ff47db611eb46a3410c26142bcf18c38 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Fri, 16 Feb 2018 22:47:53 -0500 Subject: [PATCH] Getting Download links working --- package.json | 1 + src/components/App/__snapshots__/test.js.snap | 17 +--- src/components/App/index.js | 80 +++++++++++++++++-- src/components/App/test.js | 5 +- src/components/SVG/Image.js | 2 +- src/components/SVG/index.js | 6 +- src/locales/en/translation.yaml | 2 + .../__snapshots__/Component.test.js.snap | 2 +- yarn.lock | 4 + 9 files changed, 88 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index d2216cc..0be8e47 100644 --- a/package.json +++ b/package.json @@ -157,6 +157,7 @@ "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 c2aa245..be4115a 100644 --- a/src/components/App/__snapshots__/test.js.snap +++ b/src/components/App/__snapshots__/test.js.snap @@ -3,22 +3,7 @@ exports[`App rendering 1`] = ` { + loader.onload = resolve; + loader.src = 'data:image/svg+xml,' + encodeURIComponent(markup); + }); + + context.drawImage(loader, 0, 0, loader.width, loader.height); + const blob = await new Promise(resolve => canvas.toBlob(resolve, type)); + + this.setState({ + pngUrl: { + url: URL.createObjectURL(blob), + label: this.props.t('Download PNG'), + filename: 'image.png', + type + } + }); + } + catch (e) { + console.error(e); // eslint-disable-line no-console + } + } + + handleRender = debounce(0, result => { + this.setSvgUrl(result); + this.setPngUrl(result); + }) + handleSubmit = ({expr, syntax}) => { console.log(syntax, expr); // eslint-disable-line no-console } render() { - const { downloadUrls, syntaxes, image } = this.state; + const { svgUrl, pngUrl, syntaxes, image } = this.state; + const downloadUrls = [ + svgUrl, + pngUrl + ].filter(Boolean); return
Sample warning message

- { renderImage(image) } + { renderImage(image, { onRender: this.handleRender }) }
; } } -export default App; +App.propTypes = { + t: PropTypes.func +}; + +export default translate()(App); +export { App }; diff --git a/src/components/App/test.js b/src/components/App/test.js index 0ed05a8..bd1f027 100644 --- a/src/components/App/test.js +++ b/src/components/App/test.js @@ -3,14 +3,15 @@ jest.mock('components/SVG'); import React from 'react'; import { shallow } from 'enzyme'; -import App from 'components/App'; +import { App } from 'components/App'; import renderImage from 'components/SVG'; +import { translate } from '__mocks__/i18n'; describe('App', () => { test('rendering', () => { renderImage.mockReturnValue('Testing image'); const component = shallow( - + ); expect(component).toMatchSnapshot(); }); diff --git a/src/components/SVG/Image.js b/src/components/SVG/Image.js index 32aa994..f106f0d 100644 --- a/src/components/SVG/Image.js +++ b/src/components/SVG/Image.js @@ -46,7 +46,7 @@ class Image extends Base { if (onRender && this.publishedMarkup !== markup) { this.publishedMarkup = markup; - onRender(this.svg.outerHTML); + onRender({ element: this.svg, markup: this.svg.outerHTML }); } } diff --git a/src/components/SVG/index.js b/src/components/SVG/index.js index 324a557..9395cf0 100644 --- a/src/components/SVG/index.js +++ b/src/components/SVG/index.js @@ -25,17 +25,17 @@ const renderChildren = children => { return children.length === 1 ? renderImage(children[0]) : - children.map(renderImage); + children.map((node, i) => renderImage(node, { key: i })); }; -const renderImage = (node, key) => { +const renderImage = (node, extraProps = {}) => { if (typeof node === 'string') { return node; } const { type, props, children } = node; - return React.createElement(nodeTypes[type], { key, ...props }, renderChildren(children)); + return React.createElement(nodeTypes[type], { ...extraProps, ...props }, renderChildren(children)); }; export default renderImage; diff --git a/src/locales/en/translation.yaml b/src/locales/en/translation.yaml index 7e38549..93fe888 100644 --- a/src/locales/en/translation.yaml +++ b/src/locales/en/translation.yaml @@ -2,6 +2,8 @@ An error has occurred: An error has occurred Created by <1>Jeff Avallone: Created by <1>Jeff Avallone Display: Display +Download PNG: Download PNG +Download SVG: Download SVG Enter regular expression to display: Enter regular expression to display Generated images licensed: 'Generated images licensed: <1><0>' Permalink: Permalink diff --git a/src/pages/index/__snapshots__/Component.test.js.snap b/src/pages/index/__snapshots__/Component.test.js.snap index ddcc3de..bdcc13e 100644 --- a/src/pages/index/__snapshots__/Component.test.js.snap +++ b/src/pages/index/__snapshots__/Component.test.js.snap @@ -38,7 +38,7 @@ exports[`Index page component rendering 1`] = `

- + `; diff --git a/yarn.lock b/yarn.lock index fa32320..3c9f3cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7785,6 +7785,10 @@ 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"