Skip to content

jeryqwq/ReactUseContextMenu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-context-menu

NPM version NPM downloads

Install

$ pnpm install @jeryqwq/react-use-contextmenu

run | build

$ npm run dev
$ npm run build

为什么会有这个组件而不是用社区的

看了几款react生态下的相关插件,无法适配当前业务的复杂性。

例如:

  • 当菜单超出屏幕时需要做UI适配,会导致顶部和底部列表的选项无法全部展示
  • 当菜单处于局部滚动条内时,当用户滚动时,菜单也应该对应的滚动,否则无法继续操作
  • 需要适配多级菜单和动态展开,展开式也需要对UI做判断,需要适配屏幕
  • 菜单禁用状态适配
  • 动态生成菜单

其它社区优秀插件: React ContextMenu 2020年已不维护

ContextMenu 组件描述

用于需要对该项进行多个功能选项操作时, 包含有禁用,多级,动态加载,列表右键菜单等,可以使用右键菜单进行对应的操作和展示。

基础

右键菜单分为多个部分,下面是一些相关概念。你也可以基于此实现其它相关菜单的功能

MenuItem 数据结构

属性名描述类型默认值
value唯一值string(必选)
label展示的名称或者自定义jsxReactNode(必选)
children子节点加载方法或者子节点数组ContextMenuItem[] | ((item: ContextMenuItem) => ContextMenuItem[])--
icon图表ReactNode--
disabled是否禁用,禁用后不会处罚单击函数boolean--
render自定义渲染(_: ContextMenuItem) => ReactNode--
loadding自定义加载图表ReactNode--
onClick自定义单独处理函数(e: MouseEvent<Element, MouseEvent>, item: ContextMenuItem, data: any) => void--

DEMO

import useContextMenu from '@jeryqwq/react-use-contextmenu';
import React from 'react'


export default function MyContextMenu () {
  const { Trigger, ContextMenu } = useContextMenu()
  return <div>
    <Trigger data={{id: '1j24iej1h2r23'}}>我是触发器,单击我会把我的data传给右键菜单的处理函数</Trigger>
    <ContextMenu menus={[{ label: '操作1', value: '1' }]} onClick={(e, data, menu) => {
      alert(`data.id: ${data.id} menu.value: ${menu.value}`)
    }}/>
  </div>
}

useContextMenu

逻辑解耦, 只负责处理处理右键和定位逻辑, 返回的Trigger和ContextMenu是包含菜单功能逻辑的菜单和触发器,用的时候只要加一些配置即可,可配置唤醒方式,单击,右键等事件,默认右键唤醒

属性名描述类型默认值
eventw3c规范的所有的事件字符串内容keyof HTMLElementEventMapcontextmenu

Trigger 触发器

用来根据hooks初始化时配置的操作事件唤醒菜单和传递参数。

注:为了无缝接入其它组件库,所有在Trigger上的参数都会被渲染到子元素的props上接入Antd Table

属性名描述类型默认值
children该属性的子节点ReactNode(必选)
data需要传递给菜单的数据any(必选)
getEl如果是其它元素,可用此方法绑定任意触发DOM() => HTMLDivElement--
style外层的css样式CSSProperties--
tag渲染Trigger的标签,用来适配一些其它框架stringdiv
handle可在这里动态触发修改菜单配置实现动态菜单(e: MouseEvent, data: any) => void--

ContextMenu

展示菜单UI的组件和对应的菜单处理函数。

属性名描述类型默认值
menus菜单数据ContextMenuItem[](必选)
onClick单击处理函数 ,分别是 event, data(触发器数据), node(菜单)HandleClick(必选)
loadding自定义加载图表ReactNode--

触发方式

可通过初始化hooks时配置触发方式来适配其它激活操作。

import useContextMenu from '@jeryqwq/react-use-contextmenu';
import React from 'react'


export default function MyContextMenu () {
  const { Trigger, ContextMenu } = useContextMenu({ event: 'click' })
  const { Trigger: Trigger2, ContextMenu: ContextMenu2 } = useContextMenu({ event: 'mousemove' })

  return <div>
    <Trigger data={{id: 'click'}}>单击触发</Trigger>
    <ContextMenu menus={[{ label: '操作1', value: '1' }]} onClick={(e, data, menu) => {
      alert(`data.id: ${data.id} menu.value: ${menu.value}`)
    }}/>
    <Trigger2 data={{id: 'mousemove'}} tag="span">鼠标移动触发</Trigger2>
    <ContextMenu2 menus={[{ label: '操作1', value: '1' }]} onClick={(e, data, menu) => {
      alert(`data.id: ${data.id} menu.value: ${menu.value}`)
    }}/>
  </div>
}

