refactor(cool-guide): terms adjust && ts convert

src/components/NaviCatalog/Dashboard.js → src/components/NaviCatalog/Dashboard.tsx

@@ -11,6 +11,8 @@ import { last } from 'ramda'
 import { ICON } from '@/config'
 import { buildLog } from '@/utils'
 
+import type { TMenuItem } from './spec'
+
 // import { SpaceGrow } from '@/components/Common'
 import {
   Wrapper,
@@ -45,11 +47,16 @@ const getLevels = (paths) => {
   }
 }
 
+type TProps = {
+  viewPath: TMenuItem[]
+  goCatalog: (id?: string) => void
+}
+
 /**
  * 显示成成层叠结构的样式，有子目录的可以回上一层，没有子目录的则作为只读显示，
  * 类似抽屉的样子
  */
-const Dashboard = ({ viewPath, goCatalog }) => {
+const Dashboard: React.FC<TProps> = ({ viewPath, goCatalog }) => {
   const [headLevels, lastLevel] = getLevels(viewPath)
   /* 判断是不是第二层 */
   const is2ecLevel = viewPath.length === 1

src/components/NaviCatalog/Header.js → src/components/NaviCatalog/Header.tsx

@@ -5,6 +5,8 @@ import { nilOrEmpty } from '@/utils'
 
 import Tooltip from '@/components/Tooltip'
 
+import type { TMenuItem } from './spec'
+
 import {
   Wrapper,
   Title,
@@ -16,7 +18,19 @@ import {
   HelpHint,
 } from './styles/header'
 
-const Header = ({
+type TProps = {
+  title: string
+  activeCatalogId: string
+  viewPath: TMenuItem[]
+  testid?: string
+
+  goHome: () => void
+  onReset: () => void
+  onLocate: () => void
+}
+
+const Header: React.FC<TProps> = ({
+  testid = 'navi-catalog-header',
   title,
   activeCatalogId,
   goHome,
@@ -29,7 +43,7 @@ const Header = ({
   const showLocate = activeCatalogId !== ''
 
   return (
-    <Wrapper>
+    <Wrapper testid={testid}>
       {title ? <Title active={showReset}>{title}</Title> : <div />}
 
       <OperatorsWrapper>
@@ -38,6 +52,7 @@ const Header = ({
             content={<HelpHint>返回主目录</HelpHint>}
             placement="bottom"
             delay={1000}
+            noPadding
           >
             <HomeIcon src={`${ICON}/shape/home.svg`} />
           </Tooltip>
@@ -48,6 +63,7 @@ const Header = ({
             content={<HelpHint>定位当前选中</HelpHint>}
             placement="bottom"
             delay={1000}
+            noPadding
           >
             <LocateIcon src={`${ICON}/shape/locate-solid.svg`} />
           </Tooltip>
@@ -58,6 +74,7 @@ const Header = ({
             content={<HelpHint>重置筛选条件</HelpHint>}
             placement="bottom"
             delay={1000}
+            noPadding
           >
             <ResetIcon src={`${ICON}/shape/reset.svg`} />
           </Tooltip>

src/components/NaviCatalog/List/index.js → src/components/NaviCatalog/List/index.tsx

@@ -5,12 +5,12 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 import { map, prop, includes } from 'ramda'
 
 import { buildLog } from '@/utils'
 import { SpaceGrow, Space } from '@/components/Common'
 
+import type { TMenuItem } from '../spec'
 import { ROOT_MENU, CHILD_MENU } from '../constant'
 
 import {
@@ -42,7 +42,22 @@ const renderRightIcon = (item, active, showItemTotal) => {
   )
 }
 
-const List = ({
+type TProps = {
+  menuMode: 'root' | 'child'
+  catalogItems: TMenuItem[]
+  activeCatalogId: string
+  activePath: TMenuItem[]
+  withDivider: boolean
+  showMoreItem: boolean
+  showItemTotal: boolean
+
+  testid?: string
+
+  onSelect: (id: string, type: string) => void
+  onShowMore: () => void
+}
+
+const List: React.FC<TProps> = ({
   menuMode,
   catalogItems,
   onSelect,
@@ -52,11 +67,12 @@ const List = ({
   showMoreItem,
   showItemTotal,
   onShowMore,
+  testid = 'navi-catalog-list',
 }) => {
   const activePathIdList = [...map(prop('id'), activePath), activeCatalogId]
 
   return (
-    <Wrapper isRootMenu={menuMode === ROOT_MENU}>
+    <Wrapper isRootMenu={menuMode === ROOT_MENU} testid={testid}>
       {catalogItems.map((item) => {
         const active = includes(item.id, activePathIdList)
 
@@ -66,7 +82,7 @@ const List = ({
             isRootMenu={menuMode === ROOT_MENU}
             active={active}
             withDivider={withDivider}
-            onClick={() => onSelect(item)}
+            onClick={() => onSelect(item.id, item.displayType)}
           >
             {item.fixedIcon && <FixedIcon src={item.fixedIcon} />}
             {item.title}
@@ -88,21 +104,4 @@ const List = ({
   )
 }
 
-List.propTypes = {
-  menuMode: T.oneOf([ROOT_MENU, CHILD_MENU]).isRequired,
-  // TODO:
-  catalogItems: T.arrayOf(T.object).isRequired,
-  activePath: T.arrayOf(T.object).isRequired,
-  onSelect: T.func.isRequired,
-  activeCatalogId: T.string.isRequired,
-  withDivider: T.bool.isRequired,
-  showMoreItem: T.bool.isRequired,
-  showItemTotal: T.bool.isRequired,
-  onShowMore: T.oneOfType([T.func, T.instanceOf(null)]),
-}
-
-List.defaultProps = {
-  onShowMore: null,
-}
-
 export default React.memo(List)

src/components/NaviCatalog/PinNumber.js → src/components/NaviCatalog/PinNumber.tsx

@@ -8,7 +8,12 @@ import { Wrapper, Num, PinIcon, TooltipPopContent } from './styles/pin_number'
 
 // TODO:  onPin / undoPin
 
-const PinNumber = ({ num, pinNumberHoverType }) => {
+type TProps = {
+  num: number
+  pinNumberHoverType: 'pin' | 'unpin'
+}
+
+const PinNumber: React.FC<TProps> = ({ num, pinNumberHoverType }) => {
   return (
     <Wrapper>
       <Num>{num}</Num>
@@ -19,7 +24,7 @@ const PinNumber = ({ num, pinNumberHoverType }) => {
             placement="right"
             delay={1000}
             showArrow={false}
-            noDefaultPadding
+            noPadding
           >
             <PinIcon src={`${ICON_CMD}/navi/pin.svg`} />
           </Tooltip>
@@ -29,7 +34,7 @@ const PinNumber = ({ num, pinNumberHoverType }) => {
             placement="right"
             delay={1000}
             showArrow={false}
-            noDefaultPadding
+            noPadding
           >
             <PinIcon src={`${ICON_CMD}/navi/unpin.svg`} />
           </Tooltip>
@@ -39,13 +44,4 @@ const PinNumber = ({ num, pinNumberHoverType }) => {
   )
 }
 
-PinNumber.propTypes = {
-  num: T.number.isRequired,
-  pinNumberHoverType: T.oneOf(['pin', 'unpin']).isRequired,
-  // onPin: T.func.isRequired,
-  // undoPin: T.func.isRequired,
-}
-
-PinNumber.defaultProps = {}
-
 export default React.memo(PinNumber)

src/components/NaviCatalog/helper.js → src/components/NaviCatalog/helper.ts

@@ -3,11 +3,16 @@ import { map, find, propEq, last } from 'ramda'
 import { URL_QUERY } from '@/constant'
 import { nilOrEmpty } from '@/utils'
 
+import type { TMenuItem } from './spec'
+
 // 根据 path 路径得到当前目录项
-export const getCurrentMenuItem = (path, items) => {
+export const getCurrentMenuItem = (
+  path: TMenuItem[],
+  items: TMenuItem[],
+): TMenuItem => {
   if (nilOrEmpty(path) || nilOrEmpty(items)) return
 
-  const item = find(propEq('id', path[0].id), items)
+  const item = find(propEq('id', path[0].id), items) as TMenuItem
   if (item.id === last(path).id) return item
 
   return getCurrentMenuItem(path.slice(1), item?.childMenu)
@@ -20,7 +25,10 @@ export const getCurrentMenuItem = (path, items) => {
  * @param {string} pathString
  * @returns {array of catalog}
  */
-export const findPath = (items, pathString = 'aa-bb-cc') => {
+export const findPath = (
+  items: TMenuItem[],
+  pathString = 'aa-bb-cc',
+): TMenuItem[] => {
   // pathList => parentId-childId-subChildId-xxx
   const idPaths = pathString.split('-')
 
@@ -30,7 +38,7 @@ export const findPath = (items, pathString = 'aa-bb-cc') => {
     const pathId = idPaths[index]
 
     const catalog = previousCatalog
-    const item = find(propEq('id', pathId), catalog)
+    const item = find(propEq('id', pathId), catalog) as TMenuItem
     if (!item) return path
 
     if (item.childMenu) {
@@ -42,7 +50,9 @@ export const findPath = (items, pathString = 'aa-bb-cc') => {
   return path
 }
 
-export const covertPathToURLQuery = (path) => {
+export const covertPathToURLQuery = (
+  path: TMenuItem[],
+): Record<string, unknown> => {
   const idPathString = map((catalog) => catalog.id, path).join('-')
   if (nilOrEmpty(idPathString)) return { [URL_QUERY.NAVI_CATALOG_PATH]: '' }
 

src/components/NaviCatalog/index.js → src/components/NaviCatalog/index.tsx

@@ -5,7 +5,6 @@
  */
 
 import React, { useState, useCallback, useEffect } from 'react'
-import T from 'prop-types'
 import { find, findIndex, propEq, last } from 'ramda'
 
 import { URL_QUERY } from '@/constant'
@@ -17,31 +16,45 @@ import {
   findDeepMatch,
 } from '@/utils'
 
+import type { TMenuItem, TMenuMode } from './spec'
 import { ROOT_MENU, CHILD_MENU } from './constant'
 import Header from './Header'
 import Dashboard from './Dashboard'
 import List from './List'
 
-import menuItemsData from './menuData'
 import { Wrapper } from './styles'
 
 import { getCurrentMenuItem, findPath, covertPathToURLQuery } from './helper'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:NaviCatalog:index')
 
-const NaviCatalog = ({
-  title,
+type TProps = {
+  title?: string
+  withDivider?: boolean
+  // initActiveMenuId?: string
+  showMoreItem?: boolean
+  // 是否显示每个目录项的条目总数
+  showItemTotal?: boolean
+  testid?: string
+  items: TMenuItem[]
+
+  onSelect: (id: string, type: string) => void
+  onShowMore?: () => void
+}
+
+const NaviCatalog: React.FC<TProps> = ({
+  testid = 'navi-menu',
+  title = '',
   items,
-  onSelect,
-  withDivider,
-  initActiveMenuId,
-  showMoreItem,
-  showItemTotal,
-  onShowMore,
-  testid,
+  onSelect = log,
+  withDivider = false,
+  // initActiveMenuId = '',
+  showMoreItem = false,
+  showItemTotal = false,
+  onShowMore = null,
 }) => {
-  const [menuMode, setMenuMode] = useState(ROOT_MENU)
+  const [menuMode, setMenuMode] = useState<TMenuMode>(ROOT_MENU)
   // 当前选中的目录 id, 不包括在其链路上的 id
   const [activeCatalogId, setActiveCatalogId] = useState('')
   // 当前展示的 path list, 可能是选中的，也可能是仅浏览，未必选中
@@ -178,7 +191,6 @@ const NaviCatalog = ({
         withDivider={withDivider}
         activeCatalogId={activeCatalogId}
         activePath={activePath}
-        initActiveMenuId={initActiveMenuId}
         showMoreItem={showMoreItem}
         showItemTotal={showItemTotal}
         onShowMore={onShowMore}
@@ -187,53 +199,4 @@ const NaviCatalog = ({
   )
 }
 
-NaviCatalog.propTypes = {
-  title: T.string,
-  onSelect: T.func,
-  withDivider: T.bool,
-  initActiveMenuId: T.string,
-  items: T.arrayOf(
-    T.shape({
-      id: T.string,
-      title: T.string,
-      icon: T.string,
-      displayType: T.string,
-      fixedIcon: T.oneOfType([T.string, T.node]),
-      pinNumber: T.number,
-      childMenu: T.arrayOf(
-        T.shape({
-          id: T.string,
-          title: T.string,
-          icon: T.string,
-          displayType: T.string,
-          childMenu: T.arrayOf(
-            T.shape({
-              id: T.string,
-              title: T.string,
-              displayType: T.string,
-            }),
-          ),
-        }),
-      ),
-    }),
-  ),
-  showMoreItem: T.bool,
-  // 是否显示每个目录项的条目总数
-  showItemTotal: T.bool,
-  onShowMore: T.oneOfType([T.func, T.instanceOf(null)]),
-  testid: T.string,
-}
-
-NaviCatalog.defaultProps = {
-  items: menuItemsData,
-  onSelect: log,
-  withDivider: false,
-  initActiveMenuId: '',
-  showMoreItem: false,
-  showItemTotal: false,
-  onShowMore: null,
-  testid: 'navi-menu',
-  title: '',
-}
-
 export default React.memo(NaviCatalog)