react-antd-sider-menus v0.1.2

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.

siderMenus

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

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.

firstLevelMenuItemIconStyle

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

LICENSE

MIT License