react-resizable 1.8.0 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/.babelrc +10 -4
  2. package/.browserslistrc +3 -0
  3. package/.eslintrc +10 -6
  4. package/.flowconfig +10 -10
  5. package/CHANGELOG.md +61 -32
  6. package/README.md +14 -4
  7. package/__tests__/Resizable.test.js +245 -0
  8. package/__tests__/ResizableBox.test.js +99 -0
  9. package/__tests__/__snapshots__/Resizable.test.js.snap +29 -0
  10. package/__tests__/__snapshots__/ResizableBox.test.js.snap +23 -0
  11. package/build/Resizable.js +172 -208
  12. package/build/Resizable.js.flow +99 -178
  13. package/build/ResizableBox.js +95 -79
  14. package/build/ResizableBox.js.flow +58 -33
  15. package/build/propTypes.js +112 -0
  16. package/build/propTypes.js.flow +135 -0
  17. package/build/utils.js +27 -0
  18. package/build/{cloneElement.js.flow → utils.js.flow} +2 -2
  19. package/coverage/clover.xml +107 -0
  20. package/coverage/coverage-final.json +5 -0
  21. package/coverage/lcov-report/Resizable.js.html +665 -0
  22. package/coverage/lcov-report/ResizableBox.js.html +374 -0
  23. package/coverage/lcov-report/base.css +224 -0
  24. package/coverage/lcov-report/block-navigation.js +79 -0
  25. package/coverage/lcov-report/favicon.png +0 -0
  26. package/coverage/lcov-report/flow-typed/npm/index.html +111 -0
  27. package/coverage/lcov-report/flow-typed/npm/jest_v26.x.x.js.html +3734 -0
  28. package/coverage/lcov-report/index.html +156 -0
  29. package/coverage/lcov-report/prettify.css +1 -0
  30. package/coverage/lcov-report/prettify.js +2 -0
  31. package/coverage/lcov-report/propTypes.js.html +485 -0
  32. package/coverage/lcov-report/react-resizable/dist/bundle.js.html +95 -0
  33. package/coverage/lcov-report/react-resizable/dist/index.html +111 -0
  34. package/coverage/lcov-report/react-resizable/flow-typed/npm/index.html +111 -0
  35. package/coverage/lcov-report/react-resizable/flow-typed/npm/jest_v26.x.x.js.html +3734 -0
  36. package/coverage/lcov-report/react-resizable/index.html +111 -0
  37. package/coverage/lcov-report/react-resizable/index.js.html +101 -0
  38. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  39. package/coverage/lcov-report/sorter.js +170 -0
  40. package/coverage/lcov-report/utils.js.html +122 -0
  41. package/coverage/lcov.info +233 -0
  42. package/dist/bundle.js +6 -0
  43. package/flow-typed/npm/jest_v26.x.x.js +1218 -0
  44. package/package.json +34 -26
  45. package/setupTests/enzyme.js +4 -0
  46. package/.github/ISSUE_TEMPLATE.md +0 -23
  47. package/.github/PULL_REQUEST_TEMPLATE.md +0 -5
  48. package/build/cloneElement.js +0 -20
