mirror
/
Sonarr
mirror of https://github.com/Sonarr/Sonarr
1
0
Fork 0
Code Issues Releases Wiki Activity

Update react-tether package

This commit is contained in:
Mark McDowall 2019-03-05 19:38:39 -08:00
parent de7e805718
commit e7bfea8c69
7 changed files with 360 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSelectSeries.js
View File

@ -34,6 +34,8 @@ class ImportSeriesSelectSeries extends Component {
super(props, context);
this._seriesLookupTimeout = null;
this._buttonRef = {};
this._contentRef = {};
this.state = {
term: props.id,
@ -44,14 +46,6 @@ class ImportSeriesSelectSeries extends Component {
//
// Control
_setButtonRef = (ref) => {
this._buttonRef = ref;
}
_setContentRef = (ref) => {
this._contentRef = ref;
}
_addListener() {
window.addEventListener('click', this.onWindowClick);
}
@ -64,14 +58,18 @@ class ImportSeriesSelectSeries extends Component {
// Listeners
onWindowClick = (event) => {
const button = ReactDOM.findDOMNode(this._buttonRef);
const content = ReactDOM.findDOMNode(this._contentRef);
const button = ReactDOM.findDOMNode(this._buttonRef.current);
const content = ReactDOM.findDOMNode(this._contentRef.current);
if (!button) {
if (!button || !content) {
return;
}
if (!button.contains(event.target) && content && !content.contains(event.target) && this.state.isOpen) {
if (
!button.contains(event.target) &&
!content.contains(event.target) &&
this.state.isOpen
) {
this.setState({ isOpen: false });
this._removeListener();
}
@ -134,124 +132,145 @@ class ImportSeriesSelectSeries extends Component {
element: styles.tether
}}
{...tetherOptions}
>
<Link
ref={this._setButtonRef}
className={styles.button}
component="div"
onPress={this.onPress}
>
{
isLookingUpSeries && isQueued && !isPopulated &&
<LoadingIndicator
className={styles.loading}
size={20}
/>
}
renderTarget={
(ref) => {
this._buttonRef = ref;
{
isPopulated && selectedSeries && isExistingSeries &&
<Icon
className={styles.warningIcon}
name={icons.WARNING}
kind={kinds.WARNING}
/>
}
return (
<div ref={ref}>
<Link
className={styles.button}
component="div"
onPress={this.onPress}
>
{
isLookingUpSeries && isQueued && !isPopulated ?
<LoadingIndicator
className={styles.loading}
size={20}
/> :
null
}
{
isPopulated && selectedSeries &&
<ImportSeriesTitle
title={selectedSeries.title}
year={selectedSeries.year}
network={selectedSeries.network}
isExistingSeries={isExistingSeries}
/>
}
{
isPopulated && selectedSeries && isExistingSeries ?
<Icon
className={styles.warningIcon}
name={icons.WARNING}
kind={kinds.WARNING}
/> :
null
}
{
isPopulated && !selectedSeries &&
<div className={styles.noMatches}>
<Icon
className={styles.warningIcon}
name={icons.WARNING}
kind={kinds.WARNING}
/>
{
isPopulated && selectedSeries ?
<ImportSeriesTitle
title={selectedSeries.title}
year={selectedSeries.year}
network={selectedSeries.network}
isExistingSeries={isExistingSeries}
/> :
null
}
{
isPopulated && !selectedSeries ?
<div className={styles.noMatches}>
<Icon
className={styles.warningIcon}
name={icons.WARNING}
kind={kinds.WARNING}
/>
No match found!
</div>
}
</div> :
null
}
{
!isFetching && !!error &&
<div>
<Icon
className={styles.warningIcon}
title={errorMessage}
name={icons.WARNING}
kind={kinds.WARNING}
/>
{
!isFetching && !!error ?
<div>
<Icon
className={styles.warningIcon}
title={errorMessage}
name={icons.WARNING}
kind={kinds.WARNING}
/>
Search failed, please try again later.
</div> :
null
}
<div className={styles.dropdownArrowContainer}>
<Icon
name={icons.CARET_DOWN}
/>
</div>
</Link>
</div>
);
}
}
renderElement={
(ref) => {
this._contentRef = ref;
<div className={styles.dropdownArrowContainer}>
<Icon
name={icons.CARET_DOWN}
/>
</div>
</Link>
if (!this.state.isOpen) {
return;
}
{
this.state.isOpen &&
<div
ref={this._setContentRef}
className={styles.contentContainer}
>
<div className={styles.content}>
<div className={styles.searchContainer}>
<div className={styles.searchIconContainer}>
<Icon name={icons.SEARCH} />
return (
<div
ref={ref}
className={styles.contentContainer}
>
<div className={styles.content}>
<div className={styles.searchContainer}>
<div className={styles.searchIconContainer}>
<Icon name={icons.SEARCH} />
</div>
<TextInput
className={styles.searchInput}
name={`${name}_textInput`}
value={this.state.term}
onChange={this.onSearchInputChange}
/>
<FormInputButton
kind={kinds.DEFAULT}
spinnerIcon={icons.REFRESH}
canSpin={true}
isSpinning={isFetching}
onPress={this.onRefreshPress}
>
<Icon name={icons.REFRESH} />
</FormInputButton>
</div>
<TextInput
className={styles.searchInput}
name={`${name}_textInput`}
value={this.state.term}
onChange={this.onSearchInputChange}
/>
<FormInputButton
kind={kinds.DEFAULT}
spinnerIcon={icons.REFRESH}
canSpin={true}
isSpinning={isFetching}
onPress={this.onRefreshPress}
>
<Icon name={icons.REFRESH} />
</FormInputButton>
</div>
<div className={styles.results}>
{
items.map((item) => {
return (
<ImportSeriesSearchResultConnector
key={item.tvdbId}
tvdbId={item.tvdbId}
title={item.title}
year={item.year}
network={item.network}
onPress={this.onSeriesSelect}
/>
);
})
}
<div className={styles.results}>
{
items.map((item) => {
return (
<ImportSeriesSearchResultConnector
key={item.tvdbId}
tvdbId={item.tvdbId}
title={item.title}
year={item.year}
network={item.network}
onPress={this.onSeriesSelect}
/>
);
})
}
</div>
</div>
</div>
</div>
);
}
}
</TetherComponent>
/>
);
}
}

163
frontend/src/Components/Form/EnhancedSelectInput.js
View File

@ -87,6 +87,9 @@ class EnhancedSelectInput extends Component {
constructor(props, context) {
super(props, context);
this._buttonRef = {};
this._optionsRef = {};
this.state = {
isOpen: false,
selectedIndex: getSelectedIndex(props),
@ -106,14 +109,6 @@ class EnhancedSelectInput extends Component {
//
// Control
_setButtonRef = (ref) => {
this._buttonRef = ref;
}
_setOptionsRef = (ref) => {
this._optionsRef = ref;
}
_addListener() {
window.addEventListener('click', this.onWindowClick);
}
@ -126,8 +121,8 @@ class EnhancedSelectInput extends Component {
// Listeners
onWindowClick = (event) => {
const button = ReactDOM.findDOMNode(this._buttonRef);
const options = ReactDOM.findDOMNode(this._optionsRef);
const button = ReactDOM.findDOMNode(this._buttonRef.current);
const options = ReactDOM.findDOMNode(this._optionsRef.current);
if (!button || this.state.isMobile) {
return;
@ -276,75 +271,91 @@ class EnhancedSelectInput extends Component {
element: styles.tether
}}
{...tetherOptions}
>
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<Link
ref={this._setButtonRef}
className={classNames(
className,
hasError && styles.hasError,
hasWarning && styles.hasWarning,
isDisabled && disabledClassName
)}
isDisabled={isDisabled}
onBlur={this.onBlur}
onKeyDown={this.onKeyDown}
onPress={this.onPress}
>
<SelectedValueComponent
{...selectedValueOptions}
{...selectedOption}
isDisabled={isDisabled}
>
{selectedOption ? selectedOption.value : null}
</SelectedValueComponent>
renderTarget={
(ref) => {
this._buttonRef = ref;
<div
className={isDisabled ?
styles.dropdownArrowContainerDisabled :
styles.dropdownArrowContainer
}
>
<Icon
name={icons.CARET_DOWN}
/>
</div>
</Link>
</Measure>
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<div ref={ref}>
<Link
className={classNames(
className,
hasError && styles.hasError,
hasWarning && styles.hasWarning,
isDisabled && disabledClassName
)}
isDisabled={isDisabled}
onBlur={this.onBlur}
onKeyDown={this.onKeyDown}
onPress={this.onPress}
>
<SelectedValueComponent
{...selectedValueOptions}
{...selectedOption}
isDisabled={isDisabled}
>
{selectedOption ? selectedOption.value : null}
</SelectedValueComponent>
{
isOpen && !isMobile &&
<div
ref={this._setOptionsRef}
className={styles.optionsContainer}
style={{
minWidth: width
}}
>
<div className={styles.options}>
{
values.map((v, index) => {
return (
<OptionComponent
key={v.key}
id={v.key}
isSelected={index === selectedIndex}
{...v}
isMobile={false}
onSelect={this.onSelect}
>
{v.value}
</OptionComponent>
);
})
}
</div>
</div>
<div
className={isDisabled ?
styles.dropdownArrowContainerDisabled :
styles.dropdownArrowContainer
}
>
<Icon
name={icons.CARET_DOWN}
/>
</div>
</Link>
</div>
</Measure>
);
}
}
</TetherComponent>
renderElement={
(ref) => {
this._optionsRef = ref;
if (!isOpen || isMobile) {
return;
}
return (
<div
ref={ref}
className={styles.optionsContainer}
style={{
minWidth: width
}}
>
<div className={styles.options}>
{
values.map((v, index) => {
return (
<OptionComponent
key={v.key}
id={v.key}
isSelected={index === selectedIndex}
{...v}
isMobile={false}
onSelect={this.onSelect}
>
{v.value}
</OptionComponent>
);
})
}
</div>
</div>
);
}
}
/>
{
isMobile &&

86
frontend/src/Components/Menu/Menu.js
View File

@ -38,6 +38,9 @@ class Menu extends Component {
constructor(props, context) {
super(props, context);
this._menuRef = {};
this._menuContentRef = {};
this.state = {
isMenuOpen: false,
maxHeight: 0
@ -60,7 +63,7 @@ class Menu extends Component {
return;
}
const menu = ReactDOM.findDOMNode(this.refs.menu);
const menu = ReactDOM.findDOMNode(this._menuRef.current);
if (!menu) {
return;
@ -73,9 +76,13 @@ class Menu extends Component {
}
setMaxHeight() {
this.setState({
maxHeight: this.getMaxHeight()
});
const maxHeight = this.getMaxHeight();
if (maxHeight !== this.state.maxHeight) {
this.setState({
maxHeight
});
}
}
_addListener() {
@ -99,10 +106,10 @@ class Menu extends Component {
// Listeners
onWindowClick = (event) => {
const menu = ReactDOM.findDOMNode(this.refs.menu);
const menuContent = ReactDOM.findDOMNode(this.refs.menuContent);
const menu = ReactDOM.findDOMNode(this._menuRef.current);
const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
if (!menu) {
if (!menu || !menuContent) {
return;
}
@ -116,7 +123,17 @@ class Menu extends Component {
this.setMaxHeight();
}
onWindowScroll = () => {
onWindowScroll = (event) => {
if (!this._menuContentRef.current) {
return;
}
const menuContent = ReactDOM.findDOMNode(this._menuContentRef.current);
if (menuContent && menuContent.contains(event.target)) {
return;
}
this.setMaxHeight();
}
@ -158,35 +175,46 @@ class Menu extends Component {
}
);
const content = React.cloneElement(
childrenArray[1],
{
ref: 'menuContent',
alignMenu,
maxHeight,
isOpen: isMenuOpen
}
);
return (
<TetherComponent
classes={{
element: styles.tether
}}
{...tetherOptions[alignMenu]}
>
<div
ref="menu"
className={className}
>
{button}
</div>
renderTarget={
(ref) => {
this._menuRef = ref;
{
isMenuOpen &&
content
return (
<div
ref={ref}
className={className}
>
{button}
</div>
);
}
}
</TetherComponent>
renderElement={
(ref) => {
this._menuContentRef = ref;
if (!isMenuOpen) {
return null;
}
return React.cloneElement(
childrenArray[1],
{
ref,
alignMenu,
maxHeight,
isOpen: isMenuOpen
}
);
}
}
/>
);
}
}

67
frontend/src/Components/Tooltip/Popover.js
View File

@ -105,42 +105,53 @@ class Popover extends Component {
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}
renderTarget={
(ref) => (
<span
ref={ref}
className={className}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
<div className={styles.popover}>
<div
className={classNames(
styles.arrow,
styles[position]
)}
/>
{anchor}
</span>
)
}
renderElement={
(ref) => {
if (!this.state.isOpen) {
return null;
}
<div className={styles.title}>
{title}
</div>
return (
<div
ref={ref}
className={styles.popoverContainer}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
<div className={styles.popover}>
<div
className={classNames(
styles.arrow,
styles[position]
)}
/>
<div className={styles.body}>
{body}
<div className={styles.title}>
{title}
</div>
<div className={styles.body}>
{body}
</div>
</div>
</div>
</div>
);
}
}
</TetherComponent>
/>
);
}
}

63
frontend/src/Components/Tooltip/Tooltip.js
View File

@ -105,44 +105,55 @@ class Tooltip extends Component {
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}
renderTarget={
(ref) => (
<span
ref={ref}
className={className}
onClick={this.onClick}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{anchor}
</span>
)
}
renderElement={
(ref) => {
if (!this.state.isOpen) {
return;
}
return (
<div
className={classNames(
styles.tooltip,
styles[kind]
)}
ref={ref}
className={styles.tooltipContainer}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
<div
className={classNames(
styles.arrow,
styles[kind],
styles[position]
styles.tooltip,
styles[kind]
)}
/>
>
<div
className={classNames(
styles.arrow,
styles[kind],
styles[position]
)}
/>
<div className={styles.body}>
{tooltip}
<div className={styles.body}>
{tooltip}
</div>
</div>
</div>
</div>
);
}
}
</TetherComponent>
/>
);
}
}

2
package.json
View File

@ -101,7 +101,7 @@
"react-router-dom": "4.3.1",
"react-slider": "0.11.2",
"react-tabs": "3.0.0",
"react-tether": "1.0.1",
"react-tether": "2.0.0",
"react-text-truncate": "0.14.0",
"react-virtualized": "9.21.0",
"redux": "4.0.1",

14
yarn.lock
View File

@ -6940,13 +6940,13 @@ react-tabs@3.0.0:
classnames "^2.2.0"
prop-types "^15.5.0"
react-tether@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-1.0.1.tgz#6e5173764d4f9b8bef6d1b20ff51972909674942"
integrity sha512-OsgGk2hmsIpnpMl1Uq9aYKopG4V7bDuz2msNYPaRosF0CBbpa1YVF9P1qJ8MRsf1Zj/oK/I2uH++S+ffqxL98A==
react-tether@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/react-tether/-/react-tether-2.0.0.tgz#84928b9636f1fe0a6874d1e450e7822e87f8cb07"
integrity sha512-iJnqTQV42Pf7w4xrg3g1gxSxbBCXleDt8AzlSoAqRINqB+mhcJUeegpB8SFMJ/nKT7lSfMkx3GvUfYY+9sPBGw==
dependencies:
prop-types "^15.5.8"
tether "^1.4.3"
prop-types "^15.6.2"
tether "^1.4.5"
react-text-truncate@0.14.0:
version "0.14.0"
@ -8243,7 +8243,7 @@ terser@^3.16.1:
source-map "~0.6.1"
source-map-support "~0.5.9"
tether@^1.4.3:
tether@^1.4.5:
version "1.4.5"
resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.5.tgz#8efd7b35572767ba502259ba9b1cc167fcf6f2c1"
integrity sha512-fysT1Gug2wbRi7a6waeu39yVDwiNtvwj5m9eRD+qZDSHKNghLo6KqP/U3yM2ap6TNUL2skjXGJaJJTJqoC31vw==