Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move to getderivedstate

This commit is contained in:
Robert Elliott 2018-08-07 13:57:45 +02:00
parent bbc7e13e3e
commit da5d6600e5
1 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
plugins/woocommerce-admin/client/components/chart/index.js
View File

@ -14,17 +14,28 @@ import Legend from './legend';
const WIDE_BREAKPOINT = 1130;
function getOrderedKeys( data ) {
return [
...new Set(
data.reduce( ( accum, curr ) => {
Object.keys( curr ).forEach( key => key !== 'date' && accum.push( key ) );
return accum;
}, [] )
),
]
.map( key => ( {
key,
total: data.reduce( ( a, c ) => a + c[ key ], 0 ),
} ) )
.sort( ( a, b ) => b.total - a.total );
}
class Chart extends Component {
constructor( props ) {
super( props );
this.getOrderedKeys = this.getOrderedKeys.bind( this );
this.state = {
data: props.data,
orderedKeys: this.getOrderedKeys( props.data ).map( d => ( {
...d,
visible: true,
focus: true,
} ) ),
data: null,
orderedKeys: null,
bodyWidth: document.getElementById( 'wpbody' ).getBoundingClientRect().width,
};
this.handleLegendToggle = this.handleLegendToggle.bind( this );
@ -32,16 +43,23 @@ class Chart extends Component {
this.updateDimensions = this.updateDimensions.bind( this );
}
// @TODO change this to `getDerivedStateFromProps` in React 16.4
UNSAFE_componentWillReceiveProps( nextProps ) {
this.setState( {
data: nextProps.data,
orderedKeys: this.getOrderedKeys( nextProps.data ).map( d => ( {
...d,
visible: true,
focus: true,
} ) ),
} );
static getDerivedStateFromProps( nextProps, prevState ) {
if ( prevState.data !== nextProps.data ) {
return {
data: nextProps.data,
orderedKeys: getOrderedKeys( nextProps.data ).map( d => ( {
...d,
visible: true,
focus: true,
} ) ),
};
}
return null;
}
shouldComponentUpdate( nextProps, nextState ) {
return this.state.data !== null && this.state.data !== nextState.data;
}
componentDidMount() {
@ -52,22 +70,6 @@ class Chart extends Component {
window.removeEventListener( 'resize', this.updateDimensions );
}
getOrderedKeys( data ) {
return [
...new Set(
data.reduce( ( accum, curr ) => {
Object.keys( curr ).forEach( key => key !== 'date' && accum.push( key ) );
return accum;
}, [] )
),
]
.map( key => ( {
key,
total: data.reduce( ( a, c ) => a + c[ key ], 0 ),
} ) )
.sort( ( a, b ) => b.total - a.total );
}
handleLegendToggle( event ) {
this.setState( {
orderedKeys: this.state.orderedKeys.map( d => ( {