ol-kit | LayerPanelList

Constructor

# <LayerPanelList children onSort onReorderedItems items disableDrag onLayerReorder />

PropTypes:

Name	Type	Required	Description	Default
`children`	node	No	The content of the LayerPanelList (likely `LayerPanelListItem` components)
`onSort`	func	No	callback when item prop is dropped	(a, b) => { return a - b }
`onReorderedItems`	func	No	callback with reordered items
`items`	array	No	array of items to be rendered in the list
`disableDrag`	bool	No	A boolean to disable the drag event on the LayerPanelList	false
`onLayerReorder`	func	No	A callback function to inform when the list is reordered	() => {}

Since:

0.5.0

View Source LayerPanel/LayerPanelList/index.js, line 33

Examples

You can make a list by passing items down. Which should be an array. There's also a built in drag for the LayerPanelListItem. You can disable it buy passing the prop disableDrag to the LayerPanelList. If you want to persist the reorder of items then you'll need to pass the onReorderedItems callback to the LayerPanelList and update the items in your parent component.

import {
  LayerPanel,
  LayerPanelPage,
  LayerPanelHeader,
  LayerPanelContent,
  LayerPanelActions,
  LayerPanelActionRemove,
  LayerPanelList } from '@bayer/ol-kit'
import VpnKeyIcon from '@material-ui/icons/VpnKeyIcon'
import MoreHorizIcon from '@material-ui/icons/MoreHorizIcon'
import MenuItem from '@material-ui/core/MenuItem'

return (
  <LayerPanel>
    <LayerPanelPage tabIcon={<VpnKeyIcon />}>
      <LayerPanelHeader
        title='Legends Page'
        avatar={<VpnKeyIcon />}
        actions={
          <LayerPanelActions icon={<MoreHorizIcon />}>
            <LayerPanelActionRemove />
            <MenuItem onClick={this.updateLegends}>Update Legends</MenuItem>
            <MenuItem onClick={this.setLegendsToOriginalOrder}>Original Order Legends</MenuItem>
          </LayerPanelActions>
        } />
      <LayerPanelContent>
        <LayerPanelList items={legends} onReorderedItems={this.handleReorderedItems} />
      </LayerPanelContent>
    </LayerPanelPage>
  </LayerPanel>
)

Below you can see how we add custom actions to our LayerPanel and also that you can render an array of LayerPanelListItem's in your LayerPanelList. Also the list is draggable and has a callback to allow you to reorder the items however you want. Theres an onSort prop that receives a Javascript Sort function to customize the way the items get sorted.

import {
  LayerPanel,
  LayerPanelPage,
  LayerPanelHeader,
  LayerPanelContent,
  LayerPanelActions,
  LayerPanelActionRemove,
  LayerPanelList } from '@bayer/ol-kit'
import VpnKeyIcon from '@material-ui/icons/VpnKeyIcon'
import MoreHorizIcon from '@material-ui/icons/MoreHorizIcon'
import MenuItem from '@material-ui/core/MenuItem'

class MyCustomLayerPanelContainer extends React.Component {
  constructor (props) {
    super(props)

    this.state = { legends: ['First Legend', 'Second Legend', 'Third Legend'] }

    this.updateLegends = this.updateLegends.bind(this)
    this.handleReorderedItems = this.handleReorderedItems.bind(this)
  }

  updateLegends () {}

  handleReorderedItems (newItems) {
    this.setState({ legends: newItems })
  }

  render () {
    const { maps } = this.props
    const { legends } = this.state

    return (
      <LayerPanel>
        <LayerPanelPage tabIcon={<VpnKeyIcon />}>
          <LayerPanelHeader
            title='Legends Page'
            avatar={<VpnKeyIcon />}
            actions={
              <LayerPanelActions icon={<MoreHorizIcon />}>
                <LayerPanelActionRemove />
                <MenuItem onClick={this.updateLegends}>Update Legends</MenuItem>
              </LayerPanelActions>
            } />
          <LayerPanelContent>
            <LayerPanelList items={legends} onReorderedItems={this.handleReorderedItems}>
              {legends.map(legend => {
                return <LayerPanelListItem>{legend}</LayerPanelListItem>
              })}
            </LayerPanelList>
          </LayerPanelContent>
        </LayerPanelPage>
      </LayerPanel>
    )
  }
}