[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\"env\", {\n \"modules\": false,\n \"targets\": {\n \"browsers\": [\"> 1%\", \"last 2 versions\", \"not ie <= 8\"]\n }\n }],\n \"stage-2\"\n ],\n \"plugins\": [\"transform-vue-jsx\", \"transform-runtime\"]\n }\n " }, { "path": ".editorconfig", "content": "# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n# Unix-style newlines with a newline ending every file\n[*]\nend_of_line = lf\ninsert_final_newline = true\ncharset = utf-8\nindent_style = space\nindent_size = 4\n\n[{*.json,*.md,*.yml,*.*rc}]\nindent_style = space\nindent_size = 2" }, { "path": ".gitattributes", "content": "*.html linguist-language=JavaScript" }, { "path": ".gitignore", "content": "/node_modules/\n/dist/\n/coverage/\n*.log\n" }, { "path": ".npmignore", "content": "/.git/\n/.vscode/\n/node_modules/\n.gitignore\n.npmignore\n.prettierrc\n.editorconfig\ntslint.json\ntsconfig.json\nnote.md\n*.log\n" }, { "path": ".prettierrc", "content": "{\n \"trailingComma\": \"all\",\n \"tabWidth\": 4,\n \"semi\": false,\n \"singleQuote\": true,\n \"endOfLine\": \"lf\",\n \"printWidth\": 120,\n \"overrides\": [\n {\n \"files\": [\"*.md\", \"*.json\", \"*.yml\", \"*.yaml\"],\n \"options\": {\n \"tabWidth\": 2\n }\n }\n ]\n}\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - '12'\ninstall:\n - npm install\nscript:\n - npm run test\n - npm run lint\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2013-present, DavidWong9785(Zhaokang Huang)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# react-virtualized-scroll\n虚拟滚动搭配上拉下滑加载的scroll组件\n\n[![github](https://img.shields.io/github/package-json/v/DavidWong9785/react-virtualized-scroll?logo=github)](https://github.com/DavidWong9785/react-virtualized-scroll)\n[![issues](https://img.shields.io/github/issues/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll/issues)\n[![forks](https://img.shields.io/github/forks/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)\n[![stars](https://img.shields.io/github/stars/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)

\n[![npm](https://img.shields.io/npm/v/react-virtualized-scroll?label=versoin&logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll)\n[![downloads](https://img.shields.io/npm/dm/react-virtualized-scroll?logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-virtualized-scroll)](https://www.npmjs.com/package/react-virtualized-scroll)\n![license](https://img.shields.io/github/license/DavidWong9785/react-virtualized-scroll)\n![github last commit](https://img.shields.io/github/last-commit/DavidWong9785/react-virtualized-scroll)\n\n![avatar](./test.gif)\n\n### 简介\n\n- 搭配 typescript 和 react-hooks 编写的虚拟滚动组件\n- 基于 react-virtualized 进行再封装。\n- 暴露了 react-virtualized 的 ref，可调用 react-virtualized 的方法\n- 除了渲染列表，你还可以传入其他的子组件（如悬浮球~等），只需要把定位设为 fixed\n\n### 安装导入\n\n> cnpm i react-virtualized react-virtualized-scroll --save\n\n> import ReactVirtualizedScroll from 'react-virtualized-scroll'\n\n### 使用\n\n```\n \n
fixed element
\n \n```\n\n### 属性\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
名称类型说明
width、heightstring列表宽高，带单位\n

可选

\n

默认100vw/vh

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

可选

\n

有默认logo

\n
onPullDownfunction\n

\n 下拉加载回调\n

\n

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

\n

\n 可以使用 async 方法或者直接返回 promise 对象\n

\n

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

\n 		可选
onPullUpfunction\n 上滑加载回调，目的同上，该方法需要返回一个 promise 对象\n 可选
onScrollfunction\n

滑动回调

\n

参数1: clientHeight

\n

参数2: scrollTop

\n

参数3: scrollHeight

\n 		可选
rowfunction\n

列表每一行的渲染函数

\n

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

\n

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

\n 		必传
\n\n### logo属性（字符串，图片等等，只要是JSX.Element即可）\n\n| 属性 | 说明 |\n| ---------------- | --------------------- |\n| pulldown_loading | 下拉加载 loading 的 logo |\n| pulldown_success | 下拉加载 成功 的 logo |\n| pullup_loading | 上滑加载 loading 的 logo |\n| pullup_success | 上滑加载 成功 的 logo |" }, { "path": "example/src/app.tsx", "content": "/* tslint:disable */\nimport React, { useState, useCallback } from 'react'\nimport ReactVirtualizedScroll from '../../lib/component/ReactVirtualizedScroll/index.js'\nimport useStateAndRef from './utils'\n// import ReactVirtualizedScroll from '../../src/component/ReactVirtualizedScroll/index.tsx'\nimport { loading_pullup } from '../../src/component/ReactVirtualizedScroll/svg'\n\nconst initState = [{\n key: 1,\n value: 1\n}, {\n key: 2,\n value: 2\n}, {\n key: 3,\n value: 3\n}, {\n key: 4,\n value: 4\n}, {\n key: 5,\n value: 5\n}]\n\nconst example = () => {\n const [data, setData, dataRef] = useStateAndRef(initState)\n\n const [hasMore, setHasMore] = useState(true)\n const info = {\n title: 'VirtualizedScroll',\n desc: '虚拟滚动搭配上拉下滑加载的scroll组件'\n }\n const requestPullDown = () => {\n return new Promise(resolve => {\n setTimeout(() => {\n setData(initState)\n setHasMore(true)\n resolve()\n }, 2000);\n })\n }\n const requestPullUp = useCallback(\n () => {\n return new Promise(resolve => {\n if (data.length === 100) {\n setHasMore(false)\n resolve()\n }\n else {\n setTimeout(() => {\n const target: any = []\n for (let i = data.length + 1; i < data.length + 6; i++) {\n target.push({\n key: i,\n value: i\n })\n }\n setData(data.concat(target))\n resolve()\n }, 1000);\n }\n })\n },\n [data],\n )\n const handlePullDown = async () => {\n await requestPullDown()\n }\n const handlePullUp = async () => {\n await requestPullUp()\n }\n const onScroll = (clientHeight: number, scrollTop: number, scrollHeight: number) => {\n // console.log('onScroll')\n }\n const logo = {\n pulldown_loading: ,\n pulldown_success: ,\n pullup_loading: ,\n pullup_success: '没有更多了',\n }\n const countAdd = ((index: number) => {\n const newData = dataRef.current\n newData[index].value += 100\n setData(JSON.parse(JSON.stringify(newData)))\n })\n\n const Row = ((args: any) => {\n const {index, info, data} = args\n return
countAdd(index)}>\n

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

\n

{ info.desc }

\n
\n })\n\n return (\n
\n \n \n
\n )\n}\n\nexport default example\n" }, { "path": "example/src/index.html", "content": "\n\n \n \n \n \n NPMPluginTemplate\n \n \n
\n \n\n" }, { "path": "example/src/index.tsx", "content": "import React from 'react'\nimport { render } from 'react-dom'\nimport App from './app'\nrender(, document.getElementById('root'))\n" }, { "path": "example/src/utils.ts", "content": "import React, { useState, useEffect, useRef } from 'react'\nexport default (initState) => {\n const [data, setData] = useState(initState)\n const dataRef = useRef(data)\n useEffect(() => {\n dataRef.current = data\n }, [data])\n return [data, setData, dataRef]\n}" }, { "path": "jestconfig.json", "content": "{\n \"transform\": {\n \"^.+\\\\.(t|j)sx?$\": \"ts-jest\",\n \"^.+\\\\.jsx?$\": \"babel-jest\"\n },\n \"testRegex\": \"(/__tests__/.*|(\\\\.|/)(test|spec))\\\\.(jsx?|tsx?)$\",\n \"moduleFileExtensions\": [\"tsx\", \"ts\", \"js\", \"jsx\", \"json\", \"node\"],\n \"moduleNameMapper\": {\n \"\\\\.(s?css|less)$\": \"identity-obj-proxy\"\n }\n}\n" }, { "path": "lib/README.md", "content": "# react-virtualized-scroll\n虚拟滚动搭配上拉下滑加载的scroll组件\n\n[![github](https://img.shields.io/github/package-json/v/DavidWong9785/react-virtualized-scroll?logo=github)](https://github.com/DavidWong9785/react-virtualized-scroll)\n[![issues](https://img.shields.io/github/issues/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll/issues)\n[![forks](https://img.shields.io/github/forks/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)\n[![stars](https://img.shields.io/github/stars/DavidWong9785/react-virtualized-scroll)](https://github.com/DavidWong9785/react-virtualized-scroll)

\n[![npm](https://img.shields.io/npm/v/react-virtualized-scroll?label=versoin&logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll)\n[![downloads](https://img.shields.io/npm/dm/react-virtualized-scroll?logo=npm)](https://www.npmjs.com/package/react-virtualized-scroll)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-virtualized-scroll)](https://www.npmjs.com/package/react-virtualized-scroll)\n![license](https://img.shields.io/github/license/DavidWong9785/react-virtualized-scroll)\n![github last commit](https://img.shields.io/github/last-commit/DavidWong9785/react-virtualized-scroll)\n\n![avatar](./test.gif)\n\n### 简介\n\n- 搭配 typescript 和 react-hooks 编写的虚拟滚动组件\n- 基于 react-virtualized 进行再封装。\n- 暴露了 react-virtualized 的 ref，可调用 react-virtualized 的方法\n- 除了渲染列表，你还可以传入其他的子组件（如悬浮球~等），只需要把定位设为 fixed\n\n### 安装导入\n\n> cnpm i react-virtualized react-virtualized-scroll --save\n\n> import ReactVirtualizedScroll from 'react-virtualized-scroll'\n\n### 使用\n\n```\n \n
fixed element
\n \n```\n\n### 属性\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
名称类型说明
width、heightstring列表宽高，带单位\n

可选

\n

默认100vw/vh

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

可选

\n

有默认logo

\n
onPullDownfunction\n

\n 下拉加载回调\n

\n

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

\n

\n 可以使用 async 方法或者直接返回 promise 对象\n

\n

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

\n 		可选
onPullUpfunction\n 上滑加载回调，目的同上，该方法需要返回一个 promise 对象\n 可选
onScrollfunction\n

滑动回调

\n

参数1: clientHeight

\n

参数2: scrollTop

\n

参数3: scrollHeight

\n 		可选
rowfunction\n

列表每一行的渲染函数

\n

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

\n

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

\n 		必传
\n\n### logo属性（字符串，图片等等，只要是JSX.Element即可）\n\n| 属性 | 说明 |\n| ---------------- | --------------------- |\n| pulldown_loading | 下拉加载 loading 的 logo |\n| pulldown_success | 下拉加载 成功 的 logo |\n| pullup_loading | 上滑加载 loading 的 logo |\n| pullup_success | 上滑加载 成功 的 logo |" }, { "path": "lib/__tests__/demo.test.js", "content": "\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importDefault(require(\"react\"));\nvar enzyme_1 = require(\"enzyme\");\nvar enzyme_adapter_react_16_1 = __importDefault(require(\"enzyme-adapter-react-16\"));\nvar index_1 = __importDefault(require(\"../component/ReactVirtualizedScroll/index\"));\nenzyme_1.configure({ adapter: new enzyme_adapter_react_16_1.default() });\nvar setup = function () {\n // 模拟 props\n var props = {\n height: '100vh',\n row: function () { },\n hasMore: true\n };\n // 通过 enzyme 提供的 shallow(浅渲染) 创建组件\n var wrapper = enzyme_1.shallow(react_1.default.createElement(index_1.default, __assign({}, props)));\n return {\n props: props,\n wrapper: wrapper,\n };\n};\ndescribe('测试height属性', function () {\n var _a = setup(), wrapper = _a.wrapper, props = _a.props;\n it('props', function () {\n expect(props.height).toEqual('100vh');\n });\n});\n" }, { "path": "lib/assets/iconfont.css", "content": "@font-face {font-family: \"iconfont\";\n src: url('iconfont.eot?t=1578637319034'); /* IE9 */\n src: url('iconfont.eot?t=1578637319034#iefix') format('embedded-opentype'), /* IE6-IE8 */\n 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'),\n url('iconfont.woff?t=1578637319034') format('woff'),\n url('iconfont.ttf?t=1578637319034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */\n url('iconfont.svg?t=1578637319034#iconfont') format('svg'); /* iOS 4.1- */\n}\n\n.iconfont {\n font-family: \"iconfont\" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.iconshuaxin:before {\n content: \"\\e60c\";\n}\n\n.iconcheck-circle:before {\n content: \"\\e77d\";\n}\n\n.iconreload:before {\n content: \"\\e788\";\n}\n\n.iconicon-test:before {\n content: \"\\e658\";\n}\n\n.iconfiltration:before {\n content: \"\\e630\";\n}\n\n" }, { "path": "lib/assets/iconfont.js", "content": "\"use strict\";\n!function (l) { var e, c = '', t = (e = document.getElementsByTagName(\"script\"))[e.length - 1].getAttribute(\"data-injectcss\"); if (t && !l.__iconfont__svg__cssinject__) {\n l.__iconfont__svg__cssinject__ = !0;\n try {\n document.write(\"\");\n }\n catch (e) {\n console && console.log(e);\n }\n} !function (e) { if (document.addEventListener)\n if (~[\"complete\", \"loaded\", \"interactive\"].indexOf(document.readyState))\n setTimeout(e, 0);\n else {\n var t = function () { document.removeEventListener(\"DOMContentLoaded\", t, !1), e(); };\n document.addEventListener(\"DOMContentLoaded\", t, !1);\n }\nelse\n document.attachEvent && (o = e, i = l.document, a = !1, (c = function () { try {\n i.documentElement.doScroll(\"left\");\n }\n catch (e) {\n return void setTimeout(c, 50);\n } 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);\n" }, { "path": "lib/assets/iconfont.ts", "content": "\"use strict\";\n!function (l) { var e, c = '', t = (e = document.getElementsByTagName(\"script\"))[e.length - 1].getAttribute(\"data-injectcss\"); if (t && !l.__iconfont__svg__cssinject__) {\n l.__iconfont__svg__cssinject__ = !0;\n try {\n document.write(\"\");\n }\n catch (e) {\n console && console.log(e);\n }\n} !function (e) { if (document.addEventListener)\n if (~[\"complete\", \"loaded\", \"interactive\"].indexOf(document.readyState))\n setTimeout(e, 0);\n else {\n var t = function () { document.removeEventListener(\"DOMContentLoaded\", t, !1), e(); };\n document.addEventListener(\"DOMContentLoaded\", t, !1);\n }\nelse\n document.attachEvent && (o = e, i = l.document, a = !1, (c = function () { try {\n i.documentElement.doScroll(\"left\");\n }\n catch (e) {\n return void setTimeout(c, 50);\n } 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);\n" }, { "path": "lib/component/ReactVirtualizedScroll/ReactVirtualizedScroll.js", "content": "\"use strict\";\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = __importStar(require(\"react\"));\nvar react_virtualized_1 = require(\"react-virtualized\");\nvar svg_1 = require(\"./svg\");\nrequire(\"../../assets/iconfont.css\");\nrequire(\"./style.css\");\nvar Row = function (_a) {\n var row = _a.row, data = _a.data, index = _a.index, info = _a.info;\n return react_1.useMemo(function () {\n return row({ data: data, index: index, info: info });\n }, [JSON.stringify(data[index])]);\n};\nvar VirtualizedScroll = function (_a, ref) {\n 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;\n // 下拉状态\n var _m = react_1.useState('init'), STATS = _m[0], setSTATS = _m[1];\n // touch数据\n var _o = react_1.useState(0), startY = _o[0], setStartY = _o[1];\n var _p = react_1.useState(0), offset = _p[0], setOffset = _p[1];\n // vList容器\n var vListRef = react_1.useRef();\n var timer = react_1.useRef();\n // 上滑时，scrollTop为0禁止滑动\n var scrollingDisable = react_1.useRef(false);\n var hasMoreRef = react_1.useRef(true);\n var canNotDrag = react_1.useRef(false);\n var isPullUpLoading = react_1.useRef(false);\n react_1.useEffect(function () {\n hasMoreRef.current = hasMore;\n }, [hasMore]);\n react_1.useEffect(function () {\n canNotDrag.current = STATS === 'refreshing' || STATS === 'success' || STATS == 'scroll' || !onPullDown;\n }, [STATS]);\n var initState = function () {\n setOffset(0);\n setStartY(0);\n };\n var onTouchStart = function ($event) {\n if (canNotDrag.current || scrollingDisable.current)\n return;\n setStartY($event.nativeEvent.touches[0].pageY);\n };\n var onTouchMove = react_1.useCallback(function ($event) {\n if (canNotDrag.current || scrollingDisable.current)\n return;\n var offsetComputed = $event.nativeEvent.touches[0].pageY - startY;\n if (0 < offsetComputed && offsetComputed <= refreshDistance)\n setOffset(offsetComputed);\n else if (offsetComputed < 0)\n setOffset(0);\n else if (offsetComputed > refreshDistance)\n setOffset(refreshDistance);\n if (offset < refreshDistance && STATS !== 'dragging')\n setSTATS('dragging');\n else if (offset >= refreshDistance)\n setSTATS('pre-refresh');\n }, [startY, canNotDrag, offset, STATS]);\n var onTouchEnd = react_1.useCallback(function ($event) {\n if (canNotDrag.current)\n return;\n if (scrollingDisable.current) {\n initState();\n return;\n }\n if (STATS === 'pre-refresh') {\n setSTATS('refreshing');\n if (!onPullDown)\n return;\n onPullDown().then(function () {\n setSTATS('success');\n if (vListRef.current)\n vListRef.current.scrollToRow(0);\n if (timer.current)\n clearTimeout(timer.current);\n timer.current = setTimeout(function () {\n setSTATS('init');\n initState();\n }, 500);\n });\n }\n else {\n initState();\n setSTATS('not-enough');\n if (timer.current)\n clearTimeout(timer.current);\n timer.current = setTimeout(function () {\n setSTATS('init');\n }, 500);\n }\n }, [timer, STATS, canNotDrag]);\n var onScrollCallback = function (_a) {\n var clientHeight = _a.clientHeight, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight;\n if (scrollTop === 0)\n scrollingDisable.current = false;\n else\n scrollingDisable.current = true;\n if ((clientHeight + scrollTop === scrollHeight) && onPullUp && !isPullUpLoading.current) {\n isPullUpLoading.current = true;\n onPullUp().then(function () {\n isPullUpLoading.current = false;\n if (vListRef.current)\n vListRef.current.scrollToRow(data.length + 1);\n }).catch(function () {\n isPullUpLoading.current = false;\n });\n }\n if (onScroll)\n onScroll(clientHeight, scrollTop, scrollHeight);\n };\n var cache = new react_virtualized_1.CellMeasurerCache({ defaultHeight: 400, fixedWidth: true });\n react_1.useImperativeHandle(ref, function () { return ({\n vListRef: vListRef.current\n }); }, [vListRef]);\n var renderRow = react_1.useCallback(function (_a) {\n var index = _a.index, key = _a.key, parent = _a.parent, style = _a.style;\n return (react_1.default.createElement(react_virtualized_1.CellMeasurer, { cache: cache, columnIndex: 0, key: key, parent: parent, rowIndex: index },\n react_1.default.createElement(\"div\", { className: \"card-content\", style: __assign({}, style), key: key },\n react_1.default.createElement(Row, { row: row, data: data, index: index, info: info }),\n index === data.length - 1 ? !hasMoreRef.current ?\n (react_1.default.createElement(\"div\", { className: \"load-item\", style: { height: '50px', width: '100%' } }, logo.pullup_success ? logo.pullup_success : '没有更多了')) :\n (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: \"\" }))) : '')));\n }, [data, hasMoreRef]);\n var VirtualScroll = react_1.useMemo(function () {\n return (react_1.default.createElement(\"div\", { className: \"content-wrap\", style: {\n width: width,\n height: height,\n position: 'relative'\n } },\n children,\n !data.length ? noDataRow ? noDataRow : '' :\n (react_1.default.createElement(react_virtualized_1.AutoSizer, null, function (_a) {\n var height = _a.height, width = _a.width;\n 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 }));\n }))));\n }, [data]);\n return (react_1.default.createElement(\"div\", { id: \"virtualized-scroll-panel\", onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },\n react_1.default.createElement(\"div\", { className: \"list-box\" },\n react_1.default.createElement(\"div\", { className: \"pull-down-box\", style: {\n top: offset - 45 + \"px\",\n transition: STATS === 'dragging' ? 'none' : 'all .3s',\n zIndex: 999\n } },\n react_1.default.createElement(\"div\", { className: \"pull-down-round\" },\n react_1.default.createElement(\"div\", { className: \"inner\", style: {\n transform: \"rotate(\" + (offset / refreshDistance) * 720 + \"deg)\",\n transition: STATS === 'refreshing' || STATS === 'dragging' ? 'none' : 'all .3s',\n animation: STATS === 'refreshing' ? 'self_rotate 1s infinite linear' : ''\n } }, STATS === 'success' || STATS === 'init' ?\n logo.pulldown_success ? logo.pulldown_success : react_1.default.createElement(\"i\", { className: \"icon iconfont iconcheck-circle\" })\n : logo.pulldown_loading ? logo.pulldown_loading : react_1.default.createElement(\"i\", { className: \"icon iconfont iconshuaxin\" })))),\n VirtualScroll)));\n};\nexports.default = react_1.forwardRef(VirtualizedScroll);\n" }, { "path": "lib/component/ReactVirtualizedScroll/Row.js", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar react_1 = require(\"react\");\nvar Row = function (_a) {\n var row = _a.row, data = _a.data, index = _a.index, info = _a.info;\n var Render = row({ data: data, index: index, info: info });\n return react_1.useMemo(function () {\n console.log('data[index].value]', index, data[index].value);\n return Render;\n }, [JSON.stringify(data[index])]);\n};\nexports.default = Row;\n" }, { "path": "lib/component/ReactVirtualizedScroll/index.d.ts", "content": "declare module 'react-virtualized-scroll'" }, { "path": "lib/component/ReactVirtualizedScroll/index.js", "content": "\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ReactVirtualizedScroll_1 = __importDefault(require(\"./ReactVirtualizedScroll\"));\nexports.default = ReactVirtualizedScroll_1.default;\n" }, { "path": "lib/component/ReactVirtualizedScroll/style.css", "content": "*{\n margin: 0;\n padding: 0;\n}\n#virtualized-scroll-panel, .list-box{\n width: 100%;\n height: 100%;\n}\n#virtualized-scroll-panel .list-box{\n transition: all .3s;\n position: absolute;\n}\n#virtualized-scroll-panel{\n position: relative;\n background-color: #f5f5f9;\n /* overflow: hidden; */\n}\n#virtualized-scroll-panel .pull-down-box{\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n \n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round .iconcheck-circle{\n font-size: 28px;\n color: #43cd80;\n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round .iconshuaxin{\n font-size: 28px;\n color: #ff8080;\n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round{\n width: 40px;\n height: 40px;\n background: #fff;\n box-shadow: 1px 1px 5px rgba(0,0,0,0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n@keyframes self_rotate{\n 0%{ transform: rotate(0deg); }\n 100%{ transform: rotate(360deg); }\n}\n#virtualized-scroll-panel .card-content .load-item{\n height: 50px;\n text-align: center;\n line-height: 50px;\n background-color: #f5f5f9;\n width: 100%;\n}" }, { "path": "lib/component/ReactVirtualizedScroll/svg.js", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.loading_pullup = void 0;\nexports.loading_pullup = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiAjZjVmNWY5OyBkaXNwbGF5OiBibG9jazsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+DQo8Y2lyY2xlIGN4PSI4NCIgY3k9IjUwIiByPSIxLjA2NTE3IiBmaWxsPSIjZmFjZDllIj4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIwLjM2MjMxODg0MDU3OTcxMDFzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsxIiB2YWx1ZXM9IjEwOzAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgZHVyPSIxLjQ0OTI3NTM2MjMxODg0MDRzIiBjYWxjTW9kZT0iZGlzY3JldGUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIjZmFjZDllOyNmMTlkM2I7IzQ1OTQ0ODsjMzg5Nzk4OyNmYWNkOWUiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iOC45MzQ4MyIgZmlsbD0iI2ZhY2Q5ZSI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSIwcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iNDYuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzM4OTc5OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuMzYyMzE4ODQwNTc5NzEwMXMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC4zNjIzMTg4NDA1Nzk3MTAxcyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iODAuMzc4NCIgY3k9IjUwIiByPSIxMCIgZmlsbD0iIzQ1OTQ0OCI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTAuNzI0NjM3NjgxMTU5NDIwMnMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMC43MjQ2Mzc2ODExNTk0MjAycyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+PGNpcmNsZSBjeD0iMTYiIGN5PSI1MCIgcj0iMCIgZmlsbD0iI2YxOWQzYiI+DQogIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIwOzA7MTA7MTA7MTAiIGtleVNwbGluZXM9IjAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxOzAgMC41IDAuNSAxIiBiZWdpbj0iLTEuMDg2OTU2NTIxNzM5MTMwNHMiPjwvYW5pbWF0ZT4NCiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjEuNDQ5Mjc1MzYyMzE4ODQwNHMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOzAuMjU7MC41OzAuNzU7MSIgdmFsdWVzPSIxNjsxNjsxNjs1MDs4NCIga2V5U3BsaW5lcz0iMCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDE7MCAwLjUgMC41IDEiIGJlZ2luPSItMS4wODY5NTY1MjE3MzkxMzA0cyI+PC9hbmltYXRlPg0KPC9jaXJjbGU+DQo8L3N2Zz4=';\n" }, { "path": "lib/component/ReactVirtualizedScroll/utils.js", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.useStateAndRef = void 0;\nvar react_1 = require(\"react\");\nexports.useStateAndRef = function (data) {\n var _a = react_1.useState(data), data = _a[0], setData = _a[1];\n var dataRef = react_1.useRef(data);\n react_1.useEffect(function () {\n dataRef.current = data;\n }, [data]);\n return [data, setData, dataRef];\n};\n" }, { "path": "lib/package.json", "content": "{\n \"name\": \"react-virtualized-scroll\",\n \"version\": \"0.0.8\",\n \"description\": \"虚拟滚动搭配上拉下滑加载的scroll组件\",\n \"main\": \"./component/ReactVirtualizedScroll/index.js\",\n \"author\": \"DavidWong \",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-router-dom\": \"^5.0.1\",\n \"react-virtualized\": \"^9.21.2\"\n }\n}" }, { "path": "package.json", "content": "{\n \"name\": \"react-virtualized-scroll\",\n \"version\": \"0.0.9\",\n \"description\": \"虚拟滚动搭配上拉下滑加载的scroll组件\",\n \"main\": \"lib/index.js\",\n \"homepage\": \"https://github.com/DavidWong9785/react-virtualized-scroll\",\n \"scripts\": {\n \"start\": \"webpack-dev-server --open development\",\n \"build\": \"tsc\",\n \"format\": \"prettier --write \\\"src/**/*.ts\\\" \\\"src/**/*.js\\\"\",\n \"lint\": \"tslint -p tsconfig.json\",\n \"test\": \"jest --config jestconfig.json --coverage\"\n },\n \"keywords\": [\n \"typescript\",\n \"虚拟滚动\",\n \"scroll\",\n \"react\"\n ],\n \"author\": \"DavidWong \",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/DavidWong9785/react-virtualized-scroll.git\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"@types/html-webpack-plugin\": \"^3.2.1\",\n \"@types/node\": \"^12.6.8\",\n \"@types/react\": \"^16.8.20\",\n \"@types/react-dom\": \"^16.8.4\",\n \"@types/react-router-dom\": \"^4.3.4\",\n \"@types/react-virtualized\": \"^9.21.7\",\n \"@types/webpack\": \"^4.32.1\",\n \"media-show-card\": \"^1.0.3\",\n \"pre-commit\": \"^1.2.2\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-router-dom\": \"^5.0.1\",\n \"react-virtualized\": \"^9.21.2\",\n \"ts-node\": \"^8.3.0\"\n },\n \"devDependencies\": {\n \"@types/enzyme\": \"^3.10.3\",\n \"@types/jest\": \"^24.0.16\",\n \"babel-jest\": \"^24.9.0\",\n \"css-loader\": \"^3.1.0\",\n \"enzyme\": \"^3.10.0\",\n \"enzyme-adapter-react-16\": \"^1.14.0\",\n \"file-loader\": \"^4.1.0\",\n \"html-webpack-plugin\": \"^3.2.0\",\n \"identity-obj-proxy\": \"^3.0.0\",\n \"jest\": \"^24.8.0\",\n \"prettier\": \"^1.18.2\",\n \"source-map-loader\": \"^0.2.4\",\n \"style-loader\": \"^0.23.1\",\n \"ts-jest\": \"^24.0.2\",\n \"ts-loader\": \"^6.0.3\",\n \"tslint\": \"^5.18.0\",\n \"tslint-config-prettier\": \"^1.18.0\",\n \"typescript\": \"^3.5.2\",\n \"url-loader\": \"^2.1.0\",\n \"webpack\": \"^4.34.0\",\n \"webpack-cli\": \"^3.3.4\",\n \"webpack-dev-server\": \"^3.7.2\"\n }\n}\n" }, { "path": "src/__tests__/demo.test.tsx", "content": "import React from 'react'\nimport { shallow, configure } from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\nimport ReactVirtualizedScroll from '../component/ReactVirtualizedScroll/index'\n\nconfigure({ adapter: new Adapter() })\n\nconst setup = () => {\n // 模拟 props\n const props = {\n height: '100vh',\n row: () => {},\n hasMore: true\n }\n // 通过 enzyme 提供的 shallow(浅渲染) 创建组件\n const wrapper = shallow()\n return {\n props,\n wrapper,\n }\n}\n\ndescribe('测试height属性', () => {\n const { wrapper, props } = setup()\n it('props', () => {\n expect(props.height).toEqual('100vh')\n })\n})\n" }, { "path": "src/assets/iconfont.css", "content": "@font-face {font-family: \"iconfont\";\n src: url('iconfont.eot?t=1578637319034'); /* IE9 */\n src: url('iconfont.eot?t=1578637319034#iefix') format('embedded-opentype'), /* IE6-IE8 */\n 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'),\n url('iconfont.woff?t=1578637319034') format('woff'),\n url('iconfont.ttf?t=1578637319034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */\n url('iconfont.svg?t=1578637319034#iconfont') format('svg'); /* iOS 4.1- */\n}\n\n.iconfont {\n font-family: \"iconfont\" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.iconshuaxin:before {\n content: \"\\e60c\";\n}\n\n.iconcheck-circle:before {\n content: \"\\e77d\";\n}\n\n.iconreload:before {\n content: \"\\e788\";\n}\n\n.iconicon-test:before {\n content: \"\\e658\";\n}\n\n.iconfiltration:before {\n content: \"\\e630\";\n}\n\n" }, { "path": "src/assets/iconfont.js", "content": "!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);" }, { "path": "src/component/ReactVirtualizedScroll/ReactVirtualizedScroll.tsx", "content": "import React, { useState, useMemo, TouchEvent, useRef, useCallback, forwardRef, useImperativeHandle, useEffect } from 'react';\nimport { List as VList, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';\nimport { loading_pullup } from './svg';\nimport '../../assets/iconfont.css'\nimport './style.css'\n\ninterface ILogo {\n pulldown_loading?: JSX.Element;\n pulldown_success?: JSX.Element;\n pullup_loading?: JSX.Element;\n pullup_success?: JSX.Element;\n}\n\ninterface IVirtualized {\n children? : JSX.Element;\n hasMore : boolean;\n refreshDistance? : number;\n loading? : boolean;\n data? : any;\n info? : any;\n height? : string;\n width? : string;\n noDataRow? : JSX.Element;\n logo? : ILogo;\n onPullUp? : any;\n onPullDown? : any;\n onScroll?: any;\n row({index, info}: {index: number, info: any, data: any}): any;\n}\n\nconst Row = ({ row, data, index, info }:any) => {\n return useMemo(() => {\n return row({ data: data, index, info })\n }, [JSON.stringify(data[index])])\n}\n\nconst VirtualizedScroll = ({\n children,\n hasMore = true,\n refreshDistance = 120,\n loading = false,\n data = [],\n info,\n height = '100vh',\n width = '100vw',\n noDataRow,\n onPullDown = null,\n onPullUp = null,\n onScroll = null,\n row,\n logo = {}\n}: IVirtualized, ref: any) => {\n\n // 下拉状态\n const [STATS, setSTATS] = useState('init')\n // touch数据\n const [startY, setStartY] = useState(0)\n const [offset, setOffset] = useState(0)\n // vList容器\n const vListRef = useRef()\n const timer = useRef()\n // 上滑时，scrollTop为0禁止滑动\n const scrollingDisable = useRef(false)\n \n const hasMoreRef = useRef(true)\n const canNotDrag = useRef(false)\n const isPullUpLoading = useRef(false)\n\n useEffect(() => {\n hasMoreRef.current = hasMore\n }, [hasMore])\n\n useEffect(() => {\n canNotDrag.current = STATS === 'refreshing' || STATS === 'success' || STATS == 'scroll' || !onPullDown\n }, [STATS])\n\n const initState = () => {\n setOffset(0)\n setStartY(0)\n }\n\n const onTouchStart = ($event: TouchEvent) => {\n if (canNotDrag.current || scrollingDisable.current) return\n setStartY($event.nativeEvent.touches[0].pageY)\n }\n\n const onTouchMove = useCallback(\n ($event: TouchEvent) => {\n if (canNotDrag.current || scrollingDisable.current) return\n\n const offsetComputed = $event.nativeEvent.touches[0].pageY - startY\n if (0 < offsetComputed && offsetComputed <= refreshDistance) setOffset(offsetComputed)\n else if (offsetComputed < 0) setOffset(0)\n else if (offsetComputed > refreshDistance) setOffset(refreshDistance)\n \n if (offset < refreshDistance && STATS !== 'dragging') setSTATS('dragging')\n else if (offset >= refreshDistance) setSTATS('pre-refresh')\n },\n [startY, canNotDrag, offset, STATS],\n )\n\n const onTouchEnd = useCallback(\n ($event: TouchEvent) => {\n if (canNotDrag.current) return\n if (scrollingDisable.current) {\n initState()\n return\n }\n if (STATS === 'pre-refresh') {\n setSTATS('refreshing')\n if (!onPullDown) return\n onPullDown().then(() => {\n setSTATS('success')\n if (vListRef.current) vListRef.current.scrollToRow(0)\n if (timer.current) clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n setSTATS('init')\n initState()\n }, 500)\n })\n } else {\n initState()\n setSTATS('not-enough')\n if (timer.current) clearTimeout(timer.current)\n timer.current = setTimeout(() => {\n setSTATS('init')\n }, 500)\n }\n \n },\n [timer, STATS, canNotDrag],\n )\n\n const onScrollCallback = ({ clientHeight, scrollTop, scrollHeight }: any) => {\n\n if (scrollTop === 0) scrollingDisable.current = false\n else scrollingDisable.current = true\n\n if ((clientHeight + scrollTop === scrollHeight) && onPullUp && !isPullUpLoading.current) {\n isPullUpLoading.current = true\n onPullUp().then(() => {\n isPullUpLoading.current = false\n if (vListRef.current) vListRef.current.scrollToRow(data.length + 1)\n }).catch(() => {\n isPullUpLoading.current = false\n })\n }\n if (onScroll) onScroll(clientHeight, scrollTop, scrollHeight)\n }\n\n const cache = new CellMeasurerCache({ defaultHeight: 400,fixedWidth: true});\n\n useImperativeHandle(\n ref,\n () => ({\n vListRef: vListRef.current\n }),\n [vListRef],\n )\n\n const renderRow = useCallback(\n ({ index, key, parent, style }: any) => {\n return (\n \n
\n {\n \n\n }\n {\n index === data.length - 1 ? !hasMoreRef.current ? \n (\n
\n { logo.pullup_success ? logo.pullup_success : '没有更多了' }\n
\n ) :\n (\n
\n { logo.pullup_loading ? logo.pullup_loading : \"\"/ }\n
\n ) : ''\n }\n
\n \n )\n }, [data, hasMoreRef]\n )\n\n const VirtualScroll = useMemo(() => {\n return (\n
\n { children }\n {\n !data.length ? noDataRow ? noDataRow : '' :\n (\n \n {\n ({ height, width }: any) => (\n vListRef.current = ref}\n onScroll={onScrollCallback}\n height={height}\n width={width}\n rowHeight={cache.rowHeight}\n rowCount={data.length}\n rowRenderer={renderRow}\n />\n )\n }\n \n )\n }\n
\n )\n }, [data])\n\n return (\n
\n
\n
\n
\n
\n {\n STATS === 'success' || STATS === 'init' ? \n logo.pulldown_success ? logo.pulldown_success : \n : logo.pulldown_loading ? logo.pulldown_loading : \n }\n
\n
\n
\n { VirtualScroll }\n
\n
\n );\n};\n\nexport default forwardRef(VirtualizedScroll);\n" }, { "path": "src/component/ReactVirtualizedScroll/index.tsx", "content": "import ReactVirtualizedScroll from './ReactVirtualizedScroll'\n\nexport default ReactVirtualizedScroll\n" }, { "path": "src/component/ReactVirtualizedScroll/style.css", "content": "*{\n margin: 0;\n padding: 0;\n}\n#virtualized-scroll-panel, .list-box{\n width: 100%;\n height: 100%;\n}\n#virtualized-scroll-panel .list-box{\n transition: all .3s;\n position: absolute;\n}\n#virtualized-scroll-panel{\n position: relative;\n background-color: #f5f5f9;\n /* overflow: hidden; */\n}\n#virtualized-scroll-panel .pull-down-box{\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n \n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round .iconcheck-circle{\n font-size: 28px;\n color: #43cd80;\n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round .iconshuaxin{\n font-size: 28px;\n color: #ff8080;\n}\n#virtualized-scroll-panel .pull-down-box .pull-down-round{\n width: 40px;\n height: 40px;\n background: #fff;\n box-shadow: 1px 1px 5px rgba(0,0,0,0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n@keyframes self_rotate{\n 0%{ transform: rotate(0deg); }\n 100%{ transform: rotate(360deg); }\n}\n#virtualized-scroll-panel .card-content .load-item{\n height: 50px;\n text-align: center;\n line-height: 50px;\n background-color: #f5f5f9;\n width: 100%;\n}" }, { "path": "src/component/ReactVirtualizedScroll/svg.ts", "content": "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='" }, { "path": "src/types/demo/index.d.ts", "content": "interface IDemo {\n age: number\n}\n" }, { "path": "src/types/global.d.ts", "content": "declare module '*.png' {\n const value: string\n export = value\n}\n\ndeclare module '*.mp4' {\n const content: string\n export = content\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"outDir\": \"./lib\",\n // \"sourceMap\": true,\n \"noImplicitAny\": false, //在表达式和声明上有隐含的 any类型时报错。\n \"target\": \"es5\", //指定ECMAScript目标版本 \"ES3\"（默认）\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"], // 编译过程中需要引入的库文件的列表\n \"allowJs\": true, //允许编译javascript文件。\n \"skipLibCheck\": true, //忽略所有的声明文件（ *.d.ts）的类型检查\n \"esModuleInterop\": true, //允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查\n \"allowSyntheticDefaultImports\": true, // 同上\n \"strict\": true, //启用所有严格类型检查选项\n \"forceConsistentCasingInFileNames\": true, //禁止对同一个文件的不一致的引用\n \"module\": \"commonjs\", //指定生成哪个模块系统代码\n \"moduleResolution\": \"node\", //决定如何处理模块。\n \"resolveJsonModule\": true,\n \"isolatedModules\": false, //将每个文件作为单独的模块（与“ts.transpileModule”类似）。\n // \"noEmit\": true,//不生成输出文件\n \"jsx\": \"react\",\n \"baseUrl\": \"./\",\n \"paths\": { \"*\": [\"types/*\"] }\n // \"suppressImplicitAnyIndexErrors\": true, //阻止对缺少索引签名的索引对象报错\n },\n \"exclude\": [\"node_modules\", \"./lib\", \"./example\"],\n \"include\": [\"src/**/*\"]\n}\n" }, { "path": "tslint.json", "content": "{\n \"extends\": [\"tslint:recommended\", \"tslint-config-prettier\"],\n \"rules\": {\n \"no-console\": false,\n \"object-literal-sort-keys\": false,\n \"member-access\": false,\n \"ordered-imports\": false\n },\n \"linterOptions\": {\n \"exclude\": [\"**/*.json\", \"node_modules\", \"./lib\", \"./example\"]\n }\n}\n" }, { "path": "webpack.config.js", "content": "const path = require('path')\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\nconst htmlWebpackPlugin = new HtmlWebpackPlugin({\n template: path.join(__dirname, './example/src/index.html'),\n filename: './index.html',\n})\n\nmodule.exports = {\n entry: path.join(__dirname, './example/src/index.tsx'),\n output: {\n path: path.join(__dirname, 'example/dist'),\n filename: 'bundle.js',\n },\n module: {\n rules: [\n {\n test: /\\.tsx?/,\n loader: 'ts-loader',\n },\n {\n // pre/nomal/post - loader的执行顺序 - 前/中/后\n enforce: 'pre',\n test: /\\.tsx?/,\n loader: 'source-map-loader',\n },\n {\n test: /\\.css$/,\n use: ['style-loader', 'css-loader'],\n },\n {\n test: /\\.(gif|jpg|png|woff|svg|eot|ttf|otf|woff2)$/,\n use: {\n loader: 'url-loader',\n options: {\n limit: 20,\n },\n },\n },\n ],\n },\n //映射工具\n // devtool: 'source-map',\n //处理路径解析\n resolve: {\n //extensions 拓展名\n extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],\n },\n plugins: [htmlWebpackPlugin],\n devServer: {\n port: 3005,\n },\n}\n" } ]