diff --git a/.eslintrc.json b/.eslintrc.json index 507957d5..bb718382 100644 --- 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 index f2ff7b01..bebd5621 100644 --- 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 + 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 = ({ 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 = ({ 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 = ({ } const ItemWrapper = ({ children }) => { - if (item.itens && item.itens.length > 0) { + if (item.items && item.items.length > 0) { return ( = ({ /> )} - {item.itens && ( + {item.items && ( {openItem ? ( @@ -215,7 +231,7 @@ export const Item: React.FC = ({ )} - , name: 'store', - itens: [ + items: [ { name: 'Sub Item', href: '/subItem' @@ -105,7 +105,7 @@ const sidebarData = [ { icon: , name: 'itens', - itens: [ + items: [ { name: 'Sub Item', href: '/subItem' diff --git a/src/components/Sidebar/SubItens.tsx b/src/components/Sidebar/SubItems.tsx similarity index 93% rename from src/components/Sidebar/SubItens.tsx rename to src/components/Sidebar/SubItems.tsx index ac18c2de..42b14373 100644 --- a/src/components/Sidebar/SubItens.tsx +++ b/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)` +const SubItemsStyled = styled(Flex)` ul { margin: 0; padding: 0; @@ -159,7 +159,7 @@ const SubItensStyled = styled(Flex)` ` }} ` -export const SubItens: React.FC = ({ +export const SubItems: React.FC = ({ item, sidebarOpened, itemOpened, @@ -190,7 +190,7 @@ export const SubItens: React.FC = ({ }, [ref, itemOpened]) return ( - setRef(el || null)} @@ -202,7 +202,7 @@ export const SubItens: React.FC = ({ itemOpened={itemOpened} > {!sidebarOpened && - (item.itens ? ( + (item.items ? ( = ({ {item.name} ))} - {item.itens && ( + {item.items && (
    - {item.itens.map((subItem, index) => ( + {item.items.map((subItem, index) => (
  • = ({ ))}
)} -
+ ) } - -SubItens.propTypes = { - item: PropTypes.any, - itemOpened: PropTypes.bool, - onClickItem: PropTypes.func, - sidebarOpened: PropTypes.bool, - heightScrolledToTop: PropTypes.number -}