├── .babelrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .prettierrc ├── .travis.yml ├── LICENSE ├── README.md ├── coverage ├── clover.xml ├── coverage-final.json ├── lcov-report │ ├── ReactVirtualizedScroll.tsx.html │ ├── base.css │ ├── block-navigation.js │ ├── index.html │ ├── index.tsx.html │ ├── lib │ │ └── component │ │ │ └── ReactVirtualizedScroll │ │ │ ├── ReactVirtualizedScroll.js.html │ │ │ ├── index.html │ │ │ ├── index.js.html │ │ │ ├── svg.js.html │ │ │ └── utils.js.html │ ├── prettify.css │ ├── prettify.js │ ├── sort-arrow-sprite.png │ ├── sorter.js │ ├── src │ │ └── component │ │ │ └── ReactVirtualizedScroll │ │ │ ├── ReactVirtualizedScroll.tsx.html │ │ │ ├── index.html │ │ │ ├── index.tsx.html │ │ │ ├── svg.ts.html │ │ │ └── utils.js.html │ └── svg.ts.html └── lcov.info ├── example └── src │ ├── app.tsx │ ├── index.html │ ├── index.tsx │ └── utils.ts ├── jestconfig.json ├── lib ├── README.md ├── __tests__ │ └── demo.test.js ├── assets │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.svg │ ├── iconfont.ts │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 ├── component │ └── ReactVirtualizedScroll │ │ ├── ReactVirtualizedScroll.js │ │ ├── Row.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── style.css │ │ ├── svg.js │ │ └── utils.js └── package.json ├── package.json ├── src ├── __tests__ │ └── demo.test.tsx ├── assets │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 ├── component │ └── ReactVirtualizedScroll │ │ ├── ReactVirtualizedScroll.tsx │ │ ├── index.tsx │ │ ├── style.css │ │ └── svg.ts └── types │ ├── demo │ └── index.d.ts │ └── global.d.ts ├── test.gif ├── tsconfig.json ├── tslint.json └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | charset = utf-8 11 | indent_style = space 12 | indent_size = 4 13 | 14 | [{*.json,*.md,*.yml,*.*rc}] 15 | indent_style = space 16 | indent_size = 2 -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-language=JavaScript -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /coverage/ 4 | *.log 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.git/ 2 | /.vscode/ 3 | /node_modules/ 4 | .gitignore 5 | .npmignore 6 | .prettierrc 7 | .editorconfig 8 | tslint.json 9 | tsconfig.json 10 | note.md 11 | *.log 12 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "tabWidth": 4, 4 | "semi": false, 5 | "singleQuote": true, 6 | "endOfLine": "lf", 7 | "printWidth": 120, 8 | "overrides": [ 9 | { 10 | "files": ["*.md", "*.json", "*.yml", "*.yaml"], 11 | "options": { 12 | "tabWidth": 2 13 | } 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '12' 4 | install: 5 | - npm install 6 | script: 7 | - npm run test 8 | - npm run lint 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2013-present, DavidWong9785(Zhaokang Huang) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-virtualized-scroll 2 | 虚拟滚动搭配上拉下滑加载的scroll组件 3 | 4 | [![github](https://img.shields.io/github/package-json/v/DavidWong9785/react-virtualized-scroll?logo=github)](https://github.com/DavidWong9785/react-virtualized-scroll) 5 | [![issues](https://img.shields.io/github/issues/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll/issues) 6 | [![forks](https://img.shields.io/github/forks/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll) 7 | [![stars](https://img.shields.io/github/stars/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)

8 | [![npm](https://img.shields.io/npm/v/react-virtualized-scroll?label=versoin&logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll) 9 | [![downloads](https://img.shields.io/npm/dm/react-virtualized-scroll?logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll) 10 | [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-virtualized-scroll)](https://www.npmjs.com/package/react-virtualized-scroll) 11 | ![license](https://img.shields.io/github/license/DavidWong9785/react-virtualized-scroll) 12 | ![github last commit](https://img.shields.io/github/last-commit/DavidWong9785/react-virtualized-scroll) 13 | 14 | ![avatar](./test.gif) 15 | 16 | ### 简介 17 | 18 | - 搭配 typescript 和 react-hooks 编写的虚拟滚动组件 19 | - 基于 react-virtualized 进行再封装。 20 | - 暴露了 react-virtualized 的 ref，可调用 react-virtualized 的方法 21 | - 除了渲染列表，你还可以传入其他的子组件（如悬浮球~等），只需要把定位设为 fixed 22 | 23 | ### 安装导入 24 | 25 | > cnpm i react-virtualized react-virtualized-scroll --save 26 | 27 | > import ReactVirtualizedScroll from 'react-virtualized-scroll' 28 | 29 | ### 使用 30 | 31 | ``` 32 | 43 |
fixed element
44 | 45 | ``` 46 | 47 | ### 属性 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 89 | 90 | 91 | 92 | 93 | 107 | 108 | 109 | 110 | 111 | 112 | 115 | 116 | 117 | 118 | 119 | 120 | 126 | 127 | 128 | 129 | 130 | 131 | 136 | 137 | 138 |
名称类型说明
width、heightstring列表宽高，带单位 59 |

可选

60 |

默认100vw/vh

61 |
hasMoreboolean判断是否还可以下滑加载必传，默认true
dataarray用于渲染列表的目标数必传，默认 []
infoobject需要传入 row 渲染函数作为参数的数据可选
logoobject加载时展示的 loading 图案，四个属性 86 |

可选

87 |

有默认logo

88 |
onPullDownfunction 94 |

95 | 下拉加载回调 96 |

97 |

98 | 该方法必须返回一个 promise 对象 ( 用于控制下拉 loading 状态 ) 99 |

100 |

101 | 可以使用 async 方法或者直接返回 promise 对象 102 |

103 |

104 | 当 promise 状态完成之后 ( resolve/reject )，下拉加载状态结束 105 |

106 | 		可选
onPullUpfunction 113 | 上滑加载回调，目的同上，该方法需要返回一个 promise 对象 114 | 可选
onScrollfunction 121 |

滑动回调

122 |

参数1: clientHeight

123 |

参数2: scrollTop

124 |

参数3: scrollHeight

125 | 		可选
rowfunction 132 |

列表每一行的渲染函数

133 |

参数1：类型为object，属性包含该行索引 index 和自定义传入的 info 属性

134 |

参数2：用于渲染列表的目标数组data

135 | 		必传
139 | 140 | ### logo属性（字符串，图片等等，只要是JSX.Element即可） 141 | 142 | | 属性 | 说明 | 143 | | ---------------- | --------------------- | 144 | | pulldown_loading | 下拉加载 loading 的 logo | 145 | | pulldown_success | 下拉加载 成功 的 logo | 146 | | pullup_loading | 上滑加载 loading 的 logo | 147 | | pullup_success | 上滑加载 成功 的 logo | -------------------------------------------------------------------------------- /coverage/clover.xml: -------------------------------------------------------------------------------- 1 | 2 | <<<<<<< Updated upstream 3 | 4 | 5 | ======= 6 | 7 | 8 | >>>>>>> Stashed changes 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | -------------------------------------------------------------------------------- /coverage/lcov-report/base.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin:0; padding: 0; 3 | height: 100%; 4 | } 5 | body { 6 | font-family: Helvetica Neue, Helvetica, Arial; 7 | font-size: 14px; 8 | color:#333; 9 | } 10 | .small { font-size: 12px; } 11 | *, *:after, *:before { 12 | -webkit-box-sizing:border-box; 13 | -moz-box-sizing:border-box; 14 | box-sizing:border-box; 15 | } 16 | h1 { font-size: 20px; margin: 0;} 17 | h2 { font-size: 14px; } 18 | pre { 19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; 20 | margin: 0; 21 | padding: 0; 22 | -moz-tab-size: 2; 23 | -o-tab-size: 2; 24 | tab-size: 2; 25 | } 26 | a { color:#0074D9; text-decoration:none; } 27 | a:hover { text-decoration:underline; } 28 | .strong { font-weight: bold; } 29 | .space-top1 { padding: 10px 0 0 0; } 30 | .pad2y { padding: 20px 0; } 31 | .pad1y { padding: 10px 0; } 32 | .pad2x { padding: 0 20px; } 33 | .pad2 { padding: 20px; } 34 | .pad1 { padding: 10px; } 35 | .space-left2 { padding-left:55px; } 36 | .space-right2 { padding-right:20px; } 37 | .center { text-align:center; } 38 | .clearfix { display:block; } 39 | .clearfix:after { 40 | content:''; 41 | display:block; 42 | height:0; 43 | clear:both; 44 | visibility:hidden; 45 | } 46 | .fl { float: left; } 47 | @media only screen and (max-width:640px) { 48 | .col3 { width:100%; max-width:100%; } 49 | .hide-mobile { display:none!important; } 50 | } 51 | 52 | .quiet { 53 | color: #7f7f7f; 54 | color: rgba(0,0,0,0.5); 55 | } 56 | .quiet a { opacity: 0.7; } 57 | 58 | .fraction { 59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 60 | font-size: 10px; 61 | color: #555; 62 | background: #E8E8E8; 63 | padding: 4px 5px; 64 | border-radius: 3px; 65 | vertical-align: middle; 66 | } 67 | 68 | div.path a:link, div.path a:visited { color: #333; } 69 | table.coverage { 70 | border-collapse: collapse; 71 | margin: 10px 0 0 0; 72 | padding: 0; 73 | } 74 | 75 | table.coverage td { 76 | margin: 0; 77 | padding: 0; 78 | vertical-align: top; 79 | } 80 | table.coverage td.line-count { 81 | text-align: right; 82 | padding: 0 5px 0 20px; 83 | } 84 | table.coverage td.line-coverage { 85 | text-align: right; 86 | padding-right: 10px; 87 | min-width:20px; 88 | } 89 | 90 | table.coverage td span.cline-any { 91 | display: inline-block; 92 | padding: 0 5px; 93 | width: 100%; 94 | } 95 | .missing-if-branch { 96 | display: inline-block; 97 | margin-right: 5px; 98 | border-radius: 3px; 99 | position: relative; 100 | padding: 0 4px; 101 | background: #333; 102 | color: yellow; 103 | } 104 | 105 | .skip-if-branch { 106 | display: none; 107 | margin-right: 10px; 108 | position: relative; 109 | padding: 0 4px; 110 | background: #ccc; 111 | color: white; 112 | } 113 | .missing-if-branch .typ, .skip-if-branch .typ { 114 | color: inherit !important; 115 | } 116 | .coverage-summary { 117 | border-collapse: collapse; 118 | width: 100%; 119 | } 120 | .coverage-summary tr { border-bottom: 1px solid #bbb; } 121 | .keyline-all { border: 1px solid #ddd; } 122 | .coverage-summary td, .coverage-summary th { padding: 10px; } 123 | .coverage-summary tbody { border: 1px solid #bbb; } 124 | .coverage-summary td { border-right: 1px solid #bbb; } 125 | .coverage-summary td:last-child { border-right: none; } 126 | .coverage-summary th { 127 | text-align: left; 128 | font-weight: normal; 129 | white-space: nowrap; 130 | } 131 | .coverage-summary th.file { border-right: none !important; } 132 | .coverage-summary th.pct { } 133 | .coverage-summary th.pic, 134 | .coverage-summary th.abs, 135 | .coverage-summary td.pct, 136 | .coverage-summary td.abs { text-align: right; } 137 | .coverage-summary td.file { white-space: nowrap; } 138 | .coverage-summary td.pic { min-width: 120px !important; } 139 | .coverage-summary tfoot td { } 140 | 141 | .coverage-summary .sorter { 142 | height: 10px; 143 | width: 7px; 144 | display: inline-block; 145 | margin-left: 0.5em; 146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; 147 | } 148 | .coverage-summary .sorted .sorter { 149 | background-position: 0 -20px; 150 | } 151 | .coverage-summary .sorted-desc .sorter { 152 | background-position: 0 -10px; 153 | } 154 | .status-line { height: 10px; } 155 | /* yellow */ 156 | .cbranch-no { background: yellow !important; color: #111; } 157 | /* dark red */ 158 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } 159 | .low .chart { border:1px solid #C21F39 } 160 | .highlighted, 161 | .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{ 162 | background: #C21F39 !important; 163 | } 164 | /* medium red */ 165 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } 166 | /* light red */ 167 | .low, .cline-no { background:#FCE1E5 } 168 | /* light green */ 169 | .high, .cline-yes { background:rgb(230,245,208) } 170 | /* medium green */ 171 | .cstat-yes { background:rgb(161,215,106) } 172 | /* dark green */ 173 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) } 174 | .high .chart { border:1px solid rgb(77,146,33) } 175 | /* dark yellow (gold) */ 176 | .status-line.medium, .medium .cover-fill { background: #f9cd0b; } 177 | .medium .chart { border:1px solid #f9cd0b; } 178 | /* light yellow */ 179 | .medium { background: #fff4c2; } 180 | 181 | .cstat-skip { background: #ddd; color: #111; } 182 | .fstat-skip { background: #ddd; color: #111 !important; } 183 | .cbranch-skip { background: #ddd !important; color: #111; } 184 | 185 | span.cline-neutral { background: #eaeaea; } 186 | 187 | .coverage-summary td.empty { 188 | opacity: .5; 189 | padding-top: 4px; 190 | padding-bottom: 4px; 191 | line-height: 1; 192 | color: #888; 193 | } 194 | 195 | .cover-fill, .cover-empty { 196 | display:inline-block; 197 | height: 12px; 198 | } 199 | .chart { 200 | line-height: 0; 201 | } 202 | .cover-empty { 203 | background: white; 204 | } 205 | .cover-full { 206 | border-right: none !important; 207 | } 208 | pre.prettyprint { 209 | border: none !important; 210 | padding: 0 !important; 211 | margin: 0 !important; 212 | } 213 | .com { color: #999 !important; } 214 | .ignore-none { color: #999; font-weight: normal; } 215 | 216 | .wrapper { 217 | min-height: 100%; 218 | height: auto !important; 219 | height: 100%; 220 | margin: 0 auto -48px; 221 | } 222 | .footer, .push { 223 | height: 48px; 224 | } 225 | -------------------------------------------------------------------------------- /coverage/lcov-report/block-navigation.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var jumpToCode = (function init() { 3 | // Classes of code we would like to highlight in the file view 4 | var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no']; 5 | 6 | // Elements to highlight in the file listing view 7 | var fileListingElements = ['td.pct.low']; 8 | 9 | // We don't want to select elements that are direct descendants of another match 10 | var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > ` 11 | 12 | // Selecter that finds elements on the page to which we can jump 13 | var selector = 14 | fileListingElements.join(', ') + 15 | ', ' + 16 | notSelector + 17 | missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b` 18 | 19 | // The NodeList of matching elements 20 | var missingCoverageElements = document.querySelectorAll(selector); 21 | 22 | var currentIndex; 23 | 24 | function toggleClass(index) { 25 | missingCoverageElements 26 | .item(currentIndex) 27 | .classList.remove('highlighted'); 28 | missingCoverageElements.item(index).classList.add('highlighted'); 29 | } 30 | 31 | function makeCurrent(index) { 32 | toggleClass(index); 33 | currentIndex = index; 34 | missingCoverageElements.item(index).scrollIntoView({ 35 | behavior: 'smooth', 36 | block: 'center', 37 | inline: 'center' 38 | }); 39 | } 40 | 41 | function goToPrevious() { 42 | var nextIndex = 0; 43 | if (typeof currentIndex !== 'number' || currentIndex === 0) { 44 | nextIndex = missingCoverageElements.length - 1; 45 | } else if (missingCoverageElements.length > 1) { 46 | nextIndex = currentIndex - 1; 47 | } 48 | 49 | makeCurrent(nextIndex); 50 | } 51 | 52 | function goToNext() { 53 | var nextIndex = 0; 54 | 55 | if ( 56 | typeof currentIndex === 'number' && 57 | currentIndex < missingCoverageElements.length - 1 58 | ) { 59 | nextIndex = currentIndex + 1; 60 | } 61 | 62 | makeCurrent(nextIndex); 63 | } 64 | 65 | return function jump(event) { 66 | switch (event.which) { 67 | case 78: // n 68 | case 74: // j 69 | goToNext(); 70 | break; 71 | case 66: // b 72 | case 75: // k 73 | case 80: // p 74 | goToPrevious(); 75 | break; 76 | } 77 | }; 78 | })(); 79 | window.addEventListener('keydown', jumpToCode); 80 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for All files 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files

22 |
23 | 24 |
25 | 46.73% 26 | Statements 27 | 157/336 28 |
29 | 30 | 31 |
32 | 28.69% 33 | Branches 34 | 68/237 35 |
36 | 37 | 38 |
39 | 16.98% 40 | Functions 41 | 9/53 42 |
43 | 44 | 45 |
46 | 44.77% 47 | Lines 48 | 107/239 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 |
FileStatementsBranchesFunctionsLines
lib/component/ReactVirtualizedScroll 77 |
78 | 		48.4%91/18834.06%47/13822.58%7/3141.91%57/136
src/component/ReactVirtualizedScroll 92 |
93 | 		44.59%66/14821.21%21/999.09%2/2248.54%50/103
106 |
107 |
108 |
109 |
110 | Code coverage generated by 111 | istanbul 112 | <<<<<<< Updated upstream 113 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 114 | ======= 115 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 116 | >>>>>>> Stashed changes 117 |
118 | 119 | 120 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.tsx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for index.tsx 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files index.tsx

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 2/2 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 0/0 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 2/2 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

59 | 
1
60 | 2
61 | 3
62 | 41x
63 |  
64 | 1x
65 |  
import ReactVirtualizedScroll from './ReactVirtualizedScroll'
66 |  
67 | export { ReactVirtualizedScroll }
68 |  
69 | 70 |
71 |
72 |
73 | Code coverage generated by 74 | istanbul 75 | at Thu Jan 16 2020 16:38:49 GMT+0800 (GMT+08:00) 76 |
77 | 78 | 79 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /coverage/lcov-report/lib/component/ReactVirtualizedScroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for lib/component/ReactVirtualizedScroll 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files lib/component/ReactVirtualizedScroll

22 |
23 | 24 |
25 | 48.4% 26 | Statements 27 | 91/188 28 |
29 | 30 | 31 |
32 | 34.06% 33 | Branches 34 | 47/138 35 |
36 | 37 | 38 |
39 | 22.58% 40 | Functions 41 | 7/31 42 |
43 | 44 | 45 |
46 | 41.91% 47 | Lines 48 | 57/136 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
FileStatementsBranchesFunctionsLines
ReactVirtualizedScroll.js 77 |
78 | 		46.43%78/16831.3%41/13121.43%6/2837.29%44/118
index.js 92 |
93 | 		100%6/685.71%6/7100%1/1100%6/6
svg.js 107 |
108 | 		100%3/3100%0/0100%0/0100%3/3
utils.js 122 |
123 | 		36.36%4/11100%0/00%0/244.44%4/9
136 |
137 |
138 |
139 |
140 | Code coverage generated by 141 | istanbul 142 | <<<<<<< Updated upstream 143 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 144 | ======= 145 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 146 | >>>>>>> Stashed changes 147 |
148 | 149 | 150 | 155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /coverage/lcov-report/lib/component/ReactVirtualizedScroll/index.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for lib/component/ReactVirtualizedScroll/index.js 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / lib/component/ReactVirtualizedScroll index.js

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 6/6 28 |
29 | 30 | 31 |
32 | 85.71% 33 | Branches 34 | 6/7 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 1/1 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 6/6 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

 59 | 
1
 60 | 2
 61 | 3
 62 | 4
 63 | 5
 64 | 6
 65 | 7
 66 | 8
 67 | 9 
 68 | 1x
 69 | 1x
 70 |  
 71 | 1x
 72 | 1x
 73 | 1x
 74 | 1x
 75 |  
"use strict";
 76 | var __importDefault = (this && this.__importDefault) || function (mod) {
 77 |     return (mod && mod.__esModule) ? mod : { "default": mod };
 78 | };
 79 | Object.defineProperty(exports, "__esModule", { value: true });
 80 | var ReactVirtualizedScroll_1 = __importDefault(require("./ReactVirtualizedScroll"));
 81 | var utils_js_1 = require("./utils.js");
 82 | exports.default = { ReactVirtualizedScroll: ReactVirtualizedScroll_1.default, useStateAndRef: utils_js_1.useStateAndRef };
 83 |  
84 | 85 |
86 |
87 |
88 | Code coverage generated by 89 | istanbul 90 | <<<<<<< Updated upstream 91 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 92 | ======= 93 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 94 | >>>>>>> Stashed changes 95 |
96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /coverage/lcov-report/lib/component/ReactVirtualizedScroll/svg.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for lib/component/ReactVirtualizedScroll/svg.js 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / lib/component/ReactVirtualizedScroll svg.js

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 3/3 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 0/0 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 3/3 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

59 | 
1
60 | 2
61 | 3
62 | 4
63 | 5 
64 | 1x
65 | 1x
66 | 1x
67 |  
"use strict";
68 | Object.defineProperty(exports, "__esModule", { value: true });
69 | exports.loading_pullup = void 0;
70 | exports.loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4=';
71 |  
72 | 73 |
74 |
75 |
76 | Code coverage generated by 77 | istanbul 78 | <<<<<<< Updated upstream 79 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 80 | ======= 81 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 82 | >>>>>>> Stashed changes 83 |
84 | 85 | 86 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /coverage/lcov-report/lib/component/ReactVirtualizedScroll/utils.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for lib/component/ReactVirtualizedScroll/utils.js 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / lib/component/ReactVirtualizedScroll utils.js

22 |
23 | 24 |
25 | 36.36% 26 | Statements 27 | 4/11 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 0% 40 | Functions 41 | 0/2 42 |
43 | 44 | 45 |
46 | 44.44% 47 | Lines 48 | 4/9 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

 59 | 
1
 60 | 2
 61 | 3
 62 | 4
 63 | 5
 64 | 6
 65 | 7
 66 | 8
 67 | 9
 68 | 10
 69 | 11
 70 | 12
 71 | 13 
 72 | 1x
 73 | 1x
 74 | 1x
 75 | 1x
 76 |  
 77 |  
 78 |  
 79 |  
 80 |  
 81 |  
 82 |  
 83 |  
"use strict";
 84 | Object.defineProperty(exports, "__esModule", { value: true });
 85 | exports.useStateAndRef = void 0;
 86 | var react_1 = require("react");
 87 | exports.useStateAndRef = function (data) {
 88 |     var _a = react_1.useState(data), data = _a[0], setData = _a[1];
 89 |     var dataRef = react_1.useRef(data);
 90 |     react_1.useEffect(function () {
 91 |         dataRef.current = data;
 92 |     }, [data]);
 93 |     return [data, setData, dataRef];
 94 | };
 95 |  
96 | 97 |
98 |
99 |
100 | Code coverage generated by 101 | istanbul 102 | <<<<<<< Updated upstream 103 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 104 | ======= 105 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 106 | >>>>>>> Stashed changes 107 |
108 | 109 | 110 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;arat[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^\)\"\']+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /coverage/lcov-report/sorter.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var addSorting = (function() { 3 | 'use strict'; 4 | var cols, 5 | currentSort = { 6 | index: 0, 7 | desc: false 8 | }; 9 | 10 | // returns the summary table element 11 | function getTable() { 12 | return document.querySelector('.coverage-summary'); 13 | } 14 | // returns the thead element of the summary table 15 | function getTableHeader() { 16 | return getTable().querySelector('thead tr'); 17 | } 18 | // returns the tbody element of the summary table 19 | function getTableBody() { 20 | return getTable().querySelector('tbody'); 21 | } 22 | // returns the th element for nth column 23 | function getNthColumn(n) { 24 | return getTableHeader().querySelectorAll('th')[n]; 25 | } 26 | 27 | // loads all columns 28 | function loadColumns() { 29 | var colNodes = getTableHeader().querySelectorAll('th'), 30 | colNode, 31 | cols = [], 32 | col, 33 | i; 34 | 35 | for (i = 0; i < colNodes.length; i += 1) { 36 | colNode = colNodes[i]; 37 | col = { 38 | key: colNode.getAttribute('data-col'), 39 | sortable: !colNode.getAttribute('data-nosort'), 40 | type: colNode.getAttribute('data-type') || 'string' 41 | }; 42 | cols.push(col); 43 | if (col.sortable) { 44 | col.defaultDescSort = col.type === 'number'; 45 | colNode.innerHTML = 46 | colNode.innerHTML + ''; 47 | } 48 | } 49 | return cols; 50 | } 51 | // attaches a data attribute to every tr element with an object 52 | // of data values keyed by column name 53 | function loadRowData(tableRow) { 54 | var tableCols = tableRow.querySelectorAll('td'), 55 | colNode, 56 | col, 57 | data = {}, 58 | i, 59 | val; 60 | for (i = 0; i < tableCols.length; i += 1) { 61 | colNode = tableCols[i]; 62 | col = cols[i]; 63 | val = colNode.getAttribute('data-value'); 64 | if (col.type === 'number') { 65 | val = Number(val); 66 | } 67 | data[col.key] = val; 68 | } 69 | return data; 70 | } 71 | // loads all row data 72 | function loadData() { 73 | var rows = getTableBody().querySelectorAll('tr'), 74 | i; 75 | 76 | for (i = 0; i < rows.length; i += 1) { 77 | rows[i].data = loadRowData(rows[i]); 78 | } 79 | } 80 | // sorts the table using the data for the ith column 81 | function sortByIndex(index, desc) { 82 | var key = cols[index].key, 83 | sorter = function(a, b) { 84 | a = a.data[key]; 85 | b = b.data[key]; 86 | return a < b ? -1 : a > b ? 1 : 0; 87 | }, 88 | finalSorter = sorter, 89 | tableBody = document.querySelector('.coverage-summary tbody'), 90 | rowNodes = tableBody.querySelectorAll('tr'), 91 | rows = [], 92 | i; 93 | 94 | if (desc) { 95 | finalSorter = function(a, b) { 96 | return -1 * sorter(a, b); 97 | }; 98 | } 99 | 100 | for (i = 0; i < rowNodes.length; i += 1) { 101 | rows.push(rowNodes[i]); 102 | tableBody.removeChild(rowNodes[i]); 103 | } 104 | 105 | rows.sort(finalSorter); 106 | 107 | for (i = 0; i < rows.length; i += 1) { 108 | tableBody.appendChild(rows[i]); 109 | } 110 | } 111 | // removes sort indicators for current column being sorted 112 | function removeSortIndicators() { 113 | var col = getNthColumn(currentSort.index), 114 | cls = col.className; 115 | 116 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); 117 | col.className = cls; 118 | } 119 | // adds sort indicators for current column being sorted 120 | function addSortIndicators() { 121 | getNthColumn(currentSort.index).className += currentSort.desc 122 | ? ' sorted-desc' 123 | : ' sorted'; 124 | } 125 | // adds event listeners for all sorter widgets 126 | function enableUI() { 127 | var i, 128 | el, 129 | ithSorter = function ithSorter(i) { 130 | var col = cols[i]; 131 | 132 | return function() { 133 | var desc = col.defaultDescSort; 134 | 135 | if (currentSort.index === i) { 136 | desc = !currentSort.desc; 137 | } 138 | sortByIndex(i, desc); 139 | removeSortIndicators(); 140 | currentSort.index = i; 141 | currentSort.desc = desc; 142 | addSortIndicators(); 143 | }; 144 | }; 145 | for (i = 0; i < cols.length; i += 1) { 146 | if (cols[i].sortable) { 147 | // add the click event handler on the th so users 148 | // dont have to click on those tiny arrows 149 | el = getNthColumn(i).querySelector('.sorter').parentElement; 150 | if (el.addEventListener) { 151 | el.addEventListener('click', ithSorter(i)); 152 | } else { 153 | el.attachEvent('onclick', ithSorter(i)); 154 | } 155 | } 156 | } 157 | } 158 | // adds sorting functionality to the UI 159 | return function() { 160 | if (!getTable()) { 161 | return; 162 | } 163 | cols = loadColumns(); 164 | loadData(); 165 | addSortIndicators(); 166 | enableUI(); 167 | }; 168 | })(); 169 | 170 | window.addEventListener('load', addSorting); 171 | -------------------------------------------------------------------------------- /coverage/lcov-report/src/component/ReactVirtualizedScroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for src/component/ReactVirtualizedScroll 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files src/component/ReactVirtualizedScroll

22 |
23 | 24 |
25 | 44.59% 26 | Statements 27 | 66/148 28 |
29 | 30 | 31 |
32 | 21.21% 33 | Branches 34 | 21/99 35 |
36 | 37 | 38 |
39 | 9.09% 40 | Functions 41 | 2/22 42 |
43 | 44 | 45 |
46 | 48.54% 47 | Lines 48 | 50/103 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
FileStatementsBranchesFunctionsLines
ReactVirtualizedScroll.tsx 77 |
78 | 		44.44%60/13521.21%21/9910%2/2047.83%44/92
index.tsx 92 |
93 | 		100%3/3100%0/0100%0/0100%3/3
svg.ts 107 |
108 | 		100%1/1100%0/0100%0/0100%1/1
utils.js 122 |
123 | 		22.22%2/9100%0/00%0/228.57%2/7
136 |
137 |
138 |
139 |
140 | Code coverage generated by 141 | istanbul 142 | <<<<<<< Updated upstream 143 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 144 | ======= 145 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 146 | >>>>>>> Stashed changes 147 |
148 | 149 | 150 | 155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /coverage/lcov-report/src/component/ReactVirtualizedScroll/index.tsx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for src/component/ReactVirtualizedScroll/index.tsx 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / src/component/ReactVirtualizedScroll index.tsx

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 3/3 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 0/0 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 3/3 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

59 | 
1
60 | 2
61 | 3
62 | 4
63 | 51x
64 | 1x
65 |  
66 | 1x
67 |  
import ReactVirtualizedScroll from './ReactVirtualizedScroll'
68 | import { useStateAndRef } from './utils.js'
69 |  
70 | export default { ReactVirtualizedScroll, useStateAndRef }
71 |  
72 | 73 |
74 |
75 |
76 | Code coverage generated by 77 | istanbul 78 | <<<<<<< Updated upstream 79 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 80 | ======= 81 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 82 | >>>>>>> Stashed changes 83 |
84 | 85 | 86 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /coverage/lcov-report/src/component/ReactVirtualizedScroll/svg.ts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for src/component/ReactVirtualizedScroll/svg.ts 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / src/component/ReactVirtualizedScroll svg.ts

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 1/1 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 0/0 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 1/1 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

59 | 
11x
export const loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4='
60 | 61 |
62 |
63 |
64 | Code coverage generated by 65 | istanbul 66 | <<<<<<< Updated upstream 67 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 68 | ======= 69 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 70 | >>>>>>> Stashed changes 71 |
72 | 73 | 74 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /coverage/lcov-report/src/component/ReactVirtualizedScroll/utils.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for src/component/ReactVirtualizedScroll/utils.js 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files / src/component/ReactVirtualizedScroll utils.js

22 |
23 | 24 |
25 | 22.22% 26 | Statements 27 | 2/9 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 0% 40 | Functions 41 | 0/2 42 |
43 | 44 | 45 |
46 | 28.57% 47 | Lines 48 | 2/7 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

 59 | 
1
 60 | 2
 61 | 3
 62 | 4
 63 | 5
 64 | 6
 65 | 7
 66 | 8
 67 | 91x
 68 | 1x
 69 |  
 70 |  
 71 |  
 72 |  
 73 |  
 74 |  
 75 |  
import React, { useState, useEffect, useRef } from 'react'
 76 | export const useStateAndRef = (data) => {
 77 |     const [data, setData] = useState(data)
 78 |     const dataRef = useRef(data)
 79 |     useEffect(() => {
 80 |         dataRef.current = data
 81 |     }, [data])
 82 |     return [data, setData, dataRef]
 83 | }
84 | 85 |
86 |
87 |
88 | Code coverage generated by 89 | istanbul 90 | <<<<<<< Updated upstream 91 | at Tue Jul 07 2020 19:15:00 GMT+0800 (GMT+08:00) 92 | ======= 93 | at Wed Jun 03 2020 17:53:20 GMT+0800 (GMT+08:00) 94 | >>>>>>> Stashed changes 95 |
96 | 97 | 98 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /coverage/lcov-report/svg.ts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for svg.ts 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 |
20 |
21 |

All files svg.ts

22 |
23 | 24 |
25 | 100% 26 | Statements 27 | 1/1 28 |
29 | 30 | 31 |
32 | 100% 33 | Branches 34 | 0/0 35 |
36 | 37 | 38 |
39 | 100% 40 | Functions 41 | 0/0 42 |
43 | 44 | 45 |
46 | 100% 47 | Lines 48 | 1/1 49 |
50 | 51 | 52 |
53 |

54 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 55 |

56 |
57 |
58 | 

59 | 
11x
export const loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4='
60 | 61 |
62 |
63 |
64 | Code coverage generated by 65 | istanbul 66 | at Thu Jan 16 2020 16:38:49 GMT+0800 (GMT+08:00) 67 |
68 | 69 | 70 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /coverage/lcov.info: -------------------------------------------------------------------------------- 1 | TN: 2 | SF:G:\我的npm\react-virtualized-scroll\lib\component\ReactVirtualizedScroll\ReactVirtualizedScroll.js 3 | FN:2,(anonymous_0) 4 | FN:3,(anonymous_1) 5 | FN:13,(anonymous_2) 6 | FN:15,(anonymous_3) 7 | FN:16,(anonymous_4) 8 | FN:20,(anonymous_5) 9 | FN:22,(anonymous_6) 10 | FN:25,(anonymous_7) 11 | FN:38,(anonymous_8) 12 | FN:40,(anonymous_9) 13 | FN:44,(anonymous_10) 14 | FN:59,(anonymous_11) 15 | FN:62,(anonymous_12) 16 | FN:65,(anonymous_13) 17 | FN:69,(anonymous_14) 18 | FN:74,(anonymous_15) 19 | FN:89,(anonymous_16) 20 | FN:100,(anonymous_17) 21 | FN:106,(anonymous_18) 22 | FN:117,(anonymous_19) 23 | FN:122,(anonymous_20) 24 | FN:130,(anonymous_21) 25 | FN:134,(anonymous_22) 26 | FN:142,(anonymous_23) 27 | FN:145,(anonymous_24) 28 | FN:154,(anonymous_25) 29 | FN:162,(anonymous_26) 30 | FN:164,(anonymous_27) 31 | FNF:28 32 | FNH:6 33 | FNDA:0,(anonymous_0) 34 | FNDA:0,(anonymous_1) 35 | FNDA:28,(anonymous_2) 36 | FNDA:17,(anonymous_3) 37 | FNDA:0,(anonymous_4) 38 | FNDA:1,(anonymous_5) 39 | FNDA:0,(anonymous_6) 40 | FNDA:1,(anonymous_7) 41 | FNDA:0,(anonymous_8) 42 | FNDA:0,(anonymous_9) 43 | FNDA:1,(anonymous_10) 44 | FNDA:0,(anonymous_11) 45 | FNDA:0,(anonymous_12) 46 | FNDA:0,(anonymous_13) 47 | FNDA:0,(anonymous_14) 48 | FNDA:0,(anonymous_15) 49 | FNDA:0,(anonymous_16) 50 | FNDA:0,(anonymous_17) 51 | FNDA:0,(anonymous_18) 52 | FNDA:0,(anonymous_19) 53 | FNDA:0,(anonymous_20) 54 | FNDA:0,(anonymous_21) 55 | FNDA:0,(anonymous_22) 56 | FNDA:0,(anonymous_23) 57 | FNDA:0,(anonymous_24) 58 | FNDA:1,(anonymous_25) 59 | FNDA:0,(anonymous_26) 60 | FNDA:0,(anonymous_27) 61 | DA:2,1 62 | DA:3,0 63 | DA:4,0 64 | DA:5,0 65 | DA:6,0 66 | DA:7,0 67 | DA:9,0 68 | DA:11,0 69 | DA:13,1 70 | DA:14,28 71 | DA:15,28 72 | DA:17,0 73 | DA:18,0 74 | DA:20,1 75 | DA:21,1 76 | DA:23,0 77 | DA:25,1 78 | DA:26,1 79 | DA:27,1 80 | DA:28,28 81 | DA:29,1 82 | DA:30,1 83 | DA:32,1 84 | DA:33,1 85 | DA:34,1 86 | DA:35,1 87 | DA:36,1 88 | DA:37,1 89 | DA:38,1 90 | DA:39,0 91 | DA:40,0 92 | DA:41,0 93 | DA:44,1 94 | DA:45,1 95 | DA:47,1 96 | DA:49,1 97 | DA:50,1 98 | DA:52,1 99 | DA:53,1 100 | DA:55,1 101 | DA:56,1 102 | DA:57,1 103 | DA:58,1 104 | DA:59,1 105 | DA:60,0 106 | DA:62,1 107 | DA:63,0 108 | DA:65,1 109 | DA:66,0 110 | DA:67,0 111 | DA:69,1 112 | DA:70,0 113 | DA:71,0 114 | DA:72,0 115 | DA:74,1 116 | DA:75,0 117 | DA:76,0 118 | DA:77,0 119 | DA:78,0 120 | DA:79,0 121 | DA:80,0 122 | DA:81,0 123 | DA:82,0 124 | DA:83,0 125 | DA:84,0 126 | DA:85,0 127 | DA:86,0 128 | DA:87,0 129 | DA:89,1 130 | DA:90,0 131 | DA:91,0 132 | DA:92,0 133 | DA:93,0 134 | DA:94,0 135 | DA:96,0 136 | DA:97,0 137 | DA:98,0 138 | DA:99,0 139 | DA:100,0 140 | DA:101,0 141 | DA:102,0 142 | DA:103,0 143 | DA:104,0 144 | DA:105,0 145 | DA:106,0 146 | DA:107,0 147 | DA:108,0 148 | DA:113,0 149 | DA:114,0 150 | DA:115,0 151 | DA:116,0 152 | DA:117,0 153 | DA:118,0 154 | DA:122,1 155 | DA:123,0 156 | DA:124,0 157 | DA:125,0 158 | DA:127,0 159 | DA:128,0 160 | DA:129,0 161 | DA:130,0 162 | DA:131,0 163 | DA:132,0 164 | DA:133,0 165 | DA:135,0 166 | DA:138,0 167 | DA:139,0 168 | DA:141,1 169 | DA:142,1 170 | DA:145,1 171 | DA:146,0 172 | DA:147,0 173 | DA:154,1 174 | DA:155,1 175 | DA:163,0 176 | DA:164,0 177 | DA:167,1 178 | DA:184,1 179 | LF:118 180 | LH:44 181 | BRDA:2,0,0,1 182 | BRDA:2,0,1,1 183 | BRDA:2,0,2,1 184 | BRDA:3,1,0,0 185 | BRDA:3,1,1,0 186 | BRDA:6,2,0,0 187 | BRDA:6,2,1,0 188 | BRDA:13,3,0,1 189 | BRDA:13,3,1,1 190 | BRDA:13,3,2,1 191 | BRDA:13,4,0,1 192 | BRDA:13,4,1,0 193 | BRDA:14,5,0,28 194 | BRDA:14,5,1,0 195 | BRDA:17,6,0,0 196 | BRDA:17,6,1,0 197 | BRDA:20,7,0,1 198 | BRDA:20,7,1,1 199 | BRDA:20,7,2,1 200 | BRDA:20,8,0,1 201 | BRDA:20,8,1,0 202 | BRDA:25,9,0,1 203 | BRDA:25,9,1,1 204 | BRDA:25,9,2,1 205 | BRDA:26,10,0,0 206 | BRDA:26,10,1,1 207 | BRDA:26,11,0,1 208 | BRDA:26,11,1,1 209 | BRDA:28,12,0,1 210 | BRDA:28,12,1,0 211 | BRDA:28,13,0,28 212 | BRDA:28,13,1,0 213 | BRDA:45,14,0,0 214 | BRDA:45,14,1,1 215 | BRDA:45,15,0,1 216 | BRDA:45,15,1,0 217 | BRDA:45,16,0,1 218 | BRDA:45,16,1,0 219 | BRDA:45,17,0,1 220 | BRDA:45,17,1,0 221 | BRDA:45,18,0,0 222 | BRDA:45,18,1,1 223 | BRDA:45,19,0,1 224 | BRDA:45,19,1,0 225 | BRDA:45,20,0,1 226 | BRDA:45,20,1,0 227 | BRDA:45,21,0,1 228 | BRDA:45,21,1,0 229 | BRDA:45,22,0,1 230 | BRDA:45,22,1,0 231 | BRDA:45,23,0,1 232 | BRDA:45,23,1,0 233 | BRDA:63,24,0,0 234 | BRDA:63,24,1,0 235 | BRDA:63,24,2,0 236 | BRDA:63,24,3,0 237 | BRDA:70,25,0,0 238 | BRDA:70,25,1,0 239 | BRDA:70,26,0,0 240 | BRDA:70,26,1,0 241 | BRDA:75,27,0,0 242 | BRDA:75,27,1,0 243 | BRDA:75,28,0,0 244 | BRDA:75,28,1,0 245 | BRDA:78,29,0,0 246 | BRDA:78,29,1,0 247 | BRDA:78,30,0,0 248 | BRDA:78,30,1,0 249 | BRDA:80,31,0,0 250 | BRDA:80,31,1,0 251 | BRDA:82,32,0,0 252 | BRDA:82,32,1,0 253 | BRDA:84,33,0,0 254 | BRDA:84,33,1,0 255 | BRDA:84,34,0,0 256 | BRDA:84,34,1,0 257 | BRDA:86,35,0,0 258 | BRDA:86,35,1,0 259 | BRDA:90,36,0,0 260 | BRDA:90,36,1,0 261 | BRDA:92,37,0,0 262 | BRDA:92,37,1,0 263 | BRDA:96,38,0,0 264 | BRDA:96,38,1,0 265 | BRDA:98,39,0,0 266 | BRDA:98,39,1,0 267 | BRDA:102,40,0,0 268 | BRDA:102,40,1,0 269 | BRDA:104,41,0,0 270 | BRDA:104,41,1,0 271 | BRDA:115,42,0,0 272 | BRDA:115,42,1,0 273 | BRDA:124,43,0,0 274 | BRDA:124,43,1,0 275 | BRDA:128,44,0,0 276 | BRDA:128,44,1,0 277 | BRDA:128,45,0,0 278 | BRDA:128,45,1,0 279 | BRDA:128,45,2,0 280 | BRDA:132,46,0,0 281 | BRDA:132,46,1,0 282 | BRDA:138,47,0,0 283 | BRDA:138,47,1,0 284 | BRDA:150,48,0,0 285 | BRDA:150,48,1,0 286 | BRDA:151,49,0,0 287 | BRDA:151,49,1,0 288 | BRDA:151,50,0,0 289 | BRDA:151,50,1,0 290 | BRDA:152,51,0,0 291 | BRDA:152,51,1,0 292 | BRDA:161,52,0,1 293 | BRDA:161,52,1,0 294 | BRDA:161,53,0,0 295 | BRDA:161,53,1,1 296 | BRDA:171,54,0,0 297 | BRDA:171,54,1,1 298 | BRDA:177,55,0,0 299 | BRDA:177,55,1,1 300 | BRDA:177,56,0,1 301 | BRDA:177,56,1,1 302 | BRDA:178,57,0,0 303 | BRDA:178,57,1,1 304 | BRDA:180,58,0,1 305 | BRDA:180,58,1,0 306 | BRDA:179,59,0,1 307 | BRDA:179,59,1,1 308 | BRDA:180,60,0,0 309 | BRDA:180,60,1,1 310 | BRDA:181,61,0,0 311 | BRDA:181,61,1,0 312 | BRF:131 313 | BRH:41 314 | end_of_record 315 | TN: 316 | SF:G:\我的npm\react-virtualized-scroll\lib\component\ReactVirtualizedScroll\index.js 317 | FN:2,(anonymous_0) 318 | FNF:1 319 | FNH:1 320 | FNDA:1,(anonymous_0) 321 | DA:2,1 322 | DA:3,1 323 | DA:5,1 324 | DA:6,1 325 | DA:7,1 326 | DA:8,1 327 | LF:6 328 | LH:6 329 | BRDA:2,0,0,1 330 | BRDA:2,0,1,1 331 | BRDA:2,0,2,1 332 | BRDA:3,1,0,1 333 | BRDA:3,1,1,0 334 | BRDA:3,2,0,1 335 | BRDA:3,2,1,1 336 | BRF:7 337 | BRH:6 338 | end_of_record 339 | TN: 340 | SF:G:\我的npm\react-virtualized-scroll\lib\component\ReactVirtualizedScroll\svg.js 341 | FNF:0 342 | FNH:0 343 | DA:2,1 344 | DA:3,1 345 | DA:4,1 346 | LF:3 347 | LH:3 348 | BRF:0 349 | BRH:0 350 | end_of_record 351 | TN: 352 | SF:G:\我的npm\react-virtualized-scroll\lib\component\ReactVirtualizedScroll\utils.js 353 | FN:5,(anonymous_0) 354 | FN:8,(anonymous_1) 355 | FNF:2 356 | FNH:0 357 | FNDA:0,(anonymous_0) 358 | FNDA:0,(anonymous_1) 359 | DA:2,1 360 | DA:3,1 361 | DA:4,1 362 | DA:5,1 363 | DA:6,0 364 | DA:7,0 365 | DA:8,0 366 | DA:9,0 367 | DA:11,0 368 | LF:9 369 | LH:4 370 | BRF:0 371 | BRH:0 372 | end_of_record 373 | TN: 374 | SF:G:\我的npm\react-virtualized-scroll\src\component\ReactVirtualizedScroll\ReactVirtualizedScroll.tsx 375 | FN:31,(anonymous_8) 376 | FN:32,(anonymous_9) 377 | FN:37,(anonymous_10) 378 | FN:69,(anonymous_11) 379 | FN:73,(anonymous_12) 380 | FN:77,(anonymous_13) 381 | FN:82,(anonymous_14) 382 | FN:88,(anonymous_15) 383 | FN:103,(anonymous_16) 384 | FN:112,(anonymous_17) 385 | FN:116,(anonymous_18) 386 | FN:125,(anonymous_19) 387 | FN:134,(anonymous_20) 388 | FN:141,(anonymous_21) 389 | FN:144,(anonymous_22) 390 | FN:155,(anonymous_23) 391 | FN:162,(anonymous_24) 392 | FN:198,(anonymous_25) 393 | FN:211,(anonymous_26) 394 | FN:213,(anonymous_27) 395 | FNF:20 396 | FNH:2 397 | FNDA:0,(anonymous_8) 398 | FNDA:0,(anonymous_9) 399 | FNDA:1,(anonymous_10) 400 | FNDA:0,(anonymous_11) 401 | FNDA:0,(anonymous_12) 402 | FNDA:0,(anonymous_13) 403 | FNDA:0,(anonymous_14) 404 | FNDA:0,(anonymous_15) 405 | FNDA:0,(anonymous_16) 406 | FNDA:0,(anonymous_17) 407 | FNDA:0,(anonymous_18) 408 | FNDA:0,(anonymous_19) 409 | FNDA:0,(anonymous_20) 410 | FNDA:0,(anonymous_21) 411 | FNDA:0,(anonymous_22) 412 | FNDA:0,(anonymous_23) 413 | FNDA:0,(anonymous_24) 414 | FNDA:1,(anonymous_25) 415 | FNDA:0,(anonymous_26) 416 | FNDA:0,(anonymous_27) 417 | DA:1,1 418 | DA:2,1 419 | DA:3,1 420 | DA:4,1 421 | DA:5,1 422 | DA:31,1 423 | DA:32,0 424 | DA:33,0 425 | DA:37,1 426 | DA:38,1 427 | DA:39,1 428 | DA:40,1 429 | DA:41,1 430 | DA:42,1 431 | DA:43,1 432 | DA:44,1 433 | DA:45,1 434 | DA:46,1 435 | DA:47,1 436 | DA:48,1 437 | DA:49,1 438 | DA:50,1 439 | DA:51,1 440 | DA:55,1 441 | DA:57,1 442 | DA:58,1 443 | DA:60,1 444 | DA:61,1 445 | DA:63,1 446 | DA:65,1 447 | DA:66,1 448 | DA:67,1 449 | DA:69,1 450 | DA:70,0 451 | DA:73,1 452 | DA:74,0 453 | DA:77,1 454 | DA:78,0 455 | DA:79,0 456 | DA:82,1 457 | DA:83,0 458 | DA:84,0 459 | DA:87,1 460 | DA:89,0 461 | DA:91,0 462 | DA:92,0 463 | DA:93,0 464 | DA:94,0 465 | DA:96,0 466 | DA:97,0 467 | DA:102,1 468 | DA:104,0 469 | DA:105,0 470 | DA:106,0 471 | DA:107,0 472 | DA:109,0 473 | DA:110,0 474 | DA:111,0 475 | DA:112,0 476 | DA:113,0 477 | DA:114,0 478 | DA:115,0 479 | DA:116,0 480 | DA:117,0 481 | DA:118,0 482 | DA:122,0 483 | DA:123,0 484 | DA:124,0 485 | DA:125,0 486 | DA:126,0 487 | DA:134,1 488 | DA:136,0 489 | DA:137,0 490 | DA:139,0 491 | DA:140,0 492 | DA:141,0 493 | DA:142,0 494 | DA:143,0 495 | DA:145,0 496 | DA:148,0 497 | DA:151,1 498 | DA:153,1 499 | DA:155,0 500 | DA:161,1 501 | DA:162,0 502 | DA:163,0 503 | DA:198,1 504 | DA:199,1 505 | DA:211,0 506 | DA:213,0 507 | DA:230,1 508 | DA:258,1 509 | LF:92 510 | LH:44 511 | BRDA:39,0,0,0 512 | BRDA:39,0,1,1 513 | BRDA:40,1,0,1 514 | BRDA:40,1,1,0 515 | BRDA:41,2,0,1 516 | BRDA:41,2,1,0 517 | BRDA:42,3,0,1 518 | BRDA:42,3,1,0 519 | BRDA:44,4,0,0 520 | BRDA:44,4,1,1 521 | BRDA:45,5,0,1 522 | BRDA:45,5,1,0 523 | BRDA:47,6,0,1 524 | BRDA:47,6,1,0 525 | BRDA:48,7,0,1 526 | BRDA:48,7,1,0 527 | BRDA:49,8,0,1 528 | BRDA:49,8,1,0 529 | BRDA:51,9,0,1 530 | BRDA:51,9,1,0 531 | BRDA:74,10,0,0 532 | BRDA:74,10,1,0 533 | BRDA:74,10,2,0 534 | BRDA:74,10,3,0 535 | BRDA:83,11,0,0 536 | BRDA:83,11,1,0 537 | BRDA:83,12,0,0 538 | BRDA:83,12,1,0 539 | BRDA:89,13,0,0 540 | BRDA:89,13,1,0 541 | BRDA:89,14,0,0 542 | BRDA:89,14,1,0 543 | BRDA:92,15,0,0 544 | BRDA:92,15,1,0 545 | BRDA:92,16,0,0 546 | BRDA:92,16,1,0 547 | BRDA:93,17,0,0 548 | BRDA:93,17,1,0 549 | BRDA:94,18,0,0 550 | BRDA:94,18,1,0 551 | BRDA:96,19,0,0 552 | BRDA:96,19,1,0 553 | BRDA:96,20,0,0 554 | BRDA:96,20,1,0 555 | BRDA:97,21,0,0 556 | BRDA:97,21,1,0 557 | BRDA:104,22,0,0 558 | BRDA:104,22,1,0 559 | BRDA:105,23,0,0 560 | BRDA:105,23,1,0 561 | BRDA:109,24,0,0 562 | BRDA:109,24,1,0 563 | BRDA:111,25,0,0 564 | BRDA:111,25,1,0 565 | BRDA:114,26,0,0 566 | BRDA:114,26,1,0 567 | BRDA:115,27,0,0 568 | BRDA:115,27,1,0 569 | BRDA:124,28,0,0 570 | BRDA:124,28,1,0 571 | BRDA:136,29,0,0 572 | BRDA:136,29,1,0 573 | BRDA:139,30,0,0 574 | BRDA:139,30,1,0 575 | BRDA:139,31,0,0 576 | BRDA:139,31,1,0 577 | BRDA:139,31,2,0 578 | BRDA:143,32,0,0 579 | BRDA:143,32,1,0 580 | BRDA:148,33,0,0 581 | BRDA:148,33,1,0 582 | BRDA:180,34,0,0 583 | BRDA:180,34,1,0 584 | BRDA:182,35,0,0 585 | BRDA:182,35,1,0 586 | BRDA:183,36,0,0 587 | BRDA:183,36,1,0 588 | BRDA:188,37,0,0 589 | BRDA:188,37,1,0 590 | BRDA:207,38,0,1 591 | BRDA:207,38,1,0 592 | BRDA:207,39,0,0 593 | BRDA:207,39,1,1 594 | BRDA:235,40,0,0 595 | BRDA:235,40,1,1 596 | BRDA:241,41,0,0 597 | BRDA:241,41,1,1 598 | BRDA:241,42,0,1 599 | BRDA:241,42,1,1 600 | BRDA:242,43,0,0 601 | BRDA:242,43,1,1 602 | BRDA:246,44,0,1 603 | BRDA:246,44,1,0 604 | BRDA:245,45,0,1 605 | BRDA:245,45,1,1 606 | BRDA:246,46,0,0 607 | BRDA:246,46,1,1 608 | BRDA:247,47,0,0 609 | BRDA:247,47,1,0 610 | BRF:99 611 | BRH:21 612 | end_of_record 613 | TN: 614 | SF:G:\我的npm\react-virtualized-scroll\src\component\ReactVirtualizedScroll\index.tsx 615 | FNF:0 616 | FNH:0 617 | DA:1,1 618 | DA:2,1 619 | DA:4,1 620 | LF:3 621 | LH:3 622 | BRF:0 623 | BRH:0 624 | end_of_record 625 | TN: 626 | SF:G:\我的npm\react-virtualized-scroll\src\component\ReactVirtualizedScroll\svg.ts 627 | FNF:0 628 | FNH:0 629 | DA:1,1 630 | LF:1 631 | LH:1 632 | BRF:0 633 | BRH:0 634 | end_of_record 635 | TN: 636 | SF:G:\我的npm\react-virtualized-scroll\src\component\ReactVirtualizedScroll\utils.js 637 | FN:2,(anonymous_0) 638 | FN:5,(anonymous_1) 639 | FNF:2 640 | FNH:0 641 | FNDA:0,(anonymous_0) 642 | FNDA:0,(anonymous_1) 643 | DA:1,1 644 | DA:2,1 645 | DA:3,0 646 | DA:4,0 647 | DA:5,0 648 | DA:6,0 649 | DA:8,0 650 | LF:7 651 | LH:2 652 | BRF:0 653 | BRH:0 654 | end_of_record 655 | -------------------------------------------------------------------------------- /example/src/app.tsx: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | import React, { useState, useCallback } from 'react' 3 | import ReactVirtualizedScroll from '../../lib/component/ReactVirtualizedScroll/index.js' 4 | import useStateAndRef from './utils' 5 | // import ReactVirtualizedScroll from '../../src/component/ReactVirtualizedScroll/index.tsx' 6 | import { loading_pullup } from '../../src/component/ReactVirtualizedScroll/svg' 7 | 8 | const initState = [{ 9 | key: 1, 10 | value: 1 11 | }, { 12 | key: 2, 13 | value: 2 14 | }, { 15 | key: 3, 16 | value: 3 17 | }, { 18 | key: 4, 19 | value: 4 20 | }, { 21 | key: 5, 22 | value: 5 23 | }] 24 | 25 | const example = () => { 26 | const [data, setData, dataRef] = useStateAndRef(initState) 27 | 28 | const [hasMore, setHasMore] = useState(true) 29 | const info = { 30 | title: 'VirtualizedScroll', 31 | desc: '虚拟滚动搭配上拉下滑加载的scroll组件' 32 | } 33 | const requestPullDown = () => { 34 | return new Promise(resolve => { 35 | setTimeout(() => { 36 | setData(initState) 37 | setHasMore(true) 38 | resolve() 39 | }, 2000); 40 | }) 41 | } 42 | const requestPullUp = useCallback( 43 | () => { 44 | return new Promise(resolve => { 45 | if (data.length === 100) { 46 | setHasMore(false) 47 | resolve() 48 | } 49 | else { 50 | setTimeout(() => { 51 | const target: any = [] 52 | for (let i = data.length + 1; i < data.length + 6; i++) { 53 | target.push({ 54 | key: i, 55 | value: i 56 | }) 57 | } 58 | setData(data.concat(target)) 59 | resolve() 60 | }, 1000); 61 | } 62 | }) 63 | }, 64 | [data], 65 | ) 66 | const handlePullDown = async () => { 67 | await requestPullDown() 68 | } 69 | const handlePullUp = async () => { 70 | await requestPullUp() 71 | } 72 | const onScroll = (clientHeight: number, scrollTop: number, scrollHeight: number) => { 73 | // console.log('onScroll') 74 | } 75 | const logo = { 76 | pulldown_loading: , 77 | pulldown_success: , 78 | pullup_loading: , 79 | pullup_success: '没有更多了', 80 | } 81 | const countAdd = ((index: number) => { 82 | const newData = dataRef.current 83 | newData[index].value += 100 84 | setData(JSON.parse(JSON.stringify(newData))) 85 | }) 86 | 87 | const Row = ((args: any) => { 88 | const {index, info, data} = args 89 | return
countAdd(index)}> 101 |

{ info.title } - { data[index].value }

102 |

{ info.desc }

103 |
104 | }) 105 | 106 | return ( 107 |
108 | 118 | 119 |
120 | ) 121 | } 122 | 123 | export default example 124 | -------------------------------------------------------------------------------- /example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | NPMPluginTemplate 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | import App from './app' 4 | render(, document.getElementById('root')) 5 | -------------------------------------------------------------------------------- /example/src/utils.ts: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useRef } from 'react' 2 | export default (initState) => { 3 | const [data, setData] = useState(initState) 4 | const dataRef = useRef(data) 5 | useEffect(() => { 6 | dataRef.current = data 7 | }, [data]) 8 | return [data, setData, dataRef] 9 | } -------------------------------------------------------------------------------- /jestconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "transform": { 3 | "^.+\\.(t|j)sx?$": "ts-jest", 4 | "^.+\\.jsx?$": "babel-jest" 5 | }, 6 | "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", 7 | "moduleFileExtensions": ["tsx", "ts", "js", "jsx", "json", "node"], 8 | "moduleNameMapper": { 9 | "\\.(s?css|less)$": "identity-obj-proxy" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lib/README.md: -------------------------------------------------------------------------------- 1 | # react-virtualized-scroll 2 | 虚拟滚动搭配上拉下滑加载的scroll组件 3 | 4 | [![github](https://img.shields.io/github/package-json/v/DavidWong9785/react-virtualized-scroll?logo=github)](https://github.com/DavidWong9785/react-virtualized-scroll) 5 | [![issues](https://img.shields.io/github/issues/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll/issues) 6 | [![forks](https://img.shields.io/github/forks/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll) 7 | [![stars](https://img.shields.io/github/stars/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)

8 | [![npm](https://img.shields.io/npm/v/react-virtualized-scroll?label=versoin&logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll) 9 | [![downloads](https://img.shields.io/npm/dm/react-virtualized-scroll?logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll) 10 | [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-virtualized-scroll)](https://www.npmjs.com/package/react-virtualized-scroll) 11 | ![license](https://img.shields.io/github/license/DavidWong9785/react-virtualized-scroll) 12 | ![github last commit](https://img.shields.io/github/last-commit/DavidWong9785/react-virtualized-scroll) 13 | 14 | ![avatar](./test.gif) 15 | 16 | ### 简介 17 | 18 | - 搭配 typescript 和 react-hooks 编写的虚拟滚动组件 19 | - 基于 react-virtualized 进行再封装。 20 | - 暴露了 react-virtualized 的 ref，可调用 react-virtualized 的方法 21 | - 除了渲染列表，你还可以传入其他的子组件（如悬浮球~等），只需要把定位设为 fixed 22 | 23 | ### 安装导入 24 | 25 | > cnpm i react-virtualized react-virtualized-scroll --save 26 | 27 | > import ReactVirtualizedScroll from 'react-virtualized-scroll' 28 | 29 | ### 使用 30 | 31 | ``` 32 | 43 |
fixed element
44 | 45 | ``` 46 | 47 | ### 属性 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 89 | 90 | 91 | 92 | 93 | 107 | 108 | 109 | 110 | 111 | 112 | 115 | 116 | 117 | 118 | 119 | 120 | 126 | 127 | 128 | 129 | 130 | 131 | 136 | 137 | 138 |
名称类型说明
width、heightstring列表宽高，带单位 59 |

可选

60 |

默认100vw/vh

61 |
hasMoreboolean判断是否还可以下滑加载必传，默认true
dataarray用于渲染列表的目标数必传，默认 []
infoobject需要传入 row 渲染函数作为参数的数据可选
logoobject加载时展示的 loading 图案，四个属性 86 |

可选

87 |

有默认logo

88 |
onPullDownfunction 94 |

95 | 下拉加载回调 96 |

97 |

98 | 该方法必须返回一个 promise 对象 ( 用于控制下拉 loading 状态 ) 99 |

100 |

101 | 可以使用 async 方法或者直接返回 promise 对象 102 |

103 |

104 | 当 promise 状态完成之后 ( resolve/reject )，下拉加载状态结束 105 |

106 | 		可选
onPullUpfunction 113 | 上滑加载回调，目的同上，该方法需要返回一个 promise 对象 114 | 可选
onScrollfunction 121 |

滑动回调

122 |

参数1: clientHeight

123 |

参数2: scrollTop

124 |

参数3: scrollHeight

125 | 		可选
rowfunction 132 |

列表每一行的渲染函数

133 |

参数1：类型为object，属性包含该行索引 index 和自定义传入的 info 属性

134 |

参数2：用于渲染列表的目标数组data

135 | 		必传
139 | 140 | ### logo属性（字符串，图片等等，只要是JSX.Element即可） 141 | 142 | | 属性 | 说明 | 143 | | ---------------- | --------------------- | 144 | | pulldown_loading | 下拉加载 loading 的 logo | 145 | | pulldown_success | 下拉加载 成功 的 logo | 146 | | pullup_loading | 上滑加载 loading 的 logo | 147 | | pullup_success | 上滑加载 成功 的 logo | -------------------------------------------------------------------------------- /lib/__tests__/demo.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __assign = (this && this.__assign) || function () { 3 | __assign = Object.assign || function(t) { 4 | for (var s, i = 1, n = arguments.length; i < n; i++) { 5 | s = arguments[i]; 6 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 7 | t[p] = s[p]; 8 | } 9 | return t; 10 | }; 11 | return __assign.apply(this, arguments); 12 | }; 13 | var __importDefault = (this && this.__importDefault) || function (mod) { 14 | return (mod && mod.__esModule) ? mod : { "default": mod }; 15 | }; 16 | Object.defineProperty(exports, "__esModule", { value: true }); 17 | var react_1 = __importDefault(require("react")); 18 | var enzyme_1 = require("enzyme"); 19 | var enzyme_adapter_react_16_1 = __importDefault(require("enzyme-adapter-react-16")); 20 | var index_1 = __importDefault(require("../component/ReactVirtualizedScroll/index")); 21 | enzyme_1.configure({ adapter: new enzyme_adapter_react_16_1.default() }); 22 | var setup = function () { 23 | // 模拟 props 24 | var props = { 25 | height: '100vh', 26 | row: function () { }, 27 | hasMore: true 28 | }; 29 | // 通过 enzyme 提供的 shallow(浅渲染) 创建组件 30 | var wrapper = enzyme_1.shallow(react_1.default.createElement(index_1.default, __assign({}, props))); 31 | return { 32 | props: props, 33 | wrapper: wrapper, 34 | }; 35 | }; 36 | describe('测试height属性', function () { 37 | var _a = setup(), wrapper = _a.wrapper, props = _a.props; 38 | it('props', function () { 39 | expect(props.height).toEqual('100vh'); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /lib/assets/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1578637319034'); /* IE9 */ 3 | src: url('iconfont.eot?t=1578637319034#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFRIRoATYCJAMYCw4ABCAFhG0HYhsoCFFUTppkf4U4RBYobL8q1RqS2WPnlCFBo7GKFHDAYghuPVikPTPGSvDG5xkqd+fb7TfWfzouIB7+f79v+1wblWaOScQTnliEhDdLM/2TaIXkoZHMmmfyGzjnonwDm65BowSjLG08nE1kzfkfpDGBft9vrrIERkSYRbmKUO0Rzpv+EqTpwcC6PI12AhiN9IK2NtffElXBPp0cfBcOAs798xgziFvb89w8Bzxk4ZqNpuRg+pv/wrmxywtwTVzLA0w86gIa6/PvCxzBcfCfO8BDunlbQhnWPJBEw7a29N878nqgwANVvaLX13vRdP7/905/6/gDa13Lcplj08IA44ACGmPbIiuQTpigpqLOyC4BXh0eJjBoHgM8t7/eU1fhjQrEvcAz1K1plREU+hWtZ2FZAIla+tPjNHiSvj/+ORzWJDXzJl69sXNo+XNYD+rkPcbw9jNDWUbGXoBC7PRaH2nk0b1gg9YvNJ1HhvVLys/hD/5sV8+mJvScYdj/yyNURZKJBtJhJl2MVX4Oh2phyQ6C2ye7DgaFX7tqiWU9yDy6su04YAjviL2AJ0il8Zw9Qt1PDu13ZTQHuseSdB/wVk3Qktl6ytKuH0SgiqMfxD6g973BG2xHUEQzq1UyZ4umsha6ZzKm9shpGK+WQe8YssH8DuyqW1qqirD/2ukZ090542X17dYJqd9G2u+m7g3T7ItPSqVt9H0MsHWDPjhS1Nxa0MvQ2DlhmnWlrSO6bSPkRdJK3Ql6u4RRAU3piFaDVhtdN23dPaPKG7C9SgYm8+URXWQQXlOr1yCfFVuhdYgu7IMm/qTwREjDp7bq8VDb+oqV2Mod5Psb/uAdaHYQsKIbEC6epTtzuXeVjfObxOyVJS036DgL07KOgv/I/0uIDogNIZf4pA0+O4Mh4jEbQr4p4BW5NarmYeDj4xN54e3f5zaCAs/o3GzZsNUf2cPr6bn7fWa5y4A18BKxubb53a/jQ0ku1scaTQjw1C2ge4x/+uZ3fQLascKZ5+wGl8dJD1BaTn1cQEr57y0PlNXkq+VOkNMAG1c2k8WagH18TBWQ26vD8d0AsAOgm1HCVanqhC82cdybFQ6HTPKie2qCI/9Nn/FjV76jU/5/L9Yu4POJ2lB38zyrTvSXkJnN++9UlBVR7qgC1rVi1gllz9dlaU5rcThh0HfSwTnpu5d8ZnY+od9MCUmfOcj6reIKaS9UQ45C0+8kDNpDXz5kSqohygC2lQLCuAmSUa8hG3fGFdIHqll/aMYDhkHXgtxwyHqM92WBUThs/3Nks9QNDNrPCm/wqthIVZCSHyFlEGBxPG0mDkghe0zJfrx5ri77kiWsieMQxxnHkoWwOg5V8wU/cfueNHayhPrOEmAocDDbPxaxMik3bq76rdffgKcSM2SkrsX8CEQpaJ+JOMIM3EGazqp7l+6ZH565nHJ5mE9kEkyDGWI/mmFxf78QWGosXBHOLfDUyJ8rHZ8vT17lFhjkPbJFihwlarTo03ffr8xfkA4dHzYaOYHYGO0UcWac3rN0GeUote8Hsars59IQAQ==') format('woff2'), 5 | url('iconfont.woff?t=1578637319034') format('woff'), 6 | url('iconfont.ttf?t=1578637319034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1578637319034#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .iconshuaxin:before { 19 | content: "\e60c"; 20 | } 21 | 22 | .iconcheck-circle:before { 23 | content: "\e77d"; 24 | } 25 | 26 | .iconreload:before { 27 | content: "\e788"; 28 | } 29 | 30 | .iconicon-test:before { 31 | content: "\e658"; 32 | } 33 | 34 | .iconfiltration:before { 35 | content: "\e630"; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /lib/assets/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/lib/assets/iconfont.eot -------------------------------------------------------------------------------- /lib/assets/iconfont.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | !function (l) { var e, c = '', t = (e = document.getElementsByTagName("script"))[e.length - 1].getAttribute("data-injectcss"); if (t && !l.__iconfont__svg__cssinject__) { 3 | l.__iconfont__svg__cssinject__ = !0; 4 | try { 5 | document.write(""); 6 | } 7 | catch (e) { 8 | console && console.log(e); 9 | } 10 | } !function (e) { if (document.addEventListener) 11 | if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) 12 | setTimeout(e, 0); 13 | else { 14 | var t = function () { document.removeEventListener("DOMContentLoaded", t, !1), e(); }; 15 | document.addEventListener("DOMContentLoaded", t, !1); 16 | } 17 | else 18 | document.attachEvent && (o = e, i = l.document, a = !1, (c = function () { try { 19 | i.documentElement.doScroll("left"); 20 | } 21 | catch (e) { 22 | return void setTimeout(c, 50); 23 | } n(); })(), i.onreadystatechange = function () { "complete" == i.readyState && (i.onreadystatechange = null, n()); }); function n() { a || (a = !0, o()); } var o, i, a, c; }(function () { var e, t, n, o, i, a; (e = document.createElement("div")).innerHTML = c, c = null, (t = e.getElementsByTagName("svg")[0]) && (t.setAttribute("aria-hidden", "true"), t.style.position = "absolute", t.style.width = 0, t.style.height = 0, t.style.overflow = "hidden", n = t, (o = document.body).firstChild ? (i = n, (a = o.firstChild).parentNode.insertBefore(i, a)) : o.appendChild(n)); }); }(window); 24 | -------------------------------------------------------------------------------- /lib/assets/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /lib/assets/iconfont.ts: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | !function (l) { var e, c = '', t = (e = document.getElementsByTagName("script"))[e.length - 1].getAttribute("data-injectcss"); if (t && !l.__iconfont__svg__cssinject__) { 3 | l.__iconfont__svg__cssinject__ = !0; 4 | try { 5 | document.write(""); 6 | } 7 | catch (e) { 8 | console && console.log(e); 9 | } 10 | } !function (e) { if (document.addEventListener) 11 | if (~["complete", "loaded", "interactive"].indexOf(document.readyState)) 12 | setTimeout(e, 0); 13 | else { 14 | var t = function () { document.removeEventListener("DOMContentLoaded", t, !1), e(); }; 15 | document.addEventListener("DOMContentLoaded", t, !1); 16 | } 17 | else 18 | document.attachEvent && (o = e, i = l.document, a = !1, (c = function () { try { 19 | i.documentElement.doScroll("left"); 20 | } 21 | catch (e) { 22 | return void setTimeout(c, 50); 23 | } n(); })(), i.onreadystatechange = function () { "complete" == i.readyState && (i.onreadystatechange = null, n()); }); function n() { a || (a = !0, o()); } var o, i, a, c; }(function () { var e, t, n, o, i, a; (e = document.createElement("div")).innerHTML = c, c = null, (t = e.getElementsByTagName("svg")[0]) && (t.setAttribute("aria-hidden", "true"), t.style.position = "absolute", t.style.width = 0, t.style.height = 0, t.style.overflow = "hidden", n = t, (o = document.body).firstChild ? (i = n, (a = o.firstChild).parentNode.insertBefore(i, a)) : o.appendChild(n)); }); }(window); 24 | -------------------------------------------------------------------------------- /lib/assets/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/lib/assets/iconfont.ttf -------------------------------------------------------------------------------- /lib/assets/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/lib/assets/iconfont.woff -------------------------------------------------------------------------------- /lib/assets/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/lib/assets/iconfont.woff2 -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/ReactVirtualizedScroll.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __assign = (this && this.__assign) || function () { 3 | __assign = Object.assign || function(t) { 4 | for (var s, i = 1, n = arguments.length; i < n; i++) { 5 | s = arguments[i]; 6 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 7 | t[p] = s[p]; 8 | } 9 | return t; 10 | }; 11 | return __assign.apply(this, arguments); 12 | }; 13 | var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { 14 | if (k2 === undefined) k2 = k; 15 | Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); 16 | }) : (function(o, m, k, k2) { 17 | if (k2 === undefined) k2 = k; 18 | o[k2] = m[k]; 19 | })); 20 | var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { 21 | Object.defineProperty(o, "default", { enumerable: true, value: v }); 22 | }) : function(o, v) { 23 | o["default"] = v; 24 | }); 25 | var __importStar = (this && this.__importStar) || function (mod) { 26 | if (mod && mod.__esModule) return mod; 27 | var result = {}; 28 | if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); 29 | __setModuleDefault(result, mod); 30 | return result; 31 | }; 32 | Object.defineProperty(exports, "__esModule", { value: true }); 33 | var react_1 = __importStar(require("react")); 34 | var react_virtualized_1 = require("react-virtualized"); 35 | var svg_1 = require("./svg"); 36 | require("../../assets/iconfont.css"); 37 | require("./style.css"); 38 | var Row = function (_a) { 39 | var row = _a.row, data = _a.data, index = _a.index, info = _a.info; 40 | return react_1.useMemo(function () { 41 | return row({ data: data, index: index, info: info }); 42 | }, [JSON.stringify(data[index])]); 43 | }; 44 | var VirtualizedScroll = function (_a, ref) { 45 | var children = _a.children, _b = _a.hasMore, hasMore = _b === void 0 ? true : _b, _c = _a.refreshDistance, refreshDistance = _c === void 0 ? 120 : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.data, data = _e === void 0 ? [] : _e, info = _a.info, _f = _a.height, height = _f === void 0 ? '100vh' : _f, _g = _a.width, width = _g === void 0 ? '100vw' : _g, noDataRow = _a.noDataRow, _h = _a.onPullDown, onPullDown = _h === void 0 ? null : _h, _j = _a.onPullUp, onPullUp = _j === void 0 ? null : _j, _k = _a.onScroll, onScroll = _k === void 0 ? null : _k, row = _a.row, _l = _a.logo, logo = _l === void 0 ? {} : _l; 46 | // 下拉状态 47 | var _m = react_1.useState('init'), STATS = _m[0], setSTATS = _m[1]; 48 | // touch数据 49 | var _o = react_1.useState(0), startY = _o[0], setStartY = _o[1]; 50 | var _p = react_1.useState(0), offset = _p[0], setOffset = _p[1]; 51 | // vList容器 52 | var vListRef = react_1.useRef(); 53 | var timer = react_1.useRef(); 54 | // 上滑时，scrollTop为0禁止滑动 55 | var scrollingDisable = react_1.useRef(false); 56 | var hasMoreRef = react_1.useRef(true); 57 | var canNotDrag = react_1.useRef(false); 58 | var isPullUpLoading = react_1.useRef(false); 59 | react_1.useEffect(function () { 60 | hasMoreRef.current = hasMore; 61 | }, [hasMore]); 62 | react_1.useEffect(function () { 63 | canNotDrag.current = STATS === 'refreshing' || STATS === 'success' || STATS == 'scroll' || !onPullDown; 64 | }, [STATS]); 65 | var initState = function () { 66 | setOffset(0); 67 | setStartY(0); 68 | }; 69 | var onTouchStart = function ($event) { 70 | if (canNotDrag.current || scrollingDisable.current) 71 | return; 72 | setStartY($event.nativeEvent.touches[0].pageY); 73 | }; 74 | var onTouchMove = react_1.useCallback(function ($event) { 75 | if (canNotDrag.current || scrollingDisable.current) 76 | return; 77 | var offsetComputed = $event.nativeEvent.touches[0].pageY - startY; 78 | if (0 < offsetComputed && offsetComputed <= refreshDistance) 79 | setOffset(offsetComputed); 80 | else if (offsetComputed < 0) 81 | setOffset(0); 82 | else if (offsetComputed > refreshDistance) 83 | setOffset(refreshDistance); 84 | if (offset < refreshDistance && STATS !== 'dragging') 85 | setSTATS('dragging'); 86 | else if (offset >= refreshDistance) 87 | setSTATS('pre-refresh'); 88 | }, [startY, canNotDrag, offset, STATS]); 89 | var onTouchEnd = react_1.useCallback(function ($event) { 90 | if (canNotDrag.current) 91 | return; 92 | if (scrollingDisable.current) { 93 | initState(); 94 | return; 95 | } 96 | if (STATS === 'pre-refresh') { 97 | setSTATS('refreshing'); 98 | if (!onPullDown) 99 | return; 100 | onPullDown().then(function () { 101 | setSTATS('success'); 102 | if (vListRef.current) 103 | vListRef.current.scrollToRow(0); 104 | if (timer.current) 105 | clearTimeout(timer.current); 106 | timer.current = setTimeout(function () { 107 | setSTATS('init'); 108 | initState(); 109 | }, 500); 110 | }); 111 | } 112 | else { 113 | initState(); 114 | setSTATS('not-enough'); 115 | if (timer.current) 116 | clearTimeout(timer.current); 117 | timer.current = setTimeout(function () { 118 | setSTATS('init'); 119 | }, 500); 120 | } 121 | }, [timer, STATS, canNotDrag]); 122 | var onScrollCallback = function (_a) { 123 | var clientHeight = _a.clientHeight, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight; 124 | if (scrollTop === 0) 125 | scrollingDisable.current = false; 126 | else 127 | scrollingDisable.current = true; 128 | if ((clientHeight + scrollTop === scrollHeight) && onPullUp && !isPullUpLoading.current) { 129 | isPullUpLoading.current = true; 130 | onPullUp().then(function () { 131 | isPullUpLoading.current = false; 132 | if (vListRef.current) 133 | vListRef.current.scrollToRow(data.length + 1); 134 | }).catch(function () { 135 | isPullUpLoading.current = false; 136 | }); 137 | } 138 | if (onScroll) 139 | onScroll(clientHeight, scrollTop, scrollHeight); 140 | }; 141 | var cache = new react_virtualized_1.CellMeasurerCache({ defaultHeight: 400, fixedWidth: true }); 142 | react_1.useImperativeHandle(ref, function () { return ({ 143 | vListRef: vListRef.current 144 | }); }, [vListRef]); 145 | var renderRow = react_1.useCallback(function (_a) { 146 | var index = _a.index, key = _a.key, parent = _a.parent, style = _a.style; 147 | return (react_1.default.createElement(react_virtualized_1.CellMeasurer, { cache: cache, columnIndex: 0, key: key, parent: parent, rowIndex: index }, 148 | react_1.default.createElement("div", { className: "card-content", style: __assign({}, style), key: key }, 149 | react_1.default.createElement(Row, { row: row, data: data, index: index, info: info }), 150 | index === data.length - 1 ? !hasMoreRef.current ? 151 | (react_1.default.createElement("div", { className: "load-item", style: { height: '50px', width: '100%' } }, logo.pullup_success ? logo.pullup_success : '没有更多了')) : 152 | (react_1.default.createElement("div", { className: "load-item", style: { height: '50px', width: '100%' } }, logo.pullup_loading ? logo.pullup_loading : react_1.default.createElement("img", { src: svg_1.loading_pullup, alt: "" }))) : ''))); 153 | }, [data, hasMoreRef]); 154 | var VirtualScroll = react_1.useMemo(function () { 155 | return (react_1.default.createElement("div", { className: "content-wrap", style: { 156 | width: width, 157 | height: height, 158 | position: 'relative' 159 | } }, 160 | children, 161 | !data.length ? noDataRow ? noDataRow : '' : 162 | (react_1.default.createElement(react_virtualized_1.AutoSizer, null, function (_a) { 163 | var height = _a.height, width = _a.width; 164 | return (react_1.default.createElement(react_virtualized_1.List, { ref: function (ref) { return vListRef.current = ref; }, onScroll: onScrollCallback, height: height, width: width, rowHeight: cache.rowHeight, rowCount: data.length, rowRenderer: renderRow })); 165 | })))); 166 | }, [data]); 167 | return (react_1.default.createElement("div", { id: "virtualized-scroll-panel", onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd }, 168 | react_1.default.createElement("div", { className: "list-box" }, 169 | react_1.default.createElement("div", { className: "pull-down-box", style: { 170 | top: offset - 45 + "px", 171 | transition: STATS === 'dragging' ? 'none' : 'all .3s', 172 | zIndex: 999 173 | } }, 174 | react_1.default.createElement("div", { className: "pull-down-round" }, 175 | react_1.default.createElement("div", { className: "inner", style: { 176 | transform: "rotate(" + (offset / refreshDistance) * 720 + "deg)", 177 | transition: STATS === 'refreshing' || STATS === 'dragging' ? 'none' : 'all .3s', 178 | animation: STATS === 'refreshing' ? 'self_rotate 1s infinite linear' : '' 179 | } }, STATS === 'success' || STATS === 'init' ? 180 | logo.pulldown_success ? logo.pulldown_success : react_1.default.createElement("i", { className: "icon iconfont iconcheck-circle" }) 181 | : logo.pulldown_loading ? logo.pulldown_loading : react_1.default.createElement("i", { className: "icon iconfont iconshuaxin" })))), 182 | VirtualScroll))); 183 | }; 184 | exports.default = react_1.forwardRef(VirtualizedScroll); 185 | -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/Row.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var react_1 = require("react"); 4 | var Row = function (_a) { 5 | var row = _a.row, data = _a.data, index = _a.index, info = _a.info; 6 | var Render = row({ data: data, index: index, info: info }); 7 | return react_1.useMemo(function () { 8 | console.log('data[index].value]', index, data[index].value); 9 | return Render; 10 | }, [JSON.stringify(data[index])]); 11 | }; 12 | exports.default = Row; 13 | -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-virtualized-scroll' -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | var ReactVirtualizedScroll_1 = __importDefault(require("./ReactVirtualizedScroll")); 7 | exports.default = ReactVirtualizedScroll_1.default; 8 | -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #virtualized-scroll-panel, .list-box{ 6 | width: 100%; 7 | height: 100%; 8 | } 9 | #virtualized-scroll-panel .list-box{ 10 | transition: all .3s; 11 | position: absolute; 12 | } 13 | #virtualized-scroll-panel{ 14 | position: relative; 15 | background-color: #f5f5f9; 16 | /* overflow: hidden; */ 17 | } 18 | #virtualized-scroll-panel .pull-down-box{ 19 | position: absolute; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | width: 100%; 24 | 25 | } 26 | #virtualized-scroll-panel .pull-down-box .pull-down-round .iconcheck-circle{ 27 | font-size: 28px; 28 | color: #43cd80; 29 | } 30 | #virtualized-scroll-panel .pull-down-box .pull-down-round .iconshuaxin{ 31 | font-size: 28px; 32 | color: #ff8080; 33 | } 34 | #virtualized-scroll-panel .pull-down-box .pull-down-round{ 35 | width: 40px; 36 | height: 40px; 37 | background: #fff; 38 | box-shadow: 1px 1px 5px rgba(0,0,0,0.5); 39 | border-radius: 50%; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | @keyframes self_rotate{ 45 | 0%{ transform: rotate(0deg); } 46 | 100%{ transform: rotate(360deg); } 47 | } 48 | #virtualized-scroll-panel .card-content .load-item{ 49 | height: 50px; 50 | text-align: center; 51 | line-height: 50px; 52 | background-color: #f5f5f9; 53 | width: 100%; 54 | } -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/svg.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.loading_pullup = void 0; 4 | exports.loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4='; 5 | -------------------------------------------------------------------------------- /lib/component/ReactVirtualizedScroll/utils.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | exports.useStateAndRef = void 0; 4 | var react_1 = require("react"); 5 | exports.useStateAndRef = function (data) { 6 | var _a = react_1.useState(data), data = _a[0], setData = _a[1]; 7 | var dataRef = react_1.useRef(data); 8 | react_1.useEffect(function () { 9 | dataRef.current = data; 10 | }, [data]); 11 | return [data, setData, dataRef]; 12 | }; 13 | -------------------------------------------------------------------------------- /lib/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-virtualized-scroll", 3 | "version": "0.0.8", 4 | "description": "虚拟滚动搭配上拉下滑加载的scroll组件", 5 | "main": "./component/ReactVirtualizedScroll/index.js", 6 | "author": "DavidWong ", 7 | "license": "MIT", 8 | "dependencies": { 9 | "react": "^16.8.6", 10 | "react-dom": "^16.8.6", 11 | "react-router-dom": "^5.0.1", 12 | "react-virtualized": "^9.21.2" 13 | } 14 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-virtualized-scroll", 3 | "version": "0.0.9", 4 | "description": "虚拟滚动搭配上拉下滑加载的scroll组件", 5 | "main": "lib/index.js", 6 | "homepage": "https://github.com/DavidWong9785/react-virtualized-scroll", 7 | "scripts": { 8 | "start": "webpack-dev-server --open development", 9 | "build": "tsc", 10 | "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"", 11 | "lint": "tslint -p tsconfig.json", 12 | "test": "jest --config jestconfig.json --coverage" 13 | }, 14 | "keywords": [ 15 | "typescript", 16 | "虚拟滚动", 17 | "scroll", 18 | "react" 19 | ], 20 | "author": "DavidWong ", 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/DavidWong9785/react-virtualized-scroll.git" 24 | }, 25 | "license": "MIT", 26 | "dependencies": { 27 | "@types/html-webpack-plugin": "^3.2.1", 28 | "@types/node": "^12.6.8", 29 | "@types/react": "^16.8.20", 30 | "@types/react-dom": "^16.8.4", 31 | "@types/react-router-dom": "^4.3.4", 32 | "@types/react-virtualized": "^9.21.7", 33 | "@types/webpack": "^4.32.1", 34 | "media-show-card": "^1.0.3", 35 | "pre-commit": "^1.2.2", 36 | "react": "^16.8.6", 37 | "react-dom": "^16.8.6", 38 | "react-router-dom": "^5.0.1", 39 | "react-virtualized": "^9.21.2", 40 | "ts-node": "^8.3.0" 41 | }, 42 | "devDependencies": { 43 | "@types/enzyme": "^3.10.3", 44 | "@types/jest": "^24.0.16", 45 | "babel-jest": "^24.9.0", 46 | "css-loader": "^3.1.0", 47 | "enzyme": "^3.10.0", 48 | "enzyme-adapter-react-16": "^1.14.0", 49 | "file-loader": "^4.1.0", 50 | "html-webpack-plugin": "^3.2.0", 51 | "identity-obj-proxy": "^3.0.0", 52 | "jest": "^24.8.0", 53 | "prettier": "^1.18.2", 54 | "source-map-loader": "^0.2.4", 55 | "style-loader": "^0.23.1", 56 | "ts-jest": "^24.0.2", 57 | "ts-loader": "^6.0.3", 58 | "tslint": "^5.18.0", 59 | "tslint-config-prettier": "^1.18.0", 60 | "typescript": "^3.5.2", 61 | "url-loader": "^2.1.0", 62 | "webpack": "^4.34.0", 63 | "webpack-cli": "^3.3.4", 64 | "webpack-dev-server": "^3.7.2" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/__tests__/demo.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow, configure } from 'enzyme' 3 | import Adapter from 'enzyme-adapter-react-16' 4 | import ReactVirtualizedScroll from '../component/ReactVirtualizedScroll/index' 5 | 6 | configure({ adapter: new Adapter() }) 7 | 8 | const setup = () => { 9 | // 模拟 props 10 | const props = { 11 | height: '100vh', 12 | row: () => {}, 13 | hasMore: true 14 | } 15 | // 通过 enzyme 提供的 shallow(浅渲染) 创建组件 16 | const wrapper = shallow() 17 | return { 18 | props, 19 | wrapper, 20 | } 21 | } 22 | 23 | describe('测试height属性', () => { 24 | const { wrapper, props } = setup() 25 | it('props', () => { 26 | expect(props.height).toEqual('100vh') 27 | }) 28 | }) 29 | -------------------------------------------------------------------------------- /src/assets/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1578637319034'); /* IE9 */ 3 | src: url('iconfont.eot?t=1578637319034#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqFRIRoATYCJAMYCw4ABCAFhG0HYhsoCFFUTppkf4U4RBYobL8q1RqS2WPnlCFBo7GKFHDAYghuPVikPTPGSvDG5xkqd+fb7TfWfzouIB7+f79v+1wblWaOScQTnliEhDdLM/2TaIXkoZHMmmfyGzjnonwDm65BowSjLG08nE1kzfkfpDGBft9vrrIERkSYRbmKUO0Rzpv+EqTpwcC6PI12AhiN9IK2NtffElXBPp0cfBcOAs798xgziFvb89w8Bzxk4ZqNpuRg+pv/wrmxywtwTVzLA0w86gIa6/PvCxzBcfCfO8BDunlbQhnWPJBEw7a29N878nqgwANVvaLX13vRdP7/905/6/gDa13Lcplj08IA44ACGmPbIiuQTpigpqLOyC4BXh0eJjBoHgM8t7/eU1fhjQrEvcAz1K1plREU+hWtZ2FZAIla+tPjNHiSvj/+ORzWJDXzJl69sXNo+XNYD+rkPcbw9jNDWUbGXoBC7PRaH2nk0b1gg9YvNJ1HhvVLys/hD/5sV8+mJvScYdj/yyNURZKJBtJhJl2MVX4Oh2phyQ6C2ye7DgaFX7tqiWU9yDy6su04YAjviL2AJ0il8Zw9Qt1PDu13ZTQHuseSdB/wVk3Qktl6ytKuH0SgiqMfxD6g973BG2xHUEQzq1UyZ4umsha6ZzKm9shpGK+WQe8YssH8DuyqW1qqirD/2ukZ090542X17dYJqd9G2u+m7g3T7ItPSqVt9H0MsHWDPjhS1Nxa0MvQ2DlhmnWlrSO6bSPkRdJK3Ql6u4RRAU3piFaDVhtdN23dPaPKG7C9SgYm8+URXWQQXlOr1yCfFVuhdYgu7IMm/qTwREjDp7bq8VDb+oqV2Mod5Psb/uAdaHYQsKIbEC6epTtzuXeVjfObxOyVJS036DgL07KOgv/I/0uIDogNIZf4pA0+O4Mh4jEbQr4p4BW5NarmYeDj4xN54e3f5zaCAs/o3GzZsNUf2cPr6bn7fWa5y4A18BKxubb53a/jQ0ku1scaTQjw1C2ge4x/+uZ3fQLascKZ5+wGl8dJD1BaTn1cQEr57y0PlNXkq+VOkNMAG1c2k8WagH18TBWQ26vD8d0AsAOgm1HCVanqhC82cdybFQ6HTPKie2qCI/9Nn/FjV76jU/5/L9Yu4POJ2lB38zyrTvSXkJnN++9UlBVR7qgC1rVi1gllz9dlaU5rcThh0HfSwTnpu5d8ZnY+od9MCUmfOcj6reIKaS9UQ45C0+8kDNpDXz5kSqohygC2lQLCuAmSUa8hG3fGFdIHqll/aMYDhkHXgtxwyHqM92WBUThs/3Nks9QNDNrPCm/wqthIVZCSHyFlEGBxPG0mDkghe0zJfrx5ri77kiWsieMQxxnHkoWwOg5V8wU/cfueNHayhPrOEmAocDDbPxaxMik3bq76rdffgKcSM2SkrsX8CEQpaJ+JOMIM3EGazqp7l+6ZH565nHJ5mE9kEkyDGWI/mmFxf78QWGosXBHOLfDUyJ8rHZ8vT17lFhjkPbJFihwlarTo03ffr8xfkA4dHzYaOYHYGO0UcWac3rN0GeUote8Hsars59IQAQ==') format('woff2'), 5 | url('iconfont.woff?t=1578637319034') format('woff'), 6 | url('iconfont.ttf?t=1578637319034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1578637319034#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .iconshuaxin:before { 19 | content: "\e60c"; 20 | } 21 | 22 | .iconcheck-circle:before { 23 | content: "\e77d"; 24 | } 25 | 26 | .iconreload:before { 27 | content: "\e788"; 28 | } 29 | 30 | .iconicon-test:before { 31 | content: "\e658"; 32 | } 33 | 34 | .iconfiltration:before { 35 | content: "\e630"; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/assets/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/src/assets/iconfont.eot -------------------------------------------------------------------------------- /src/assets/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(l){var e,c='',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,i=l.document,a=!1,(c=function(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(c,50)}n()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,n())});function n(){a||(a=!0,o())}var o,i,a,c}(function(){var e,t,n,o,i,a;(e=document.createElement("div")).innerHTML=c,c=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(o=document.body).firstChild?(i=n,(a=o.firstChild).parentNode.insertBefore(i,a)):o.appendChild(n))})}(window); -------------------------------------------------------------------------------- /src/assets/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/assets/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/src/assets/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/src/assets/iconfont.woff -------------------------------------------------------------------------------- /src/assets/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/src/assets/iconfont.woff2 -------------------------------------------------------------------------------- /src/component/ReactVirtualizedScroll/ReactVirtualizedScroll.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useMemo, TouchEvent, useRef, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react'; 2 | import { List as VList, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized'; 3 | import { loading_pullup } from './svg'; 4 | import '../../assets/iconfont.css' 5 | import './style.css' 6 | 7 | interface ILogo { 8 | pulldown_loading?: JSX.Element; 9 | pulldown_success?: JSX.Element; 10 | pullup_loading?: JSX.Element; 11 | pullup_success?: JSX.Element; 12 | } 13 | 14 | interface IVirtualized { 15 | children? : JSX.Element; 16 | hasMore : boolean; 17 | refreshDistance? : number; 18 | loading? : boolean; 19 | data? : any; 20 | info? : any; 21 | height? : string; 22 | width? : string; 23 | noDataRow? : JSX.Element; 24 | logo? : ILogo; 25 | onPullUp? : any; 26 | onPullDown? : any; 27 | onScroll?: any; 28 | row({index, info}: {index: number, info: any, data: any}): any; 29 | } 30 | 31 | const Row = ({ row, data, index, info }:any) => { 32 | return useMemo(() => { 33 | return row({ data: data, index, info }) 34 | }, [JSON.stringify(data[index])]) 35 | } 36 | 37 | const VirtualizedScroll = ({ 38 | children, 39 | hasMore = true, 40 | refreshDistance = 120, 41 | loading = false, 42 | data = [], 43 | info, 44 | height = '100vh', 45 | width = '100vw', 46 | noDataRow, 47 | onPullDown = null, 48 | onPullUp = null, 49 | onScroll = null, 50 | row, 51 | logo = {} 52 | }: IVirtualized, ref: any) => { 53 | 54 | // 下拉状态 55 | const [STATS, setSTATS] = useState('init') 56 | // touch数据 57 | const [startY, setStartY] = useState(0) 58 | const [offset, setOffset] = useState(0) 59 | // vList容器 60 | const vListRef = useRef() 61 | const timer = useRef() 62 | // 上滑时，scrollTop为0禁止滑动 63 | const scrollingDisable = useRef(false) 64 | 65 | const hasMoreRef = useRef(true) 66 | const canNotDrag = useRef(false) 67 | const isPullUpLoading = useRef(false) 68 | 69 | useEffect(() => { 70 | hasMoreRef.current = hasMore 71 | }, [hasMore]) 72 | 73 | useEffect(() => { 74 | canNotDrag.current = STATS === 'refreshing' || STATS === 'success' || STATS == 'scroll' || !onPullDown 75 | }, [STATS]) 76 | 77 | const initState = () => { 78 | setOffset(0) 79 | setStartY(0) 80 | } 81 | 82 | const onTouchStart = ($event: TouchEvent) => { 83 | if (canNotDrag.current || scrollingDisable.current) return 84 | setStartY($event.nativeEvent.touches[0].pageY) 85 | } 86 | 87 | const onTouchMove = useCallback( 88 | ($event: TouchEvent) => { 89 | if (canNotDrag.current || scrollingDisable.current) return 90 | 91 | const offsetComputed = $event.nativeEvent.touches[0].pageY - startY 92 | if (0 < offsetComputed && offsetComputed <= refreshDistance) setOffset(offsetComputed) 93 | else if (offsetComputed < 0) setOffset(0) 94 | else if (offsetComputed > refreshDistance) setOffset(refreshDistance) 95 | 96 | if (offset < refreshDistance && STATS !== 'dragging') setSTATS('dragging') 97 | else if (offset >= refreshDistance) setSTATS('pre-refresh') 98 | }, 99 | [startY, canNotDrag, offset, STATS], 100 | ) 101 | 102 | const onTouchEnd = useCallback( 103 | ($event: TouchEvent) => { 104 | if (canNotDrag.current) return 105 | if (scrollingDisable.current) { 106 | initState() 107 | return 108 | } 109 | if (STATS === 'pre-refresh') { 110 | setSTATS('refreshing') 111 | if (!onPullDown) return 112 | onPullDown().then(() => { 113 | setSTATS('success') 114 | if (vListRef.current) vListRef.current.scrollToRow(0) 115 | if (timer.current) clearTimeout(timer.current) 116 | timer.current = setTimeout(() => { 117 | setSTATS('init') 118 | initState() 119 | }, 500) 120 | }) 121 | } else { 122 | initState() 123 | setSTATS('not-enough') 124 | if (timer.current) clearTimeout(timer.current) 125 | timer.current = setTimeout(() => { 126 | setSTATS('init') 127 | }, 500) 128 | } 129 | 130 | }, 131 | [timer, STATS, canNotDrag], 132 | ) 133 | 134 | const onScrollCallback = ({ clientHeight, scrollTop, scrollHeight }: any) => { 135 | 136 | if (scrollTop === 0) scrollingDisable.current = false 137 | else scrollingDisable.current = true 138 | 139 | if ((clientHeight + scrollTop === scrollHeight) && onPullUp && !isPullUpLoading.current) { 140 | isPullUpLoading.current = true 141 | onPullUp().then(() => { 142 | isPullUpLoading.current = false 143 | if (vListRef.current) vListRef.current.scrollToRow(data.length + 1) 144 | }).catch(() => { 145 | isPullUpLoading.current = false 146 | }) 147 | } 148 | if (onScroll) onScroll(clientHeight, scrollTop, scrollHeight) 149 | } 150 | 151 | const cache = new CellMeasurerCache({ defaultHeight: 400,fixedWidth: true}); 152 | 153 | useImperativeHandle( 154 | ref, 155 | () => ({ 156 | vListRef: vListRef.current 157 | }), 158 | [vListRef], 159 | ) 160 | 161 | const renderRow = useCallback( 162 | ({ index, key, parent, style }: any) => { 163 | return ( 164 | 170 |
171 | { 172 | 177 | 178 | } 179 | { 180 | index === data.length - 1 ? !hasMoreRef.current ? 181 | ( 182 |
183 | { logo.pullup_success ? logo.pullup_success : '没有更多了' } 184 |
185 | ) : 186 | ( 187 |
188 | { logo.pullup_loading ? logo.pullup_loading : } 189 |
190 | ) : '' 191 | } 192 |
193 | 194 | ) 195 | }, [data, hasMoreRef] 196 | ) 197 | 198 | const VirtualScroll = useMemo(() => { 199 | return ( 200 |
205 | { children } 206 | { 207 | !data.length ? noDataRow ? noDataRow : '' : 208 | ( 209 | 210 | { 211 | ({ height, width }: any) => ( 212 | vListRef.current = ref} 214 | onScroll={onScrollCallback} 215 | height={height} 216 | width={width} 217 | rowHeight={cache.rowHeight} 218 | rowCount={data.length} 219 | rowRenderer={renderRow} 220 | /> 221 | ) 222 | } 223 | 224 | ) 225 | } 226 |
227 | ) 228 | }, [data]) 229 | 230 | return ( 231 |
232 |
233 |
238 |
239 |
244 | { 245 | STATS === 'success' || STATS === 'init' ? 246 | logo.pulldown_success ? logo.pulldown_success : 247 | : logo.pulldown_loading ? logo.pulldown_loading : 248 | } 249 |
250 |
251 |
252 | { VirtualScroll } 253 |
254 |
255 | ); 256 | }; 257 | 258 | export default forwardRef(VirtualizedScroll); 259 | -------------------------------------------------------------------------------- /src/component/ReactVirtualizedScroll/index.tsx: -------------------------------------------------------------------------------- 1 | import ReactVirtualizedScroll from './ReactVirtualizedScroll' 2 | 3 | export default ReactVirtualizedScroll 4 | -------------------------------------------------------------------------------- /src/component/ReactVirtualizedScroll/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | #virtualized-scroll-panel, .list-box{ 6 | width: 100%; 7 | height: 100%; 8 | } 9 | #virtualized-scroll-panel .list-box{ 10 | transition: all .3s; 11 | position: absolute; 12 | } 13 | #virtualized-scroll-panel{ 14 | position: relative; 15 | background-color: #f5f5f9; 16 | /* overflow: hidden; */ 17 | } 18 | #virtualized-scroll-panel .pull-down-box{ 19 | position: absolute; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | width: 100%; 24 | 25 | } 26 | #virtualized-scroll-panel .pull-down-box .pull-down-round .iconcheck-circle{ 27 | font-size: 28px; 28 | color: #43cd80; 29 | } 30 | #virtualized-scroll-panel .pull-down-box .pull-down-round .iconshuaxin{ 31 | font-size: 28px; 32 | color: #ff8080; 33 | } 34 | #virtualized-scroll-panel .pull-down-box .pull-down-round{ 35 | width: 40px; 36 | height: 40px; 37 | background: #fff; 38 | box-shadow: 1px 1px 5px rgba(0,0,0,0.5); 39 | border-radius: 50%; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | @keyframes self_rotate{ 45 | 0%{ transform: rotate(0deg); } 46 | 100%{ transform: rotate(360deg); } 47 | } 48 | #virtualized-scroll-panel .card-content .load-item{ 49 | height: 50px; 50 | text-align: center; 51 | line-height: 50px; 52 | background-color: #f5f5f9; 53 | width: 100%; 54 | } -------------------------------------------------------------------------------- /src/component/ReactVirtualizedScroll/svg.ts: -------------------------------------------------------------------------------- 1 | export const loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4=' -------------------------------------------------------------------------------- /src/types/demo/index.d.ts: -------------------------------------------------------------------------------- 1 | interface IDemo { 2 | age: number 3 | } 4 | -------------------------------------------------------------------------------- /src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png' { 2 | const value: string 3 | export = value 4 | } 5 | 6 | declare module '*.mp4' { 7 | const content: string 8 | export = content 9 | } 10 | -------------------------------------------------------------------------------- /test.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrilliantDavidWong/react-virtualized-scroll/d3e82595ed874b9e7491876fc7c4ec7002081105/test.gif -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./lib", 4 | // "sourceMap": true, 5 | "noImplicitAny": false, //在表达式和声明上有隐含的 any类型时报错。 6 | "target": "es5", //指定ECMAScript目标版本 "ES3"（默认） 7 | "lib": ["dom", "dom.iterable", "esnext"], // 编译过程中需要引入的库文件的列表 8 | "allowJs": true, //允许编译javascript文件。 9 | "skipLibCheck": true, //忽略所有的声明文件（ *.d.ts）的类型检查 10 | "esModuleInterop": true, //允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查 11 | "allowSyntheticDefaultImports": true, // 同上 12 | "strict": true, //启用所有严格类型检查选项 13 | "forceConsistentCasingInFileNames": true, //禁止对同一个文件的不一致的引用 14 | "module": "commonjs", //指定生成哪个模块系统代码 15 | "moduleResolution": "node", //决定如何处理模块。 16 | "resolveJsonModule": true, 17 | "isolatedModules": false, //将每个文件作为单独的模块（与“ts.transpileModule”类似）。 18 | // "noEmit": true,//不生成输出文件 19 | "jsx": "react", 20 | "baseUrl": "./", 21 | "paths": { "*": ["types/*"] } 22 | // "suppressImplicitAnyIndexErrors": true, //阻止对缺少索引签名的索引对象报错 23 | }, 24 | "exclude": ["node_modules", "./lib", "./example"], 25 | "include": ["src/**/*"] 26 | } 27 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["tslint:recommended", "tslint-config-prettier"], 3 | "rules": { 4 | "no-console": false, 5 | "object-literal-sort-keys": false, 6 | "member-access": false, 7 | "ordered-imports": false 8 | }, 9 | "linterOptions": { 10 | "exclude": ["**/*.json", "node_modules", "./lib", "./example"] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const htmlWebpackPlugin = new HtmlWebpackPlugin({ 4 | template: path.join(__dirname, './example/src/index.html'), 5 | filename: './index.html', 6 | }) 7 | 8 | module.exports = { 9 | entry: path.join(__dirname, './example/src/index.tsx'), 10 | output: { 11 | path: path.join(__dirname, 'example/dist'), 12 | filename: 'bundle.js', 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.tsx?/, 18 | loader: 'ts-loader', 19 | }, 20 | { 21 | // pre/nomal/post - loader的执行顺序 - 前/中/后 22 | enforce: 'pre', 23 | test: /\.tsx?/, 24 | loader: 'source-map-loader', 25 | }, 26 | { 27 | test: /\.css$/, 28 | use: ['style-loader', 'css-loader'], 29 | }, 30 | { 31 | test: /\.(gif|jpg|png|woff|svg|eot|ttf|otf|woff2)$/, 32 | use: { 33 | loader: 'url-loader', 34 | options: { 35 | limit: 20, 36 | }, 37 | }, 38 | }, 39 | ], 40 | }, 41 | //映射工具 42 | // devtool: 'source-map', 43 | //处理路径解析 44 | resolve: { 45 | //extensions 拓展名 46 | extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'], 47 | }, 48 | plugins: [htmlWebpackPlugin], 49 | devServer: { 50 | port: 3005, 51 | }, 52 | } 53 | --------------------------------------------------------------------------------