Translating FormActions component
This commit is contained in:
parent
c4a74ad244
commit
d48b48bffc
@ -19,7 +19,7 @@ exports[`App removing rendered expression 1`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
<LoadNamespace(FormActions) />
|
||||
</LoadNamespace(Form)>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
@ -136,7 +136,7 @@ exports[`App rendering an expression 3`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
<LoadNamespace(FormActions) />
|
||||
</LoadNamespace(Form)>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
@ -164,7 +164,7 @@ exports[`App rendering image details 1`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions />
|
||||
<LoadNamespace(FormActions) />
|
||||
</LoadNamespace(Form)>
|
||||
<RenderJS
|
||||
expr="test expression"
|
||||
@ -192,7 +192,7 @@ exports[`App rendering image details 2`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<FormActions
|
||||
<LoadNamespace(FormActions)
|
||||
imageDetails={
|
||||
Object {
|
||||
"svg": "test svg content",
|
||||
|
@ -20,7 +20,7 @@ exports[`FormActions rendering download links 1`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example PNG Link
|
||||
TRANSLATE(Example PNG Link)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -33,7 +33,7 @@ exports[`FormActions rendering download links 1`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example SVG Link
|
||||
TRANSLATE(Example SVG Link)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -51,7 +51,9 @@ exports[`FormActions rendering download links with data after mounting 1`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Permalink
|
||||
<WithMergedOptions(TransComponent)>
|
||||
Permalink
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -71,7 +73,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example PNG Link
|
||||
TRANSLATE(Example PNG Link)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -84,7 +86,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example SVG Link
|
||||
TRANSLATE(Example SVG Link)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -95,7 +97,9 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Permalink
|
||||
<WithMergedOptions(TransComponent)>
|
||||
Permalink
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -115,7 +119,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example PNG Link
|
||||
TRANSLATE(Example PNG Link)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -128,7 +132,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Example SVG Link
|
||||
TRANSLATE(Example SVG Link)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@ -139,7 +143,9 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Permalink
|
||||
<WithMergedOptions(TransComponent)>
|
||||
Permalink
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -157,7 +163,9 @@ exports[`FormActions rendering with a permalink 1`] = `
|
||||
color="currentColor"
|
||||
size="24"
|
||||
/>
|
||||
Permalink
|
||||
<WithMergedOptions(TransComponent)>
|
||||
Permalink
|
||||
</WithMergedOptions(TransComponent)>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withNamespaces, Trans } from 'react-i18next';
|
||||
|
||||
import DownloadIcon from 'react-feather/dist/icons/download';
|
||||
import LinkIcon from 'react-feather/dist/icons/link';
|
||||
@ -15,7 +16,8 @@ class FormActions extends React.PureComponent {
|
||||
svg: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number
|
||||
})
|
||||
}),
|
||||
t: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
state = {
|
||||
@ -63,9 +65,11 @@ class FormActions extends React.PureComponent {
|
||||
}
|
||||
|
||||
downloadLink({ url, filename, type, label }) {
|
||||
const { t } = this.props;
|
||||
|
||||
return <li>
|
||||
<a href={ url } download={ filename } type={ type }>
|
||||
<DownloadIcon />{ label }
|
||||
<DownloadIcon />{ t(label) }
|
||||
</a>
|
||||
</li>;
|
||||
}
|
||||
@ -83,10 +87,11 @@ class FormActions extends React.PureComponent {
|
||||
{ pngLink && this.downloadLink(pngLink) }
|
||||
{ svgLink && this.downloadLink(svgLink) }
|
||||
{ permalinkUrl && <li>
|
||||
<a href={ permalinkUrl }><LinkIcon />Permalink</a>
|
||||
<a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
|
||||
</li> }
|
||||
</ul>;
|
||||
}
|
||||
}
|
||||
|
||||
export default FormActions;
|
||||
export { FormActions };
|
||||
export default withNamespaces()(FormActions);
|
||||
|
@ -3,7 +3,8 @@ jest.mock('./links');
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import FormActions from 'components/FormActions';
|
||||
import { mockT } from 'i18n';
|
||||
import { FormActions } from 'components/FormActions';
|
||||
import { createPngLink, createSvgLink } from './links';
|
||||
|
||||
createPngLink.mockResolvedValue({
|
||||
@ -22,14 +23,14 @@ createSvgLink.mockResolvedValue({
|
||||
describe('FormActions', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<FormActions />
|
||||
<FormActions t={ mockT } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with a permalink', () => {
|
||||
const component = shallow(
|
||||
<FormActions permalinkUrl="http://example.com" />
|
||||
<FormActions permalinkUrl="http://example.com" t={ mockT } />
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
@ -42,7 +43,7 @@ describe('FormActions', () => {
|
||||
};
|
||||
|
||||
const component = shallow(
|
||||
<FormActions imageDetails={ imageDetails }/>
|
||||
<FormActions imageDetails={ imageDetails } t={ mockT } />
|
||||
);
|
||||
|
||||
// Give a beat for mocked promises to resolve
|
||||
@ -53,7 +54,7 @@ describe('FormActions', () => {
|
||||
|
||||
test('rendering download links with data after mounting', async () => {
|
||||
const component = shallow(
|
||||
<FormActions />
|
||||
<FormActions t={ mockT } />
|
||||
);
|
||||
|
||||
component.setProps({ permalinkUrl: 'http://example.com' });
|
||||
|
@ -57,3 +57,9 @@
|
||||
JAVASCRIPT
|
||||
"PCRE": |
|
||||
PCRE
|
||||
"Permalink": |
|
||||
PERMALINK
|
||||
"Download SVG": |
|
||||
DOWNLOAD SVG
|
||||
"Download PNG": |
|
||||
DOWNLOAD PNG
|
||||
|
@ -57,3 +57,9 @@
|
||||
JavaScript
|
||||
"PCRE": |
|
||||
PCRE
|
||||
"Permalink": |
|
||||
Permalink
|
||||
"Download SVG": |
|
||||
Download SVG
|
||||
"Download PNG": |
|
||||
Download PNG
|
||||
|
Loading…
Reference in New Issue
Block a user