import React from 'react';
import MuiListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import PropTypes from 'prop-types';
import { useIcon } from '@wq/react';

export default function ListItem({ children, description, icon, ...rest }) {
    const Icon = useIcon(icon);
    return (
        <MuiListItem {...rest}>
            {Icon && (
                <ListItemIcon>
                    <Icon />
                </ListItemIcon>
            )}
            <ListItemText primary={children} secondary={description} />
        </MuiListItem>
    );
}

ListItem.propTypes = {
    children: PropTypes.node,
    description: PropTypes.node,
    icon: PropTypes.string
};

@@ -192,16 +192,97 @@
 mIcon';%0A
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';%0A
 import P
@@ -381,16 +381,20 @@
 stItem(%7B
+%0A   
  childre
@@ -395,16 +395,20 @@
 hildren,
+%0A   
  descrip
@@ -416,22 +416,51 @@
 ion,
+%0A   
  icon,
+%0A    secondaryAction,%0A   
  ...rest
  %7D) 
@@ -455,17 +455,17 @@
  ...rest
- 
+%0A
 %7D) %7B%0A   
@@ -736,24 +736,196 @@
 ription%7D /%3E%0A
+            %7BsecondaryAction && (%0A                %3CListItemSecondaryAction%3E%0A                    %7BsecondaryAction%7D%0A                %3C/ListItemSecondaryAction%3E%0A            )%7D%0A
         %3C/Mu
@@ -1057,12 +1057,49 @@
 s.string
+,%0A    secondaryAction: PropTypes.node
 %0A%7D;%0A

support ListItem secondaryAction