Develop (#388)

* chore(storybook): upgrade storybook (#380) * chore(core): add feature request form to issues (#382) * Fix/code warnings (#385) * fix(actions): remove implicit validation * feat(input-outlined): remove implicit validation * fix(sidebar): fix identical operands * feat(sidebar): remove unused import * feat(table-head): remove unused imports * feat(tooltip): remove unused import * feat(table-head): remove proptypes * refactor(sidebar): rename items props (#387) Co-authored-by: Felipe Cesar Maccari <[email protected]>
aiqfome · Jan 17, 2022 · c8a353e · c8a353e
1 parent 25549a4
commit c8a353e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 30 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -23,8 +23,7 @@
     "prettier/prettier": "error",
     "react/prop-types": "off",
     "import/extensions": [
-      "error",
-      "ignorePackages",
+      "never",
       {
         "js": "never",
         "ts": "never",

diff --git a/src/components/Sidebar/Item.tsx b/src/components/Sidebar/Item.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, ReactDOM } from 'react'
 import PropTypes from 'prop-types'
 import { useLocation } from 'react-router-dom'
 import styled, { css } from 'styled-components'
@@ -11,10 +11,26 @@ import { Link } from '../Link'
 import { Icon } from '../Icon'
 import { Badge } from '../Badge'
 
-import { SubItens } from './SubItens'
+import { SubItems } from './SubItems'
+
+type SubItemProps = {
+  name: string
+  href: string
+  badge?: number
+}
+
+type ItemObjectProps = {
+  icon: ReactDOM
+  name: string
+  href: string
+  exact?: boolean
+  items: Array<SubItemProps>
+  callback: any
+  type?: 'internal' | 'external'
+}
 
 interface ItemProps {
-  item: any
+  item: ItemObjectProps
   openItem: boolean
   onClickItem?: any
   sidebarOpened: boolean
@@ -85,8 +101,8 @@ export const Item: React.FC<ItemProps> = ({
   function computeBadgeAllItens(item) {
     let value = 0
 
-    if (item.itens) {
-      item.itens.forEach(subItem => {
+    if (item.items) {
+      item.items.forEach(subItem => {
         if (subItem.badge) value += subItem.badge
       })
     }
@@ -113,8 +129,8 @@ export const Item: React.FC<ItemProps> = ({
       active = location.pathname.includes(item.href)
       if (item.exact) active = location.pathname === item.href
     }
-    item.itens &&
-      item.itens.forEach(subItem => {
+    item.items &&
+      item.items.forEach(subItem => {
         if (!active) {
           active = location.pathname.includes(subItem.href)
           if (item.exact) active = location.pathname === subItem.href
@@ -124,7 +140,7 @@ export const Item: React.FC<ItemProps> = ({
   }
 
   const ItemWrapper = ({ children }) => {
-    if (item.itens && item.itens.length > 0) {
+    if (item.items && item.items.length > 0) {
       return (
         <Flex
           flexDirection='row'
@@ -202,7 +218,7 @@ export const Item: React.FC<ItemProps> = ({
               />
             )}
 
-            {item.itens && (
+            {item.items && (
               <Icon color='primary'>
                 {openItem ? (
                   <MdExpandLess size={18} />
@@ -215,7 +231,7 @@ export const Item: React.FC<ItemProps> = ({
         )}
       </ItemWrapper>
 
-      <SubItens
+      <SubItems
         item={item}
         onClickItem={onClickItem}
         heightScrolledToTop={heightScrolledToTop}

diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
@@ -86,7 +86,7 @@ const sidebarData = [
   {
     icon: <MdStorage size={18} />,
     name: 'store',
-    itens: [
+    items: [
       {
         name: 'Sub Item',
         href: '/subItem'
@@ -105,7 +105,7 @@ const sidebarData = [
   {
     icon: <MdStorage size={18} />,
     name: 'itens',
-    itens: [
+    items: [
       {
         name: 'Sub Item',
         href: '/subItem'

diff --git a/src/components/Sidebar/SubItens.tsx → src/components/Sidebar/SubItems.tsx b/src/components/Sidebar/SubItens.tsx → src/components/Sidebar/SubItems.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
+
 import styled, { css } from 'styled-components'
 
 import { Text } from '../Text'
@@ -33,7 +33,7 @@ const LinkStyled = styled(Link)`
   }
 `
 
-const SubItensStyled = styled(Flex)<Props>`
+const SubItemsStyled = styled(Flex)<Props>`
   ul {
     margin: 0;
     padding: 0;
@@ -159,7 +159,7 @@ const SubItensStyled = styled(Flex)<Props>`
     `
   }}
 `
-export const SubItens: React.FC<Props> = ({
+export const SubItems: React.FC<Props> = ({
   item,
   sidebarOpened,
   itemOpened,
@@ -190,7 +190,7 @@ export const SubItens: React.FC<Props> = ({
   }, [ref, itemOpened])
 
   return (
-    <SubItensStyled
+    <SubItemsStyled
       distanceTop={distanceTop}
       typeSubmenu={typeSubmenu}
       ref={el => setRef(el || null)}
@@ -202,7 +202,7 @@ export const SubItens: React.FC<Props> = ({
       itemOpened={itemOpened}
     >
       {!sidebarOpened &&
-        (item.itens ? (
+        (item.items ? (
           <Text
             mx={6}
             mt={6}
@@ -224,9 +224,9 @@ export const SubItens: React.FC<Props> = ({
             {item.name}
           </LinkStyled>
         ))}
-      {item.itens && (
+      {item.items && (
         <ul>
-          {item.itens.map((subItem, index) => (
+          {item.items.map((subItem, index) => (
             <li key={index} {...subItem}>
               <Link
                 variant={subItem.type ? subItem.type : 'internal'}
@@ -251,14 +251,6 @@ export const SubItens: React.FC<Props> = ({
           ))}
         </ul>
       )}
-    </SubItensStyled>
+    </SubItemsStyled>
   )
 }
-
-SubItens.propTypes = {
-  item: PropTypes.any,
-  itemOpened: PropTypes.bool,
-  onClickItem: PropTypes.func,
-  sidebarOpened: PropTypes.bool,
-  heightScrolledToTop: PropTypes.number
-}