From 6c6096dd225e3d1a2cc8e8db669be53287dface2 Mon Sep 17 00:00:00 2001
From: Ymm0008 <being0008@163.com>
Date: Mon, 6 Dec 2021 10:45:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20fixednav=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/fixednav/doc.md       |  1 +
 src/packages/fixednav/fixednav.tsx | 59 +++++++++++++++++++-----------
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/packages/fixednav/doc.md b/src/packages/fixednav/doc.md
index d6006f0..14cdd0e 100644
--- a/src/packages/fixednav/doc.md
+++ b/src/packages/fixednav/doc.md
@@ -135,6 +135,7 @@ const selected = (item: any, event: MouseEvent) => {
 ### Prop
 | 字段           | 说明                       | 类型    | 默认值                       |
 |:---------------|:---------------------------|:--------|:-----------------------------|
+| fixednavClass        | 自定义类名                   | String | fixednav                        |
 | visible        | 是否打开                   | Boolean | false                        |
 | navList       | 悬浮列表内容数据           | Array   | []                           |
 | activeText    | 收起列表按钮文案           | String  | 收起导航                     |
diff --git a/src/packages/fixednav/fixednav.tsx b/src/packages/fixednav/fixednav.tsx
index 0578f7e..3b876ae 100644
--- a/src/packages/fixednav/fixednav.tsx
+++ b/src/packages/fixednav/fixednav.tsx
@@ -1,19 +1,25 @@
 import React, { FunctionComponent, useState, useEffect, MouseEvent, HTMLProps } from 'react'
 import { Icon } from '../icon/icon'
-import { Overlay } from '../overlay/overlay'
+import bem from '@/utils/bem'
 import classNames from 'classnames'
+import { Overlay } from '../overlay/overlay'
 
 import './fixednav.scss'
 
+type Direction = 'right' | 'left'
+type Position = {
+  top?: string
+  bottom?: string
+}
 export interface FixedNavProps {
-  prefixCls: string
+  fixednavClass: string
   visible: boolean
   overlay: boolean
   navList: Array<object>
   activeText: string
   unActiveText: string
-  position: object
-  type: string
+  position: Position
+  type: Direction
   change: Function
   selected: Function
   slotList: HTMLProps<HTMLElement>
@@ -21,22 +27,21 @@ export interface FixedNavProps {
 }
 
 const defaultProps = {
-  prefixCls: 'nut-fixednav',
+  fixednavClass: 'nut-fixednav',
   activeText: '收起导航',
   unActiveText: '快速导航',
+  type: 'right',
   position: {
     top: 'auto',
     bottom: 'auto',
   },
-  type: 'right',
 } as FixedNavProps
 
 export const FixedNav: FunctionComponent<
   Partial<FixedNavProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
   const {
-    prefixCls,
-    children,
+    fixednavClass,
     overlay,
     visible,
     navList,
@@ -48,30 +53,42 @@ export const FixedNav: FunctionComponent<
     type,
     slotList,
     slotBtn,
+    ...rest
   } = { ...defaultProps, ...props }
 
-  const selectCb = (event: MouseEvent, item: any) => {
+  const b = bem('fixednav')
+
+  const classes = classNames(
+    {
+      active: visible,
+    },
+    type,
+    fixednavClass,
+    b('')
+  )
+
+  const onSelectCb = (event: MouseEvent, item: any): void => {
     selected(item, event)
   }
 
-  const updateValue = (value: boolean = !visible) => {
+  const onUpdateValue = (value: boolean = !visible): void => {
     change(value)
   }
 
-  const [classNames, setClassNames] = useState('')
+  // const [classNames, setClassNames] = useState('')
 
-  const classes = () => {
-    return `${prefixCls} ${type} ${visible ? 'active' : ''}`
-  }
+  // const classes = () => {
+  //   return `${fixednavClass} ${type} ${visible ? 'active' : ''}`
+  // }
 
-  useEffect(() => {
-    setClassNames(classes())
-  }, [visible])
+  // useEffect(() => {
+  //   setClassNames(classes())
+  // }, [visible])
 
   return (
-    <div className={`${classNames}`} style={position}>
+    <div className={classes} style={position} {...rest}>
       {overlay && (
-        <Overlay visible={visible} zIndex={200} onClick={() => updateValue(false)}></Overlay>
+        <Overlay visible={visible} zIndex={200} onClick={() => onUpdateValue(false)}></Overlay>
       )}
       <div className="list">
         {slotList ? (
@@ -82,7 +99,7 @@ export const FixedNav: FunctionComponent<
               return (
                 <div
                   className="nut-fixednav__list-item"
-                  onClick={(event) => selectCb(event, item)}
+                  onClick={(event) => onSelectCb(event, item)}
                   key={item.id || index}
                 >
                   <img src={item.icon} />
@@ -95,7 +112,7 @@ export const FixedNav: FunctionComponent<
         )}
       </div>
 
-      <div className="nut-fixednav__btn" onClick={() => updateValue()}>
+      <div className="nut-fixednav__btn" onClick={() => onUpdateValue()}>
         {slotBtn ? (
           slotBtn
         ) : (
-- 
GitLab