Skip to content

Commit c0f2567

Browse files
tomautytomauty
committed
Move shouldComponentUpdate to Chart root
1 parent d23ad20 commit c0f2567

File tree

4 files changed

+34
-34
lines changed

4 files changed

+34
-34
lines changed

‎dist/Chart.js‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,18 @@ props));_this.
121121

122122

123123

124+
125+
126+
127+
124128

125129

126130

127131

128132

129133
_onContainerLayout=function(e){return _this.setState({
130134
containerHeight:Math.ceil(e.nativeEvent.layout.height)+1,
131-
containerWidth:Math.ceil(e.nativeEvent.layout.width)});};_this.state={bounds:{min:0,max:0}};return _this;}_createClass(Chart,[{key:'componentDidMount',value:function componentDidMount(){this._computeBounds();}},{key:'componentDidUpdate',value:function componentDidUpdate(props){if(this.props!==props){this._computeBounds();}}},{key:'_computeBounds',value:function _computeBounds(){var min=Infinity;var max=-Infinity;var data=this.props.data||[];data.forEach(function(XYPair){var number=XYPair[1];if(number<min)min=number;if(number>max)max=number;});min=Math.round(min);max=Math.round(max); // Exit if we want tight bounds
135+
containerWidth:Math.ceil(e.nativeEvent.layout.width)});};_this.state={bounds:{min:0,max:0}};return _this;}_createClass(Chart,[{key:'componentDidMount',value:function componentDidMount(){this._computeBounds();}},{key:'shouldComponentUpdate',value:function shouldComponentUpdate(props,state){return props!==this.props||state!==this.state;}},{key:'componentDidUpdate',value:function componentDidUpdate(props){if(this.props!==props){this._computeBounds();}}},{key:'_computeBounds',value:function _computeBounds(){var min=Infinity;var max=-Infinity;var data=this.props.data||[];data.forEach(function(XYPair){var number=XYPair[1];if(number<min)min=number;if(number>max)max=number;});min=Math.round(min);max=Math.round(max); // Exit if we want tight bounds
132136
if(this.props.tightBounds){return this.setState({bounds:{min:min,max:max}});}max=getRoundNumber(max,this.props.verticalGridStep);if(min<0){var step=void 0;if(this.props.verticalGridStep>3){step=Math.abs(max-min)/(this.props.verticalGridStep-1);}else {step=Math.max(Math.abs(max-min)/2,Math.max(Math.abs(min),Math.abs(max)));}step=getRoundNumber(step,this.props.verticalGridStep);var newMin=void 0;var newMax=void 0;if(Math.abs(min)>Math.abs(max)){var m=Math.ceil(Math.abs(min)/step);newMin=step*m*(min>0?1:-1);newMax=step*(this.props.verticalGridStep-m)*(max>0?1:-1);}else {var _m=Math.ceil(Math.abs(max)/step);newMax=step*_m*(max>0?1:-1);newMin=step*(this.props.verticalGridStep-_m)*(min>0?1:-1);}if(min<newMin){newMin-=step;newMax-=step;}if(max>newMax+step){newMin+=step;newMax+=step;}if(max<min){var tmp=max;max=min;min=tmp;}}return this.setState({bounds:{max:max,min:min}});}},{key:'_minVerticalBound',value:function _minVerticalBound()
133137

134138
{
@@ -145,18 +149,18 @@ return this.state.bounds.max>0?this.state.bounds.max:0;}},{key:'render',value:fu
145149
var components={'line':_LineChart2.default,'bar':_BarChart2.default,'pie':_PieChart2.default};
146150
var axisAlign=this.props.type==='line'?'left':'center';
147151
return (
148-
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:148}},
152+
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:152}},
149153
function(){
150154
var ChartType=components[_this2.props.type]||_BarChart2.default;
151155
if(_this2.props.showAxis&&Chart!==_PieChart2.default){
152156
return (
153157
_react2.default.createElement(_reactNative.View,{
154158
ref:'container',
155159
style:[_this2.props.style||{},{flex:1,flexDirection:'column'}],
156-
onLayout:_this2._onContainerLayout,__source:{fileName:_jsxFileName,lineNumber:153}},
160+
onLayout:_this2._onContainerLayout,__source:{fileName:_jsxFileName,lineNumber:157}},
157161

158-
_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}],__source:{fileName:_jsxFileName,lineNumber:158}},
159-
_react2.default.createElement(_reactNative.View,{ref:'yAxis',__source:{fileName:_jsxFileName,lineNumber:159}},
162+
_react2.default.createElement(_reactNative.View,{style:[styles.default,{flexDirection:'row'}],__source:{fileName:_jsxFileName,lineNumber:162}},
163+
_react2.default.createElement(_reactNative.View,{ref:'yAxis',__source:{fileName:_jsxFileName,lineNumber:163}},
160164
_react2.default.createElement(_yAxis2.default,_extends({},
161165
_this2.props,{
162166
data:_this2.props.data,
@@ -165,7 +169,7 @@ width:_this2.props.yAxisWidth,
165169
minVerticalBound:_this2.state.bounds.min,
166170
containerWidth:_this2.state.containerWidth,
167171
maxVerticalBound:_this2.state.bounds.max,
168-
style:{width:_this2.props.yAxisWidth},__source:{fileName:_jsxFileName,lineNumber:160}}))),
172+
style:{width:_this2.props.yAxisWidth},__source:{fileName:_jsxFileName,lineNumber:164}}))),
169173

