From a24f8ae6ae8fb9d8c063bf0bd39845e7cb972789 Mon Sep 17 00:00:00 2001 From: "vicky-primathon.in" Date: Mon, 5 Apr 2021 14:52:55 +0530 Subject: [PATCH] Added react-custom-scrollbars --- app/client/package.json | 3 +- .../appsmith/TableComponent/Table.tsx | 183 +++++++++--------- .../TableComponent/TableStyledWrappers.tsx | 2 - app/client/yarn.lock | 57 ++++-- 4 files changed, 137 insertions(+), 108 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index 9bd649af8d..937c68c2aa 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -73,6 +73,7 @@ "lint-staged": "^9.2.5", "localforage": "^1.7.3", "lodash": "^4.17.19", + "lodash-es": "4.17.14", "lodash-move": "^1.1.1", "loglevel": "^1.6.7", "lottie-web": "^5.7.4", @@ -90,6 +91,7 @@ "react": "^16.12.0", "react-base-table": "^1.9.1", "react-beautiful-dnd": "^12.2.0", + "react-custom-scrollbars": "^4.2.1", "react-dnd": "^9.3.4", "react-dnd-html5-backend": "^9.3.4", "react-dnd-touch-backend": "^9.4.0", @@ -118,7 +120,6 @@ "redux-form": "^8.2.6", "redux-saga": "^1.1.3", "reselect": "^4.0.0", - "lodash-es": "4.17.14", "scroll-into-view-if-needed": "^2.2.26", "shallowequal": "^1.1.0", "showdown": "^1.9.1", diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx index 151b411473..5e574a892b 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx @@ -22,6 +22,7 @@ import { Colors } from "constants/Colors"; import VerticalScrollIndicator from "components/ads/VerticalScrollIndicator"; import { EventType } from "constants/AppsmithActionConstants/ActionConstants"; +import { Scrollbars } from "react-custom-scrollbars"; interface TableProps { width: number; @@ -193,97 +194,101 @@ export const Table = (props: TableProps) => { className={props.isLoading ? Classes.SKELETON : "tableWrap"} ref={tableWrapperRef} > -
-
- {headerGroups.map((headerGroup: any, index: number) => ( -
- {headerGroup.headers.map((column: any, columnIndex: number) => { - return ( - - ); - })} -
- ))} - {headerGroups.length === 0 && - renderEmptyRows( - 1, - props.columns, - props.width, - subPage, - prepareRow, - )} -
-
subPage.length ? "no-scroll" : "" - }`} - ref={tableBodyRef} - > - {subPage.map((row, rowIndex) => { - prepareRow(row); - return ( + +
+
+ {headerGroups.map((headerGroup: any, index: number) => (
{ - row.toggleRowSelected(); - props.selectTableRow(row); - e.stopPropagation(); - }} - key={rowIndex} + {...headerGroup.getHeaderGroupProps()} + className="tr" + key={index} > - {row.cells.map((cell, cellIndex) => { - return ( -
- {cell.render("Cell")} -
- ); - })} + {headerGroup.headers.map( + (column: any, columnIndex: number) => { + return ( + + ); + }, + )}
- ); - })} - {props.pageSize > subPage.length && - renderEmptyRows( - props.pageSize - subPage.length, - props.columns, - props.width, - subPage, - prepareRow, - )} + ))} + {headerGroups.length === 0 && + renderEmptyRows( + 1, + props.columns, + props.width, + subPage, + prepareRow, + )} +
+
subPage.length ? "no-scroll" : "" + }`} + ref={tableBodyRef} + > + {subPage.map((row, rowIndex) => { + prepareRow(row); + return ( +
{ + row.toggleRowSelected(); + props.selectTableRow(row); + e.stopPropagation(); + }} + key={rowIndex} + > + {row.cells.map((cell, cellIndex) => { + return ( +
+ {cell.render("Cell")} +
+ ); + })} +
+ ); + })} + {props.pageSize > subPage.length && + renderEmptyRows( + props.pageSize - subPage.length, + props.columns, + props.width, + subPage, + prepareRow, + )} +
-
+
{ top={props.editMode ? "37px" : "40px"} left={props.editMode ? "0px" : "3px"} /> - { containerRef={tableBodyRef} mode="LIGHT" top={props.editMode ? "70px" : "73px"} - /> + /> */} ); }; diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx index 368a56aba3..12871cb83c 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx @@ -29,7 +29,6 @@ export const TableWrapper = styled.div<{ position: relative; width: ${(props) => props.width - 8}px; overflow-x: auto; - ${DisableNativeScrollbar}; } .table { border-spacing: 0; @@ -49,7 +48,6 @@ export const TableWrapper = styled.div<{ height: ${(props) => props.height - 80}px; width: 100%; overflow-y: auto; - ${DisableNativeScrollbar}; .tr { width: 100%; } diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 8541e84ec9..28ed6d2d48 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -3580,7 +3580,6 @@ "@types/marked@^1.2.2": version "1.2.2" resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4" - integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw== "@types/mdast@^3.0.0": version "3.0.3" @@ -3761,7 +3760,6 @@ "@types/react-window@^1.8.2": version "1.8.2" resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe" - integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ== dependencies: "@types/react" "*" @@ -4408,6 +4406,10 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0: version "7.4.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" +add-px-to-style@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a" + address@1.1.2, address@^1.0.1: version "1.1.2" resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6" @@ -5329,7 +5331,6 @@ bluebird@^3.3.5, bluebird@^3.5.5, bluebird@^3.7.2: bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9: version "4.12.0" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88" - integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA== bn.js@^5.1.1: version "5.1.3" @@ -6046,7 +6047,6 @@ code-point-at@^1.0.0: codemirror@^5.59.2: version "5.59.2" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922" - integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA== collapse-white-space@^1.0.2: version "1.0.6" @@ -6170,7 +6170,6 @@ compression@^1.7.4: compute-scroll-into-view@^1.0.16: version "1.0.16" resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088" - integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ== concat-map@0.0.1: version "0.0.1" @@ -6297,7 +6296,6 @@ core-js@^3.0.1, core-js@^3.0.4, core-js@^3.6.5: core-js@^3.9.1: version "3.9.1" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae" - integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg== core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" @@ -7071,6 +7069,14 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-css@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202" + dependencies: + add-px-to-style "1.0.0" + prefix-style "2.0.1" + to-camel-case "1.0.0" + dom-helpers@^3.4.0: version "3.4.0" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" @@ -7233,7 +7239,6 @@ element-resize-detector@^1.2.1: elliptic@^6.5.3: version "6.5.4" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb" - integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ== dependencies: bn.js "^4.11.9" brorand "^1.1.0" @@ -10856,12 +10861,10 @@ locate-path@^5.0.0: lodash-es@4.17.14: version "4.17.14" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc" - integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA== lodash-move@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/lodash-move/-/lodash-move-1.1.1.tgz#59f76e0f1ac57e6d8683f531bec07c5b6ea4e348" - integrity sha1-WfduDxrFfm2Gg/UxvsB8W26k40g= dependencies: lodash "^4.6.1" @@ -10945,7 +10948,6 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0: lodash@^4.6.1: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" - integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== log-symbols@3.0.0, log-symbols@^3.0.0: version "3.0.0" @@ -11112,7 +11114,6 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.11.4: marked@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5" - integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q== marker-clusterer-plus@^2.1.4: version "2.1.4" @@ -12358,7 +12359,6 @@ path-to-regexp@^1.7.0: path-to-regexp@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38" - integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg== path-type@^1.0.0: version "1.1.0" @@ -13129,6 +13129,10 @@ preact@^10.0.0: version "10.5.4" resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.4.tgz#1e4d148f949fa54656df6c9bc9218bd4e12016e3" +prefix-style@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -13209,7 +13213,6 @@ pretty-hrtime@^1.0.3: prismjs@^1.23.0, prismjs@^1.8.4: version "1.23.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33" - integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA== optionalDependencies: clipboard "^2.0.0" @@ -13507,7 +13510,7 @@ raf-schd@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0" -raf@^3.4.1: +raf@^3.1.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" dependencies: @@ -13629,6 +13632,14 @@ react-color@^2.17.0: reactcss "^1.2.0" tinycolor2 "^1.4.1" +react-custom-scrollbars@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db" + dependencies: + dom-css "^2.0.0" + prop-types "^15.5.10" + raf "^3.1.0" + react-day-picker@7.4.8: version "7.4.8" resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.8.tgz#675625240d3fae1b41c0a9d5177c968c8517c1d4" @@ -14180,7 +14191,6 @@ react-window@^1.8.2: react-window@^1.8.6: version "1.8.6" resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112" - integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg== dependencies: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" @@ -14969,7 +14979,6 @@ scriptjs@^2.5.8: scroll-into-view-if-needed@^2.2.26: version "2.2.26" resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz#e4917da0c820135ff65ad6f7e4b7d7af568c4f13" - integrity sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw== dependencies: compute-scroll-into-view "^1.0.16" @@ -16115,10 +16124,20 @@ to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" +to-camel-case@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46" + dependencies: + to-space-case "^1.0.0" + to-fast-properties@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" +to-no-case@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a" + to-object-path@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af" @@ -16147,6 +16166,12 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +to-space-case@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17" + dependencies: + to-no-case "^1.0.0" + toggle-selection@^1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"