Repository: mlaursen/react-md
Pull request #620 (2017-11-13 16:44:10)

Added props to customize active ListItem


Patch:
diff --git a/src/js/Lists/ListItem.d.ts b/src/js/Lists/ListItem.d.ts
index b36b0e6635..2a8ff9474a 100644
--- a/src/js/Lists/ListItem.d.ts
+++ b/src/js/Lists/ListItem.d.ts
@@ -47,6 +47,8 @@ export interface ListItemProps extends BaseListItemProps, InjectedInkProps {
   expanderLeft?: boolean;
   active?: boolean;
   activeClassName?: string;
+  activeBoxStyle?: React.CSSProperties;
+  activeBoxClassName?: string;
   animateNestedItems?: boolean;
   itemRef?: (ref: React.ReactHTMLElement<any> | null) => null;
 
diff --git a/src/js/Lists/ListItem.js b/src/js/Lists/ListItem.js
index 09afdffbb1..e827bf78b1 100644
--- a/src/js/Lists/ListItem.js
+++ b/src/js/Lists/ListItem.js
@@ -306,6 +306,18 @@ export default class ListItem extends PureComponent {
      */
     activeClassName: PropTypes.string,
 
+    /**
+     * An optional style to apply to the top-most element of the `ListItem` component (`.md-list-item`)
+     * when the `active` prop is `true`.
+     */
+    activeBoxStyle: PropTypes.object,
+
+    /**
+     * The className to apply to the top-most element of the `ListItem` component (`.md-list-item`)
+     * when the `active` prop is `true`.
+     */
+    activeBoxClassName: PropTypes.string,
+
     /**
      * Boolean if the nested items should animate when they appear or disappear.
      */
@@ -560,6 +572,8 @@ export default class ListItem extends PureComponent {
       prependNested,
       active,
       activeClassName,
+      activeBoxStyle,
+      activeBoxClassName,
       animateNestedItems,
       expanderIcon,
       expanderLeft,
@@ -703,8 +717,11 @@ export default class ListItem extends PureComponent {
     const sharedProps = {
       ...itemProps,
       ...(passPropsToItem ? props : undefined),
-      style,
-      className: cn('md-list-item', { 'md-list-item--nested-container': nestedItems }, className),
+      style: Object.assign({}, style, active ? activeBoxStyle : null),
+      className: cn('md-list-item', {
+        'md-list-item--nested-container': nestedItems,
+        [activeBoxClassName]: active,
+      }, className),
       'aria-setsize': ariaSize,
       'aria-posinset': ariaPos,
       ref: this._setContainer,


Test patch:
diff --git a/src/js/Lists/__tests__/ListItem.js b/src/js/Lists/__tests__/ListItem.js
index 6b8ef14721..09dd18b00f 100644
--- a/src/js/Lists/__tests__/ListItem.js
+++ b/src/js/Lists/__tests__/ListItem.js
@@ -65,6 +65,21 @@ describe('ListItem', () => {
     expect(rightNode.style.height).toBe(props.rightNodeStyle.height);
   });
 
+  it('should use "activeBoxClassName" and "activeBoxStyle" properties', () => {
+    const props = {
+      primaryText: 'Test activeBox props',
+      active: true,
+      activeBoxClassName: 'active-box-class',
+      activeBoxStyle: {
+        width: '30px',
+      },
+    };
+    const listItem = renderIntoDocument(<ListItem {...props} />);
+
+    const node = findRenderedDOMComponentWithClass(listItem, props.activeBoxClassName);
+    expect(node.style.width).toBe(props.activeBoxStyle.width);
+  });
+
   it('should provide reference to container element', () => {
     let itemRef;
     const props = {
diff --git a/src/js/Lists/__tests__/__snapshots__/ListItem.js.snap b/src/js/Lists/__tests__/__snapshots__/ListItem.js.snap
index f917aa643e..cae2afba84 100644
--- a/src/js/Lists/__tests__/__snapshots__/ListItem.js.snap
+++ b/src/js/Lists/__tests__/__snapshots__/ListItem.js.snap
@@ -5,7 +5,7 @@ exports[`ListItem should render correctly with a snapshot tester 1`] = `
   aria-posinset={undefined}
   aria-setsize={undefined}
   className="md-list-item"
-  style={undefined}
+  style={Object {}}
 >
   <div
     aria-expanded={null}