react-antd-sider-menus

react-antd-sider-menus

Based on antd, menu props mode is inline. solve the problem of refreshing the route, jump routing, Layout.Sider collapsed from false to true, and when the collapsed is true, the dropdown is mistaken for the bug.

Install

yarn

yarn add react-antd-sider-menus

npm

npm install --save react-antd-sider-menus

UMD

<script src="https://unpkg.com/react-antd-sider-menus@0.1.0/dist/index.umd.js"></script>

OR

<script src="https://unpkg.com/react-antd-sider-menus@0.1.0/dist/index.umd.min.js"></script>

Tips: You can find the library on window.ReactAntdSiderMenus.

Import

ES2015

import ReactAntdSiderMenus, {
  toggleCollapsed,
  childrenToFlat,
  findPathByLeafParam
} from 'react-antd-sider-menus'

CommonJS

const ReactAntdSiderMenus = require('react-antd-sider-menus')
const { toggleCollapsed, childrenToFlat, findPathByLeafParam } = require('react-antd-sider-menus')

Usage

import React, { useReducer } from 'react'
import ReactAntdSiderMenus, { toggleCollapsed } from 'react-antd-sider-menus'

const initial = {
  menus: [], // set self project menus
  collapsed: false,
  key: [],
  keyPath: [],
  cacheKeyPath: [],
  breadRouters: []
}

const reducer = (state, action) => {
  const payload = reap(action, 'payload', {})
  switch (action.type) {
    case 'update':
      return { ...state, ...payload }
    default:
      throw new Error()
  }
}

function Example() {
  const {} = props

  const [
    { menus = [], collapsed = false, key = [], keyPath = [], cacheKeyPath = [], breadRouters = [] },
    dispatch
  ] = useReducer(reducer, initial)

  const screenWidth = 1200 // listener screen resize. recommend: react-listen-resize
  const siderMenusWidth = '320px'
  const locationPathname = '' // listener browser router pathname change.

  const onChangeSiderMenus = value =>
    dispatch({
      type: 'update',
      payload: {
        ...value
      }
    })

  return (
    <React.Fragment>
      <div
        onClick={() =>
          toggleCollapsed({
            onChangeSiderMenus,
            collapsed,
            keyPath,
            cacheKeyPath,
            breadRouters
          })
        }
      >
        Expand/Close
      </div>
      <ReactAntdSiderMenus
        screenWidth={screenWidth}
        locationPathname={locationPathname}
        antdSider={{
          classNameSider: '',
          styleSider: { height: '100%', overflowX: 'hidden', overflowY: 'auto' },
          widthSider: siderMenusWidth,
          collapsedWidth: 64
        }}
        siderMenus={{
          menus,
          collapsed,
          key,
          keyPath,
          cacheKeyPath,
          breadRouters
        }}
        onChangeSiderMenus={onChangeSiderMenus}
        firstLevelSubMenuIconStyle={{ style: {} }}
        firstLevelMenuItemIconStyle={{ style: {} }}
      />
    </React.Fragment>
  )
}

Props

screenWidth

Type number, isRequired, Default 0. Screen resize listener change.

locationPathname

Type string, isRequired, Default ''. Browser location pathname.

antdSider

Antd Layout Sider props. Type object.

Property	Description	Type	Default	isRequired
classNameSider	React className property	string	''	false
styleSider	React style property	object	{}	false
widthSider	Antd Sider component width, by the screenWidth change to set value.	string|number	'320px'	false
collapsedWidth	Antd Sider component prop collapsed is true, sider's width.	number	80	false

siderMenus

Menu operation data. Type object. isRequired. We can update using onChangeSiderMenus.

Property	Description	Type	Default	isRequired
menus	Data for rendering menu options. menus	array	[]	true
collapsed	Whether to shrink the antd sider component.	bool	false	true
key	Antd menu component prop selectedKeys, the currently selected menu item.	array	[]	true
keyPath	Antd menu component prop openKeys, The current menu item expanded.	array	[]	true
cacheKeyPath	Solve problems with caching keyPath. Type array.	array	[]	true
breadRouters	Back to top selected all parents (contain: selected menu item).	array	[]	true

menus

menus = [
  {
    name: '开始', // show real name OR umi-plugin-local key
    router: '/start', // Uniquely identifies. Also location pathname exact match.
    icon: Setting, // Unselected Svg Component. Only first level has icon
    selectIcon: SettingSelect // Selected Svg Component. Only first level has icon
  },
  {
    name: 'MANAGEMENT',
    router: '/management',
    icon: Setting,
    selectIcon: SettingSelect,
    children: [
      // submenu show router item
      {
        name: 'SETTING',
        router: '/management/setting', // Inheriting the previous layer of routing.
        children: [
          {
            name: 'SETTING',
            router: '/management/setting/rule'
          }
        ]
      }
    ]
  }
]

onChangeSiderMenus

Type function(siderMenusValues), isRequired. Update some of siderMenus object states.

firstLevelSubMenuIconStyle

Type object, Default {}. The first level has a submenu icon.

Property	Description	Type	Default	isRequired
className	React className property	string	''	false
style	React style property	object	{}	false

firstLevelMenuItemIconStyle

Type object, Default {}. The first level does not have a sub-menu icon.

Property	Description	Type	Default	isRequired
className	React className property	string	''	false
style	React style property	object	{}	false

LICENSE

MIT License