多级菜单 & 异步动态加载

import useContextMenu from '@jeryqwq/react-use-contextmenu';
import React from 'react'
import { ReloadOutlined } from '@ant-design/icons';


export default function MyContextMenu () {
  const { Trigger, ContextMenu } = useContextMenu()


  return <div>
    <Trigger data={{id: '123'}}>右键我</Trigger>
    <ContextMenu menus={[{ label: '操作1', value: '1' },
    {
  label: '动态异步菜单',
  value: 'key2',
  icon: <ReloadOutlined />,
  children: () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([
          { label: '操作2-1',
            value: 'key2-1'
          },
          { label: '操作2-2',
            value: 'key2-2'
          },
          { label: '操作2-3',
            value: 'key2-3'
          },
          { label: '操作2-4',
            value: 'key2-4'
          }
        ])
      }, 1000)
    })
  }
},
    ]} onClick={(e, data, menu) => {
      alert(`data.id: ${data.id} menu.value: ${menu.value}`)
    }}/>
  </div>
}

已存在DOM节点触发

给任意已渲染的dom添加触发器

import useContextMenu from '@jeryqwq/react-use-contextmenu';
import React, { useState, useLayoutEffect } from 'react'

export default function MyContextMenu () {
  const { Trigger, ContextMenu } = useContextMenu()

  return <div>
    <Trigger data={{id: '1j24iej1h2r23'}} getEl={() => { return document.getElementsByClassName('any class name')[0] }}></Trigger>
    <ContextMenu menus={[{ label: '操作1', value: '1' }]} onClick={(e, data, menu) => {
      alert(`data.id: ${data.id} menu.value: ${menu.value}`)
    }}/>
  </div>
}

Antd Table列表右键菜单

无缝接入ant design Table组件, 为每项加入菜单, 重写render row方法,把所有属性同步到Trigger即可

import React, {  useState } from 'react';
import useContextMenu from '@jeryqwq/react-use-contextmenu';
import { Button, Table  } from 'antd'
import { ReloadOutlined } from '@ant-design/icons';


const menus = [{
  label: '操作1',
  value: 'key1',
  children: [
    { label: '操作1-1',
      value: 'key1-1',
    },
    { label: '操作1-2',
      value: 'key1-2'
    }
  ],
  icon: <ReloadOutlined />,
},
{
  label: '操作3',
  value: 'key3',
},
{
  label: '操作被禁用',
  value: 'key4',
  disabled: true,
}]

export default () => {
  const { Trigger, ContextMenu } = useContextMenu()
  return <div >
    <ContextMenu menus={menus} onClick={(e, item, menu)=> {
      console.log(item, menu, '----')
    }}/>
    <Table 
      dataSource={[
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ]}
    columns={ [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ]}
    components={{
      body: {
        row: (item) => {
          const { index,
          moveRow,
          className,
          style,
          ...restProps} = item;
          return <Trigger data={item} tag="tr" className={`${className}`}
            style={style}
            {...restProps}
            >
          </Trigger>
        }
      }
    }}
    />
  </div>
}

指定父元素渲染 | getMenuContainer

菜单渲染父节点。默认fixed渲染到 元素中,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。

import { useContextMenu } from '@vis/components';
import React from 'react'

export default function MyContextMenu () {
  const { Trigger, ContextMenu } = useContextMenu({
    getMenuContainer() {
      return document.getElementById('my-el')
    }
  })

  return <div style={{height: 200, overflow: 'scroll'}}>
    <div  id="my-el" style={{width: 500, height: 800, background: 'red', position: 'relative'}}>
      <Trigger data={{id: 'click'}}>单击触发</Trigger>
      <ContextMenu menus={[{ label: '操作1', value: '1' }]} onClick={(e, data, menu) => {
        alert(`data.id: ${data.id} menu.value: ${menu.value}`)
      }}/>
    </div>
    
  </div>
}