Merge option in mapAST (#1120)

* Added lodash and merge option in mapAST * Update Trans.js Added !== instead of != * Update Trans.js Remove full lodash loading * Update package.json change to lodash.merge * Update package.json Remove lodash * Update Trans.js Slimline prop match. Only accept new values, if node values in translation weren't set. * Update Trans.js Fix camelCase and remove lodash loading * Add Tests * trans debug * Updated tests * more tests * Comment out console.log in test
i18next · May 22, 2020 · 5847def · 5847def
1 parent fe70eee
commit 5847def
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/src/Trans.js b/src/Trans.js
@@ -21,6 +21,13 @@ function getAsArray(data) {
   return Array.isArray(data) ? data : [data];
 }
 
+function mergeProps(source, target){
+  const newTarget = {...target};
+  // overwrite source.props when target.props already set
+  newTarget.props = Object.assign(source.props, target.props);
+  return newTarget;
+}
+
 export function nodesToString(children, i18nOptions) {
   if (!children) return '';
   let stringNode = '';
@@ -132,7 +139,9 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
     return astNodes.reduce((mem, node, i) => {
       const translationContent = node.children && node.children[0] && node.children[0].content;
       if (node.type === 'tag') {
-        const child = reactNodes[parseInt(node.name, 10)] || {};
+        const tmp = reactNodes[parseInt(node.name, 10)] || {};
+        const child = Object.keys(node.attrs).length !== 0 ? mergeProps({props: node.attrs}, tmp) : tmp;
+
         const isElement = React.isValidElement(child);
 
         if (typeof child === 'string') {

diff --git a/test/i18n.js b/test/i18n.js
@@ -39,6 +39,8 @@ i18n.init({
         testTrans4KeyWithNestedComponent: 'Result should be a list: <0></0>',
         testTrans5KeyWithNestedComponent: 'Result should be a list: <1></1>',
         testTrans5KeyWithValue: 'Result should be rendered within tag <0>{{testValue}}</0>',
+		transTest3: 'Result should be a clickable link <0 href="https://www.google.com">Google</0>',
+		transTest3_overwrite: 'Result should be a clickable link <0 href="https://www.google.com">Google</0>',
       },
       other: {
         transTest1: 'Another go <1>there</1>.',

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -90,6 +90,46 @@ describe('trans simple using ns prop', () => {
   });
 });
 
+describe('trans using translation prop', () => {
+  const TestElement = ({ parent }) => (
+    <Trans i18nKey="transTest3" parent={parent}>
+      <a></a>
+    </Trans>
+  );
+
+  it('should render correct content', () => {
+    const wrapper = mount(<TestElement />);
+    // console.log(wrapper.debug());
+    expect(
+      wrapper.contains(
+        <div>
+          Result should be a clickable link <a href="https://www.google.com">Google</a>
+        </div>,
+      ),
+    ).toBe(true);
+  });
+});
+
+describe('trans overwrites translation prop', () => {
+  const TestElement = ({ parent }) => (
+    <Trans i18nKey="transTest3_overwrite" parent={parent}>
+      <a href="https://www.bing.com"></a>
+    </Trans>
+  );
+
+  it('should render correct content', () => {
+    const wrapper = mount(<TestElement />);
+    // console.log(wrapper.debug());
+    expect(
+      wrapper.contains(
+        <div>
+          Result should be a clickable link <a href="https://www.bing.com">Google</a>
+        </div>,
+      ),
+    ).toBe(true);
+  });
+});
+
 describe('trans simple with custom html tag', () => {
   const TestElement = ({ parent }) => (
     <Trans i18nKey="transTest1_customHtml" parent={parent}>