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/[email protected]/dist/index.umd.js"></script>

OR

<script src="https://unpkg.com/[email protected]/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