Merge pull request #15 from smollweide/develop

v0.4.4

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-speed-dial",
-	"version": "0.4.3",
+	"version": "0.4.4",
 	"description": "React Component that implements a speed dial using Material-UI.",
 	"email": "simon.mollweide@web.de",
 	"author": "Simon Mollweide <simon.mollweide@web.de>",

src/components/bubble-list-item/bubble-list-item.js

@@ -77,7 +77,7 @@ class BubbleListItem extends React.Component {
 	 * @returns {Object} styles for root element
 	 */
 	getStylesMain() {
-		const { isOpen, direction, alignment } = this.props;
+		const { isOpen, direction, alignment, style } = this.props;
 		const styles = this.styles;
 		const visibleStr = isOpen ? 'visible' : 'invisible';
 		return Object.assign(
@@ -86,7 +86,8 @@ class BubbleListItem extends React.Component {
 			styles.root[visibleStr].main,
 			styles.root.direction[direction],
 			styles.root[visibleStr].direction[direction],
-			styles.root.alignment[alignment]
+			styles.root.alignment[alignment],
+			style
 		);
 	}
 
@@ -109,14 +110,15 @@ class BubbleListItem extends React.Component {
 	 */
 	getStylesText() {
 
-		const { alignment } = this.props;
+		const { alignment, styleText } = this.props;
 		const styles = this.styles;
 
 		return Object.assign(
 			{},
 			styles.text.main,
 			styles.text.alignment[alignment],
-			this.getStylesFocus('text')
+			this.getStylesFocus('text'),
+			styleText
 		);
 	}
 
@@ -143,17 +145,14 @@ class BubbleListItem extends React.Component {
 	 */
 	renderContent() {
 
-		const { primaryText, direction } = this.props;
-		let content = (<span style={this.getStylesText()}>{primaryText}</span>);
-
-		if (['left', 'right'].indexOf(direction) >= 0) {
-			content = null;
-		}
+		const { primaryText } = this.props;
 
 		return (
 			<span>
 				{this.renderAvatar('leftAvatar')}
-				{content}
+				<span style={this.getStylesText()}>
+					{primaryText}
+				</span>
 				{this.renderAvatar('rightAvatar')}
 			</span>
 		);

src/components/bubble-list-item/bubble-list-item.prop-types.js

@@ -12,6 +12,8 @@ export default {
 	positionV: PropTypes.string,
 	primaryText: PropTypes.string,
 	rightAvatar: PropTypes.object,
+	style: PropTypes.object,
+	styleText: PropTypes.object,
 	tabIndex: PropTypes.oneOfType([
 		PropTypes.string,
 		PropTypes.number,

src/components/bubble-list-item/bubble-list-item.spec.js

@@ -217,15 +217,14 @@ describe('<BubbleListItem />', () => {
 		expect(getDomFromString(wrapper.find('a').html()).getAttribute('tabindex')).toEqual('1');
 	});
 
-	it('renderContent returns null if direction is left or right', () => {
+	it('renderContent returns something if direction is left or right', () => {
 		const props = {
 			isOpen: true,
 			primaryText: 'Hallo',
 			direction: 'left',
 		};
 		const instance = new BubbleListItem(props, context);
-		expect(instance.renderContent().props.children[1]).toEqual(null);
+		expect(typeof instance.renderContent().props.children[1]).toEqual('object');
 	});
 
 });
-

src/components/bubble-list-item/bubble-list-item.styles.js

@@ -107,6 +107,12 @@ export default ({ paper, baseTheme }) => {
 				right: {
 					marginRight: 24,
 				},
+				up: {
+					display: 'none',
+				},
+				down: {
+					display: 'none',
+				}
 			},
 		},
 

src/components/speed-dial/speed-dial.js

@@ -98,9 +98,11 @@ class SpeedDial extends React.Component {
 	 * @returns {void}
 	 */
 	componentWillReceiveProps(nextProps) {
-		this.setState({
-			isOpen: nextProps.isOpen,
-		});
+		if (this.isControlled) {
+			this.setState({
+				isOpen: nextProps.isOpen,
+			});
+		}
 	}
 
 	/**

src/examples/example-bug11/example-bug11.js

@@ -85,6 +85,9 @@ class ExampleBasic extends React.Component {
 							return (
 								<BubbleListItem
 									key={item.primaryText}
+									styleText={{
+										backgroundColor: '#ccc',
+									}}
 									onClick={this.handleToogleSpeedDialOpen}
 									{...item}
 								/>

src/examples/example-direction/example-direction.js

@@ -8,14 +8,17 @@ const avatarImgUrl = 'http://lorempixel.com/80/80/people';
 const list = {
 	items: [
 		{
+			id: 0,
 			primaryText: 'Kerem Suer',
 			rightAvatar: <Avatar src={`${avatarImgUrl}/6`} />,
 		},
 		{
+			id: 1,
 			primaryText: 'Raquel Parrado',
 			rightAvatar: <Avatar src={`${avatarImgUrl}/7`} />,
 		},
 		{
+			id: 2,
 			primaryText: 'Write',
 			rightAvatar: <Avatar backgroundColor={blue500} icon={<IconEdit />} />,
 		},
@@ -33,8 +36,8 @@ const ExampleDirection = () => {
 					alignment="up"
 					direction="left"
 				>
-					{list.items.reverse().map((item, index) => {
-						return (<BubbleListItem key={index} {...item} />);
+					{list.items.reverse().map((item) => {
+						return (<BubbleListItem key={item.id} {...item} />);
 					})}
 				</BubbleList>
 			</SpeedDial>

src/examples/example-toolbox/example-toolbox.js

@@ -12,12 +12,15 @@ import { SpeedDial } from '../../speed-dial';
 const list = {
 	items: [
 		{
+			id: '0',
 			icon: <IconForwards color={cyan900} />,
 		},
 		{
+			id: '1',
 			icon: <IconPause color={cyan900} />,
 		},
 		{
+			id: '2',
 			icon: <IconRewind color={cyan900} />,
 		},
 	],
@@ -75,10 +78,10 @@ const Toolbox = ({ onClickCloseToolbox }) => (
 		<BottomNavigation
 			style={{ background: teal300 }}
 		>
-			{[].concat(list.items).reverse().map((item, index) => {
+			{[].concat(list.items).reverse().map((item) => {
 				return (
 					<BottomNavigationItem
-						key={index}
+						key={item.id}
 						onTouchTap={onClickCloseToolbox}
 						{...item}
 					/>);

src/examples/table-props/table-props.js

@@ -223,6 +223,16 @@ const props = {
 			required: false,
 			desc: 'This is the index to define the tabIndex for the link.',
 		},
+		style: {
+			type: 'object',
+			required: false,
+			desc: 'This style object defines the styles for the `root` element.',
+		},
+		styleText: {
+			type: 'object',
+			required: false,
+			desc: 'This style object defines the styles for the `text` element.',
+		},
 		onClick: {
 			type: 'function',
 			required: false,