@richarepo/ui_components - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "@richarepo/ui_components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Eargo UI Components",
@@ -23,4 +23,3 @@ "main": "build/index.js",
     "react-html-parser": "^2.0.2",
-    "react-lazy-load-image-component": "^1.4.1",
-    "react-router-dom": "^5.1.2"
+    "react-lazy-load-image-component": "^1.4.1"
   },
@@ -27,0 +26,0 @@ "scripts": {

README.md

 # ui_components
 
-[![npm version](https://img.shields.io/npm/v/ui_components.svg)](https://www.npmjs.com/package/ui_components)
-[![downloads](https://img.shields.io/npm/dt/ui_components.svg)](https://www.npmjs.com/package/ui_components)
-[![dependencies](https://david-dm.org/author_name/ui_components.svg)](https://david-dm.org/author_name/ui_components)
-[![devDependencies](https://david-dm.org/author_name/ui_components/dev-status.svg)](https://david-dm.org/author_name/ui_components?type=dev)
+[![npm version](https://img.shields.io/npm/v/@richarepo/ui_components.svg)](https://www.npmjs.com/package/@richarepo/ui_components)
+[![downloads](https://img.shields.io/npm/dt/@richarepo/ui_components.svg)](https://www.npmjs.com/package/@richarepo/ui_components)
+[![dependencies](https://david-dm.org/author_name/@richarepo/ui_components.svg)](https://david-dm.org/author_name/@richarepo/ui_components)
+[![devDependencies](https://david-dm.org/author_name/@richarepo/ui_components/dev-status.svg)](https://david-dm.org/author_name/@richarepo/ui_components?type=dev)
 
@@ -11,6 +11,2 @@
 
-[Demo](https://github.com/author_name/ui_components/) - [Codesandbox Playground](https://codesandbox.io/s/jpo4ypo9wv)
-
-![Preview](https://res.cloudinary.com/author_name-github-io/image/upload/fl_apng/v1547741460/ui_components.png)
-
 ### Installation
@@ -24,10 +20,8 @@
 
-#### Smart slider:
+#### NavBar:
 
 ```javascript
-React.render(<Navbar />, document.body);
+React.render(<NavBar history={history} />, document.body);
 ```
 
-Now you can style it as you want. Checkout the [Codesandbox Playground](https://codesandbox.io/s/jpo4ypo9wv) example to see how.
-
 ### Properties
@@ -34,0 +28,0 @@

src/components/common/AnchorTag.js

 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 
-const TargetAnchor = ({
+export const TargetAnchor = ({
     className = '',
     title = '',
     children,
+    target = '_blank',
+    handleOnClick,
     href
 }) => (
-        <a title={title} href={href} className={className} target="_blank" rel="noopener noreferrer">
+        <a title={title} href={href} className={className} target={target} rel="noopener noreferrer" onClick={e => {
+            target === '_self' && e.preventDefault()
+            !!handleOnClick && handleOnClick()
+        }}>
             {!!children ? children : (!!title ? title : <span className="visuallyhidden" />)}
@@ -18,3 +22,3 @@ </a>
     handleLink = (props) => {
-        const { className, href, onClick, children, title } = props
+        const { href, history, onClick } = props
         const domain = href => href.replace('http://', '').replace('https://', '').split('/')[0]
@@ -26,5 +30,6 @@
             const relativeUrl = href.replace(/^(?:\/\/|[^/]+)*\//, '')
-            return <Link className={className} to={relativeUrl} onClick={() => !!onClick && onClick} >
-                {!!children ? children : (!!title ? title : <span className="visuallyhidden" />)}
-            </Link>
+            return <TargetAnchor {...props} href={`/${relativeUrl}`} target='_self' handleOnClick={() => {
+                !!onClick && onClick()
+                history.push(`/${relativeUrl}`)
+            }} />
         }
@@ -35,9 +40,12 @@ }
     render() {
-        const { className, href, onClick, children, title } = this.props
+        const { href, history, onClick } = this.props
         const absoluteRegex = /^https?:\/\//i
-        return !absoluteRegex.test(href) ? <Link className={className} to={href} onClick={() => !!onClick && onClick} >
-            {!!children ? children : (!!title ? title : <span className="visuallyhidden" />)}
-        </Link> : this.handleLink(this.props)
+        return !absoluteRegex.test(href) ?
+            <TargetAnchor {...this.props} target='_self' href={href} handleOnClick={() => {
+                !!onClick && onClick()
+                history.push(href)
+            }} />
+            : this.handleLink(this.props)
     }
 }
 export default AnchorTag

src/components/navbar/index.js

 import React, { Component } from 'react'
-import { withRouter } from 'react-router-dom'
 import ReactHtmlParser, { convertNodeToElement } from 'react-html-parser'
@@ -13,6 +12,6 @@ import FloatingCart from './floating_cart'
     super(props)
-    const { location, showFloatCart } = props
+    const { showFloatCart } = props
     this.headerRef = React.createRef()
     this.bannerRef = React.createRef()
-    const floatingCart = (location.pathname.toLowerCase() !== '/accessories' && showFloatCart) ? true : false
+    const floatingCart = (window.location.pathname.toLowerCase() !== '/accessories' && showFloatCart) ? true : false
     this.state = {
@@ -174,2 +173,3 @@ isVisible: true,
       menus,
+      history,
       location
@@ -194,3 +194,3 @@ } = this.props
             </div>
-            <MenuList menuList={menus} />
+            <MenuList menuList={menus} history={history} />
           </div>
@@ -208,2 +208,3 @@ <div className='nav-right'>
           menuList={menus}
+          history={history}
           closeActiveSM={this.state.closeActiveSM}
@@ -227,2 +228,2 @@ closeMenu={this.slideVerticalNav}
 
-export default withRouter(NavBarMenu)
+export default NavBarMenu

src/components/navbar/MenuList.js

@@ -58,3 +58,3 @@ import React, { Component, Fragment } from 'react'
   render() {
-    const { isMobile, menuList, closeMenu } = this.props
+    const { isMobile, menuList, closeMenu, history } = this.props
     const { activeMenuIndex } = this.state
@@ -112,3 +112,3 @@ return (
                   {!!menu.subMenuList &&
-                    <SubMenu isMobile={isMobile} menu={menu} closeMenu={closeMenu} />
+                    <SubMenu isMobile={isMobile} menu={menu} closeMenu={closeMenu} history={history} />
                   }
@@ -115,0 +115,0 @@ </div>

src/components/navbar/ShopList.jsx

 import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { colorCodes } from '../../constant/colors'
+import { TargetAnchor } from '../common/AnchorTag'
 
-const StoreOption = styled(Link)`
+const StoreOption = styled(TargetAnchor)`
 display: flex;
@@ -83,4 +83,4 @@ flex-direction: column;
             key={index}
-            onClick={() => !!closeMenu && closeMenu()}
-            to={store.address}>
+            handleOnClick={() => !!closeMenu && closeMenu()}
+            href={store.address}>
             <OptionImage
@@ -87,0 +87,0 @@ src={store.optionImage}

src/components/navbar/SubMenu.js

@@ -12,3 +12,3 @@ import React, { Component, Fragment } from 'react'
   render() {
-    const { isMobile, menu, closeMenu } = this.props
+    const { isMobile, menu, closeMenu, history } = this.props
     return (
@@ -22,2 +22,3 @@ <Fragment>
                   <AnchorTag
+                    history={history}
                     key={i} className='prod-opt center-flex nav-shop-link'
@@ -43,3 +44,3 @@ href={opt.address}
                 <div className='suburl' key={i} onClick={e => e.stopPropagation()}>
-                  <AnchorTag href={suburl.suburl}>{suburl.title}</AnchorTag>
+                  <AnchorTag href={suburl.suburl} history={history}>{suburl.title}</AnchorTag>
                 </div>)
@@ -46,0 +47,0 @@ }

src/index.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { BrowserRouter } from 'react-router-dom'
 import NavBarMenu from './components/navbar'
@@ -15,5 +14,3 @@ import { loadYotpo } from './common/helpers'
 		return (
-			<BrowserRouter>
-				<NavBarMenu {...this.props} />
-			</BrowserRouter>
+			<NavBarMenu {...this.props} />
 		)
@@ -24,2 +21,3 @@ }
 NavBar.propTypes = {
+	history: PropTypes.array.isRequired,
 	menus: PropTypes.array.isRequired,
@@ -26,0 +24,0 @@ showFloatCart: PropTypes.bool.isRequired,

webpack.config.js

@@ -43,4 +43,3 @@ const path = require('path');
 		'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
-		'react-router-dom': 'react-router-dom'
 	}
 };

No alert changes

Improved metrics

Total package byte prevSize

811719

Dependency count

6

decreased by-14.29%

Lines of code

2208

increased by0.32%

Worsened metrics

Number of lines in readme file

31

decreased by-16.22%

Dependency changes

• - Removedreact-router-dom@^5.1.2

• - Removed@babel/runtime@7.26.9(transitive)

• - Removedhistory@4.10.1(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedisarray@0.0.1(transitive)

• - Removedpath-to-regexp@1.9.0(transitive)

• - Removedreact-router@5.3.4(transitive)

• - Removedreact-router-dom@5.3.4(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedresolve-pathname@3.0.0(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• - Removedvalue-equal@1.0.1(transitive)