aleabodo/react-animated-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only pixel. Input integer instead of string. Style changed a little

Browse Source
This commit is contained in:
Alexander Bell 2018-06-06 09:12:49 -07:00
parent 3215375309
commit 47aae95143
3 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-animated-menus", "name": "react-animated-menus",
"version": "1.0.4", "version": "1.0.5",
"description": "React component that mounts three dot button that morphs into a menu by clicking on it.", "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
"main": "./lib/index.js", "main": "./lib/index.js",
"license": "MIT", "license": "MIT",

27
src/components/Menu.js
View File

@ -113,7 +113,7 @@ class App extends Component {
duration: function(targetElements, i, l) { duration: function(targetElements, i, l) {
return 400 + (i * 200); return 400 + (i * 200);
}, },
easing: 'easeOutCubic', easing: 'easeInOutCubic',
offset: '-=1700' offset: '-=1700'
}); });
} else { } else {
@ -180,34 +180,35 @@ class App extends Component {
const inputWidth = this.props.width; const inputWidth = this.props.width;
const inputHeight = this.props.height; const inputHeight = this.props.height;
if(!(inputWidth ||inputHeight)) { if(!(inputWidth || inputHeight) || !isNaN(inputWidth) || isNaN(inputHeight)) {
console.log("Please define a height OR width!"); console.log("Please define a height OR width correctly! Only define one of both. It has to be an integer!");
return {
width: 0,
height: 0
} }
} else {
//Units and values seperated //Units and values seperated
if(inputWidth !== undefined) { if(inputWidth !== undefined) {
//Width //Width
const unitWidth = inputWidth.replace(/[\d]+/g,""); const valueWidth = parseInt(inputWidth);
const valueWidth = parseFloat(inputWidth);
//Height //Height
const unitHeight = unitWidth;
const valueHeight = valueWidth * 2.5; const valueHeight = valueWidth * 2.5;
return { return {
width: String(valueWidth) + unitWidth, width: String(valueWidth) + 'px',
height: String(valueHeight) + unitHeight height: String(valueHeight) + 'px'
} }
} }
//Height //Height
const unitHeight = inputHeight.replace(/[\d]+/g,""); const valueHeight = parseInt(inputHeight);
const valueHeight = parseFloat(inputHeight);
//Width //Width
const unitWidth = unitHeight;
const valueWidth = valueHeight / 2.5; const valueWidth = valueHeight / 2.5;
return { return {
width: String(valueWidth) + unitWidth, width: String(valueWidth) + 'px',
height: String(valueHeight) + unitHeight height: String(valueHeight) + 'px'
}
} }
} }

2
src/styles/Menu.css
View File

@ -67,7 +67,7 @@
} }
.Menu_button:hover { .Menu_button:hover {
background-color: rgb(227, 227, 227); background-color: rgb(227, 227, 227);
padding-left: 5%; padding-left: 10%;
} }
.Menu_button:active { .Menu_button:active {
transition: background-color 0.1s; transition: background-color 0.1s;