github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-16 10:03:51 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New: Replace react-tether with react-popper (#789)

Browse source
This commit is contained in:
Qstick 2019-05-10 21:56:04 -04:00 • committed by GitHub
parent 6ea7f97b16
commit cf40df7606
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 981 additions and 970 deletions
Download patch file Download diff file Expand all files Collapse all files

98
frontend/src/Components/Tooltip/Popover.css
View file

@ -1,97 +1,3 @@
.tether {
z-index: 2000;
}
.popoverContainer {
margin: 10px 15px;
}
.popover {
position: relative;
background-color: $white;
box-shadow: 0 5px 10px $popoverShadowColor;
}
.arrow,
.arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-width: 11px;
border-style: solid;
border-color: transparent;
}
.arrow::after {
border-width: 10px;
content: '';
}
.top {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: $popoverArrowBorderColor;
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: -10px;
border-top-color: $white;
border-bottom-width: 0;
content: ' ';
}
}
.right {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: $popoverArrowBorderColor;
border-left-width: 0;
&::after {
bottom: -10px;
left: 1px;
border-right-color: $white;
border-left-width: 0;
content: ' ';
}
}
.bottom {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: $popoverArrowBorderColor;
&::after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: $white;
content: ' ';
}
}
.left {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: $popoverArrowBorderColor;
&::after {
right: 1px;
bottom: -10px;
border-right-width: 0;
border-left-color: $white;
content: ' ';
}
}
.title {
padding: 10px 20px;
border-bottom: 1px solid $popoverTitleBorderColor;
@ -103,3 +9,7 @@
overflow: auto;
padding: 10px;
}
.tooltipBody {
padding: 0;
}

173
frontend/src/Components/Tooltip/Popover.js
View file

