feat: menu scrollFixed 属性 (#268)

* feat: menu taro 适配

* feat: menu 增加 scroll-fixed

src/config.json

@@ -335,6 +335,7 @@
           "desc": "向下弹出的菜单列表",
           "sort": 13,
           "show": true,
+          "taro": true,
           "author": "oasis-cloud"
         },
         {
@@ -346,6 +347,7 @@
           "sort": 14,
           "exportEmpty": true,
           "show": false,
+          "taro": true,
           "author": "oasis-cloud"
         }
       ]

src/packages/menu/demo.taro.tsx

 import React, { useEffect, useState } from 'react'
-import './demo.scss'
-import Button from '../button/index.taro'
-import { Menu } from './menu.taro'
-import MenuItem from '../menuitem/index.taro'
-import { useTranslate } from '../../sites/assets/locale'
+import { useTranslate } from '@/sites/assets/locale/taro'
+import { Menu, MenuItem, Button } from '@/packages/nutui.react.taro'
 
 const MenuDemo = () => {
   const style = `

src/packages/menu/doc.en-US.md

@@ -277,12 +277,13 @@ export default App
 
 ### Menu Props
 
-| 参数                             | 说明                           | 类型                    | 默认值  |
-|----------------------------------|--------------------------------|-------------------------|---------|
-| activeColor                     | Active color of title and option           | String                  | #F2270C |
+| 参数                  | 说明                           | 类型                    | 默认值  |
+|---------------------|--------------------------------|-------------------------|---------|
+| activeColor         | Active color of title and option           | String                  | #F2270C |
 | closeOnClickOverlay | Whether to close when overlay is clicked     | Boolean                 | true    |
-| lockScroll            | Whether the background is locked                   | Boolean                 | true    |
-| titleIcon               | Custome title icon                 | String                  | -       |
+| lockScroll          | Whether the background is locked                   | Boolean                 | true    |
+| scrollFixed         | Whether to fixed when window is scrolled, fixed position can be set                   | Boolean、String、Number                 | true    |
+| titleIcon           | Custome title icon                 | String                  | -       |
 
 ### MenuItem Props
 

src/packages/menu/doc.md

@@ -268,12 +268,13 @@ export default App
 
 ### Menu Props
 
-| 参数                             | 说明                           | 类型                    | 默认值  |
-|----------------------------------|--------------------------------|-------------------------|---------|
-| activeColor                     | 选项的选中态图标颜色           | String                  | #F2270C |
+| 参数                  | 说明                           | 类型                    | 默认值  |
+|---------------------|--------------------------------|-------------------------|---------|
+| activeColor         | 选项的选中态图标颜色           | String                  | #F2270C |
 | closeOnClickOverlay | 是否在点击遮罩层后关闭菜单     | Boolean                 | true    |
-| lockScroll            | 背景是否锁定                   | Boolean                 | true    |
-| titleIcon               | 自定义标题图标                 | String                  | -       |
+| lockScroll          | 背景是否锁定                   | Boolean                 | true    |
+| scrollFixed         | 滚动后是否固定，可设置固定位置                   | Boolean、String、Number                 | true    |
+| titleIcon           | 自定义标题图标                 | String                  | -       |
 
 ### MenuItem Props
 

src/packages/menu/doc.zh-TW.md

+# Menu 菜單
+
+### 介紹
+
+向下彈出的菜單列表
+
+### 安裝
+
+``` javascript
+import { Menu, MenuItem } from '@nutui/nutui-react';
+```
+
+## 代碼演示
+
+### 基礎用法
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu>
+          <MenuItem options={options} value={0} />
+          <MenuItem options={options1} value='a' />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 自定義菜單內容
+
+使用實例上的 toggle 方法可以手動關閉彈框。
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu>
+          <MenuItem options={options} value={0} />
+          <MenuItem title="篩選">
+            <div>自定義內容</div>
+            <Button>確認</Button>
+          </MenuItem>
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 一行兩列
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  
+  return (
+    <>
+      <div className="demo full">
+        <Menu>
+          <MenuItem options={options} value={0} columns={2} />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 自定義選中態顏色
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu activeColor="green">
+          <MenuItem options={options} value={0} />
+          <MenuItem options={options1} value="a" />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 自定義圖標
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu titleIcon="joy-smile">
+          <MenuItem options={options} value={0} optionsIcon="success" />
+          <MenuItem options={options1} value="a" />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 向上展開
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu>
+          <MenuItem options={options} value={0} direction="up" />
+          <MenuItem options={options1} value="a" direction="up" />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+### 禁用菜單
+
+:::demo
+
+```tsx
+import React from 'react';
+import { Menu, MenuItem } from '@nutui/nutui-react';
+
+const App = () => {
+  const [options] = useState([
+    { text: '全部商品', value: 0 },
+    { text: '新款商品', value: 1 },
+    { text: '活動商品', value: 2 },
+  ])
+  const [options1] = useState([
+    { text: '默認排序', value: 'a' },
+    { text: '好評排序', value: 'b' },
+    { text: '銷量排序', value: 'c' },
+  ])
+  return (
+    <>
+      <div className="demo full">
+        <Menu>
+          <MenuItem options={options} value={0} disabled />
+          <MenuItem options={options1} value="a" disabled />
+        </Menu>
+      </div>
+    </>
+  )
+}
+export default App
+
+```
+
+:::
+
+## API
+
+### Menu Props
+
+| 參數                  | 說明                           | 類型                    | 默認值  |
+|---------------------|--------------------------------|-------------------------|---------|
+| activeColor         | 選項的選中態圖標顏色           | String                  | #F2270C |
+| closeOnClickOverlay | 是否在點擊遮罩層後關閉菜單     | Boolean                 | true    |
+| lockScroll          | 背景是否鎖定                   | Boolean                 | true    |
+| scrollFixed         | 滾動後是否固定，可設置固定位置                   | Boolean、String、Number                 | true    |
+| titleIcon           | 自定義標題圖標                 | String                  | -       |
+
+### MenuItem Props
+
+| 參數                          | 說明                                    | 類型    | 默認值           |
+|-------------------------------|-----------------------------------------|---------|------------------|
+| title                         | 菜單項標題                              | String  | 當前選中項文字   |
+| options                       | 選項數組                                | Array   | -                |
+| disabled                      | 是否禁用菜單                            | Boolean | false            |
+| columns                          | 可以設置一行展示多少列 options          | Number  | 1                |
+| optionsIcon          | 自定義選項圖標                          | String  | 'Check'          |
+| direction            | 菜單展開方向，可選值為up                | String  | 'down'           |
+| activeClassName    | 選項選中時自定義標題樣式類              | String  | -                |
+| inactiveClassName  | 選項非選中時自定義標題樣式類            | String  | -                |
+| fontClassName       | 自定義icon 字體基礎類名                 | string  | `nutui-iconfont` |
+| iconClassPrefix          | 自定義icon 類名前綴，用於使用自定義圖標 | string  | `nut-icon`       |
+
+### MenuItem Events
+
+| 事件名      | 說明                 | 回調參數     |
+|----------|----------------------|--------------|
+| onChange | 選擇 option 之後觸發 | 選擇的 value |
\ No newline at end of file

src/packages/menu/menu.taro.tsx

 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
 import Icon from '@/packages/icon/index.taro'
-import { OptionItem } from '@/packages/menuitem/menuitem'
+import { OptionItem } from '@/packages/menuitem/menuitem.taro'
 
 export interface MenuProps {
   className: string

src/packages/menu/menu.tsx

@@ -38,8 +38,20 @@ export const Menu: FunctionComponent<Partial<MenuProps>> = (props) => {
     ...props,
   }
   const parentRef = useRef(null)
+  const [isScrollFixed, setIsScrollFixed] = useState(false)
 
-  const onScroll = () => {}
+  const getScrollTop = (el: Element | Window) => {
+    return Math.max(0, 'scrollTop' in el ? el.scrollTop : el.pageYOffset)
+  }
+  const onScroll = () => {
+    const { scrollFixed } = props
+
+    const scrollTop = getScrollTop(window)
+    console.log(scrollTop)
+    const isFixed =
+      scrollTop > (typeof scrollFixed === 'boolean' ? 30 : Number(scrollFixed))
+    setIsScrollFixed(isFixed)
+  }
 
   useEffect(() => {
     if (scrollFixed) {
@@ -83,9 +95,13 @@ export const Menu: FunctionComponent<Partial<MenuProps>> = (props) => {
       })
     })
   }
-
+  console.log('isScrollFixed', isScrollFixed)
   return (
-    <div className={`nut-menu ${className}`} {...rest} ref={parentRef}>
+    <div
+      className={`nut-menu ${className} ${isScrollFixed ? 'scroll-fixed' : ''}`}
+      {...rest}
+      ref={parentRef}
+    >
       <div
         className={`nut-menu__bar ${
           itemShow.includes(true) ? 'opened' : ''

src/packages/menuitem/menuitem.taro.tsx

@@ -97,11 +97,12 @@ export const MenuItem: FunctionComponent<Partial<MenuItemProps>> = (props) => {
   const getParentOffset = () => {
     setTimeout(() => {
       const p = parent.parent().current
-      const rect = p.getBoundingClientRect()
-      console.log(rect, p.offsetTop, window.screenTop)
-      setPosition({
-        height: rect.height,
-        top: rect.top,
+
+      const rect = p.getBoundingClientRect().then((rect: any) => {
+        setPosition({
+          height: rect.height,
+          top: rect.top,
+        })
       })
     })
   }

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

@@ -22,6 +22,7 @@ const subPackages = [
       'pages/pagination/index',
       'pages/tabs/index',
       'pages/indicator/index',
+      'pages/menu/index',
     ],
   },
   {
@@ -44,7 +45,11 @@ const subPackages = [
   },
   {
     root: 'feedback',
-    pages: ['pages/actionsheet/index', 'pages/switch/index'],
+    pages: [
+      'pages/actionsheet/index',
+      'pages/switch/index',
+      'pages/pulltorefresh/index',
+    ],
   },
   {
     root: 'exhibition',

src/sites/mobile-taro/src/app.scss

@@ -45,7 +45,7 @@
   padding: 0px 17px 10px 17px;
 
   &.full {
-    padding: 57px 0 0 0;
+    padding: 0 0 0 0;
     h2 {
       padding-left: 17px;
     }