Merge d70622b into adadbad

coston · Apr 5, 2020 · 77a1db1 · 77a1db1
2 parents adadbad + d70622b
commit 77a1db1
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "react-obfuscate",
-  "version": "3.6.6",
+  "version": "3.7.1-0",
   "description": "An intelligent React component to obfuscate any contact link",
-  "main": "dist/obfuscate.js",
+  "main": "dist/index.js",
   "files": [
-    "dist/obfuscate.js"
+    "dist/index.js"
   ],
   "author": "Coston Perkins <costonperkins@me.com> (https://coston.io)",
   "homepage": "https://github.com/coston/react-obfuscate",

diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import Head from 'next/head'
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
-import Obfuscate from '../src/obfuscate'
-import { Browser, Terminal } from 'react-window-ui'
+import React from 'react';
+import Head from 'next/head';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import Obfuscate from '../src';
+import { Browser, Terminal } from 'react-window-ui';
 
 class App extends React.Component {
   render() {
@@ -192,11 +192,11 @@ class App extends React.Component {
           <div className="hint" />
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default App
+export default App;
 
 const theme /*: PrismTheme */ = {
   plain: {
@@ -291,9 +291,22 @@ const theme /*: PrismTheme */ = {
       },
     },
   ],
-}
+};
 
 const headerCode = `
+<>
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Email</th> 
+  </tr>
+  <tr>
+  <td>Calderón de la Barca</td>
+    <td><Obfuscate 
+      email="1111111111111-22222222222222@333333333333333-44444444444.io" 
+    /></td> 
+  </tr>
+</table>
 <ul>
   <li>
     Telephone: 
@@ -342,4 +355,5 @@ const headerCode = `
     </Obfuscate>
   </li>
 </ul>
-`.trim()
+</>
+`.trim();
diff --git a/src/obfuscate.js → src/index.js b/src/obfuscate.js → src/index.js
@@ -1,60 +1,78 @@
 import React, { useState } from 'react';
 import T from 'prop-types';
 
-const Obfuscate = props => {
-  const {
-    element,
-    children,
-    tel,
-    sms,
-    facetime,
-    email,
-    href,
-    headers,
-    obfuscate,
-    obfuscateChildren,
-    linkText,
-    style,
-    onClick,
-    ...others
-  } = props;
+const combineHeaders = (params) => {
+  return Object.keys(params)
+    .map((key) => `${key}=${encodeURIComponent(params[key])}`)
+    .join('&');
+};
+
+const generateLink = ({
+  email,
+  headers,
+  tel,
+  sms,
+  facetime,
+  href,
+  children,
+}) => {
+  if (email) {
+    if (headers) {
+      return `mailto:${email}?${combineHeaders(headers)}`;
+    }
+    return `mailto:${email}`;
+  }
+  if (tel) {
+    return `tel:${tel}`;
+  }
+  if (sms) {
+    return `sms:${sms}`;
+  }
+  if (facetime) {
+    return `facetime:${facetime}`;
+  }
+  if (href) {
+    return href;
+  }
+  if (typeof children !== 'object') {
+    return children;
+  }
+  return '';
+};
 
+const reverse = (content) =>
+  typeof content !== 'undefined' &&
+  content.split('').reverse().join('').replace('(', ')').replace(')', '(');
+
+const Obfuscate = ({
+  element,
+  children,
+  tel,
+  sms,
+  facetime,
+  email,
+  href,
+  headers,
+  obfuscate,
+  obfuscateChildren,
+  linkText,
+  style,
+  onClick,
+  ...others
+}) => {
   const [humanInteraction, setHumanInteraction] = useState(false);
   const linkProps = children || tel || sms || facetime || email || href;
   const Component = element;
 
-  const generateLink = () => {
-    let link;
-
-    // Combine email header parameters for use with email
-    const combineHeaders = params => {
-      return Object.keys(params)
-        .map(key => `${key}=${encodeURIComponent(params[key])}`)
-        .join('&');
-    };
-
-    if (email) {
-      link = `mailto:${email}`;
-
-      if (headers) {
-        link += `?${combineHeaders(headers)}`;
-      }
-    } else if (tel) {
-      link = `tel:${tel}`;
-    } else if (sms) {
-      link = `sms:${sms}`;
-    } else if (facetime) {
-      link = `facetime:${facetime}`;
-    } else if (href) {
-      link = href;
-    } else if (typeof children !== 'object') {
-      link = children;
-    } else {
-      return '';
-    }
-
-    return link;
-  };
+  const linkFromProps = generateLink({
+    email,
+    headers,
+    tel,
+    sms,
+    facetime,
+    href,
+    children,
+  });
 
   const handleClick = () => {
     // If focused or hovered, this js will be skipped with preference for html
@@ -64,54 +82,28 @@ const Obfuscate = props => {
       if (onClick && typeof onClick === 'function') {
         onClick();
       }
-
-      window.location.href = generateLink({
-        email,
-        headers,
-        tel,
-        sms,
-        facetime,
-        href,
-        children,
-      });
+      window.location.href = linkFromProps;
     }
   };
 
-  const reverse = content =>
-    typeof content !== 'undefined' &&
-    content
-      .split('')
-      .reverse()
-      .join('')
-      .replace('(', ')')
-      .replace(')', '(');
-
+  const obfuscationOff = humanInteraction === true || obfuscate === false;
+  const useClearText = obfuscationOff || obfuscateChildren === false;
   const obfuscatedStyle = {
     ...style,
     unicodeBidi: 'bidi-override',
-    direction:
-      humanInteraction === true ||
-      obfuscate === false ||
-      obfuscateChildren === false
-        ? 'ltr'
-        : 'rtl',
+    writingMode: !useClearText ? 'horizontal-bt' : null,
+    direction: !useClearText ? 'rtl' : 'ltr',
   };
 
-  const renderedLink =
-    humanInteraction === true ||
-    obfuscate === false ||
-    typeof children === 'object' ||
-    obfuscateChildren === false // Allow child elements
+  const visibleLink =
+    useClearText || typeof children === 'object'
       ? linkProps
       : reverse(linkProps);
 
   const clickProps =
     Component === 'a'
       ? {
-          href:
-            humanInteraction === true || obfuscate === false
-              ? generateLink()
-              : linkText || 'obfuscated',
+          href: obfuscationOff ? linkFromProps : linkText,
           onClick: handleClick,
         }
       : {};
@@ -125,7 +117,7 @@ const Obfuscate = props => {
       {...clickProps}
       style={obfuscatedStyle}
     >
-      {renderedLink}
+      {visibleLink}
     </Component>
   );
 };
@@ -148,6 +140,7 @@ Obfuscate.propTypes = {
 
 Obfuscate.defaultProps = {
   element: 'a',
+  linkText: 'obfuscated',
   children: undefined,
   tel: undefined,
   sms: undefined,
@@ -157,7 +150,6 @@ Obfuscate.defaultProps = {
   headers: undefined,
   obfuscate: undefined,
   obfuscateChildren: undefined,
-  linkText: undefined,
   style: {},
   onClick: undefined,
 };

diff --git a/test/obfuscate.test.js → test/index.test.js b/test/obfuscate.test.js → test/index.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Obfuscate from '../src/obfuscate';
+import Obfuscate from '../src/index';
 
 const testEmail = 'coston.perkins@ua.edu';
 const testTel = '205-454-1234';
@@ -42,7 +42,7 @@ describe('obfuscate', () => {
     wrapper.simulate('click', { preventDefault: () => {} });
     expect(global.window.location.href).toEqual(
       `mailto:${testEmail}?${Object.keys(headers)
-        .map(key => `${key}=${encodeURIComponent(headers[key])}`)
+        .map((key) => `${key}=${encodeURIComponent(headers[key])}`)
         .join('&')}`
     );
   });
@@ -177,6 +177,7 @@ describe('obfuscate', () => {
     expect(wrapper.prop('style')).toEqual({
       direction: 'ltr',
       unicodeBidi: 'bidi-override',
+      writingMode: null,
     });
   });
 
@@ -189,6 +190,7 @@ describe('obfuscate', () => {
       color: 'test',
       direction: 'rtl',
       unicodeBidi: 'bidi-override',
+      writingMode: 'horizontal-bt',
     });
   });
 });