lucid-ui
Version:
A UI component library from Xandr.
106 lines • 3.73 kB
JavaScript
import React, { useState } from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Portal from './Portal';
import Button from '../Button/Button';
export default {
title: 'Utility/Portal',
component: Portal,
parameters: {
docs: {
description: {
component: Portal.peek.description,
},
},
},
};
/* Basic */
export const Basic = (args) => {
const [state, setState] = useState({
left: 216,
top: 460,
});
const handleClick = (event) => {
const { height, width } = event.target.getBoundingClientRect();
setState({
left: event.pageX - width / 2,
top: event.pageY - height / 2,
});
};
const { left, top } = state;
return (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: handleClick },
React.createElement("section", { style: {
pointerEvents: 'none',
textAlign: 'center',
} },
React.createElement("p", null, "click to move"),
React.createElement("p", null,
"(",
left,
", ",
top,
")"),
React.createElement("p", null, "inspect me"))));
};
/* Context */
export const Context = () => {
const context = React.createContext({
display: 'hello',
});
class ExampleApp extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
increment: () => {
this.setState(({ counter }) => ({ counter: counter + 1 }));
},
};
}
render() {
return (React.createElement(context.Provider, { value: this.state }, this.props.children));
}
}
ExampleApp.propTypes = {
children: PropTypes.node,
};
const Component = createClass({
render() {
return (React.createElement(ExampleApp, null,
React.createElement(context.Consumer, null, ({ counter, increment }) => (React.createElement("div", null,
React.createElement("h1", null,
"counter: ",
counter),
React.createElement(Button, { kind: 'primary', onClick: increment }, "increment")))),
React.createElement(Portal, { style: {
marginTop: 20,
border: '1px solid #333',
padding: 10,
width: 100,
height: 100,
backgroundColor: 'yellow',
} },
React.createElement(context.Consumer, null, ({ counter, increment }) => (React.createElement("div", null,
"inside the portal counter: ",
counter,
React.createElement(Button, { kind: 'primary', onClick: increment }, "increment")))))));
},
});
return React.createElement(Component, null);
};
//# sourceMappingURL=Portal.stories.js.map