@6thquake/react-material/es/CascadeSelect/CascadeOption.js

React components that implement Google's Material Design.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MenuList from '../MenuList';
import MenuItem from '../MenuItem';
import Paper from '../Paper';
import withStyles from '../styles/withStyles';
import ListItemIcon from '../ListItemIcon';
import ListItemText from '../ListItemText';
import PlayArrow from '@material-ui/icons/PlayArrow';

const styles = theme => ({
  menuItem: {
    '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& $primary, & $icon': {
        color: theme.palette.common.white
      }
    }
  },
  menuItemSelect: {
    backgroundColor: '#eee',
    '& $primary, & $icon': {
      color: 'blue'
    }
  },
  primary: {},
  icon: {}
});
/**
 * @ignore - internal component.
 */


var _ref = React.createElement(PlayArrow, null);

class CascadeOption extends Component {
  constructor(props) {
    super(props);

    this.toMenuItem = (data, classes) => {
      const {
        mapper
      } = this.props;
      const list = data.map((item, index) => {
        let label = item[mapper.label || 'label'];
        let value = item[mapper.value || 'value'];

        if (typeof mapper.label === 'function') {
          label = mapper.label(item, index);
        }

        if (typeof mapper.value === 'function') {
          value = mapper.value(item, index);
        }

        const hasSub = item.subItems && item.subItems.length > 0;
        const checked = this.props.checkedIndex === index;
        return React.createElement(MenuItem, {
          key: value,
          value: value,
          className: checked ? classes.menuItemSelect : '',
          onClick: this.handleItemClick(item, index)
        }, React.createElement(ListItemText, {
          classes: {
            primary: classes.primary
          },
          inset: true,
          primary: label
        }), hasSub ? React.createElement(ListItemIcon, {
          className: classes.icon
        }, _ref) : '');
      });
      return list;
    };

    this.handleItemClick = (item, index) => e => {
      const info = {
        level: this.props.level,
        index,
        next: this.props.options[index].subItems || [],
        item: this.props.options
      };
      this.props.onChange(info);
    };
  }

  render() {
    const {
      classes,
      options,
      open
    } = this.props;
    let t = null;

    if (options && options.length > 0 && open) {
      t = React.createElement(Paper, null, React.createElement(MenuList, null, this.toMenuItem(options, classes)));
    }

    return t;
  }

}

process.env.NODE_ENV !== "production" ? CascadeOption.propTypes = {
  classes: PropTypes.object.isRequired
} : void 0;
export default withStyles(styles, {
  name: 'RMCascadeOption'
})(CascadeOption);