Added trigger and popup UI components - v1

no issue

- Adds new components for membersJs trigger button and popup menu with style
- Adds basic trigger interaction between trigger button and popup menu
- Uses hardcoded member values
- Adds `prop-types` dependency
This commit is contained in:
Rish 2020-03-30 19:05:35 +05:30
parent f761672e32
commit 3dca602545
6 changed files with 196 additions and 15 deletions

View File

@ -8,6 +8,7 @@
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1" "react-scripts": "3.4.1"

View File

@ -1,24 +1,11 @@
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; import './App.css';
import ParentContainer from './components/ParentContainer';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <ParentContainer name="MembersJS" />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

View File

@ -0,0 +1,47 @@
import TriggerComponent from './TriggerComponent';
import PopupMenuComponent from './PopupMenuComponent';
const React = require("react");
const PropTypes = require("prop-types");
export default class ParentContainer extends React.Component {
static propTypes = {
name: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
showPopup: false
};
}
onTriggerToggle() {
this.setState({
showPopup: !this.state.showPopup
});
}
renderPopupMenu() {
if (this.state.showPopup) {
return (
<PopupMenuComponent name={this.props.name} />
);
}
return null;
}
renderTriggerComponent() {
return (
<TriggerComponent name={this.props.name} onToggle= {(e) => this.onTriggerToggle()} isPopupOpen={this.state.showPopup} />
)
}
render() {
return (
<div>
{this.renderPopupMenu()}
{this.renderTriggerComponent()}
</div>
);
}
}

View File

@ -0,0 +1,66 @@
const React = require("react");
const PropTypes = require("prop-types");
export default class PopupMenuComponent extends React.Component {
static propTypes = {
name: PropTypes.string,
};
render() {
const hoverStyle = {
zIndex: '2147483000',
position: 'fixed',
bottom: '100px',
right: '20px',
width: '250px',
minHeight: '50px',
maxHeight: '100px',
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
opacity: '1',
height: 'calc(100% - 120px)',
borderRadius: '8px',
overflow: 'hidden',
};
const launcherStyle = {
width: '100%',
height: '100%',
position: 'absolute',
};
const buttonStyle = {
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
right: '0px',
overflow: 'hidden',
paddingTop: '15px',
paddingBottom: '15px',
textAlign: 'left'
};
return (
<div style={hoverStyle}>
<div style={launcherStyle}>
<div style={buttonStyle}>
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{paddingLeft: '12px',paddingRight: '12px', color: 'grey', fontSize: '12px'}}>
SIGNED IN AS
</div>
<div style={{paddingLeft: '12px',paddingRight: '12px', paddingBottom: '9px'}}>
rish@ghost.org
</div>
<div style={{paddingLeft: '12px',paddingRight: '12px', paddingTop: '12px', borderTop: '1px solid black', cursor: 'pointer'}}>
<div> Logout </div>
</div>
</div>
</div>
</div>
</div>
);
}
}

View File

@ -0,0 +1,80 @@
import logo from '../logo.svg';
import closeIcon from '../images/close.png';
const React = require("react");
const PropTypes = require("prop-types");
export default class TriggerComponent extends React.Component {
static propTypes = {
name: PropTypes.string,
};
onToggle() {
this.props.onToggle();
}
renderTriggerIcon() {
if (this.props.isPopupOpen) {
return (
<img src={closeIcon} alt="logo" style={{ width: '45px', userSelect: 'none' }} />
)
}
return (
<img src={logo} className="App-logo" alt="logo" style={{ width: '60px', userSelect: 'none' }} />
)
}
render() {
const hoverStyle = {
zIndex: '2147483000',
position: 'fixed',
bottom: '20px',
right: '20px',
width: '60px',
height: '60px',
boxShadow: 'rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px',
borderRadius: '50%',
backgroundColor: '#e53935',
animation: '250ms ease 0s 1 normal none running animation-bhegco',
transition: 'opacity 0.3s ease 0s',
};
const launcherStyle = {
position: 'absolute',
top: '0px',
left: '0px',
width: '60px',
height: '60px',
cursor: 'pointer',
transformOrigin: 'center center',
backfaceVisibility: 'hidden',
WebkitFontSmoothing: 'antialiased',
borderRadius: '50%',
overflow: 'hidden',
};
const buttonStyle = {
display: 'flex',
WebkitBoxAlign: 'center',
alignItems: 'center',
WebkitBoxPack: 'center',
justifyContent: 'center',
position: 'absolute',
top: '0px',
bottom: '0px',
width: '100%',
opacity: '1',
transform: 'rotate(0deg) scale(1)',
transition: 'transform 0.16s linear 0s, opacity 0.08s linear 0s',
};
return (
<div style={hoverStyle} onClick={(e) => this.onToggle(e)}>
<div style={launcherStyle}>
<div style={buttonStyle}>
{this.renderTriggerIcon()}
</div>
</div>
</div>
);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 904 B