✨ Add open prop to listItem to control it

Author: Jonas Gossens

examples/react-chayns-list/Example.jsx

@@ -1,10 +1,17 @@
 import React, { Component } from 'react';
 
 import { ContextMenu, List, ListItem } from '../../src/index';
+import Button from '../../src/react-chayns-button/component/Button';
 
 export default class ListExample extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: false };
+    }
+
     render() {
-        return(
+        const { open } = this.state;
+        return (
             <div>
                 <List>
                     <ListItem
@@ -65,11 +72,49 @@ export default class ListExample extends Component {
                                     items={[{
                                         icon: 'ts-plus',
                                         onClick: () => chayns.dialog.alert('Create'),
-                                        text: 'Create'
+                                        text: 'Create',
+                                    }, {
+                                        icon: 'ts-trash',
+                                        onClick: () => chayns.dialog.alert('Delete'),
+                                        text: 'Delete',
+                                    }]}
+                                />
+                            </div>
+                        )}
+                    >
+                        {`
+                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+                            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+                            labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
+                            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                        `}
+                    </ListItem>
+                    <ListItem
+                        onClick={() => { this.setState({ open: !open }); }}
+                        open={open}
+                        title="ListItem (button controlled)"
+                        subtitle="Description"
+                        image="https://chayns.tobit.com/storage/70231-10288/Images/icon-72.png"
+                        right={(
+                            <div
+                                style={{
+                                    height: '100%',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }}
+                                onClick={e => e.stopPropagation()}
+                            >
+                                <ContextMenu
+                                    items={[{
+                                        icon: 'ts-plus',
+                                        onClick: () => chayns.dialog.alert('Create'),
+                                        text: 'Create',
                                     }, {
                                         icon: 'ts-trash',
                                         onClick: () => chayns.dialog.alert('Delete'),
-                                        text: 'Delete'
+                                        text: 'Delete',
                                     }]}
                                 />
                             </div>
@@ -85,6 +130,15 @@ export default class ListExample extends Component {
                         `}
                     </ListItem>
                 </List>
+                <Button
+                    onClick={() => {
+                        this.setState({ open: !open });
+                    }}
+                >
+
+
+                    Open/Close
+                </Button>
             </div>
         );
     }

src/react-chayns-list/README.md

@@ -51,10 +51,11 @@ You can use the List like this:
 | subtitle      | Second title (subtitle) that should be rendered on the item                                                                     | String         |               |
 | image         | Image that should be rendered to the left of the title                                                                          | String         |               |
 | className     | ClassName that should be set on the ListItem root element                                                                       | String         |               |
-| onClick       | onClick-Listener that should be set on the item (only when no children is specified)                                            | Function       |               |
+| onClick       | onClick-Listener that should be set on the item                                                                                 | Function       |               |
 | children      | Children that should be shown, when clicked on the item (works only inside Lists that does not have the notExpandable-prop set) | React-Elements |               |
 | right         | React-Elements that should be rendered on the right side of the ListItem                                                        | React-Elements |               |
 | noContentClass | Prevents adding the "list-item__content"-Class to the children wrapper.                                                        | bool           | false         |
+| open          | Opening state of the item. true=open, false=close, null=uncontrolled                                                            | bool           | false         |
 
 ## Example ##
 

src/react-chayns-list/component/ExpandableList/AbstractExpandableListItem.jsx

@@ -7,6 +7,7 @@ import ExpandableContent from '../../../react-chayns-expandable_content/componen
 import ExpandableContext from './ExpandableContext';
 
 let maxId = 1;
+
 function getId() {
     const id = maxId;
     maxId += 1;
@@ -28,6 +29,7 @@ class AbstractExpandableListItem extends PureComponent {
         className: PropTypes.string,
         clickable: PropTypes.bool,
         noContentClass: PropTypes.bool,
+        openProp: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -36,6 +38,7 @@ class AbstractExpandableListItem extends PureComponent {
         className: '',
         clickable: false,
         noContentClass: false,
+        openProp: null,
     };
 
     constructor(props) {
@@ -89,9 +92,10 @@ class AbstractExpandableListItem extends PureComponent {
             clickable,
             open: openIds,
             noContentClass,
+            openProp,
         } = this.props;
 
-        const open = (openIds && openIds.indexOf && openIds.indexOf(this.id) !== -1);
+        const open = openProp !== null ? openProp : (openIds && openIds.indexOf && openIds.indexOf(this.id) !== -1);
 
         return (
             <div

src/react-chayns-list/component/ListItem/ExpandableListItem.jsx

@@ -6,7 +6,10 @@ import ExpandableListHeader from './ExpandableListHeader';
 import ExpandableList from '../ExpandableList/ExpandableList';
 
 const ExpandableListItem = ({ children, ...props }) => {
-    const { noContentClass } = props;
+    const {
+        noContentClass, open,
+    } = props;
+
     return (
         <AbstractExpandableListItem
             noContentClass={noContentClass}
@@ -21,6 +24,7 @@ const ExpandableListItem = ({ children, ...props }) => {
                 </ExpandableList.Context.Consumer>
             )}
             clickable
+            openProp={open}
         >
             {children}
         </AbstractExpandableListItem>
@@ -33,10 +37,12 @@ ExpandableListItem.propTypes = {
         PropTypes.arrayOf(PropTypes.node),
     ]).isRequired,
     noContentClass: PropTypes.bool,
+    open: PropTypes.bool,
 };
 
 ExpandableListItem.defaultProps = {
     noContentClass: false,
+    open: null,
 };
 
 export default ExpandableListItem;