yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-07 16:29:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Unmount InputWithAutofocus after close

Browse Source
This commit is contained in:
soupette 2018-05-24 17:49:17 +02:00
parent 20d896c92a
commit 81a96bcc46
3 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js
View File

@ -1,6 +1,6 @@
/** /**
* *
* InputWithAutofocus that programatically manage the autofocus of another one * InputWithAutoFocus that programatically manage the autofocus of another one
*/ */
import React from 'react'; import React from 'react';
@ -30,7 +30,7 @@ const getInputType = (attrType) => {
}; };
class InputWithAutofocus extends React.Component { class InputWithAutoFocus extends React.Component {
componentDidMount() { componentDidMount() {
if (this.props.filterToFocus === this.props.index) { if (this.props.filterToFocus === this.props.index) {
return new Promise(resolve => { return new Promise(resolve => {
@ -63,7 +63,7 @@ class InputWithAutofocus extends React.Component {
} }
} }
InputWithAutofocus.propTypes = { InputWithAutoFocus.propTypes = {
filter: PropTypes.object.isRequired, filter: PropTypes.object.isRequired,
filterToFocus: PropTypes.oneOfType([ filterToFocus: PropTypes.oneOfType([
PropTypes.object, PropTypes.object,
@ -76,4 +76,4 @@ InputWithAutofocus.propTypes = {
schema: PropTypes.object.isRequired, schema: PropTypes.object.isRequired,
}; };
export default InputWithAutofocus; export default InputWithAutoFocus;

4
packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js
View File

@ -12,7 +12,7 @@ import InputSelect from 'components/InputSelect/Loadable';
import Add from './Add'; import Add from './Add';
import Div from './Div'; import Div from './Div';
import InputWithAutofocus from './InputWithAutofocus'; import InputWithAutoFocus from './InputWithAutoFocus';
import InputWrapper from './InputWrapper'; import InputWrapper from './InputWrapper';
import Remove from './Remove'; import Remove from './Remove';
@ -50,7 +50,7 @@ function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onC
/> />
<Wrapper> <Wrapper>
{show && ( {show && (
<InputWithAutofocus <InputWithAutoFocus
filter={filter} filter={filter}
filterToFocus={filterToFocus} filterToFocus={filterToFocus}
index={index} index={index}

23
packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js
View File

@ -22,6 +22,8 @@ import SpanStyled from './SpanStyled';
import Wrapper from './Wrapper'; import Wrapper from './Wrapper';
class FiltersPickWrapper extends React.PureComponent { class FiltersPickWrapper extends React.PureComponent {
state = { showInput: false };
componentDidMount() { componentDidMount() {
// Display the first filter // Display the first filter
if (this.props.appliedFilters.length === 0) { if (this.props.appliedFilters.length === 0) {
@ -36,6 +38,25 @@ class FiltersPickWrapper extends React.PureComponent {
if (prevProps.show !== show && show && appliedFilters.length === 0) { if (prevProps.show !== show && show && appliedFilters.length === 0) {
this.handleClickAdd(); this.handleClickAdd();
} }
if (prevProps.show !== show) {
if (show) {
this.mountInput();
} else {
this.unmountInput();
}
}
}
mountInput = () => this.setState({ showInput: true });
unmountInput = () => {
return new Promise(resolve => {
setTimeout(() => {
this.setState({ showInput: false });
resolve();
}, 500);
});
} }
generateActions = () => ([ generateActions = () => ([
@ -137,7 +158,7 @@ class FiltersPickWrapper extends React.PureComponent {
onClickAdd={this.handleClickAdd} onClickAdd={this.handleClickAdd}
onClickRemove={this.handleClickRemove} onClickRemove={this.handleClickRemove}
schema={schema} schema={schema}
show={show} show={this.state.showInput}
showAddButton={this.shouldDisplayAddButton(key)} showAddButton={this.shouldDisplayAddButton(key)}
/> />
))} ))}