feat: taro适配 sidenavbar 组件 (#558)

src/config.json

@@ -335,6 +335,7 @@
           "desc": "用于内容选择和切换",
           "sort": 9,
           "show": true,
+          "taro": true,
           "author": "hx"
         },
         {

src/packages/sidenavbar/demo.taro.tsx

+import React, { useState } from 'react'
+import {
+  Cell,
+  SubSideNavBar,
+  SideNavBarItem,
+  SideNavBar,
+} from '@/packages/nutui.react.taro'
+import { useTranslate } from '@/sites/assets/locale/taro'
+
+type Position = 'left' | 'right'
+type NavBarState = {
+  visible: boolean
+  position: Position
+}
+type TSideNavBarDemo = {
+  text1: string
+  text2: string
+  level1: string
+  level2: string
+  level3: string
+  title: string
+  title1: string
+  title2: string
+  title3: string
+  title4: string
+  content: string
+}
+const SideNavBarDemo = () => {
+  const [translated] = useTranslate<TSideNavBarDemo>({
+    'zh-CN': {
+      text1: '基础用法',
+      text2: '导航嵌套（建议最多三层）',
+      level1: '一级',
+      level2: '二级',
+      level3: '三级',
+      title: '标题',
+      title1: '左侧弹出',
+      title2: '右侧弹出',
+      title3: '显示',
+      title4: '首页',
+      content: '内容',
+    },
+    'zh-TW': {
+      text1: '基礎用法',
+      text2: '導航嵌套（建議最多三層）',
+      level1: '一級',
+      level2: '二級',
+      level3: '三級',
+      title: '標題',
+      title1: '左側彈出',
+      title2: '右側彈出',
+      title3: '顯示',
+      title4: '首頁',
+      content: '內容',
+    },
+    'en-US': {
+      text1: 'Basic Usage',
+      text2: 'Navigation nesting (recommended up to three levels)',
+      level1: 'Level One',
+      level2: 'Level Two',
+      level3: 'Level Three',
+      title: 'title',
+      title1: 'left pop up',
+      title2: 'right pop up',
+      title3: 'show',
+      title4: 'front page',
+      content: 'content',
+    },
+    'id-ID': {
+      text1: 'Penggunaan dasar',
+      text2: 'Sarang navigasi (disarankan hingga tiga tingkat)',
+      level1: 'tingkat satu',
+      level2: 'Sekunder',
+      level3: 'Tingkat tiga',
+      title: 'judul',
+      title1: 'munculan kiri',
+      title2: 'sisi kanan muncul',
+      title3: 'menunjukkan',
+      title4: 'halaman Depan',
+      content: 'isi',
+    },
+  })
+  const {
+    text1,
+    text2,
+    level1,
+    level2,
+    level3,
+    title,
+    title1,
+    title2,
+    title3,
+    title4,
+    content,
+  } = translated
+  const [navBarState, setNavBarState] = useState<NavBarState>({
+    visible: false,
+    position: 'left',
+  })
+  const [showThird, setShowThird] = useState(false)
+  const changeNarBar = (
+    visible: boolean,
+    position: Position = navBarState.position
+  ) => {
+    setNavBarState({
+      visible,
+      position,
+    })
+    setShowThird(false)
+  }
+
+  return (
+    <>
+      <div className="demo">
+        <h2>{text1}</h2>
+        <Cell
+          title={title1}
+          isLink
+          onClick={() => {
+            changeNarBar(true, 'left')
+          }}
+        />
+        <Cell
+          title={title2}
+          isLink
+          onClick={() => {
+            changeNarBar(true, 'right')
+          }}
+        />
+        <h2>{text2}</h2>
+        <Cell
+          title={title3}
+          isLink
+          onClick={() => {
+            changeNarBar(true, 'right')
+            setShowThird(true)
+          }}
+        />
+        <SideNavBar
+          title={title4}
+          visible={navBarState.visible}
+          position={navBarState.position}
+          onClose={() => {
+            changeNarBar(false)
+          }}
+        >
+          <SubSideNavBar title={`${level1}${title}`} ikey="1-0">
+            <SideNavBarItem title={`${level1}${content}1`} ikey="1-01" />
+            <SideNavBarItem title={`${level1}${content}2`} ikey="1-02" />
+            <SubSideNavBar title={`${level2}${title}`} ikey="2-0">
+              <SideNavBarItem title={`${level2}${content}1`} ikey="2-01" />
+              <SideNavBarItem title={`${level2}${content}2`} ikey="2-02" />
+              {showThird ? (
+                <SubSideNavBar title={`${level3}${title}`} ikey="3-0">
+                  <SideNavBarItem title={`${level3}${content}1`} ikey="3-01" />
+                  <SideNavBarItem title={`${level3}${content}2`} ikey="3-02" />
+                </SubSideNavBar>
+              ) : null}
+            </SubSideNavBar>
+          </SubSideNavBar>
+          <SubSideNavBar open={false} title={`${level1}${title}-2`} ikey="1-1">
+            <SideNavBarItem title={`${level1}${content}2-1`} ikey="1-11" />
+            <SideNavBarItem title={`${level1}${content}2-2`} ikey="1-12" />
+          </SubSideNavBar>
+        </SideNavBar>
+      </div>
+    </>
+  )
+}
+
+export default SideNavBarDemo

src/packages/sidenavbar/sidenavbar.taro.tsx

-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useState } from 'react'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import Popup from '@/packages/popup/index.taro'
-import { handleClick } from './utils'
 import { OffsetContext } from './offsetContext'
 
 type NavBarProps = {
@@ -40,7 +39,10 @@ export const SideNavBar: FunctionComponent<SideNavBarProps> = (props) => {
     ...props,
   }
   const offset = props.offset ? Number(props.offset) : 20
-
+  const [sidenavbarShow, setSidenavbarShow] = useState(true)
+  const handleClick = () => {
+    setSidenavbarShow(!sidenavbarShow)
+  }
   return (
     <Popup
       visible={visible}
@@ -53,14 +55,22 @@ export const SideNavBar: FunctionComponent<SideNavBarProps> = (props) => {
         {...rest}
       >
         <div className="nut-sidenavbar__content">
-          {/* {showhead ? <div className="nut-sidenavbar__head">📈</div> : null} */}
-
-          <div className="nut-sidenavbar__list nutShow" onClick={handleClick}>
+          <div
+            className={`nut-sidenavbar__list ${
+              sidenavbarShow ? 'nutShow' : 'nutHide'
+            }`}
+            onClick={handleClick}
+          >
             <div
               className="nut-sidenavbar__title border-bt "
               style={{ paddingLeft: `${offset}px` }}
             >
-              {title} <i className="arrow-icon arrow-down" />
+              {title}
+              <i
+                className={`arrow-icon ${
+                  sidenavbarShow ? 'arrow-up' : 'arrow-down'
+                }`}
+              />
             </div>
             <OffsetContext.Provider value={offset}>
               <div className="nut-sidenavbar__content">{children}</div>

src/packages/subsidenavbar/subsidenavbar.taro.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   MouseEventHandler,
   useContext,
+  useState,
 } from 'react'
 // import { SubSideNavBarProps } from '../sidenavbar/type'
 import { handleClick } from '../sidenavbar/utils'
@@ -33,15 +34,14 @@ export const SubSideNavBar: FunctionComponent<SubSideNavBarProps> = (props) => {
     ...defaultProps,
     ...props,
   }
-  // const offset = props.offset ? Number(props.offset) : 20
+  const [subShow, setSubShow] = useState(open)
   const offset = useContext(OffsetContext)
-  console.log('offset>>>>>>>', offset)
   const listRef = useRef<HTMLDivElement>(null)
+
   const setListLevel = useCallback(
     (nodeList: HTMLCollection, level = 1) => {
       const titleClass = nodeList[0].className
       if (titleClass.includes('nut-subsidenavbar__title')) {
-        // const left = 15 + offset * level
         const left = offset * (level + 1)
         // eslint-disable-next-line no-param-reassign
         ;(nodeList[0] as HTMLElement).style.paddingLeft = `${left}px`
@@ -54,9 +54,7 @@ export const SubSideNavBar: FunctionComponent<SubSideNavBarProps> = (props) => {
         )
       childNodes.forEach((item) => {
         const itemClass = item.className
-
         if (itemClass.includes('nut-subsidenavbar__item')) {
-          // const left = 15 + offset * (level + 1)
           const left = offset * (level + 2)
           // eslint-disable-next-line no-param-reassign
           ;(item as HTMLElement).style.paddingLeft = `${left}px`
@@ -74,9 +72,9 @@ export const SubSideNavBar: FunctionComponent<SubSideNavBarProps> = (props) => {
     [offset]
   )
   const clickFn: MouseEventHandler<HTMLDivElement> = (e) => {
-    handleClick(e)
-    const currentClass = e.currentTarget.className
-    const isShow = currentClass.includes('nutShow')
+    e.stopPropagation()
+    setSubShow(!subShow)
+    const isShow = !subShow
     onClick && onClick({ title, ikey, isShow })
   }
   useEffect(() => {
@@ -84,10 +82,10 @@ export const SubSideNavBar: FunctionComponent<SubSideNavBarProps> = (props) => {
     listRef.current?.setAttribute('level', '1')
     childNodes && setListLevel(childNodes)
   }, [setListLevel])
-  const divClass = open
+  const divClass = subShow
     ? 'nut-subsidenavbar__list  nutShow'
     : 'nut-subsidenavbar__list  nutHide'
-  const iconClass = open ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up'
+  const iconClass = subShow ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up'
 
   return (
     <div className={divClass} ref={listRef} onClick={clickFn} {...rest}>

src/sites/mobile-taro/src/app.config.ts

@@ -23,6 +23,7 @@ const subPackages = [
       'pages/tabbar/index',
       'pages/elevator/index',
       'pages/pagination/index',
+      'pages/sidenavbar/index',
       'pages/tabs/index',
       'pages/indicator/index',
       'pages/menu/index',