lucid-ui
Version:
A UI component library from AppNexus.
55 lines • 2.14 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var index_1 = require("../../../index");
exports.default = create_react_class_1.default({
getInitialState: function () {
return {
left: 216,
top: 460,
};
},
handleClick: function (event) {
var _a = event.target.getBoundingClientRect(), height = _a.height, width = _a.width;
this.setState({
left: event.pageX - width / 2,
top: event.pageY - height / 2,
});
},
render: function () {
var _a = this.state, left = _a.left, top = _a.top;
return (react_1.default.createElement(index_1.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 },
react_1.default.createElement("section", { style: {
pointerEvents: 'none',
textAlign: 'center',
} },
react_1.default.createElement("p", null, "click to move"),
react_1.default.createElement("p", null,
"(",
left,
", ",
top,
")"),
react_1.default.createElement("p", null, "inspect me"))));
},
});
//# sourceMappingURL=basic.js.map