170174

171175
_react2.default.createElement(ChartType,_extends({},
@@ -174,19 +178,19 @@ data:_this2.props.data,
174178
width:_this2.state.containerWidth-_this2.props.yAxisWidth,
175179
height:_this2.state.containerHeight-_this2.props.xAxisHeight,
176180
minVerticalBound:_this2.state.bounds.min,
177-
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:171}}))),
181+
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:175}}))),
178182

179183

180184
function(){
181185
return (
182-
_react2.default.createElement(_reactNative.View,{ref:'xAxis',__source:{fileName:_jsxFileName,lineNumber:182}},
186+
_react2.default.createElement(_reactNative.View,{ref:'xAxis',__source:{fileName:_jsxFileName,lineNumber:186}},
183187
_react2.default.createElement(_xAxis2.default,_extends({},
184188
_this2.props,{
185189
width:_this2.state.containerWidth-_this2.props.yAxisWidth,
186190
data:_this2.props.data,
187191
height:_this2.props.xAxisHeight,
188192
align:axisAlign,
189-
style:{marginLeft:_this2.props.yAxisWidth-1},__source:{fileName:_jsxFileName,lineNumber:183}}))));}()));}
193+
style:{marginLeft:_this2.props.yAxisWidth-1},__source:{fileName:_jsxFileName,lineNumber:187}}))));}()));}
190194

191195

192196

