added hovered, clicked, onClick, mouseOver and mouseOut props to NeuB…

…utton and updated docs
mrsaeeddev · Jan 14, 2020 · 950d4a2 · 950d4a2
1 parent 15bea53
commit 950d4a2
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -41,14 +41,38 @@ NeuButton is a component which is equivalent to Button component in other librar
 ###### Props
 This component accepts 1 prop:
 1. ```text``` - text which you want as text in button
+2. ```hovered``` - this prop accepts a boolean value
+3. ```clicked``` - this prop accepts a boolean value
+4. ```mouseOver``` - this prop accepts a function
+5. ```mouseOut``` - this prop accepts a function
+6. ```onClick``` - this prop also accepts a function
 
 ```jsx
 import { NeuButton } from 'neumorphic-ui';
 
 class Example extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      hovered: false,
+      clicked: false
+    }
+  }
+
+  onClick = () => {
+  this.setState({ hovered:false, clicked: !this.state.clicked });  }
+
+  mouseOver = () => {
+    !this.state.clicked && this.setState({hovered:true})
+  }
+
+  mouseOut = () => {
+    this.setState({hovered: false})
+  }
+
   render () {
     return (
-      <NeuButton text="Neumorphic UI" />
+  <NeuButton hovered={this.state.hovered} clicked={this.state.clicked} onClick={this.onClick} mouseOver={this.mouseOver} mouseOut={this.mouseOut} text="Neumorhpic Button" />
     )
   }
 }

diff --git a/example/src/App.js b/example/src/App.js
@@ -6,10 +6,23 @@ export default class App extends Component {
   constructor(props){
     super(props);
     this.state = {
-      value: ""
+      value: "",
+      hovered: false,
+      clicked: false
     }
   }
 
+  onClick = () => {
+  this.setState({ hovered:false, clicked: !this.state.clicked });  }
+
+  mouseOver = () => {
+    !this.state.clicked && this.setState({hovered:true})
+  }
+
+  mouseOut = () => {
+    this.setState({hovered: false})
+  }
+
   render () {
     return (
       <div style={{width:'60%', textAlign:'center',paddingTop:'100px',paddingBottom:'100px', margin: '0px auto'}}>
@@ -20,7 +33,7 @@ export default class App extends Component {
         <br />
         <br />
         <br />
-        <NeuButton text="Neumorhpic Button" />
+        <NeuButton hovered={this.state.hovered} clicked={this.state.clicked} onClick={this.onClick} mouseOver={this.mouseOver} mouseOut={this.mouseOut} text="Neumorhpic Button" />
         <br />
         <br />
         <NeuProgressBar progress="80%" />

diff --git a/src/components/NeuButton.js b/src/components/NeuButton.js
@@ -3,29 +3,22 @@ import PropTypes from 'prop-types'
 
 export class NeuButton extends Component {
   static propTypes = {
-    text: PropTypes.string
-  }
-  constructor(props){
-    super(props);
-    this.state = {
-      hovered: false,
-      clicked: false
-    }
-  }
-
-  onClick = () => {
-  this.setState({ hovered:false, clicked: !this.state.clicked });  }
-
-  mouseOver = () => {
-    !this.state.clicked && this.setState({hovered:true})
-  }
-
-  mouseOut = () => {
-    this.setState({hovered: false})
+    text: PropTypes.string,
+    hovered: PropTypes.bool,
+    clicked: PropTypes.bool,
+    mouseOver: PropTypes.func,
+    mouseOut: PropTypes.func,
+    onClick: PropTypes.func,
   }
+
   render() {
     const {
-      text
+      text,
+      hovered,
+      clicked,
+      mouseOver,
+      mouseOut,
+      onClick
     } = this.props
 
     return (
@@ -35,15 +28,15 @@ export class NeuButton extends Component {
       paddingTop: '20px',
       outline: '0',
       fontWeight: '600',
-      color: this.state.hovered ? '#e0e5ec' : '#b9c2ce',
+      color: hovered ? '#e0e5ec' : '#b9c2ce',
       paddingBottom: '20px',
       textAlign: 'center',
       border: '0',
       cursor: 'pointer',
       width: '100%',
-      backgroundColor: this.state.hovered ? '#b9c2ce' : '#E0E5EC',
-      boxShadow: this.state.clicked ? '9px 9px 16px rgba(0, 0, 0, 0), -9px -9px 16px rgba(247, 251, 255, 0), 9px 9px 16px rgba(0, 0, 0, 0.1) inset, -9px -9px 16px rgba(247, 251, 255, 0.7) inset' : '9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5)',
-    }} onMouseOver={this.mouseOver} onMouseOut={this.mouseOut} onClick={this.onClick}>{text}</div>
+      backgroundColor: hovered ? '#b9c2ce' : '#E0E5EC',
+      boxShadow: clicked ? '9px 9px 16px rgba(0, 0, 0, 0), -9px -9px 16px rgba(247, 251, 255, 0), 9px 9px 16px rgba(0, 0, 0, 0.1) inset, -9px -9px 16px rgba(247, 251, 255, 0.7) inset' : '9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5)',
+    }} onMouseOver={mouseOver} onMouseOut={mouseOut} onClick={onClick}>{text}</div>
     )
   }
 }