re-enable header cell drag/drop

This commit is contained in:
Sidney Alcantara
2020-02-28 10:30:11 +11:00
parent 69b5c21a0e
commit e6b1150079
4 changed files with 158 additions and 46 deletions

View File

@@ -38,6 +38,7 @@
"react": "^16.9.0",
"react-color": "^2.17.3",
"react-data-grid": "^7.0.0-alpha.29",
"react-data-grid-addons": "^7.0.0-alpha.24",
"react-div-100vh": "^0.3.8",
"react-dom": "^16.9.0",
"react-dropzone": "^10.1.8",

View File

@@ -10,6 +10,7 @@ import DataGrid, {
CellNavigationMode,
ScrollPosition,
} from "react-data-grid";
import { DraggableHeader } from "react-data-grid-addons";
import Loading from "components/Loading";
import SubTableBreadcrumbs, { BREADCRUMBS_HEIGHT } from "./SubTableBreadcrumbs";
@@ -32,6 +33,7 @@ import useStyles from "./styles";
const Hotkeys = lazy(() => import("./HotKeys"));
const ColumnEditor = lazy(() => import("./ColumnEditor/index"));
const { DraggableContainer } = DraggableHeader;
export type FiretableColumn = Column<any> & {
isNew?: boolean;
@@ -92,9 +94,9 @@ export default function Table({ collection, filters }: ITableProps) {
if (!tableActions || !tableState) return <></>;
// const onHeaderDrop = (dragged: any, target: any) => {
// tableActions.column.reorder(dragged, target);
// };
const onHeaderDrop = (dragged: any, target: any) => {
tableActions.column.reorder(dragged, target);
};
let columns: FiretableColumn[] = [];
if (!tableState.loadingColumns && tableState.columns) {
@@ -152,41 +154,43 @@ export default function Table({ collection, filters }: ITableProps) {
/>
{!tableState.loadingColumns ? (
<DataGrid
columns={columns}
rowGetter={rowGetter}
rowsCount={rows.length}
rowKey={"id" as "id"}
onGridRowsUpdated={event => {
console.log(event);
const { action, cellKey, updated } = event;
if (action === "CELL_UPDATE")
updateCell!(rows[event.toRow].ref, cellKey as string, updated);
}}
rowHeight={rowHeight}
headerRowHeight={43}
// TODO: Investigate why setting a numeric value causes
// LOADING to pop up on screen when scrolling horizontally
// width={windowSize.width - DRAWER_COLLAPSED_WIDTH}
minWidth={tableWidth}
minHeight={
windowSize.height -
APP_BAR_HEIGHT * 2 -
TABLE_HEADER_HEIGHT -
(inSubTable ? BREADCRUMBS_HEIGHT : 0)
}
// enableCellCopyPaste
// enableCellDragAndDrop
onColumnResize={tableActions.column.resize}
cellNavigationMode={CellNavigationMode.CHANGE_ROW}
onCellSelected={({ rowIdx, idx: colIdx }) =>
setSelectedCell!({ row: rowIdx, column: columns[colIdx].key })
}
enableCellSelect
onScroll={handleScroll}
ref={dataGridRef}
RowsContainer={props => <div {...props} ref={rowsContainerRef} />}
/>
<DraggableContainer onHeaderDrop={onHeaderDrop}>
<DataGrid
columns={columns}
rowGetter={rowGetter}
rowsCount={rows.length}
rowKey={"id" as "id"}
onGridRowsUpdated={event => {
console.log(event);
const { action, cellKey, updated } = event;
if (action === "CELL_UPDATE")
updateCell!(rows[event.toRow].ref, cellKey as string, updated);
}}
rowHeight={rowHeight}
headerRowHeight={44}
// TODO: Investigate why setting a numeric value causes
// LOADING to pop up on screen when scrolling horizontally
// width={windowSize.width - DRAWER_COLLAPSED_WIDTH}
minWidth={tableWidth}
minHeight={
windowSize.height -
APP_BAR_HEIGHT * 2 -
TABLE_HEADER_HEIGHT -
(inSubTable ? BREADCRUMBS_HEIGHT : 0)
}
// enableCellCopyPaste
// enableCellDragAndDrop
onColumnResize={tableActions.column.resize}
cellNavigationMode={CellNavigationMode.CHANGE_ROW}
onCellSelected={({ rowIdx, idx: colIdx }) =>
setSelectedCell!({ row: rowIdx, column: columns[colIdx].key })
}
enableCellSelect
onScroll={handleScroll}
ref={dataGridRef}
RowsContainer={props => <div {...props} ref={rowsContainerRef} />}
/>
</DraggableContainer>
) : (
<Loading message="Fetching columns" />
)}

View File

@@ -11,7 +11,10 @@ export const useStyles = makeStyles(theme =>
},
"& .rdg-header": { backgroundColor: theme.palette.background.default },
"& .rdg-header .rdg-cell": { borderTop: "1px solid #e0e0e0" },
"& .rdg-header .rdg-cell": {
borderTop: "1px solid #e0e0e0",
height: "100%",
},
"& .rdg-viewport": { backgroundColor: "transparent" },
@@ -35,6 +38,12 @@ export const useStyles = makeStyles(theme =>
color: theme.palette.text.secondary,
},
".rdg-draggable-header-cell": {
cursor: "move",
"&.rdg-can-drop .rdg-cell": { backgroundColor: theme.palette.divider },
},
".rdg-row:hover": { color: theme.palette.text.primary },
".row-hover-iconButton": {

View File

@@ -2357,7 +2357,7 @@ arrify@^2.0.1:
resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
asap@~2.0.3, asap@~2.0.6:
asap@^2.0.6, asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -3213,7 +3213,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.6:
classnames@^2.2.4, classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -4119,6 +4119,21 @@ dir-glob@2.0.0:
arrify "^1.0.1"
path-type "^3.0.0"
disposables@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.2.tgz#36c6a674475f55a2d6913567a601444e487b4b6e"
integrity sha1-NsamdEdfVaLWkTVnpgFETkh7S24=
dnd-core@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.6.0.tgz#12bad66d58742c6e5f7cf2943fb6859440f809c4"
integrity sha1-ErrWbVh0LG5ffPKUP7aFlED4CcQ=
dependencies:
asap "^2.0.6"
invariant "^2.0.0"
lodash "^4.2.0"
redux "^3.7.1"
dns-equal@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -5769,6 +5784,11 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^2.1.0:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -6158,7 +6178,7 @@ internal-ip@^4.3.0:
default-gateway "^4.2.0"
ipaddr.js "^1.9.0"
invariant@^2.2.2, invariant@^2.2.4:
invariant@^2.0.0, invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7482,7 +7502,7 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.14:
lodash-es@^4.17.14, lodash-es@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
@@ -7607,7 +7627,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9699,7 +9719,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.4"
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9955,7 +9975,30 @@ react-color@^2.17.3:
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-data-grid@^7.0.0-alpha.29:
react-contextmenu@^2.13.0:
version "2.13.0"
resolved "https://registry.yarnpkg.com/react-contextmenu/-/react-contextmenu-2.13.0.tgz#dabaea63124e30c85f1b4245c095b7045d013459"
integrity sha512-hhFuJX4di0zGV7H7pXPn42U70OZbGpQD+PxcdmKStNT5mebSjI+inhOuFESDmDbqVsN/f99hI5/nw95oXTVRXQ==
dependencies:
classnames "^2.2.5"
object-assign "^4.1.0"
react-data-grid-addons@^7.0.0-alpha.24:
version "7.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/react-data-grid-addons/-/react-data-grid-addons-7.0.0-alpha.24.tgz#6ca2b80e96b3408cd806db141950ddc452ef5c9e"
integrity sha512-j/cZIPFhthJF7BUEYoio+M55pL5zuYWvrMS3kMesxI7Vrabn0Oh1K0pZB4RxTTvEwseiWd2xoZa4E25pZxm3CQ==
dependencies:
lodash "^4.17.15"
prop-types "^15.7.2"
react-contextmenu "^2.13.0"
react-data-grid "^7.0.0-alpha.24"
react-dnd "^2.6.0"
react-dnd-html5-backend "^2.6.0"
react-select "^1.3.0"
reselect "^4.0.0"
tslib "^1.10.0"
react-data-grid@^7.0.0-alpha.24, react-data-grid@^7.0.0-alpha.29:
version "7.0.0-alpha.29"
resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-alpha.29.tgz#9e52f4d61dc7818f6cd4ef83d8bb296743b4e903"
integrity sha512-9uCABMvIkkjATxtLSkQazLKs0xrnRnuM3VyfC76+xZz3RnKBieDnxF1wmZ1aaSXcqsknH4YUz7+fUG/klnW6cA==
@@ -10001,6 +10044,25 @@ react-div-100vh@^0.3.8:
resolved "https://registry.yarnpkg.com/react-div-100vh/-/react-div-100vh-0.3.8.tgz#54e4c32d0286a65e92367fc0a07cc3f2f00739d8"
integrity sha512-1kDFW+HXYpfac1tfJ4BcQmgTSeTtLVs2FO2ZNHcwLIga+oVluexUEISCBJvr9xq98DK8tcygY3259EvIy5O+3g==
react-dnd-html5-backend@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.6.0.tgz#590cd1cca78441bb274edd571fef4c0b16ddcf8e"
integrity sha1-WQzRzKeEQbsnTt1XH+9MCxbdz44=
dependencies:
lodash "^4.2.0"
react-dnd@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.6.0.tgz#7fa25676cf827d58a891293e3c1ab59da002545a"
integrity sha1-f6JWds+CfViokSk+PBq1naACVFo=
dependencies:
disposables "^1.0.1"
dnd-core "^2.6.0"
hoist-non-react-statics "^2.1.0"
invariant "^2.1.0"
lodash "^4.2.0"
prop-types "^15.5.10"
react-dom@^16.9.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
@@ -10030,6 +10092,13 @@ react-fast-compare@^2.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-input-autosize@^2.1.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
dependencies:
prop-types "^15.5.8"
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -10139,6 +10208,15 @@ react-scripts@^3.3.0:
optionalDependencies:
fsevents "2.1.2"
react-select@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.3.0.tgz#1828ad5bf7f3e42a835c7e2d8cb13b5c20714876"
integrity sha512-g/QAU1HZrzSfxkwMAo/wzi6/ezdWye302RGZevsATec07hI/iSxcpB1hejFIp7V63DJ8mwuign6KmB3VjdlinQ==
dependencies:
classnames "^2.2.4"
prop-types "^15.5.8"
react-input-autosize "^2.1.2"
react-textarea-autosize@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"
@@ -10285,6 +10363,16 @@ reduce@^1.0.1:
dependencies:
object-keys "^1.1.0"
redux@^3.7.1:
version "3.7.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
dependencies:
lodash "^4.2.1"
lodash-es "^4.2.1"
loose-envify "^1.1.0"
symbol-observable "^1.0.3"
regenerate-unicode-properties@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -10462,6 +10550,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
reselect@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -11419,6 +11512,11 @@ svgo@^1.0.0, svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"
symbol-observable@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
symbol-tree@^3.2.2:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"