Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

popup compatible with native data props

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-12-02 09:47:44 +02:00
parent 209a150216
commit 9696796d6b
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/common/Popup/Popup.js
View file

@ -4,7 +4,7 @@ const classnames = require('classnames');
const FocusLock = require('react-focus-lock').default;
const styles = require('./styles');
const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest }) => {
const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest, ...props }) => {
const labelRef = React.useRef(null);
const [autoDirection, setAutoDirection] = React.useState(null);
const menuOnMouseDown = React.useCallback((event) => {
@ -59,6 +59,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
}
}, [open]);
return renderLabel({
...props,
ref: labelRef,
className: styles['label-container'],
children: open ?

9
storybook/stories/Popup/Popup.js
View file

@ -22,12 +22,15 @@ storiesOf('Popup', module).add('Popup', () => {
action('onCloseRequest')(event);
closeMenu();
}, []);
const domEventHandler = React.useCallback((event) => {
action('domEventHandler')(event.currentTarget.dataset);
}, []);
return (
<Popup
open={menuOpen}
direction={'bottom'}
renderLabel={({ ref, className, children }) => (
<Button ref={ref} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
renderLabel={({ className, children, ...props }) => (
<Button {...props} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
POPUP LABEL
{children}
</Button>
@ -41,6 +44,8 @@ storiesOf('Popup', module).add('Popup', () => {
)}
dataset={{ prop: 'value' }}
onCloseRequest={onCloseRequest}
data-prop={'data-value'}
onMouseEnter={domEventHandler}
/>
);
});

4
storybook/stories/Popup/styles.less
View file

@ -13,7 +13,7 @@
margin: 2rem;
padding: 0 1.2rem;
color: var(--color-surfacelighter);
background: var(--color-backgroundlight);
background: var(--color-secondarylight);
.popup-menu-container {
right: initial;
@ -22,11 +22,11 @@
.menu-container {
width: 20rem;
height: 20rem;
padding: 2rem;
background: var(--color-surface);
overflow-y: auto;
.random-button {
margin: 2rem;
padding: 0.8rem;
background: var(--color-primary);
text-align: center;