Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

NavDrawer: remove divider in pinned state

Browse Source
This commit is contained in:
Sidney Alcantara
2022-05-30 17:49:20 +10:00
parent ac097125cb
commit fd26a20424
5 changed files with 117 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ColumnModals/ColumnConfigModal/ColumnConfig.tsx
View File

@@ -83,7 +83,7 @@ export default function ColumnConfigModal({
<Modal
maxWidth="md"
onClose={handleClose}
title={`${column.name}: Settings`}
title={`${column.name}: Config`}
disableBackdropClick
disableEscapeKeyDown
children={

71
src/components/Table/Table.tsx
View File

@@ -1,5 +1,4 @@
import React, { useRef, useMemo, useState } from "react";
import { find, difference } from "lodash-es";
import React, { useMemo, useState } from "react";
import { useAtom, useSetAtom } from "jotai";
import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
import { DndProvider } from "react-dnd";
@@ -27,6 +26,7 @@ import {
globalScope,
userRolesAtom,
userSettingsAtom,
navPinnedAtom,
} from "@src/atoms/globalScope";
import {
tableScope,
@@ -56,6 +56,7 @@ const rowClass = (row: any) => (row._rowy_outOfOrder ? "out-of-order" : "");
export default function Table() {
const [userRoles] = useAtom(userRolesAtom, globalScope);
const [userSettings] = useAtom(userSettingsAtom, globalScope);
const [navPinned] = useAtom(navPinnedAtom, globalScope);
const [tableId] = useAtom(tableIdAtom, tableScope);
const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
@@ -157,15 +158,18 @@ export default function Table() {
// );
}, [tableRows]) ?? [];
const rowsContainerRef = useRef<HTMLDivElement>(null);
const [selectedRowsSet, setSelectedRowsSet] = useState<Set<React.Key>>();
const [selectedRows, setSelectedRows] = useState<any[]>([]);
// const [selectedRowsSet, setSelectedRowsSet] = useState<Set<React.Key>>();
// const [selectedRows, setSelectedRows] = useState<any[]>([]);
// Gets more rows when scrolled down.
// https://github.com/adazzle/react-data-grid/blob/ead05032da79d7e2b86e37cdb9af27f2a4d80b90/stories/demos/AllFeatures.tsx#L60
const handleScroll = useThrottledCallback(
(event: React.UIEvent<HTMLDivElement>) => {
const target = event.target as HTMLDivElement;
if (navPinned && !columns[0].fixed)
setShowLeftScrollDivider(target.scrollLeft > 16);
const offset = 800;
const isAtBottom =
target.clientHeight + target.scrollTop >= target.scrollHeight - offset;
@@ -176,6 +180,8 @@ export default function Table() {
250
);
const [showLeftScrollDivider, setShowLeftScrollDivider] = useState(false);
const rowHeight = tableSchema.rowHeight ?? DEFAULT_ROW_HEIGHT;
const handleResize = useDebouncedCallback(
(colIndex: number, width: number) => {
@@ -191,12 +197,13 @@ export default function Table() {
{/* <Suspense fallback={<Loading message="Loading header" />}>
<Hotkeys selectedCell={selectedCell} />
</Suspense> */}
<TableContainer ref={rowsContainerRef} rowHeight={rowHeight}>
<TableContainer rowHeight={rowHeight}>
<DndProvider backend={HTML5Backend}>
{showLeftScrollDivider && <div className="left-scroll-divider" />}
<DataGrid
onColumnResize={handleResize}
onScroll={handleScroll}
// ref={dataGridRef}
rows={rows}
columns={columns}
// Increase row height of out of order rows to add margins
@@ -212,31 +219,31 @@ export default function Table() {
rowRenderer={TableRow}
rowKeyGetter={rowKeyGetter}
rowClass={rowClass}
selectedRows={selectedRowsSet}
onSelectedRowsChange={(newSelectedSet) => {
const newSelectedArray = newSelectedSet
? [...newSelectedSet]
: [];
const prevSelectedRowsArray = selectedRowsSet
? [...selectedRowsSet]
: [];
const addedSelections = difference(
newSelectedArray,
prevSelectedRowsArray
);
const removedSelections = difference(
prevSelectedRowsArray,
newSelectedArray
);
addedSelections.forEach((id) => {
const newRow = find(rows, { id });
setSelectedRows([...selectedRows, newRow]);
});
removedSelections.forEach((rowId) => {
setSelectedRows(selectedRows.filter((row) => row.id !== rowId));
});
setSelectedRowsSet(newSelectedSet);
}}
// selectedRows={selectedRowsSet}
// onSelectedRowsChange={(newSelectedSet) => {
// const newSelectedArray = newSelectedSet
// ? [...newSelectedSet]
// : [];
// const prevSelectedRowsArray = selectedRowsSet
// ? [...selectedRowsSet]
// : [];
// const addedSelections = difference(
// newSelectedArray,
// prevSelectedRowsArray
// );
// const removedSelections = difference(
// prevSelectedRowsArray,
// newSelectedArray
// );
// addedSelections.forEach((id) => {
// const newRow = find(rows, { id });
// setSelectedRows([...selectedRows, newRow]);
// });
// removedSelections.forEach((rowId) => {
// setSelectedRows(selectedRows.filter((row) => row.id !== rowId));
// });
// setSelectedRowsSet(newSelectedSet);
// }}
// onRowsChange={() => {
//console.log('onRowsChange',rows)
// }}

14
src/components/Table/TableContainer.tsx
View File

@@ -17,6 +17,20 @@ export const TableContainer = styled("div", {
flexDirection: "column",
height: `calc(100vh - ${APP_BAR_HEIGHT}px - ${TABLE_TOOLBAR_HEIGHT}px)`,
"& .left-scroll-divider": {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
width: 1,
zIndex: 1,
backgroundColor: colord(theme.palette.background.paper)
.mix(theme.palette.divider, 0.12)
.alpha(1)
.toHslString(),
},
"& > .rdg": {
// FIXME:
// width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,

47
src/layouts/Navigation/NavDrawer.tsx
View File

@@ -43,6 +43,7 @@ export interface INavDrawerProps extends DrawerProps {
pinned: boolean;
setPinned: React.Dispatch<React.SetStateAction<boolean>>;
canPin: boolean;
scrollTrigger: boolean;
}
export default function NavDrawer({
@@ -50,6 +51,7 @@ export default function NavDrawer({
pinned,
setPinned,
canPin,
scrollTrigger,
...props
}: INavDrawerProps) {
const [tables] = useAtom(tablesAtom, globalScope);
@@ -96,6 +98,7 @@ export default function NavDrawer({
"& .MuiDrawer-paper": {
minWidth: NAV_DRAWER_WIDTH,
borderRight: "none",
bgcolor: pinned ? "background.default" : "background.paper",
},
}}
@@ -111,8 +114,44 @@ export default function NavDrawer({
position: "sticky",
top: 0,
zIndex: "appBar",
backgroundColor: "inherit",
backgroundImage: "inherit",
backgroundColor:
pinned && scrollTrigger ? "background.paper" : "inherit",
backgroundImage: pinned
? "linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))" // Elevation 8
: "inherit",
"&::before": {
content: "''",
display: "block",
position: "absolute",
inset: 0,
bgcolor: "background.default",
opacity: pinned ? (scrollTrigger ? 0 : 1) : 0,
transition: (theme) =>
theme.transitions.create("opacity", {
easing:
canPin && pinned
? theme.transitions.easing.easeOut
: theme.transitions.easing.sharp,
duration:
canPin && pinned
? theme.transitions.duration.enteringScreen
: theme.transitions.duration.leavingScreen,
}),
},
boxShadow: pinned && scrollTrigger ? 1 : 0,
transition: (theme) =>
theme.transitions.create(["background-color", "box-shadow"], {
easing:
canPin && pinned
? theme.transitions.easing.easeOut
: theme.transitions.easing.sharp,
duration:
canPin && pinned
? theme.transitions.duration.enteringScreen
: theme.transitions.duration.leavingScreen,
}),
}}
>
<IconButton
@@ -123,7 +162,7 @@ export default function NavDrawer({
<CloseIcon />
</IconButton>
<Logo style={{ marginLeft: 1 }} />
<Logo style={{ marginLeft: 1, position: "relative", zIndex: 1 }} />
{canPin && (
<IconButton
@@ -139,7 +178,7 @@ export default function NavDrawer({
</Stack>
<nav>
<List disablePadding>
<List>
<li>
<NavItem to={ROUTES.tables} onClick={closeDrawer}>
<ListItemIcon>

25
src/layouts/Navigation/Navigation.tsx
View File

@@ -64,9 +64,9 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
color="inherit"
elevation={trigger ? 1 : 0}
sx={{
height: APP_BAR_HEIGHT, // Elevation 8
height: APP_BAR_HEIGHT,
backgroundImage:
"linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))",
"linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))", // Elevation 8
"&::before": {
content: "''",
@@ -79,12 +79,26 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
bgcolor: "background.default",
opacity: trigger ? 0 : 1,
transition: (theme) => theme.transitions.create("opacity"),
transition: (theme) =>
theme.transitions.create("opacity", {
easing:
canPin && pinned
? theme.transitions.easing.easeOut
: theme.transitions.easing.sharp,
duration:
canPin && pinned
? theme.transitions.duration.enteringScreen
: theme.transitions.duration.leavingScreen,
}),
},
pl: canPin && pinned && open ? `${NAV_DRAWER_WIDTH}px` : 0,
ml: canPin && pinned && open ? `${NAV_DRAWER_WIDTH}px` : 0,
width:
canPin && pinned && open
? `calc(100% - ${NAV_DRAWER_WIDTH}px)`
: "100%",
transition: (theme) =>
theme.transitions.create("padding-left", {
theme.transitions.create(["margin-left", "width", "box-shadow"], {
easing:
canPin && pinned
? theme.transitions.easing.easeOut
@@ -171,6 +185,7 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
setPinned={setPinned}
canPin={canPin}
onClose={() => setOpen(false)}
scrollTrigger={trigger}
/>
<ErrorBoundary FallbackComponent={StyledErrorFallback}>