lucid-ui
Version:
A UI component library from Xandr.
160 lines • 6.66 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Context = exports.Basic = void 0;
var react_1 = __importStar(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var prop_types_1 = __importDefault(require("prop-types"));
var Portal_1 = __importDefault(require("./Portal"));
var Button_1 = __importDefault(require("../Button/Button"));
exports.default = {
title: 'Utility/Portal',
component: Portal_1.default,
parameters: {
docs: {
description: {
component: Portal_1.default.peek.description,
},
},
},
};
/* Basic */
var Basic = function (args) {
var _a = (0, react_1.useState)({
left: 216,
top: 460,
}), state = _a[0], setState = _a[1];
var handleClick = function (event) {
var _a = event.target.getBoundingClientRect(), height = _a.height, width = _a.width;
setState({
left: event.pageX - width / 2,
top: event.pageY - height / 2,
});
};
var left = state.left, top = state.top;
return (react_1.default.createElement(Portal_1.default, { 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: 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"))));
};
exports.Basic = Basic;
/* Context */
var Context = function () {
var context = react_1.default.createContext({
display: 'hello',
});
var ExampleApp = /** @class */ (function (_super) {
__extends(ExampleApp, _super);
function ExampleApp(props) {
var _this = _super.call(this, props) || this;
_this.state = {
counter: 0,
increment: function () {
_this.setState(function (_a) {
var counter = _a.counter;
return ({ counter: counter + 1 });
});
},
};
return _this;
}
ExampleApp.prototype.render = function () {
return (react_1.default.createElement(context.Provider, { value: this.state }, this.props.children));
};
return ExampleApp;
}(react_1.default.Component));
ExampleApp.propTypes = {
children: prop_types_1.default.node,
};
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement(ExampleApp, null,
react_1.default.createElement(context.Consumer, null, function (_a) {
var counter = _a.counter, increment = _a.increment;
return (react_1.default.createElement("div", null,
react_1.default.createElement("h1", null,
"counter: ",
counter),
react_1.default.createElement(Button_1.default, { kind: 'primary', onClick: increment }, "increment")));
}),
react_1.default.createElement(Portal_1.default, { style: {
marginTop: 20,
border: '1px solid #333',
padding: 10,
width: 100,
height: 100,
backgroundColor: 'yellow',
} },
react_1.default.createElement(context.Consumer, null, function (_a) {
var counter = _a.counter, increment = _a.increment;
return (react_1.default.createElement("div", null,
"inside the portal counter: ",
counter,
react_1.default.createElement(Button_1.default, { kind: 'primary', onClick: increment }, "increment")));
}))));
},
});
return react_1.default.createElement(Component, null);
};
exports.Context = Context;
//# sourceMappingURL=Portal.stories.js.map