Dropdown cpm developed buttonProps added.

Document upgrade
Button cpm buttonRef prop added.
Dropdown target prop removed.
Input cmp unnecessary overflow removed.

Author: abdurrahmanekr

README.md

@@ -218,6 +218,7 @@ import { Button } from 'react-chat-elements'
 | type | none | string | button type (outlined, transparent) |
 | disabled | none | string | button is disabled? |
 | text | none | string | button text |
+| buttonRef | none | function | button ref |
 
 ## Popup Component
 
@@ -320,17 +321,16 @@ import { Navbar } from 'react-chat-elements'
 import { Dropdown } from 'react-chat-elements'
 
 <Dropdown
-    target={{
-        X: 400,
-        Y: 100
-    }}
+	buttonProps={{
+		text: 'Dropdown',
+	}}
     items={[
         'merhaba',
         'lorem',
         'ipsum',
         'dolor',
         'sit',
-        'amet'
+        'amet',
     ]}/>
 ```
 
@@ -342,4 +342,4 @@ import { Dropdown } from 'react-chat-elements'
 | animationPosition | nortwest | string | animation start position (nortwest, norteast, southwest, southeast) |
 | items | none | array | dropdown items array |
 | onSelect | none | function | item on select |
-| target | { X: 0, Y: 0 } | object | dropdown target |
+| buttonProps | none | object | button properties |

example/App.js

@@ -101,19 +101,6 @@ export class App extends Component {
 
 		return (
 			<div className='container'>
-				<Dropdown
-					target={{
-						X: 400,
-						Y: 100
-					}}
-					items={[
-						's.a',
-						'lorem',
-						'ipsum',
-						'dolor',
-						'sit',
-						'amet'
-					]}/>
 				<div
 					className='chat-list'>
 					<SideBar
@@ -180,21 +167,18 @@ export class App extends Component {
 						multiline={true}
 						// buttonsFloat='left'
 						rightButtons={
-							<div>
-							<Button
-								color='white'
-								backgroundColor='black'
-								onClick={(e => {
-									this.addMessage();
-									this.refs.input.clear();
-								}).bind(this)}
-								icon={{
-									component: <FaSearch />,
-									size: 18,
-									float: 'right'
-								}}/>
-
-							</div>
+							<Dropdown
+								items={[
+									'asdasd',
+									'asdasdasd',
+								]}
+								buttonProps={{
+									text: 'Boşu Boşuna'
+								}}
+								onSelect={(i) => {
+									console.log(`${i}'nci nesne seçildi`)
+								}}
+								animationPosition='southeast'/>
 						}/>
 				</div>
 

src/Button/Button.js

@@ -7,6 +7,7 @@ export class Button extends Component {
 	render() {
 		return (
 			<button
+				ref={this.props.buttonRef}
 				className={classNames('rce-button', this.props.type, this.props.className)}
 				style={{
 					backgroundColor: this.props.backgroundColor,
@@ -39,6 +40,7 @@ Button.defaultProps = {
 	backgroundColor: '#3979aa',
 	color: 'white',
 	className: null,
+	buttonRef: null,
 };
 
-export default Button;
+export default Button;

src/Dropdown/Dropdown.css

@@ -1,3 +1,6 @@
+.rce-dropdown-container {
+	position: relative;
+}
 .rce-dropdown {
     padding: 5px 10px;
     background: #f5f5f5;
@@ -30,18 +33,30 @@
 
 .rce-dropdown-open__nortwest {
     transform-origin: left top;
+    left: 0;
+    top: 100%;
+    margin-top: 5px
 }
 
 .rce-dropdown-open__norteast {
     transform-origin: right top;
+    right: 0;
+    top: 100%;
+    margin-top: 5px
 }
 
 .rce-dropdown-open__southwest {
     transform-origin: left bottom;
+    left: 0;
+    bottom: 100%;
+    margin-bottom: 5px
 }
 
 .rce-dropdown-open__southeast {
     transform-origin: right bottom;
+    right: 0;
+    bottom: 100%;
+    margin-bottom: 5px
 }
 
 .rce-dropdown ul {
@@ -88,4 +103,4 @@
     100% {
         opacity: 1;
     }
-}
+}

src/Dropdown/Dropdown.js

@@ -1,46 +1,64 @@
 import React, { Component } from 'react';
 import './Dropdown.css';
 
+import Button from '../Button/Button';
+
 const classNames = require('classnames');
 
 export class Dropdown extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			show: false,
+		};
+	}
+
+	onBlur(e) {
+		if (this.state.show === true)
+			this.setState({show: false});
+	}
+
 	render() {
-		if (this.props.show === true)
 		return (
-			<div
-				style={{
-					top: this.props.target.Y,
-					left: this.props.target.X,
-				}}
-				className={
-					classNames(
-						'rce-dropdown',
-						this.props.animationType,
-						'rce-dropdown-open__' + this.props.animationPosition,
-					)
-				}>
-				<ul>
-					{
-						this.props.items.map((x, i) => (
-							<li key={i} onClick={() => this.props.onSelect(i)}>
-								<a>{x}</a>
-							</li>
-						))
-					}
-				</ul>
+			<div className='rce-dropdown-container' onBlur={this.onBlur.bind(this)}>
+				{
+					<Button
+						{...this.props.buttonProps}
+						onClick={() => this.setState({show: !this.state.show})}/>
+				}
+				{
+					this.state.show &&
+					<div
+						className={
+							classNames(
+								'rce-dropdown',
+								this.props.animationType,
+								'rce-dropdown-open__' + this.props.animationPosition,
+							)
+						}>
+						<ul>
+							{
+								this.props.items.map((x, i) => (
+									<li key={i} onMouseDown={(e) => this.props.onSelect(i)}>
+										<a>{x}</a>
+									</li>
+								))
+							}
+						</ul>
+					</div>
+				}
 			</div>
 		);
-		return null;
 	}
 }
 
 Dropdown.defaultProps = {
-	show: false,
 	animationType: 'default',
 	animationPosition: 'nortwest',
 	items: [],
 	onSelect: Function,
-	target: { X: 0, Y: 0 },
+	buttonProps: null
 };
 
-export default Dropdown;
+export default Dropdown;

src/Dropdown/__tests__/__snapshots__/Dropdown.js.snap

@@ -1,3 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dropdown component should render without issues 1`] = `null`;
+exports[`Dropdown component should render without issues 1`] = `
+<div
+  className="rce-dropdown-container"
+  onBlur={[Function]}
+>
+  <Button
+    backgroundColor="#3979aa"
+    buttonRef={null}
+    className={null}
+    color="white"
+    disabled={false}
+    icon={null}
+    onClick={[Function]}
+    text=""
+    type={null}
+  />
+</div>
+`;

src/Input/Input.css

@@ -1,6 +1,5 @@
 .rce-container-input {
     display: flex;
-    overflow: hidden;
     min-width: 100%;
     box-sizing: border-box;
     flex-direction: row;