From 52fef7f924b662f936945b6d40f721df3bb974fb Mon Sep 17 00:00:00 2001 From: libin0824 <108334445+libin0824@users.noreply.github.com> Date: Tue, 3 Jan 2023 08:49:21 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20taro=E9=80=82=E9=85=8D=20sidenavbar=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20(#558)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/config.json | 1 + src/packages/sidenavbar/demo.taro.tsx | 171 ++++++++++++++++++ src/packages/sidenavbar/sidenavbar.taro.tsx | 24 ++- .../subsidenavbar/subsidenavbar.taro.tsx | 18 +- src/sites/mobile-taro/src/app.config.ts | 1 + 5 files changed, 198 insertions(+), 17 deletions(-) create mode 100644 src/packages/sidenavbar/demo.taro.tsx diff --git a/src/config.json b/src/config.json index 90dfb65..a75fe0e 100644 --- a/src/config.json +++ b/src/config.json @@ -335,6 +335,7 @@ "desc": "用于内容选择和切换", "sort": 9, "show": true, + "taro": true, "author": "hx" }, { diff --git a/src/packages/sidenavbar/demo.taro.tsx b/src/packages/sidenavbar/demo.taro.tsx new file mode 100644 index 0000000..4294259 --- /dev/null +++ b/src/packages/sidenavbar/demo.taro.tsx @@ -0,0 +1,171 @@ +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({ + '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({ + visible: false, + position: 'left', + }) + const [showThird, setShowThird] = useState(false) + const changeNarBar = ( + visible: boolean, + position: Position = navBarState.position + ) => { + setNavBarState({ + visible, + position, + }) + setShowThird(false) + } + + return ( + <> +
+

{text1}

+ { + changeNarBar(true, 'left') + }} + /> + { + changeNarBar(true, 'right') + }} + /> +

{text2}

+ { + changeNarBar(true, 'right') + setShowThird(true) + }} + /> + { + changeNarBar(false) + }} + > + + + + + + + {showThird ? ( + + + + + ) : null} + + + + + + + +
+ + ) +} + +export default SideNavBarDemo diff --git a/src/packages/sidenavbar/sidenavbar.taro.tsx b/src/packages/sidenavbar/sidenavbar.taro.tsx index de75e73..381818b 100644 --- a/src/packages/sidenavbar/sidenavbar.taro.tsx +++ b/src/packages/sidenavbar/sidenavbar.taro.tsx @@ -1,7 +1,6 @@ -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 = (props) => { ...props, } const offset = props.offset ? Number(props.offset) : 20 - + const [sidenavbarShow, setSidenavbarShow] = useState(true) + const handleClick = () => { + setSidenavbarShow(!sidenavbarShow) + } return ( = (props) => { {...rest} >
- {/* {showhead ?
📈
: null} */} - -
+
- {title} + {title} +
{children}
diff --git a/src/packages/subsidenavbar/subsidenavbar.taro.tsx b/src/packages/subsidenavbar/subsidenavbar.taro.tsx index 834067b..b25d75f 100644 --- a/src/packages/subsidenavbar/subsidenavbar.taro.tsx +++ b/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 = (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(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 = (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 = (props) => { [offset] ) const clickFn: MouseEventHandler = (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 = (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 (
diff --git a/src/sites/mobile-taro/src/app.config.ts b/src/sites/mobile-taro/src/app.config.ts index 1092202..cc7328f 100644 --- a/src/sites/mobile-taro/src/app.config.ts +++ b/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', -- GitLab