Merge pull request #47 from zhainyang/feat-add-scrollnavbar

feat: change class name

Author: QiuShuiBai

example/ReactNativeProject/package-lock.json

@@ -55,7 +55,8 @@
     "./pages/action-sheet/index",
     "./pages/tab-bar/index",
     "./pages/slider/index",
-    "./pages/swipe/index"
+    "./pages/swipe/index",
+    "/pages/scroll-nav-bar/index"
   ]
   if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
     pages = [

example/app.mpx

@@ -61,5 +61,6 @@
     "include": []
   },
   "projectname": "wx",
-  "appid": "wx3649147d1a8da494"
+  "appid": "wx05229ce33a9f9cad",
+  "simulatorPluginLibVersion": {}
 }

example/static/wx/project.config.json

@@ -30,6 +30,10 @@
     "init:dev": "pnpm install --frozen-lockfile && cd example && npm ci --legacy-peer-deps && cd ReactNativeProject && npm ci --legacy-peer-deps && npx install-expo-modules"
   },
   "devDependencies": {
+    "react": "18.3.1",
+    "react-native-reanimated": "3.16.7",
+    "react-native": "0.77.2",
+    "@mpxjs/store": "2.10.2",
     "react-native-gesture-handler": "^2.23.0",
     "@babel/runtime-corejs3": "^7.10.4",
     "@babel/core": "^7.10.4",

package.json

@@ -8,7 +8,7 @@ describe('component scroll-nav-bar unit test', function () {
   simulate.load({
     id: 'nav-item-content',
     tagName: 'nav-item-content',
-    template: '<rich-text class="nav-item-inner" nodes="{{txt}}"></rich-text>',
+    template: '<rich-text class="cube-nav-item-inner" nodes="{{txt}}"></rich-text>',
     properties: {
       txt: {
         type: String,
@@ -46,15 +46,15 @@ describe('component scroll-nav-bar unit test', function () {
       expect(instance.currentValue).toBe('小巴')
       expectCurrentViewId(instance.currentView, 1)
       expect(instance.rootClass).toBe('cube-scroll-nav-bar')
-      expect(instance.containerClass).toBe('scroll-container')
-      expect(instance.contentClass).toBe('scroll-content')
+      expect(instance.containerClass).toBe('cube-scroll-container')
+      expect(instance.contentClass).toBe('cube-scroll-content')
       expect(instance.scrollX).toBe(true)
       expect(instance.scrollY).toBe(false)
       expect(instance.enableFlex).toBe(true)
       expect(instance.navItems.map(item => item.plainText)).toEqual(BASE_LABELS)
       expect(instance.navItems[1].isActive).toBe(true)
-      expect(instance.navItems[1].activeClass).toBe('active')
-      expect(instance.navItems[1].className).toContain('active')
+      expect(instance.navItems[1].activeClass).toBe('cube-active')
+      expect(instance.navItems[1].className).toContain('cube-active')
     })
 
     it('should render vertical nav and resolve enhanced options', async () => {
@@ -71,15 +71,15 @@ describe('component scroll-nav-bar unit test', function () {
       expect(component.dom.innerHTML).toMatchSnapshot()
       expect(instance.resolvedDirection).toBe('vertical')
       expect(instance.rootClass).toBe('cube-scroll-nav-bar cube-scroll-nav-bar_vertical')
-      expect(instance.containerClass).toBe('scroll-container scroll-container_vertical')
-      expect(instance.contentClass).toBe('scroll-content scroll-content_vertical')
+      expect(instance.containerClass).toBe('cube-scroll-container cube-scroll-container_vertical')
+      expect(instance.contentClass).toBe('cube-scroll-content cube-scroll-content_vertical')
       expect(instance.scrollX).toBe(false)
       expect(instance.scrollY).toBe(true)
       expect(instance.enableFlex).toBe(false)
       expect(instance.useEnhanced).toBe(true)
       expect(instance.showScrollbar).toBe(true)
       expect(instance.bounces).toBe(true)
-      expect(instance.navItems[0].className).toContain('nav-item_vertical')
+      expect(instance.navItems[0].className).toContain('cube-nav-item_vertical')
     })
 
     it('should support legacy list api', async () => {
@@ -112,7 +112,7 @@ describe('component scroll-nav-bar unit test', function () {
       const changeFn = jest.fn()
       component.addEventListener('change', changeFn)
 
-      const navItems = component.querySelectorAll('.nav-item')
+      const navItems = component.querySelectorAll('.cube-nav-item')
       navItems[2].dispatchEvent('tap')
       await simulate.sleep(10)
 
@@ -143,7 +143,7 @@ describe('component scroll-nav-bar unit test', function () {
       const changeFn = jest.fn()
       component.addEventListener('change', changeFn)
 
-      const navItems = component.querySelectorAll('.nav-item')
+      const navItems = component.querySelectorAll('.cube-nav-item')
       navItems[1].dispatchEvent('tap')
       await simulate.sleep(10)
 

packages/mpx-cube-ui/__tests__/components/scroll-nav-bar/scroll-nav-bar.spec.js

@@ -31,7 +31,7 @@
               is-active="{{ item.isActive }}"
               active-class="{{ item.activeClass }}"
             ></nav-item-content>
-            <rich-text wx:else class="nav-item-inner" nodes="{{ item.txt }}"></rich-text>
+            <rich-text wx:else class="cube-nav-item-inner" nodes="{{ item.txt }}"></rich-text>
           </block>
           <block @_web>
             <slot
@@ -44,7 +44,7 @@
               isActive="{{ item.isActive }}"
               activeClass="{{ item.activeClass }}"
             ></slot>
-            <rich-text wx:else class="nav-item-inner" nodes="{{ item.txt }}"></rich-text>
+            <rich-text wx:else class="cube-nav-item-inner" nodes="{{ item.txt }}"></rich-text>
           </block>
         </view>
       </view>
@@ -65,7 +65,7 @@
     &_vertical
       height 100%
 
-  .scroll-container
+  .cube-scroll-container
     width 100%
     height 90rpx
     white-space nowrap
@@ -74,7 +74,7 @@
       height 100%
       white-space normal
 
-  .scroll-content
+  .cube-scroll-content
     display inline-flex
     width max-content
     align-items center
@@ -91,7 +91,7 @@
       min-height 100%
       padding 12rpx 0
 
-  .nav-item
+  .cube-nav-item
     position relative
     display inline-flex
     align-items center
@@ -106,10 +106,10 @@
     transition color 0.2s
     box-sizing border-box
 
-    &.active
+    &.cube-active
       color $color-primary
 
-    &.disabled
+    &.cube-disabled
       color #c8c9cc
 
     &_vertical
@@ -118,12 +118,12 @@
       padding 24rpx 28rpx
       justify-content center
 
-      .nav-item-inner
+      .cube-nav-item-inner
         width 100%
         justify-content center
         text-align center
 
-  .nav-item-inner
+  .cube-nav-item-inner
     display flex
     align-items center
     justify-content center

packages/mpx-cube-ui/src/components/scroll-nav-bar/index.mpx

@@ -1,5 +1,5 @@
 <template>
-  <rich-text @_web|_wx|_ali class="nav-item-inner" nodes="{{ txt }}"></rich-text>
+  <rich-text @_web|_wx|_ali class="cube-nav-item-inner" nodes="{{ txt }}"></rich-text>
 </template>
 
 <script lang="ts">

packages/mpx-cube-ui/src/components/scroll-nav-bar/nav-item-content.mpx

@@ -4,8 +4,8 @@ const ITEM_ID_PREFIX = 'cube-scroll-nav-item-'
 const DIRECTION_HORIZONTAL = 'horizontal'
 const DIRECTION_VERTICAL = 'vertical'
 const ROOT_CLASS = 'cube-scroll-nav-bar'
-const CONTAINER_CLASS = 'scroll-container'
-const CONTENT_CLASS = 'scroll-content'
+const CONTAINER_CLASS = 'cube-scroll-container'
+const CONTENT_CLASS = 'cube-scroll-content'
 
 let scrollNavBarInstanceSeed = 0
 
@@ -266,7 +266,7 @@ createComponent({
           disabled,
           isActive: false,
           activeClass: '',
-          className: 'nav-item'
+          className: 'cube-nav-item'
         }
       })
     },
@@ -331,24 +331,24 @@ createComponent({
 
       return navItems.map((item: NormalizedNavItem, index: number): NormalizedNavItem => {
         const isActive = index === activeIndex
-        const classNames = ['nav-item']
+        const classNames = ['cube-nav-item']
 
         if (isActive) {
-          classNames.push('active')
+          classNames.push('cube-active')
         }
 
         if (item.disabled) {
-          classNames.push('disabled')
+          classNames.push('cube-disabled')
         }
 
         if (isVertical) {
-          classNames.push('nav-item_vertical')
+          classNames.push('cube-nav-item_vertical')
         }
 
         return {
           ...item,
           isActive,
-          activeClass: isActive ? 'active' : '',
+          activeClass: isActive ? 'cube-active' : '',
           className: classNames.join(' ')
         }
       })