Skip to content

Commit

Permalink
Update lifecycles for react17 of Input/Search/NumberPicker/Search
Browse files Browse the repository at this point in the history
  • Loading branch information
frankqian authored and youluna committed Oct 23, 2019
1 parent 2ee6371 commit f41edd2
Show file tree
Hide file tree
Showing 8 changed files with 51 additions and 29 deletions.
2 changes: 1 addition & 1 deletion docs/input/demo/addon.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ ReactDOM.render(<div>
addonTextAfter=".com"
size="large"
defaultValue="alibaba"
maxLength={2}
maxLength={5}
aria-label="input with config of addonTextBefore and addonTextAfter" /><br /><br />

<Input
Expand Down
1 change: 0 additions & 1 deletion docs/input/demo/autoheight.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ ReactDOM.render(
<div >
<Input.TextArea
autoHeight
trim
aria-label="auto height"
placeholder="autoHeight"
onKeyDown={(e, opts) => {
Expand Down
4 changes: 2 additions & 2 deletions scripts/server/tpls/demo.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@
}
</script>
<script src="//shadow.elemecdn.com/npm/[email protected]/dist/polyfill.min.js"></script>
<script src="//shadow.elemecdn.com/npm/react@16.8.3/umd/react.development.js"></script>
<script src="//shadow.elemecdn.com/npm/react-dom@16.8.3/umd/react-dom.development.js"></script>
<script src="//shadow.elemecdn.com/npm/react@16.0.0/umd/react.development.js"></script>
<script src="//shadow.elemecdn.com/npm/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="//shadow.elemecdn.com/npm/[email protected]/min/moment-with-locales.js"></script>
<script>
window.mountNode = document.getElementById('mount-node');
Expand Down
14 changes: 9 additions & 5 deletions src/input/base.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';

import { func } from '../util';
import zhCN from '../locale/zh-cn';

Expand Down Expand Up @@ -109,13 +111,15 @@ class Base extends React.Component {
locale: zhCN.Input,
};

componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
static getDerivedStateFromProps(nextProps, prevState) {
if ('value' in nextProps && nextProps.value !== prevState.value) {
const value = nextProps.value;
this.setState({
return {
value: value === undefined || value === null ? '' : value,
});
};
}

return null;
}

ieHack(value) {
Expand Down Expand Up @@ -275,4 +279,4 @@ class Base extends React.Component {
}
}

export default Base;
export default polyfill(Base);
4 changes: 1 addition & 3 deletions src/input/textarea.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,7 @@ export default class TextArea extends Base {
}
}

componentWillReceiveProps(nextProps) {
super.componentWillReceiveProps(nextProps);

componentDidUpdate(nextProps) {
if (this.props.autoHeight && this.props.value !== nextProps.value) {
this._resizeTextArea(nextProps.value);
}
Expand Down
14 changes: 9 additions & 5 deletions src/number-picker/number-picker.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';

import Icon from '../icon';
import Button from '../button';
import Input from '../input';
Expand Down Expand Up @@ -154,13 +156,15 @@ class NumberPicker extends React.Component {
};
}

componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
static getDerivedStateFromProps(nextProps, prevState) {
if ('value' in nextProps && nextProps.value !== prevState.value) {
const value = nextProps.value;
this.setState({
return {
value: value === undefined || value === null ? '' : value,
});
};
}

return null;
}

onChange(value, e) {
Expand Down Expand Up @@ -569,4 +573,4 @@ class NumberPicker extends React.Component {
}
}

export default NumberPicker;
export default polyfill(NumberPicker);
35 changes: 23 additions & 12 deletions src/search/Search.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';

import Input from '../input';
import Select from '../select';
import Button from '../button';
Expand Down Expand Up @@ -157,19 +159,28 @@ class Search extends React.Component {
};
}

componentWillReceiveProps(nextProps) {
const state = {};
if ('value' in nextProps) {
state.value =
typeof nextProps.value === 'undefined' ? '' : nextProps.value;
static getDerivedStateFromProps(nextProps, prevState) {
const nextState = {};
if ('value' in nextProps && nextProps.value !== prevState.value) {
const value = nextProps.value;
nextState.value =
value === undefined || value === null ? '' : nextProps.value;
}
if ('filterValue' in nextProps) {
state.filterValue =
typeof nextProps.filterValue === 'undefined'
? ''
: nextProps.filterValue;

if (
'filterValue' in nextProps &&
nextProps.filterValue !== prevState.filterValue
) {
const filterValue = nextProps.filterValue;
nextState.filterValue =
filterValue === undefined ? '' : filterValue;
}
this.setState(state);

if (Object.keys(nextState).length > 0) {
return nextState;
}

return null;
}

onChange = (value, ...argv) => {
Expand Down Expand Up @@ -351,4 +362,4 @@ class Search extends React.Component {
}
}

export default Search;
export default polyfill(Search);
6 changes: 6 additions & 0 deletions test/input/textarea-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ describe('TextArea', () => {
.simulate('change', { target: { value: '20' } });
assert(wrapper.find('textarea').prop('value') === '20');

wrapper.setProps({value: 'helloworld'});
assert(wrapper.find('textarea').prop('value') === 'helloworld');

done();
});

Expand All @@ -64,6 +67,9 @@ describe('TextArea', () => {
.simulate('change', { target: { value: '20' } });
assert(wrapper.find('textarea').prop('value') === '123');

wrapper.setProps({value: 'helloworld'});
assert(wrapper.find('textarea').prop('value') === 'helloworld');

done();
});

Expand Down

0 comments on commit f41edd2

Please sign in to comment.