root
/
regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Translating FormActions component

This commit is contained in:
Jeff Avallone 2019-01-15 21:46:23 -05:00
parent c4a74ad244
commit d48b48bffc
6 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/App/__snapshots__/test.js.snap
View File

@ -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",

28
src/components/FormActions/__snapshots__/test.js.snap
View File

@ -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>

13
src/components/FormActions/index.js
View File

@ -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);

11
src/components/FormActions/test.js
View File

@ -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' });

6
src/locales/en-AC.yaml
View File

@ -57,3 +57,9 @@
JAVASCRIPT
"PCRE": |
PCRE
"Permalink": |
PERMALINK
"Download SVG": |
DOWNLOAD SVG
"Download PNG": |
DOWNLOAD PNG

6
src/locales/en.yaml
View File

@ -57,3 +57,9 @@
JavaScript
"PCRE": |
PCRE
"Permalink": |
Permalink
"Download SVG": |
Download SVG
"Download PNG": |
Download PNG