diff --git a/src/component-index.js b/src/component-index.js index 2446b26b8d..50803c045e 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -23,6 +23,7 @@ limitations under the License. module.exports.components = {}; module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom'); +module.exports.components['structures.login.ForgotPassword'] = require('./components/structures/login/ForgotPassword'); module.exports.components['structures.login.Login'] = require('./components/structures/login/Login'); module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration'); module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration'); @@ -31,10 +32,6 @@ module.exports.components['structures.RoomView'] = require('./components/structu module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel'); module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar'); module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings'); -module.exports.components['structures.login.ForgotPassword'] = require('./components/structures/login/ForgotPassword'); -module.exports.components['structures.login.Login'] = require('./components/structures/login/Login'); -module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration'); -module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration'); module.exports.components['views.avatars.BaseAvatar'] = require('./components/views/avatars/BaseAvatar'); module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar'); module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar'); @@ -49,6 +46,7 @@ module.exports.components['views.elements.EditableText'] = require('./components module.exports.components['views.elements.PowerSelector'] = require('./components/views/elements/PowerSelector'); module.exports.components['views.elements.ProgressBar'] = require('./components/views/elements/ProgressBar'); module.exports.components['views.elements.TintableSvg'] = require('./components/views/elements/TintableSvg'); +module.exports.components['views.elements.TruncatedList'] = require('./components/views/elements/TruncatedList'); module.exports.components['views.elements.UserSelector'] = require('./components/views/elements/UserSelector'); module.exports.components['views.login.CaptchaForm'] = require('./components/views/login/CaptchaForm'); module.exports.components['views.login.CasLogin'] = require('./components/views/login/CasLogin'); diff --git a/src/components/views/elements/TruncatedList.js b/src/components/views/elements/TruncatedList.js new file mode 100644 index 0000000000..c5a16e2ff3 --- /dev/null +++ b/src/components/views/elements/TruncatedList.js @@ -0,0 +1,61 @@ +/* +Copyright 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ +var React = require('react'); + +module.exports = React.createClass({ + displayName: 'TruncatedList', + + propTypes: { + truncateAt: React.PropTypes.number, + className: React.PropTypes.string, + createOverflowElement: React.PropTypes.func + }, + + getDefaultProps: function() { + return { + truncateAt: 2, + createOverflowElement: function(overflowCount, totalCount) { + return ( +
And {overflowCount} more...
+ ); + } + }; + }, + + render: function() { + var childsJsx = this.props.children; + var overflowJsx; + var childCount = React.Children.count(this.props.children); + var overflowCount = childCount - this.props.truncateAt; + + if (overflowCount > 0) { + overflowJsx = this.props.createOverflowElement( + overflowCount, childCount + ); + var childArray = React.Children.toArray(this.props.children); + // cut out the overflow elements + childArray.splice(childCount - overflowCount, overflowCount); + childsJsx = childArray; // use what is left + } + + return ( +
+ {childsJsx} + {overflowJsx} +
+ ); + } +}); diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index a3e0ee4555..c32cfc868d 100644 --- a/src/components/views/rooms/MemberList.js +++ b/src/components/views/rooms/MemberList.js @@ -368,13 +368,14 @@ module.exports = React.createClass({ ); } + var TruncatedList = sdk.getComponent("elements.TruncatedList"); return (
{this.inviteTile()} -
+ {this.makeMemberTiles('join', this.state.searchQuery)} -
+ {invitedSection}