package/coverage/lcov-report/Resizable.js.html ADDED
@@ -0,0 +1,665 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for Resizable.js</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="prettify.css" />
9
+ <link rel="stylesheet" href="base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="index.html">All files</a> Resizable.js</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">76.62% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>59/77</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">72.58% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>45/62</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">66.67% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>6/9</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">81.43% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>57/70</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ </div>
58
+ <div class='status-line high'></div>
59
+ <pre><table class="coverage">
60
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
61
+ <a name='L2'></a><a href='#L2'>2</a>
62
+ <a name='L3'></a><a href='#L3'>3</a>
63
+ <a name='L4'></a><a href='#L4'>4</a>
64
+ <a name='L5'></a><a href='#L5'>5</a>
65
+ <a name='L6'></a><a href='#L6'>6</a>
66
+ <a name='L7'></a><a href='#L7'>7</a>
67
+ <a name='L8'></a><a href='#L8'>8</a>
68
+ <a name='L9'></a><a href='#L9'>9</a>
69
+ <a name='L10'></a><a href='#L10'>10</a>
70
+ <a name='L11'></a><a href='#L11'>11</a>
71
+ <a name='L12'></a><a href='#L12'>12</a>
72
+ <a name='L13'></a><a href='#L13'>13</a>
73
+ <a name='L14'></a><a href='#L14'>14</a>
74
+ <a name='L15'></a><a href='#L15'>15</a>
75
+ <a name='L16'></a><a href='#L16'>16</a>
76
+ <a name='L17'></a><a href='#L17'>17</a>
77
+ <a name='L18'></a><a href='#L18'>18</a>
78
+ <a name='L19'></a><a href='#L19'>19</a>
79
+ <a name='L20'></a><a href='#L20'>20</a>
80
+ <a name='L21'></a><a href='#L21'>21</a>
81
+ <a name='L22'></a><a href='#L22'>22</a>
82
+ <a name='L23'></a><a href='#L23'>23</a>
83
+ <a name='L24'></a><a href='#L24'>24</a>
84
+ <a name='L25'></a><a href='#L25'>25</a>
85
+ <a name='L26'></a><a href='#L26'>26</a>
86
+ <a name='L27'></a><a href='#L27'>27</a>
87
+ <a name='L28'></a><a href='#L28'>28</a>
88
+ <a name='L29'></a><a href='#L29'>29</a>
89
+ <a name='L30'></a><a href='#L30'>30</a>
90
+ <a name='L31'></a><a href='#L31'>31</a>
91
+ <a name='L32'></a><a href='#L32'>32</a>
92
+ <a name='L33'></a><a href='#L33'>33</a>
93
+ <a name='L34'></a><a href='#L34'>34</a>
94
+ <a name='L35'></a><a href='#L35'>35</a>
95
+ <a name='L36'></a><a href='#L36'>36</a>
96
+ <a name='L37'></a><a href='#L37'>37</a>
97
+ <a name='L38'></a><a href='#L38'>38</a>
98
+ <a name='L39'></a><a href='#L39'>39</a>
99
+ <a name='L40'></a><a href='#L40'>40</a>
100
+ <a name='L41'></a><a href='#L41'>41</a>
101
+ <a name='L42'></a><a href='#L42'>42</a>
102
+ <a name='L43'></a><a href='#L43'>43</a>
103
+ <a name='L44'></a><a href='#L44'>44</a>
104
+ <a name='L45'></a><a href='#L45'>45</a>
105
+ <a name='L46'></a><a href='#L46'>46</a>
106
+ <a name='L47'></a><a href='#L47'>47</a>
107
+ <a name='L48'></a><a href='#L48'>48</a>
108
+ <a name='L49'></a><a href='#L49'>49</a>
109
+ <a name='L50'></a><a href='#L50'>50</a>
110
+ <a name='L51'></a><a href='#L51'>51</a>
111
+ <a name='L52'></a><a href='#L52'>52</a>
112
+ <a name='L53'></a><a href='#L53'>53</a>
113
+ <a name='L54'></a><a href='#L54'>54</a>
114
+ <a name='L55'></a><a href='#L55'>55</a>
115
+ <a name='L56'></a><a href='#L56'>56</a>
116
+ <a name='L57'></a><a href='#L57'>57</a>
117
+ <a name='L58'></a><a href='#L58'>58</a>
118
+ <a name='L59'></a><a href='#L59'>59</a>
119
+ <a name='L60'></a><a href='#L60'>60</a>
120
+ <a name='L61'></a><a href='#L61'>61</a>
121
+ <a name='L62'></a><a href='#L62'>62</a>
122
+ <a name='L63'></a><a href='#L63'>63</a>
123
+ <a name='L64'></a><a href='#L64'>64</a>
124
+ <a name='L65'></a><a href='#L65'>65</a>
125
+ <a name='L66'></a><a href='#L66'>66</a>
126
+ <a name='L67'></a><a href='#L67'>67</a>
127
+ <a name='L68'></a><a href='#L68'>68</a>
128
+ <a name='L69'></a><a href='#L69'>69</a>
129
+ <a name='L70'></a><a href='#L70'>70</a>
130
+ <a name='L71'></a><a href='#L71'>71</a>
131
+ <a name='L72'></a><a href='#L72'>72</a>
132
+ <a name='L73'></a><a href='#L73'>73</a>
133
+ <a name='L74'></a><a href='#L74'>74</a>
134
+ <a name='L75'></a><a href='#L75'>75</a>
135
+ <a name='L76'></a><a href='#L76'>76</a>
136
+ <a name='L77'></a><a href='#L77'>77</a>
137
+ <a name='L78'></a><a href='#L78'>78</a>
138
+ <a name='L79'></a><a href='#L79'>79</a>
139
+ <a name='L80'></a><a href='#L80'>80</a>
140
+ <a name='L81'></a><a href='#L81'>81</a>
141
+ <a name='L82'></a><a href='#L82'>82</a>
142
+ <a name='L83'></a><a href='#L83'>83</a>
143
+ <a name='L84'></a><a href='#L84'>84</a>
144
+ <a name='L85'></a><a href='#L85'>85</a>
145
+ <a name='L86'></a><a href='#L86'>86</a>
146
+ <a name='L87'></a><a href='#L87'>87</a>
147
+ <a name='L88'></a><a href='#L88'>88</a>
148
+ <a name='L89'></a><a href='#L89'>89</a>
149
+ <a name='L90'></a><a href='#L90'>90</a>
150
+ <a name='L91'></a><a href='#L91'>91</a>
151
+ <a name='L92'></a><a href='#L92'>92</a>
152
+ <a name='L93'></a><a href='#L93'>93</a>
153
+ <a name='L94'></a><a href='#L94'>94</a>
154
+ <a name='L95'></a><a href='#L95'>95</a>
155
+ <a name='L96'></a><a href='#L96'>96</a>
156
+ <a name='L97'></a><a href='#L97'>97</a>
157
+ <a name='L98'></a><a href='#L98'>98</a>
158
+ <a name='L99'></a><a href='#L99'>99</a>
159
+ <a name='L100'></a><a href='#L100'>100</a>
160
+ <a name='L101'></a><a href='#L101'>101</a>
161
+ <a name='L102'></a><a href='#L102'>102</a>
162
+ <a name='L103'></a><a href='#L103'>103</a>
163
+ <a name='L104'></a><a href='#L104'>104</a>
164
+ <a name='L105'></a><a href='#L105'>105</a>
165
+ <a name='L106'></a><a href='#L106'>106</a>
166
+ <a name='L107'></a><a href='#L107'>107</a>
167
+ <a name='L108'></a><a href='#L108'>108</a>
168
+ <a name='L109'></a><a href='#L109'>109</a>
169
+ <a name='L110'></a><a href='#L110'>110</a>
170
+ <a name='L111'></a><a href='#L111'>111</a>
171
+ <a name='L112'></a><a href='#L112'>112</a>
172
+ <a name='L113'></a><a href='#L113'>113</a>
173
+ <a name='L114'></a><a href='#L114'>114</a>
174
+ <a name='L115'></a><a href='#L115'>115</a>
175
+ <a name='L116'></a><a href='#L116'>116</a>
176
+ <a name='L117'></a><a href='#L117'>117</a>
177
+ <a name='L118'></a><a href='#L118'>118</a>
178
+ <a name='L119'></a><a href='#L119'>119</a>
179
+ <a name='L120'></a><a href='#L120'>120</a>
180
+ <a name='L121'></a><a href='#L121'>121</a>
181
+ <a name='L122'></a><a href='#L122'>122</a>
182
+ <a name='L123'></a><a href='#L123'>123</a>
183
+ <a name='L124'></a><a href='#L124'>124</a>
184
+ <a name='L125'></a><a href='#L125'>125</a>
185
+ <a name='L126'></a><a href='#L126'>126</a>
186
+ <a name='L127'></a><a href='#L127'>127</a>
187
+ <a name='L128'></a><a href='#L128'>128</a>
188
+ <a name='L129'></a><a href='#L129'>129</a>
189
+ <a name='L130'></a><a href='#L130'>130</a>
190
+ <a name='L131'></a><a href='#L131'>131</a>
191
+ <a name='L132'></a><a href='#L132'>132</a>
192
+ <a name='L133'></a><a href='#L133'>133</a>
193
+ <a name='L134'></a><a href='#L134'>134</a>
194
+ <a name='L135'></a><a href='#L135'>135</a>
195
+ <a name='L136'></a><a href='#L136'>136</a>
196
+ <a name='L137'></a><a href='#L137'>137</a>
197
+ <a name='L138'></a><a href='#L138'>138</a>
198
+ <a name='L139'></a><a href='#L139'>139</a>
199
+ <a name='L140'></a><a href='#L140'>140</a>
200
+ <a name='L141'></a><a href='#L141'>141</a>
201
+ <a name='L142'></a><a href='#L142'>142</a>
202
+ <a name='L143'></a><a href='#L143'>143</a>
203
+ <a name='L144'></a><a href='#L144'>144</a>
204
+ <a name='L145'></a><a href='#L145'>145</a>
205
+ <a name='L146'></a><a href='#L146'>146</a>
206
+ <a name='L147'></a><a href='#L147'>147</a>
207
+ <a name='L148'></a><a href='#L148'>148</a>
208
+ <a name='L149'></a><a href='#L149'>149</a>
209
+ <a name='L150'></a><a href='#L150'>150</a>
210
+ <a name='L151'></a><a href='#L151'>151</a>
211
+ <a name='L152'></a><a href='#L152'>152</a>
212
+ <a name='L153'></a><a href='#L153'>153</a>
213
+ <a name='L154'></a><a href='#L154'>154</a>
214
+ <a name='L155'></a><a href='#L155'>155</a>
215
+ <a name='L156'></a><a href='#L156'>156</a>
216
+ <a name='L157'></a><a href='#L157'>157</a>
217
+ <a name='L158'></a><a href='#L158'>158</a>
218
+ <a name='L159'></a><a href='#L159'>159</a>
219
+ <a name='L160'></a><a href='#L160'>160</a>
220
+ <a name='L161'></a><a href='#L161'>161</a>
221
+ <a name='L162'></a><a href='#L162'>162</a>
222
+ <a name='L163'></a><a href='#L163'>163</a>
223
+ <a name='L164'></a><a href='#L164'>164</a>
224
+ <a name='L165'></a><a href='#L165'>165</a>
225
+ <a name='L166'></a><a href='#L166'>166</a>
226
+ <a name='L167'></a><a href='#L167'>167</a>
227
+ <a name='L168'></a><a href='#L168'>168</a>
228
+ <a name='L169'></a><a href='#L169'>169</a>
229
+ <a name='L170'></a><a href='#L170'>170</a>
230
+ <a name='L171'></a><a href='#L171'>171</a>
231
+ <a name='L172'></a><a href='#L172'>172</a>
232
+ <a name='L173'></a><a href='#L173'>173</a>
233
+ <a name='L174'></a><a href='#L174'>174</a>
234
+ <a name='L175'></a><a href='#L175'>175</a>
235
+ <a name='L176'></a><a href='#L176'>176</a>
236
+ <a name='L177'></a><a href='#L177'>177</a>
237
+ <a name='L178'></a><a href='#L178'>178</a>
238
+ <a name='L179'></a><a href='#L179'>179</a>
239
+ <a name='L180'></a><a href='#L180'>180</a>
240
+ <a name='L181'></a><a href='#L181'>181</a>
241
+ <a name='L182'></a><a href='#L182'>182</a>
242
+ <a name='L183'></a><a href='#L183'>183</a>
243
+ <a name='L184'></a><a href='#L184'>184</a>
244
+ <a name='L185'></a><a href='#L185'>185</a>
245
+ <a name='L186'></a><a href='#L186'>186</a>
246
+ <a name='L187'></a><a href='#L187'>187</a>
247
+ <a name='L188'></a><a href='#L188'>188</a>
248
+ <a name='L189'></a><a href='#L189'>189</a>
249
+ <a name='L190'></a><a href='#L190'>190</a>
250
+ <a name='L191'></a><a href='#L191'>191</a>
251
+ <a name='L192'></a><a href='#L192'>192</a>
252
+ <a name='L193'></a><a href='#L193'>193</a>
253
+ <a name='L194'></a><a href='#L194'>194</a>
254
+ <a name='L195'></a><a href='#L195'>195</a>
255
+ <a name='L196'></a><a href='#L196'>196</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
256
+ <span class="cline-any cline-neutral">&nbsp;</span>
257
+ <span class="cline-any cline-neutral">&nbsp;</span>
258
+ <span class="cline-any cline-neutral">&nbsp;</span>
259
+ <span class="cline-any cline-neutral">&nbsp;</span>
260
+ <span class="cline-any cline-neutral">&nbsp;</span>
261
+ <span class="cline-any cline-neutral">&nbsp;</span>
262
+ <span class="cline-any cline-neutral">&nbsp;</span>
263
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
+ <span class="cline-any cline-yes">2x</span>
265
+ <span class="cline-any cline-neutral">&nbsp;</span>
266
+ <span class="cline-any cline-yes">2x</span>
267
+ <span class="cline-any cline-neutral">&nbsp;</span>
268
+ <span class="cline-any cline-neutral">&nbsp;</span>
269
+ <span class="cline-any cline-neutral">&nbsp;</span>
270
+ <span class="cline-any cline-neutral">&nbsp;</span>
271
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
+ <span class="cline-any cline-neutral">&nbsp;</span>
273
+ <span class="cline-any cline-neutral">&nbsp;</span>
274
+ <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-yes">10x</span>
277
+ <span class="cline-any cline-neutral">&nbsp;</span>
278
+ <span class="cline-any cline-yes">10x</span>
279
+ <span class="cline-any cline-yes">10x</span>
280
+ <span class="cline-any cline-neutral">&nbsp;</span>
281
+ <span class="cline-any cline-neutral">&nbsp;</span>
282
+ <span class="cline-any cline-no">&nbsp;</span>
283
+ <span class="cline-any cline-neutral">&nbsp;</span>
284
+ <span class="cline-any cline-neutral">&nbsp;</span>
285
+ <span class="cline-any cline-neutral">&nbsp;</span>
286
+ <span class="cline-any cline-no">&nbsp;</span>
287
+ <span class="cline-any cline-no">&nbsp;</span>
288
+ <span class="cline-any cline-no">&nbsp;</span>
289
+ <span class="cline-any cline-neutral">&nbsp;</span>
290
+ <span class="cline-any cline-neutral">&nbsp;</span>
291
+ <span class="cline-any cline-neutral">&nbsp;</span>
292
+ <span class="cline-any cline-no">&nbsp;</span>
293
+ <span class="cline-any cline-neutral">&nbsp;</span>
294
+ <span class="cline-any cline-neutral">&nbsp;</span>
295
+ <span class="cline-any cline-neutral">&nbsp;</span>
296
+ <span class="cline-any cline-neutral">&nbsp;</span>
297
+ <span class="cline-any cline-yes">10x</span>
298
+ <span class="cline-any cline-yes">10x</span>
299
+ <span class="cline-any cline-neutral">&nbsp;</span>
300
+ <span class="cline-any cline-neutral">&nbsp;</span>
301
+ <span class="cline-any cline-yes">10x</span>
302
+ <span class="cline-any cline-no">&nbsp;</span>
303
+ <span class="cline-any cline-no">&nbsp;</span>
304
+ <span class="cline-any cline-no">&nbsp;</span>
305
+ <span class="cline-any cline-no">&nbsp;</span>
306
+ <span class="cline-any cline-no">&nbsp;</span>
307
+ <span class="cline-any cline-neutral">&nbsp;</span>
308
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
+ <span class="cline-any cline-neutral">&nbsp;</span>
310
+ <span class="cline-any cline-no">&nbsp;</span>
311
+ <span class="cline-any cline-no">&nbsp;</span>
312
+ <span class="cline-any cline-no">&nbsp;</span>
313
+ <span class="cline-any cline-neutral">&nbsp;</span>
314
+ <span class="cline-any cline-neutral">&nbsp;</span>
315
+ <span class="cline-any cline-neutral">&nbsp;</span>
316
+ <span class="cline-any cline-yes">10x</span>
317
+ <span class="cline-any cline-neutral">&nbsp;</span>
318
+ <span class="cline-any cline-neutral">&nbsp;</span>
319
+ <span class="cline-any cline-neutral">&nbsp;</span>
320
+ <span class="cline-any cline-neutral">&nbsp;</span>
321
+ <span class="cline-any cline-yes">10x</span>
322
+ <span class="cline-any cline-yes">10x</span>
323
+ <span class="cline-any cline-yes">10x</span>
324
+ <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-yes">10x</span>
326
+ <span class="cline-any cline-yes">10x</span>
327
+ <span class="cline-any cline-yes">10x</span>
328
+ <span class="cline-any cline-neutral">&nbsp;</span>
329
+ <span class="cline-any cline-yes">10x</span>
330
+ <span class="cline-any cline-yes">10x</span>
331
+ <span class="cline-any cline-yes">10x</span>
332
+ <span class="cline-any cline-neutral">&nbsp;</span>
333
+ <span class="cline-any cline-neutral">&nbsp;</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-yes">10x</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-yes">10x</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-neutral">&nbsp;</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
341
+ <span class="cline-any cline-neutral">&nbsp;</span>
342
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-yes">105x</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-yes">10x</span>
350
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
352
+ <span class="cline-any cline-yes">10x</span>
353
+ <span class="cline-any cline-yes">10x</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-yes">10x</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
358
+ <span class="cline-any cline-yes">10x</span>
359
+ <span class="cline-any cline-yes">10x</span>
360
+ <span class="cline-any cline-neutral">&nbsp;</span>
361
+ <span class="cline-any cline-neutral">&nbsp;</span>
362
+ <span class="cline-any cline-neutral">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-yes">10x</span>
365
+ <span class="cline-any cline-yes">10x</span>
366
+ <span class="cline-any cline-neutral">&nbsp;</span>
367
+ <span class="cline-any cline-neutral">&nbsp;</span>
368
+ <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-yes">7x</span>
370
+ <span class="cline-any cline-yes">5x</span>
371
+ <span class="cline-any cline-yes">5x</span>
372
+ <span class="cline-any cline-neutral">&nbsp;</span>
373
+ <span class="cline-any cline-yes">7x</span>
374
+ <span class="cline-any cline-yes">5x</span>
375
+ <span class="cline-any cline-yes">5x</span>
376
+ <span class="cline-any cline-neutral">&nbsp;</span>
377
+ <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-neutral">&nbsp;</span>
379
+ <span class="cline-any cline-yes">10x</span>
380
+ <span class="cline-any cline-neutral">&nbsp;</span>
381
+ <span class="cline-any cline-neutral">&nbsp;</span>
382
+ <span class="cline-any cline-yes">10x</span>
383
+ <span class="cline-any cline-yes">10x</span>
384
+ <span class="cline-any cline-neutral">&nbsp;</span>
385
+ <span class="cline-any cline-neutral">&nbsp;</span>
386
+ <span class="cline-any cline-yes">10x</span>
387
+ <span class="cline-any cline-yes">10x</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
390
+ <span class="cline-any cline-yes">10x</span>
391
+ <span class="cline-any cline-neutral">&nbsp;</span>
392
+ <span class="cline-any cline-yes">10x</span>
393
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
+ <span class="cline-any cline-neutral">&nbsp;</span>
395
+ <span class="cline-any cline-yes">10x</span>
396
+ <span class="cline-any cline-neutral">&nbsp;</span>
397
+ <span class="cline-any cline-yes">10x</span>
398
+ <span class="cline-any cline-yes">10x</span>
399
+ <span class="cline-any cline-yes">9x</span>
400
+ <span class="cline-any cline-yes">9x</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
402
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
+ <span class="cline-any cline-yes">10x</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-yes">35x</span>
410
+ <span class="cline-any cline-yes">35x</span>
411
+ <span class="cline-any cline-yes">7x</span>
412
+ <span class="cline-any cline-yes">2x</span>
413
+ <span class="cline-any cline-neutral">&nbsp;</span>
414
+ <span class="cline-any cline-yes">5x</span>
415
+ <span class="cline-any cline-neutral">&nbsp;</span>
416
+ <span class="cline-any cline-yes">28x</span>
417
+ <span class="cline-any cline-neutral">&nbsp;</span>
418
+ <span class="cline-any cline-neutral">&nbsp;</span>
419
+ <span class="cline-any cline-neutral">&nbsp;</span>
420
+ <span class="cline-any cline-neutral">&nbsp;</span>
421
+ <span class="cline-any cline-neutral">&nbsp;</span>
422
+ <span class="cline-any cline-neutral">&nbsp;</span>
423
+ <span class="cline-any cline-neutral">&nbsp;</span>
424
+ <span class="cline-any cline-yes">10x</span>
425
+ <span class="cline-any cline-neutral">&nbsp;</span>
426
+ <span class="cline-any cline-neutral">&nbsp;</span>
427
+ <span class="cline-any cline-neutral">&nbsp;</span>
428
+ <span class="cline-any cline-neutral">&nbsp;</span>
429
+ <span class="cline-any cline-neutral">&nbsp;</span>
430
+ <span class="cline-any cline-yes">10x</span>
431
+ <span class="cline-any cline-neutral">&nbsp;</span>
432
+ <span class="cline-any cline-neutral">&nbsp;</span>
433
+ <span class="cline-any cline-neutral">&nbsp;</span>
434
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
+ <span class="cline-any cline-neutral">&nbsp;</span>
436
+ <span class="cline-any cline-yes">35x</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
438
+ <span class="cline-any cline-neutral">&nbsp;</span>
439
+ <span class="cline-any cline-neutral">&nbsp;</span>
440
+ <span class="cline-any cline-neutral">&nbsp;</span>
441
+ <span class="cline-any cline-neutral">&nbsp;</span>
442
+ <span class="cline-any cline-neutral">&nbsp;</span>
443
+ <span class="cline-any cline-neutral">&nbsp;</span>
444
+ <span class="cline-any cline-neutral">&nbsp;</span>
445
+ <span class="cline-any cline-neutral">&nbsp;</span>
446
+ <span class="cline-any cline-neutral">&nbsp;</span>
447
+ <span class="cline-any cline-neutral">&nbsp;</span>
448
+ <span class="cline-any cline-neutral">&nbsp;</span>
449
+ <span class="cline-any cline-neutral">&nbsp;</span>
450
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// @flow
451
+ import React from 'react';
452
+ import type {Node as ReactNode} from 'react';
453
+ import {DraggableCore} from 'react-draggable';
454
+ import {cloneElement} from './utils';
455
+ import {resizableProps} from "./propTypes";
456
+ import type {ResizeHandleAxis, Props, ResizableState, DragCallbackData} from './propTypes';
457
+ &nbsp;
458
+ export default class Resizable extends React.Component&lt;Props, ResizableState&gt; {
459
+ static propTypes = resizableProps;
460
+ &nbsp;
461
+ static defaultProps = {
462
+ handleSize: [20, 20],
463
+ lockAspectRatio: false,
464
+ axis: 'both',
465
+ minConstraints: [20, 20],
466
+ maxConstraints: [Infinity, Infinity],
467
+ resizeHandles: ['se'],
468
+ transformScale: 1
469
+ };
470
+ &nbsp;
471
+ state: ResizableState = undefined;
472
+ &nbsp;
473
+ lastHandleRect: ?ClientRect = null;
474
+ slack: ?[number, number] = null;
475
+ &nbsp;
476
+ <span class="fstat-no" title="function not covered" > co</span>mponentWillUnmount() {
477
+ <span class="cstat-no" title="statement not covered" > this.resetData();</span>
478
+ }
479
+ &nbsp;
480
+ <span class="fstat-no" title="function not covered" > lo</span>ckAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
481
+ <span class="cstat-no" title="statement not covered" > height = width / aspectRatio;</span>
482
+ <span class="cstat-no" title="statement not covered" > width = height * aspectRatio;</span>
483
+ <span class="cstat-no" title="statement not covered" > return [width, height];</span>
484
+ }
485
+ &nbsp;
486
+ <span class="fstat-no" title="function not covered" > re</span>setData() {
487
+ <span class="cstat-no" title="statement not covered" > this.lastHandleRect = this.slack = null;</span>
488
+ }
489
+ &nbsp;
490
+ // Clamp width and height within provided constraints
491
+ runConstraints(width: number, height: number): [number, number] {
492
+ const [min, max] = [this.props.minConstraints, this.props.maxConstraints];
493
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (!min &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!max)</span> <span class="cstat-no" title="statement not covered" >return [width, height];</span>
494
+ &nbsp;
495
+ // If constraining to min and max, we need to also fit width and height to aspect ratio.
496
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (this.props.lockAspectRatio) {
497
+ const resizingHorizontally = <span class="cstat-no" title="statement not covered" >height === this.props.height;</span>
498
+ <span class="cstat-no" title="statement not covered" > if (resizingHorizontally) {</span>
499
+ const ratio = <span class="cstat-no" title="statement not covered" >this.props.width / this.props.height;</span>
500
+ <span class="cstat-no" title="statement not covered" > height = width / ratio;</span>
501
+ <span class="cstat-no" title="statement not covered" > width = height * ratio;</span>
502
+ } else {
503
+ // Take into account vertical resize with N/S handles on locked aspect
504
+ // ratio. Calculate the change height-first, instead of width-first
505
+ const ratio = <span class="cstat-no" title="statement not covered" >this.props.height / this.props.width;</span>
506
+ <span class="cstat-no" title="statement not covered" > width = height / ratio;</span>
507
+ <span class="cstat-no" title="statement not covered" > height = width * ratio;</span>
508
+ }
509
+ }
510
+ &nbsp;
511
+ const [oldW, oldH] = [width, height];
512
+ &nbsp;
513
+ // Add slack to the values used to calculate bound position. This will ensure that if
514
+ // we start removing slack, the element won't react to it right away until it's been
515
+ // completely removed.
516
+ let [slackW, slackH] = this.slack || [0, 0];
517
+ width += slackW;
518
+ height += slackH;
519
+ &nbsp;
520
+ <span class="missing-if-branch" title="else path not taken" >E</span>if (min) {
521
+ width = Math.max(min[0], width);
522
+ height = Math.max(min[1], height);
523
+ }
524
+ <span class="missing-if-branch" title="else path not taken" >E</span>if (max) {
525
+ width = Math.min(max[0], width);
526
+ height = Math.min(max[1], height);
527
+ }
528
+ &nbsp;
529
+ // If the width or height changed, we must have introduced some slack. Record it for the next iteration.
530
+ this.slack = [slackW + (oldW - width), slackH + (oldH - height)];
531
+ &nbsp;
532
+ return [width, height];
533
+ }
534
+ &nbsp;
535
+ /**
536
+ * Wrapper around drag events to provide more useful data.
537
+ *
538
+ * @param {String} handlerName Handler name to wrap.
539
+ * @return {Function} Handler function.
540
+ */
541
+ resizeHandler(handlerName: 'onResize' | 'onResizeStart' | 'onResizeStop', axis: ResizeHandleAxis): Function {
542
+ return (e: SyntheticEvent&lt;&gt;, {node, deltaX, deltaY}: DragCallbackData) =&gt; {
543
+ // Reset data in case it was left over somehow (should not be possible)
544
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (handlerName === 'onResizeStart') <span class="cstat-no" title="statement not covered" >this.resetData();</span>
545
+ &nbsp;
546
+ // Axis restrictions
547
+ const canDragX = (this.props.axis === 'both' || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.axis === 'x')</span> &amp;&amp; axis !== 'n' &amp;&amp; axis !== 's';
548
+ const canDragY = (this.props.axis === 'both' || <span class="branch-1 cbranch-no" title="branch not covered" >this.props.axis === 'y')</span> &amp;&amp; axis !== 'e' &amp;&amp; axis !== 'w';
549
+ // No dragging possible.
550
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (!canDragX &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!canDragY)</span> <span class="cstat-no" title="statement not covered" >return;</span>
551
+ &nbsp;
552
+ // Decompose axis for later use
553
+ const axisV = axis[0];
554
+ const axisH = axis[axis.length - 1]; // intentionally not axis[1], so that this catches axis === 'w' for example
555
+ &nbsp;
556
+ // Track the element being dragged to account for changes in position.
557
+ // If a handle's position is changed between callbacks, we need to factor this in to the next callback.
558
+ // Failure to do so will cause the element to "skip" when resized upwards or leftwards.
559
+ const handleRect = node.getBoundingClientRect();
560
+ if (this.lastHandleRect != null) {
561
+ // If the handle has repositioned on either axis since last render,
562
+ // we need to increase our callback values by this much.
563
+ // Only checking 'n', 'w' since resizing by 's', 'w' won't affect the overall position on page,
564
+ if (axisH === 'w') {
565
+ const deltaLeftSinceLast = handleRect.left - this.lastHandleRect.left;
566
+ deltaX += deltaLeftSinceLast;
567
+ }
568
+ if (axisV === 'n') {
569
+ const deltaTopSinceLast = handleRect.top - this.lastHandleRect.top;
570
+ deltaY += deltaTopSinceLast;
571
+ }
572
+ }
573
+ // Storage of last rect so we know how much it has really moved.
574
+ this.lastHandleRect = handleRect;
575
+ &nbsp;
576
+ // Reverse delta if using top or left drag handles.
577
+ if (axisH === 'w') deltaX = -deltaX;
578
+ if (axisV === 'n') deltaY = -deltaY;
579
+ &nbsp;
580
+ // Update w/h by the deltas. Also factor in transformScale.
581
+ let width = this.props.width + (canDragX ? deltaX / this.props.transformScale : <span class="branch-1 cbranch-no" title="branch not covered" >0)</span>;
582
+ let height = this.props.height + (canDragY ? deltaY / this.props.transformScale : <span class="branch-1 cbranch-no" title="branch not covered" >0)</span>;
583
+ &nbsp;
584
+ // Run user-provided constraints.
585
+ [width, height] = this.runConstraints(width, height);
586
+ &nbsp;
587
+ const dimensionsChanged = width !== this.props.width || height !== this.props.height;
588
+ &nbsp;
589
+ // Call user-supplied callback if present.
590
+ const cb = typeof this.props[handlerName] === 'function' ? this.props[handlerName] : <span class="branch-1 cbranch-no" title="branch not covered" >null;</span>
591
+ // Don't call 'onResize' if dimensions haven't changed.
592
+ const shouldSkipCb = handlerName === 'onResize' &amp;&amp; !dimensionsChanged;
593
+ if (cb &amp;&amp; !shouldSkipCb) {
594
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof e.persist === 'function') <span class="cstat-no" title="statement not covered" >e.persist();</span>
595
+ cb(e, {node, size: {width, height}, handle: axis});
596
+ }
597
+ &nbsp;
598
+ // Reset internal data
599
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (handlerName === 'onResizeStop') <span class="cstat-no" title="statement not covered" >this.resetData();</span>
600
+ };
601
+ }
602
+ &nbsp;
603
+ renderResizeHandle(resizeHandleAxis: ResizeHandleAxis): ReactNode {
604
+ const {handle} = this.props;
605
+ if (handle) {
606
+ if (typeof handle === 'function') {
607
+ return handle(resizeHandleAxis);
608
+ }
609
+ return handle;
610
+ }
611
+ return &lt;span className={`react-resizable-handle react-resizable-handle-${resizeHandleAxis}`} /&gt;;
612
+ }
613
+ &nbsp;
614
+ render(): ReactNode {
615
+ // Pass along only props not meant for the `&lt;Resizable&gt;`.`
616
+ // eslint-disable-next-line no-unused-vars
617
+ const {children, className, draggableOpts, width, height, handle, handleSize,
618
+ lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
619
+ onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
620
+ &nbsp;
621
+ // What we're doing here is getting the child of this element, and cloning it with this element's props.
622
+ // We are then defining its children as:
623
+ // Its original children (resizable's child's children), and
624
+ // One or more draggable handles.
625
+ return cloneElement(children, {
626
+ ...p,
627
+ className: `${className ? `${className} ` : ''}react-resizable`,
628
+ children: [
629
+ ...children.props.children,
630
+ ...resizeHandles.map((handleAxis) =&gt; (
631
+ &lt;DraggableCore
632
+ {...draggableOpts}
633
+ key={`resizableHandle-${handleAxis}`}
634
+ onStop={this.resizeHandler('onResizeStop', handleAxis)}
635
+ onStart={this.resizeHandler('onResizeStart', handleAxis)}
636
+ onDrag={this.resizeHandler('onResize', handleAxis)}
637
+ &gt;
638
+ {this.renderResizeHandle(handleAxis)}
639
+ &lt;/DraggableCore&gt;
640
+ ))
641
+ ]
642
+ });
643
+ }
644
+ }
645
+ &nbsp;</pre></td></tr></table></pre>
646
+
647
+ <div class='push'></div><!-- for sticky footer -->
648
+ </div><!-- /wrapper -->
649
+ <div class='footer quiet pad2 space-top1 center small'>
650
+ Code coverage generated by
651
+ <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
652
+ at Fri Mar 05 2021 16:06:31 GMT-0500 (Eastern Standard Time)
653
+ </div>
654
+ </div>
655
+ <script src="prettify.js"></script>
656
+ <script>
657
+ window.onload = function () {
658
+ prettyPrint();
659
+ };
660
+ </script>
661
+ <script src="sorter.js"></script>
662
+ <script src="block-navigation.js"></script>
663
+ </body>
664
+ </html>
665
+