@@ -198,15 +202,15 @@ return (
198202
_react2.default.createElement(_reactNative.View,{
199203
ref:'container',
200204
onLayout:_this2._onContainerLayout,
201-
style:[_this2.props.style||{},styles.default],__source:{fileName:_jsxFileName,lineNumber:198}},
205+
style:[_this2.props.style||{},styles.default],__source:{fileName:_jsxFileName,lineNumber:202}},
202206

203207
_react2.default.createElement(ChartType,_extends({},
204208
_this2.props,{
205209
data:_this2.props.data,
206210
width:_this2.state.containerWidth,
207211
height:_this2.state.containerHeight,
208212
minVerticalBound:_this2.state.bounds.min,
209-
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:203}}))));}()));}}]);return Chart;}(_react.Component);Chart.defaultProps={data:[],animated:true,animationDuration:300,axisColor:C.BLACK,axisLabelColor:C.BLACK,axisLineWidth:1,axisTitleColor:C.GREY,axisTitleFontSize:16,chartFontSize:14,dataPointRadius:3,gridColor:C.BLACK,gridLineWidth:0.5,hideHorizontalGridLines:false,hideVerticalGridLines:false,horizontalScale:1,labelFontSize:10,lineWidth:1,showAxis:true,showDataPoint:false,showGrid:true,showXAxisLabels:true,showYAxisLabels:true,tightBounds:false,verticalGridStep:4,xAxisHeight:20,yAxisWidth:30};exports.default=Chart;
213+
maxVerticalBound:_this2.state.bounds.max,__source:{fileName:_jsxFileName,lineNumber:207}}))));}()));}}]);return Chart;}(_react.Component);Chart.defaultProps={data:[],animated:true,animationDuration:300,axisColor:C.BLACK,axisLabelColor:C.BLACK,axisLineWidth:1,axisTitleColor:C.GREY,axisTitleFontSize:16,chartFontSize:14,dataPointRadius:3,gridColor:C.BLACK,gridLineWidth:0.5,hideHorizontalGridLines:false,hideVerticalGridLines:false,horizontalScale:1,labelFontSize:10,lineWidth:1,showAxis:true,showDataPoint:false,showGrid:true,showXAxisLabels:true,showYAxisLabels:true,tightBounds:false,verticalGridStep:4,xAxisHeight:20,yAxisWidth:30};exports.default=Chart;
210214

211215

212216

‎dist/LineChart.js‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@ props));_this.
3737

3838

3939

40-
41-
42-
43-
4440

4541

4642

@@ -89,21 +85,21 @@ fillPath.moveTo(0,containerHeight);}
8985

9086
if(path.path.some(isNaN))return null;
9187
return (
92-
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:92}},
93-
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:93}},
94-
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:94}},
95-
_react2.default.createElement(AnimatedShape,{d:path,stroke:_this.props.color||C.BLUE,strokeWidth:_this.props.lineWidth,__source:{fileName:_jsxFileName,lineNumber:95}}),
96-
_react2.default.createElement(AnimatedShape,{d:fillPath,fill:_this.props.fillColor,__source:{fileName:_jsxFileName,lineNumber:96}}))),
88+
_react2.default.createElement(_reactNative.View,{__source:{fileName:_jsxFileName,lineNumber:88}},
89+
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:89}},
90+
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:90}},
91+
_react2.default.createElement(AnimatedShape,{d:path,stroke:_this.props.color||C.BLUE,strokeWidth:_this.props.lineWidth,__source:{fileName:_jsxFileName,lineNumber:91}}),
92+
_react2.default.createElement(AnimatedShape,{d:fillPath,fill:_this.props.fillColor,__source:{fileName:_jsxFileName,lineNumber:92}}))),
9793

9894

99-
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:99}},
100-
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:100}})),
95+
_react2.default.createElement(_reactNative.View,{style:{position:'absolute'},__source:{fileName:_jsxFileName,lineNumber:95}},
96+
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:96}})),
10197

