Permalink
Browse files

feat(Placement): Added React Popper

  • Loading branch information...
HHogg committed Oct 2, 2018
1 parent cb89a3c commit 91400c5cca86b1665813a2f2cf0f691151a9aab4
@@ -31,6 +31,7 @@
"open-color": "^1.6.3",
"popper.js": "^1.14.4",
"prismjs": "^1.14.0",
"react-popper": "^1.0.2",
"react-transition-group": "^2.3.0",
"remarkable": "^1.7.1",
"remarkable-react": "^1.3.0",
@@ -0,0 +1,49 @@
:root {
--Placement-arrow-size: var(--size--x4);
}

.Placement {
position: absolute;
margin: var(--Placement-arrow-size);
}

.Placement__arrow {
position: absolute;
width: var(--Placement-arrow-size);
height: var(--Placement-arrow-size);
pointer-events: none;
}

.Placement__arrow,
.Placement__arrow:first-child,
.Placement__arrow:last-child {
margin: var(--Placement-arrow-size);
}

.Placement--top .Placement__arrow {
top: 100%;
transform:
translateY(calc(-50% + var(--Placement-arrow-size) * -1))
rotate(45deg);
}

.Placement--right .Placement__arrow {
right: 100%;
transform:
translateX(calc(50% - var(--Placement-arrow-size) * -1))
rotate(45deg);
}

.Placement--bottom .Placement__arrow {
bottom: 100%;
transform:
translateY(calc(50% - var(--Placement-arrow-size) * -1))
rotate(45deg);
}

.Placement--left .Placement__arrow {
left: 100%;
transform:
translateX(calc(-50% + var(--Placement-arrow-size) * -1))
rotate(45deg);
}
@@ -0,0 +1,32 @@
import PropTypes from 'prop-types';
import React, { Component, createContext } from 'react';
import { Popper } from 'react-popper';
import classnames from 'classnames';
import './Placement.css';

export const PlacementArrowPropsContext = createContext();

export default class Placement extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
};

render() {
const { children, ...rest } = this.props;

return (
<Popper { ...rest }>
{ ({ arrowProps, placement, ref, style }) => (
<PlacementArrowPropsContext.Provider value={ arrowProps }>
<div
className={ classnames('Placement', `Placement--${placement}`) }
ref={ ref }
style={ style }>
{ children }
</div>
</PlacementArrowPropsContext.Provider>
) }
</Popper>
);
}
}
@@ -0,0 +1,18 @@
import React, { Component } from 'react';
import Base from '../Base/Base';
import { PlacementArrowPropsContext } from './Placement';

export default class PlacementArrow extends Component {
render() {
return (
<PlacementArrowPropsContext.Consumer>
{ ({ ref, style }) => (
<Base { ...this.props }
className="Placement__arrow"
fRef={ ref }
style={ style } />
) }
</PlacementArrowPropsContext.Consumer>
);
}
}
@@ -0,0 +1 @@
export { Manager as default } from 'react-popper';
@@ -0,0 +1 @@
export { Reference as default } from 'react-popper';
@@ -0,0 +1,28 @@
export default class PlacementReferenceElement {
constructor(rect) {
this.update(rect);
}

update({ height, width, x, y }) {
this.rect = {
top: y,
left: x,
right: x + width,
bottom: y + height,
width: width,
height: height,
};
}

getBoundingClientRect() {
return this.rect;
}

get clientWidth() {
return this.getBoundingClientRect().width;
}

get clientHeight() {
return this.getBoundingClientRect().height;
}
}
@@ -34,6 +34,10 @@ export { default as ListItem } from './List/ListItem';
export { default as Markdown } from './Markdown/Markdown';
export { default as Menu } from './Menu/Menu';
export { default as MenuItem } from './Menu/MenuItem';
export { default as Placement } from './Placement/Placement';
export { default as PlacementManager } from './Placement/PlacementManager';
export { default as PlacementReference } from './Placement/PlacementReference';
export { default as PlacementReferenceElement } from './Placement/PlacementReferenceElement';
export { default as RadioButton } from './RadioButton/RadioButton';
export { default as Responsive } from './Responsive/Responsive';
export { default as Separator } from './Separator/Separator';

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 91400c5

Please sign in to comment.