@ -1,160 +1,37 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TetherComponent from 'react-tether';
import classNames from 'classnames';
import isMobileUtil from 'Utilities/isMobile';
import { tooltipPositions } from 'Helpers/Props';
import React from 'react';
import Tooltip from './Tooltip';
import styles from './Popover.css';
const baseTetherOptions = {
skipMoveElement: true,
constraints: [
{
to: 'window',
attachment: 'together',
pin: true
}
]
};
function Popover(props) {
const {
title,
body,
...otherProps
} = props;
const tetherOptions = {
[tooltipPositions.TOP]: {
...baseTetherOptions,
attachment: 'bottom center',
targetAttachment: 'top center'
},
return (
<Tooltip
{...otherProps}
bodyClassName={styles.tooltipBody}
tooltip={
<div>
<div className={styles.title}>
{title}
</div>
[tooltipPositions.RIGHT]: {
...baseTetherOptions,
attachment: 'middle left',
targetAttachment: 'middle right'
},
[tooltipPositions.BOTTOM]: {
...baseTetherOptions,
attachment: 'top center',
targetAttachment: 'bottom center'
},
[tooltipPositions.LEFT]: {
...baseTetherOptions,
attachment: 'middle right',
targetAttachment: 'middle left'
}
};
class Popover extends Component {
//
// Lifecycle
constructor(props, context) {
super(props, context);
this.state = {
isOpen: false
};
this._closeTimeout = null;
}
componentWillUnmount() {
if (this._closeTimeout) {
this._closeTimeout = clearTimeout(this._closeTimeout);
}
}
//
// Listeners
onClick = () => {
if (isMobileUtil()) {
this.setState({ isOpen: !this.state.isOpen });
}
}
onMouseEnter = () => {
if (this._closeTimeout) {
this._closeTimeout = clearTimeout(this._closeTimeout);
}
this.setState({ isOpen: true });
}
onMouseLeave = () => {
this._closeTimeout = setTimeout(() => {
this.setState({ isOpen: false });
}, 100);
}
//
// Render
render() {
const {
className,
anchor,
title,
body,
position
} = this.props;
return (
<TetherComponent
classes={{
element: styles.tether
}}
{...tetherOptions[position]}
>
<span
className={className}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{anchor}
</span>
{
this.state.isOpen &&
<div
className={styles.popoverContainer}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
<div className={styles.popover}>
<div
className={classNames(
styles.arrow,
styles[position]
)}
/>
<div className={styles.title}>
{title}
</div>
<div className={styles.body}>
{body}
</div>
</div>
</div>
}
</TetherComponent>
);
}
<div className={styles.body}>
{body}
</div>
</div>
}
/>
);
}
Popover.propTypes = {
className: PropTypes.string,
anchor: PropTypes.node.isRequired,
title: PropTypes.string.isRequired,
body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
position: PropTypes.oneOf(tooltipPositions.all)
};
Popover.defaultProps = {
position: tooltipPositions.TOP
body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
};
export default Popover;

5
frontend/src/Components/Tooltip/Tooltip.css
View file

@ -1,8 +1,5 @@
.tether {
z-index: 2000;
}
.tooltipContainer {
z-index: $popperZIndex;
margin: 10px 15px;
}

157
frontend/src/Components/Tooltip/Tooltip.js
View file

@ -1,48 +1,12 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TetherComponent from 'react-tether';
import { Manager, Popper, Reference } from 'react-popper';
import classNames from 'classnames';
import isMobileUtil from 'Utilities/isMobile';
import { kinds, tooltipPositions } from 'Helpers/Props';
import Portal from 'Components/Portal';
import styles from './Tooltip.css';
const baseTetherOptions = {
skipMoveElement: true,
constraints: [
{
to: 'window',
attachment: 'together',
pin: true
}
]
};
const tetherOptions = {
[tooltipPositions.TOP]: {
...baseTetherOptions,
attachment: 'bottom center',
targetAttachment: 'top center'
},
[tooltipPositions.RIGHT]: {
...baseTetherOptions,
attachment: 'middle left',
targetAttachment: 'middle right'
},
[tooltipPositions.BOTTOM]: {
...baseTetherOptions,
attachment: 'top center',
targetAttachment: 'bottom center'
},
[tooltipPositions.LEFT]: {
...baseTetherOptions,
attachment: 'middle right',
targetAttachment: 'middle left'
}
};
class Tooltip extends Component {
//
@ -51,11 +15,18 @@ class Tooltip extends Component {
constructor(props, context) {
super(props, context);
this._scheduleUpdate = null;
this._closeTimeout = null;
this.state = {
isOpen: false
};
}
this._closeTimeout = null;
componentDidUpdate() {
if (this._scheduleUpdate && this.state.isOpen) {
this._scheduleUpdate();
}
}
componentWillUnmount() {
@ -67,6 +38,10 @@ class Tooltip extends Component {
//
// Listeners
onMeasure = ({ width }) => {
this.setState({ width });
}
onClick = () => {
if (isMobileUtil()) {
this.setState({ isOpen: !this.state.isOpen });
@ -93,6 +68,7 @@ class Tooltip extends Component {
render() {
const {
className,
bodyClassName,
anchor,
tooltip,
kind,
@ -100,55 +76,81 @@ class Tooltip extends Component {
} = this.props;
return (
<TetherComponent
classes={{
element: styles.tether
}}
{...tetherOptions[position]}
>
<span
className={className}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{anchor}
</span>
{
this.state.isOpen &&
<div
className={styles.tooltipContainer}
<Manager>
<Reference>
{({ ref }) => (
<span
ref={ref}
className={className}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
<div
className={classNames(
styles.tooltip,
styles[kind]
)}
>
<div
className={classNames(
styles.arrow,
styles[kind],
styles[position]
)}
/>
{anchor}
</span>
)}
</Reference>
<div className={styles.body}>
{tooltip}
<Portal>
<Popper
placement={position}
// Disable events to improve performance when many tooltips
// are shown (Quality Definitions for example).
eventsEnabled={false}
modifiers={{
preventOverflow: {
// Fixes positioning for tooltips in the queue
// and likely others.
escapeWithReference: true
}
}}
>
{({ ref, style, placement, scheduleUpdate }) => {
this._scheduleUpdate = scheduleUpdate;
return (
<div
ref={ref}
className={styles.tooltipContainer}
style={style}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{
this.state.isOpen ?
<div
className={classNames(
styles.tooltip,
styles[kind]
)}
>
<div
className={classNames(
styles.arrow,
styles[kind],
styles[placement.split('-')[0]]
)}
/>
<div className={bodyClassName}>
{tooltip}
</div>
</div> :
null
}
</div>
</div>
</div>
}
</TetherComponent>
);
}}
</Popper>
</Portal>
</Manager>
);
}
}
Tooltip.propTypes = {
className: PropTypes.string,
bodyClassName: PropTypes.string.isRequired,
anchor: PropTypes.node.isRequired,
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
@ -156,6 +158,7 @@ Tooltip.propTypes = {
};
Tooltip.defaultProps = {
bodyClassName: styles.body,
kind: kinds.DEFAULT,
position: tooltipPositions.TOP
};