10298
function(){
10399
if(!_this.props.showDataPoint)return null;
104100
return (
105-
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:105}},
106-
dataPoints.map(function(d,i){return _react2.default.createElement(_Circle2.default,_extends({key:i},d,{__source:{fileName:_jsxFileName,lineNumber:106}}));})));}()));};console.log(props);var heightValue=props.animated?heightZero:props.height;var opacityValue=props.animated?0:1;_this.state={height:new _reactNative.Animated.Value(heightValue),opacity:new _reactNative.Animated.Value(opacityValue)};return _this;}_createClass(LineChart,[{key:'shouldComponentUpdate',value:function shouldComponentUpdate(props){return props!==this.props;}},{key:'componentWillUpdate',value:function componentWillUpdate(){if(this.props.animated){_reactNative.Animated.timing(this.state.opacity,{duration:0,toValue:0}).start();_reactNative.Animated.timing(this.state.height,{duration:0,toValue:heightZero}).start();}}},{key:'componentDidUpdate',value:function componentDidUpdate(){if(this.props.animated){_reactNative.Animated.timing(this.state.height,{duration:this.props.animationDuration,toValue:this.props.height}).start();_reactNative.Animated.timing(this.state.opacity,{duration:this.props.animationDuration,toValue:1}).start();}}},{key:'render',value:function render()
101+
_react2.default.createElement(Surface,{width:containerWidth,height:containerHeight,__source:{fileName:_jsxFileName,lineNumber:101}},
102+
dataPoints.map(function(d,i){return _react2.default.createElement(_Circle2.default,_extends({key:i},d,{__source:{fileName:_jsxFileName,lineNumber:102}}));})));}()));};console.log(props);var heightValue=props.animated?heightZero:props.height;var opacityValue=props.animated?0:1;_this.state={height:new _reactNative.Animated.Value(heightValue),opacity:new _reactNative.Animated.Value(opacityValue)};return _this;}_createClass(LineChart,[{key:'componentWillUpdate',value:function componentWillUpdate(){if(this.props.animated){_reactNative.Animated.timing(this.state.opacity,{duration:0,toValue:0}).start();_reactNative.Animated.timing(this.state.height,{duration:0,toValue:heightZero}).start();}}},{key:'componentDidUpdate',value:function componentDidUpdate(){if(this.props.animated){_reactNative.Animated.timing(this.state.height,{duration:this.props.animationDuration,toValue:this.props.height}).start();_reactNative.Animated.timing(this.state.opacity,{duration:this.props.animationDuration,toValue:1}).start();}}},{key:'render',value:function render()
107103

108104

109105

@@ -114,16 +110,16 @@ dataPoints.map(function(d,i){return _react2.default.createElement(_Circle2.defau
114110
{
115111
if(_reactNative.Platform.OS==='ios'){
116112
return (
117-
_react2.default.createElement(_reactNative.View,{style:{overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:117}},
118-
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:118}})),
119-
_react2.default.createElement(_reactNative.Animated.View,{style:{height:this.state.height,opacity:this.state.opacity,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:119}},
113+
_react2.default.createElement(_reactNative.View,{style:{overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:113}},
114+
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:114}})),
115+
_react2.default.createElement(_reactNative.Animated.View,{style:{height:this.state.height,opacity:this.state.opacity,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:115}},
120116
this._drawLine())));}
121117

122118

123119

124120

125121
return (
126-
_react2.default.createElement(_reactNative.View,{style:{overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:126}},
127-
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:127}})),
128-
_react2.default.createElement(_reactNative.View,{style:{height:this.props.height,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:128}},
122+
_react2.default.createElement(_reactNative.View,{style:{overflow:'hidden'},__source:{fileName:_jsxFileName,lineNumber:122}},
123+
_react2.default.createElement(_Grid2.default,_extends({},this.props,{__source:{fileName:_jsxFileName,lineNumber:123}})),
124+
_react2.default.createElement(_reactNative.View,{style:{height:this.props.height,backgroundColor:'transparent'},__source:{fileName:_jsxFileName,lineNumber:124}},
129125
this._drawLine())));}}]);return LineChart;}(_react.Component);exports.default=LineChart;

‎src/Chart.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ export default class Chart extends Component<void, any, any> {
6363
this._computeBounds();
6464
}
6565

66+
shouldComponentUpdate(props, state) {
67+
return props !== this.props || state !== this.state;
68+
}
69+
6670
componentDidUpdate(props : any) {
6771
if (this.props !== props) {
6872
this._computeBounds();

‎src/LineChart.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ export default class LineChart extends Component<void, any, any> {
2727
this.state = { height: new Animated.Value(heightValue), opacity: new Animated.Value(opacityValue) };
2828
}
2929

30-
shouldComponentUpdate(props) {
31-
return props !== this.props;
32-
}
33-
3430
componentWillUpdate() {
3531
if (this.props.animated) {
3632
Animated.timing(this.state.opacity, { duration: 0, toValue: 0 }).start();

0 commit comments

Comments
 (0)