From 49ba27e7cb7544c38f654449edec0fd5ce58b0bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Journo?= Date: Fri, 8 Jan 2016 18:29:58 +0100 Subject: [PATCH 1/2] [ListItem] allowing for nestedindicator with righticonbutton presents --- package.json | 1 + src/lists/list-item.jsx | 71 +++++++++++++++++++++++++++-------------- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 22b3b5b33d1006..c2a1c11550cbbb 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "prebuild": "rimraf lib", "lint": "gulp eslint:src && gulp eslint:docs && gulp eslint:test", "build": "babel ./src --out-dir ./lib", + "build:watch": "babel ./src --watch --out-dir ./lib", "prepublish": "npm run build" }, "keywords": [ diff --git a/src/lists/list-item.jsx b/src/lists/list-item.jsx index 0301f0a5377af4..38e0b0aee3541a 100644 --- a/src/lists/list-item.jsx +++ b/src/lists/list-item.jsx @@ -521,6 +521,13 @@ const ListItem = React.createClass({ WebkitLineClamp: threeLine ? 2 : null, WebkitBoxOrient: threeLine ? 'vertical' : null, }, + + rightIcons: { + display: 'flex', + position: 'absolute', + right: 0, + top: 0, + }, }; let contentChildren = [children]; @@ -567,33 +574,49 @@ const ListItem = React.createClass({ //RightIconButtonElement const hasNestListItems = nestedItems.length; - const hasRightElement = rightAvatar || rightIcon || rightIconButton || rightToggle; - const needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator && !hasRightElement; - - if (rightIconButton || needsNestedIndicator) { - let rightIconButtonElement = rightIconButton; - let rightIconButtonHandlers = { - onKeyboardFocus: this._handleRightIconButtonKeyboardFocus, - onMouseEnter: this._handleRightIconButtonMouseEnter, - onMouseLeave: this._handleRightIconButtonMouseLeave, - onTouchTap: this._handleRightIconButtonTouchTap, - onMouseDown: this._handleRightIconButtonMouseUp, - onMouseUp: this._handleRightIconButtonMouseUp, - }; - - // Create a nested list indicator icon if we don't have an icon on the right - if (needsNestedIndicator) { - rightIconButtonElement = this.state.open ? - : - ; - rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle; - } + const needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator; + + const rightIcons = []; + let rightIconButtonHandlers = { + onKeyboardFocus: this._handleRightIconButtonKeyboardFocus, + onMouseEnter: this._handleRightIconButtonMouseEnter, + onMouseLeave: this._handleRightIconButtonMouseLeave, + onTouchTap: this._handleRightIconButtonTouchTap, + onMouseDown: this._handleRightIconButtonMouseUp, + onMouseUp: this._handleRightIconButtonMouseUp, + }; + + if (needsNestedIndicator) { + let nestedIndicator = this.state.open ? + : + ; + rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle; + rightIcons.push( + React.cloneElement( + nestedIndicator, + { + key: rightIcons.length, ...rightIconButtonHandlers, + } + ) + ); + } + + if (rightIconButton) { + delete rightIconButtonHandlers.onTouchTap; + let rightIconButtonElement = React.cloneElement( + rightIconButton, + { + key: rightIcons.length, ...rightIconButtonHandlers, + } + ); + rightIcons.push(rightIconButtonElement); + } + if (rightIcons.length > 0) { this._pushElement( contentChildren, - rightIconButtonElement, - this.mergeStyles(styles.rightIconButton), - rightIconButtonHandlers +
{rightIcons}
, + styles.rightIcons ); } From 3c3c96e2adca41a1b29b38c30caa95e4a6dc91cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Journo?= Date: Fri, 8 Jan 2016 18:29:58 +0100 Subject: [PATCH 2/2] [ListItem] allowing for nestedindicator with righticonbutton presents --- .../pages/components/List/ExampleNested.jsx | 16 ++++- package.json | 1 + src/lists/list-item.jsx | 71 ++++++++++++------- 3 files changed, 61 insertions(+), 27 deletions(-) diff --git a/docs/src/app/components/pages/components/List/ExampleNested.jsx b/docs/src/app/components/pages/components/List/ExampleNested.jsx index 94e503c93d5f54..453828a4c143e5 100644 --- a/docs/src/app/components/pages/components/List/ExampleNested.jsx +++ b/docs/src/app/components/pages/components/List/ExampleNested.jsx @@ -6,17 +6,27 @@ import ActionGrade from 'material-ui/lib/svg-icons/action/grade'; import ContentInbox from 'material-ui/lib/svg-icons/content/inbox'; import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts'; import ContentSend from 'material-ui/lib/svg-icons/content/send'; +import IconButton from 'material-ui/lib/icon-button'; const ListExampleNested = () => ( - } /> - } /> + } + rightIconButton={delete} + /> + } + rightIconButton={delete} + /> } initiallyOpen={true} - primaryTogglesNestedList={true} + rightIconButton={delete} + primaryTogglesNestedList={false} nestedItems={[ : - ; - rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle; - } + const needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator; + + const rightIcons = []; + let rightIconButtonHandlers = { + onKeyboardFocus: this._handleRightIconButtonKeyboardFocus, + onMouseEnter: this._handleRightIconButtonMouseEnter, + onMouseLeave: this._handleRightIconButtonMouseLeave, + onTouchTap: this._handleRightIconButtonTouchTap, + onMouseDown: this._handleRightIconButtonMouseUp, + onMouseUp: this._handleRightIconButtonMouseUp, + }; + + if (needsNestedIndicator) { + let nestedIndicator = this.state.open ? + : + ; + rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle; + rightIcons.push( + React.cloneElement( + nestedIndicator, + { + key: rightIcons.length, ...rightIconButtonHandlers, + } + ) + ); + } + + if (rightIconButton) { + delete rightIconButtonHandlers.onTouchTap; + let rightIconButtonElement = React.cloneElement( + rightIconButton, + { + key: rightIcons.length, ...rightIconButtonHandlers, + } + ); + rightIcons.push(rightIconButtonElement); + } + if (rightIcons.length > 0) { this._pushElement( contentChildren, - rightIconButtonElement, - this.mergeStyles(styles.rightIconButton), - rightIconButtonHandlers +
{rightIcons}
, + styles.rightIcons ); }