lucid-ui
Version:
A UI component library from AppNexus.
52 lines (51 loc) • 1.63 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Portal } from '../../../index';
export default createClass({
getInitialState: function getInitialState() {
return {
left: 216,
top: 460
};
},
handleClick: function handleClick(event) {
var _event$target$getBoun = event.target.getBoundingClientRect(),
height = _event$target$getBoun.height,
width = _event$target$getBoun.width;
this.setState({
left: event.pageX - width / 2,
top: event.pageY - height / 2
});
},
render: function render() {
var _this$state = this.state,
left = _this$state.left,
top = _this$state.top;
return /*#__PURE__*/React.createElement(Portal, {
portalId: "example-portal123",
className: "example-portal-container",
style: {
width: 128,
height: 128,
backgroundColor: '#2abbb0',
color: '#fff',
boxShadow: '0 0 36px rgba(0, 0, 0, 0.5)',
transition: 'left .5s, top .5s',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer',
position: 'absolute',
left: left,
top: top
},
onClick: this.handleClick
}, /*#__PURE__*/React.createElement("section", {
style: {
pointerEvents: 'none',
textAlign: 'center'
}
}, /*#__PURE__*/React.createElement("p", null, "click to move"), /*#__PURE__*/React.createElement("p", null, "(", left, ", ", top, ")"), /*#__PURE__*/React.createElement("p", null, "inspect me")));
}
});