From a2f1c87fa713786933550421b1fe7126f8b367ec Mon Sep 17 00:00:00 2001 From: Lyan-u <46185702+Lyan-u@users.noreply.github.com> Date: Sat, 11 May 2024 10:23:39 +0800 Subject: [PATCH] refactor(navbar): sfc to tsx (#1377) * refactor(navbar): sfc to tsx * refactor(navbar): remove unused variables * refactor(navbar): remove unused variables * refactor(navbar): animation use computed * refactor(navbar): navStyle use computed --- .../__test__/__snapshots__/demo.test.jsx.snap | 92 +++++++++--------- .../__snapshots__/index.test.jsx.snap | 10 +- src/navbar/__test__/index.test.jsx | 6 +- src/navbar/index.ts | 2 +- src/navbar/navbar.tsx | 96 +++++++++++++++++++ src/navbar/navbar.vue | 95 ------------------ 6 files changed, 151 insertions(+), 150 deletions(-) create mode 100644 src/navbar/navbar.tsx delete mode 100644 src/navbar/navbar.vue diff --git a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap index a4bfc0e5f..7e2252543 100644 --- a/src/navbar/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/navbar/__test__/__snapshots__/demo.test.jsx.snap @@ -10,7 +10,7 @@ exports[`Navbar > Navbar baseVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
@@ -30,7 +30,7 @@ exports[`Navbar > Navbar baseVue demo works fine 1`] = ` /> - +
Navbar baseVue demo works fine 1`] = ` 标题文字
- +
Navbar baseVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
@@ -79,7 +79,7 @@ exports[`Navbar > Navbar baseVue demo works fine 1`] = ` /> - +
Navbar baseVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
- +
Navbar customColorVue demo works fine 1`] = ` data-v-b4f331c8="" style="position: relative;" > - +
@@ -218,7 +218,7 @@ exports[`Navbar > Navbar customColorVue demo works fine 1`] = ` /> - +
Navbar imgVue demo works fine 1`] = ` data-v-0848b63e="" style="position: relative;" > - +
- + - +
Navbar leftTitleVue demo works fine 1`] = ` data-v-63d9f832="" style="position: relative;" > - +
@@ -373,7 +373,7 @@ exports[`Navbar > Navbar leftTitleVue demo works fine 1`] = ` /> - +
Navbar leftTitleVue demo works fine 1`] = ` data-v-63d9f832="" style="position: relative;" > - +
@@ -433,7 +433,7 @@ exports[`Navbar > Navbar leftTitleVue demo works fine 1`] = ` 标题左对齐 - +
Navbar mobileVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
@@ -535,7 +535,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar mobileVue demo works fine 1`] = ` 标题文字
- +
Navbar mobileVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
@@ -584,7 +584,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar mobileVue demo works fine 1`] = ` data-v-7388e034="" style="position: relative;" > - +
- +
Navbar mobileVue demo works fine 1`] = ` data-v-6af0dffd="" style="position: relative;" > - +
- +
Navbar mobileVue demo works fine 1`] = `
- +
Navbar mobileVue demo works fine 1`] = ` data-v-16defdf7="" style="position: relative;" > - +
- + - +
Navbar mobileVue demo works fine 1`] = ` data-v-63d9f832="" style="position: relative;" > - +
@@ -958,7 +958,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar mobileVue demo works fine 1`] = ` data-v-63d9f832="" style="position: relative;" > - +
@@ -1018,7 +1018,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` 标题左对齐 - +
Navbar mobileVue demo works fine 1`] = ` data-v-5f535116="" style="position: relative;" > - +
@@ -1099,7 +1099,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar mobileVue demo works fine 1`] = ` data-v-5f535116="" style="position: relative;" > - +
@@ -1152,7 +1152,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar mobileVue demo works fine 1`] = ` data-v-b4f331c8="" style="position: relative;" > - +
@@ -1239,7 +1239,7 @@ exports[`Navbar > Navbar mobileVue demo works fine 1`] = ` /> - +
Navbar searchVue demo works fine 1`] = ` data-v-6af0dffd="" style="position: relative;" > - +
- +
Navbar searchVue demo works fine 1`] = `
- +
Navbar sizeVue demo works fine 1`] = ` data-v-5f535116="" style="position: relative;" > - +
@@ -1383,7 +1383,7 @@ exports[`Navbar > Navbar sizeVue demo works fine 1`] = ` /> - +
Navbar sizeVue demo works fine 1`] = ` data-v-5f535116="" style="position: relative;" > - +
@@ -1436,7 +1436,7 @@ exports[`Navbar > Navbar sizeVue demo works fine 1`] = ` /> - +
events > left-click 1`] = `
- + events > left-click 1`] = ` /> - +
events > left-click 1`] = ` 标题
- +
`; @@ -59,9 +59,9 @@ exports[`navbar > events > right-click 1`] = `
- - + +
h(TIconApp); @@ -9,10 +9,10 @@ describe('navbar', () => { describe('props', () => { it('fixed', async () => { const navbar = mount(); - expect(navbar.vm.navStyle).toContain('position: fixed'); + expect(navbar.element.style.position).toBe('fixed') await navbar.setProps({ fixed: false }); - expect(navbar.vm.navStyle).toContain('position: relative'); + expect(navbar.element.style.position).toBe('relative') }); it('leftArrow', () => { diff --git a/src/navbar/index.ts b/src/navbar/index.ts index 023dc382b..38f536113 100644 --- a/src/navbar/index.ts +++ b/src/navbar/index.ts @@ -1,4 +1,4 @@ -import Navbar from './navbar.vue'; +import Navbar from './navbar'; import { withInstall, WithInstallType } from '../shared'; import './style'; diff --git a/src/navbar/navbar.tsx b/src/navbar/navbar.tsx new file mode 100644 index 000000000..c34493bb2 --- /dev/null +++ b/src/navbar/navbar.tsx @@ -0,0 +1,96 @@ +import { defineComponent, computed } from 'vue'; +import { ChevronLeftIcon as TChevronLeftIcon } from 'tdesign-icons-vue-next'; +import config from '../config'; +import props from './props'; +import { usePrefixClass } from '@/hooks/useClass'; +import { useTNodeJSX } from '@/hooks/tnode'; + +const { prefix } = config; +const name = `${prefix}-navbar`; + +export default defineComponent({ + name, + components: { TChevronLeftIcon }, + props, + emits: ['left-click', 'right-click'], + setup(props, { slots }) { + const navbarClass = usePrefixClass('navbar'); + const renderTNodeJSX = useTNodeJSX(); + + const animationSuffix = computed(() => (props.animation ? '-animation' : '')); + const navClass = computed(() => [ + navbarClass.value, + { + [`${navbarClass.value}--fixed`]: props.fixed, + }, + props.visible + ? `${navbarClass.value}--visible${animationSuffix.value}` + : `${navbarClass.value}--hide${animationSuffix.value}`, + ]); + + const navStyle = computed(() => `position: ${props.fixed ? 'fixed' : 'relative'};`); + + const handleLeftClick = () => { + props.onLeftClick?.(); + }; + + const handleRightClick = () => { + props.onRightClick?.(); + }; + + return () => { + const { fixed, titleMaxLength, title, leftArrow } = props; + + const renderRightContent = () => { + const rightContent = renderTNodeJSX('right'); + if (!rightContent) { + return null; + } + return ( +
+ {rightContent} +
+ ); + }; + + const renderCapsuleContent = () => { + const capsuleContent = renderTNodeJSX('capsule'); + if (!capsuleContent) { + return null; + } + return
{capsuleContent}
; + }; + + const renderTitleContent = () => { + const isStringTitle = typeof title === 'string' && !slots.title; + let titleContent = renderTNodeJSX('title'); + if (!titleContent) { + return null; + } + if (titleMaxLength != null && title) { + if (titleMaxLength <= 0) { + console.warn('titleMaxLength must be greater than 0'); + } else { + titleContent = title.length <= titleMaxLength ? title : `${(title as string).slice(0, titleMaxLength)}...`; + } + } + + return isStringTitle ? {titleContent} : titleContent; + }; + return ( +
+ {fixed &&
} +
+
+ {leftArrow && } + {renderTNodeJSX('left')} + {renderCapsuleContent()} +
+
{renderTitleContent()}
+ {renderRightContent()} +
+
+ ); + }; + }, +}); diff --git a/src/navbar/navbar.vue b/src/navbar/navbar.vue deleted file mode 100644 index 171703dec..000000000 --- a/src/navbar/navbar.vue +++ /dev/null @@ -1,95 +0,0 @@ - - -