gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: stop using unsafe or deprecated React methods (#1542)

Browse Source
This commit is contained in:
Caleb 2018-07-31 14:59:22 -06:00 committed by Shawn Erquhart
parent 95c744ee3e
commit d5f59de2d2
10 changed files with 53 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/netlify-cms-backend-test/src/AuthenticationPage.js
View File

@ -41,7 +41,7 @@ export default class AuthenticationPage extends React.Component {
config: ImmutablePropTypes.map.isRequired,
};
componentWillMount() {
componentDidMount() {
/**
* Allow login screen to be skipped for demo purposes.
*/

6
packages/netlify-cms-core/src/components/Collection/Entries/EntriesCollection.js
View File

@ -31,10 +31,10 @@ class EntriesCollection extends React.Component {
}
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
const { collection, loadEntries } = this.props;
if (nextProps.collection !== collection) {
loadEntries(nextProps.collection);
if (collection !== prevProps.collection) {
loadEntries(collection);
}
}

8
packages/netlify-cms-core/src/components/Collection/Entries/EntriesSearch.js
View File

@ -27,10 +27,10 @@ class EntriesSearch extends React.Component {
searchEntries(searchTerm);
}
componentWillReceiveProps(nextProps) {
if (this.props.searchTerm === nextProps.searchTerm) return;
const { searchEntries } = this.props;
searchEntries(nextProps.searchTerm);
componentDidUpdate(prevProps) {
if (prevProps.searchTerm === this.props.searchTerm) return;
const { searchEntries } = prevProps;
searchEntries(this.props.searchTerm);
}
componentWillUnmount() {

6
packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js
View File

@ -46,7 +46,7 @@ export default class EntryListing extends React.Component {
const { collections, entries, publicFolder, viewStyle } = this.props;
const inferedFields = this.inferFields(collections);
const entryCardProps = { collection: collections, inferedFields, publicFolder, viewStyle };
return entries.map((entry, idx) => <EntryCard {...{ ...entryCardProps, entry, key: idx }} />);
return entries.map((entry, idx) => <EntryCard {...entryCardProps} entry={entry} key={idx} />);
};
renderCardsForMultipleCollections = () => {
@ -56,8 +56,8 @@ export default class EntryListing extends React.Component {
const collection = collections.find(coll => coll.get('name') === collectionName);
const collectionLabel = collection.get('label');
const inferedFields = this.inferFields(collection);
const entryCardProps = { collection, entry, inferedFields, publicFolder, key: idx, collectionLabel };
return <EntryCard {...entryCardProps} />;
const entryCardProps = { collection, entry, inferedFields, publicFolder, collectionLabel };
return <EntryCard {...entryCardProps} key={idx} />;
});
};

18
packages/netlify-cms-core/src/components/Editor/Editor.js
View File

@ -133,20 +133,20 @@ class Editor extends React.Component {
}
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
/**
* If the old slug is empty and the new slug is not, a new entry was just
* saved, and we need to update navigation to the correct url using the
* slug.
*/
const newSlug = nextProps.entryDraft && nextProps.entryDraft.getIn(['entry', 'slug']);
if (!this.props.slug && newSlug && nextProps.newEntry) {
navigateToEntry(this.props.collection.get('name'), newSlug);
nextProps.loadEntry(nextProps.collection, newSlug);
const newSlug = this.props.entryDraft && this.props.entryDraft.getIn(['entry', 'slug']);
if (!prevProps.slug && newSlug && this.props.newEntry) {
navigateToEntry(prevProps.collection.get('name'), newSlug);
this.props.loadEntry(this.props.collection, newSlug);
}
if (this.props.entry === nextProps.entry) return;
const { entry, newEntry, fields, collection } = nextProps;
if (prevProps.entry === this.props.entry) return;
const { entry, newEntry, fields, collection } = this.props;
if (entry && !entry.get('isFetching') && !entry.get('error')) {
@ -156,10 +156,10 @@ class Editor extends React.Component {
*/
const values = deserializeValues(entry.get('data'), fields);
const deserializedEntry = entry.set('data', values);
const fieldsMetaData = nextProps.entryDraft && nextProps.entryDraft.get('fieldsMetaData');
const fieldsMetaData = this.props.entryDraft && this.props.entryDraft.get('fieldsMetaData');
this.createDraft(deserializedEntry, fieldsMetaData);
} else if (newEntry) {
this.props.createEmptyDraft(collection);
prevProps.createEmptyDraft(collection);
}
}

10
packages/netlify-cms-core/src/components/Editor/EditorScrollSync/ScrollSyncPane.js
View File

@ -29,14 +29,14 @@ export default class ScrollSyncPane extends Component {
};
componentDidMount() {
this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
this.node = this.props.attachTo || ReactDOM.findDOMNode(this) // eslint-disable-line react/no-find-dom-node
this.context.registerPane(this.node, this.props.group)
}
componentWillReceiveProps(nextProps) {
if (this.props.group !== nextProps.group) {
this.context.unregisterPane(this.node, this.props.group)
this.context.registerPane(this.node, nextProps.group)
componentDidUpdate(prevProps) {
if (prevProps.group !== this.props.group) {
this.context.unregisterPane(this.node, prevProps.group)
this.context.registerPane(this.node, this.props.group)
}
}

10
packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrary.js
View File

@ -34,7 +34,7 @@ class MediaLibrary extends React.Component {
this.props.loadMedia();
}
componentWillReceiveProps(nextProps) {
UNSAFE_componentWillReceiveProps(nextProps) {
/**
* We clear old state from the media library when it's being re-opened
* because, when doing so on close, the state is cleared while the media
@ -44,9 +44,13 @@ class MediaLibrary extends React.Component {
if (isOpening) {
this.setState({ selectedFile: {}, query: '' });
}
}
if (isOpening && (this.props.privateUpload !== nextProps.privateUpload)) {
this.props.loadMedia({ privateUpload: nextProps.privateUpload });
componentDidUpdate(prevProps) {
const isOpening = !prevProps.isVisible && this.props.isVisible;
if (isOpening && (prevProps.privateUpload !== this.props.privateUpload)) {
this.props.loadMedia({ privateUpload: this.props.privateUpload });
}
}

4
packages/netlify-cms-widget-file/src/withFileControl.js
View File

@ -91,8 +91,8 @@ export default function withFileControl({ forImage } = {}) {
return false;
}
componentWillReceiveProps(nextProps) {
const { mediaPaths, value, onRemoveInsertedMedia, onChange } = nextProps;
componentDidUpdate() {
const { mediaPaths, value, onRemoveInsertedMedia, onChange } = this.props;
const mediaPath = mediaPaths.get(this.controlID);
if (mediaPath && mediaPath !== value) {
onChange(mediaPath);

35
packages/netlify-cms-widget-list/src/ListControl.js
View File

@ -90,8 +90,17 @@ export default class ListControl extends React.Component {
itemsCollapsed: List(itemsCollapsed),
value: valueToString(value),
};
}
this.valueType = null;
getValueType = () => {
const { field } = this.props;
if (field.get('fields')) {
return valueTypes.MULTIPLE;
} else if (field.get('field')) {
return valueTypes.SINGLE;
} else {
return null;
}
}
/**
@ -104,26 +113,6 @@ export default class ListControl extends React.Component {
return true;
}
componentDidMount() {
const { field } = this.props;
if (field.get('fields')) {
this.valueType = valueTypes.MULTIPLE;
} else if (field.get('field')) {
this.valueType = valueTypes.SINGLE;
}
}
componentWillUpdate(nextProps) {
if (this.props.field === nextProps.field) return;
if (nextProps.field.get('fields')) {
this.valueType = valueTypes.MULTIPLE;
} else if (nextProps.field.get('field')) {
this.valueType = valueTypes.SINGLE;
}
}
handleChange = (e) => {
const { onChange } = this.props;
const oldValue = this.state.value;
@ -151,7 +140,7 @@ export default class ListControl extends React.Component {
handleAdd = (e) => {
e.preventDefault();
const { value, onChange } = this.props;
const parsedValue = (this.valueType === valueTypes.SINGLE) ? null : Map();
const parsedValue = (this.getValueType() === valueTypes.SINGLE) ? null : Map();
this.setState({ itemsCollapsed: this.state.itemsCollapsed.push(false) });
onChange((value || List()).push(parsedValue));
}
@ -168,7 +157,7 @@ export default class ListControl extends React.Component {
const { value, metadata, onChange, field } = this.props;
const collectionName = field.get('name');
const newObjectValue = this.getObjectValue(index).set(fieldName, newValue);
const parsedValue = (this.valueType === valueTypes.SINGLE) ? newObjectValue.first() : newObjectValue;
const parsedValue = (this.getValueType() === valueTypes.SINGLE) ? newObjectValue.first() : newObjectValue;
const parsedMetadata = {
[collectionName]: Object.assign(metadata ? metadata.toJS() : {}, newMetadata ? newMetadata[collectionName] : {}),
};

11
packages/netlify-cms-widget-relation/src/RelationControl.js
View File

@ -82,14 +82,17 @@ export default class RelationControl extends React.Component {
}
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
/**
* Load extra post data into the store after first query.
*/
if (this.didInitialSearch) return;
if (nextProps.queryHits !== this.props.queryHits && nextProps.queryHits.get && nextProps.queryHits.get(this.controlID)) {
if (this.props.queryHits !== prevProps.queryHits && this.props.queryHits.get && this.props.queryHits.get(this.controlID)) {
this.didInitialSearch = true;
const suggestion = nextProps.queryHits.get(this.controlID);
const suggestion = this.props.queryHits.get(this.controlID);
if (suggestion && suggestion.length === 1) {
const val = this.getSuggestionValue(suggestion[0]);
this.props.onChange(val, { [nextProps.field.get('collection')]: { [val]: suggestion[0].data } });
this.props.onChange(val, { [this.props.field.get('collection')]: { [val]: suggestion[0].data } });
}
}
}