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

fix skeletons & transitions

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-10 14:26:32 +10:00
parent 2c1c40691c
commit 5500332848
10 changed files with 139 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Loading.tsx
View File

@@ -20,7 +20,7 @@ export default function Loading({
const fullScreenHeight = use100vh() ?? "100vh";
return (
<Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Stack
justifyContent="center"
alignItems="center"

6
src/components/Navigation/index.tsx
View File

@@ -7,7 +7,7 @@ import {
IconButton,
Box,
Typography,
Grow,
Grow,GrowProps
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
@@ -26,6 +26,7 @@ export interface INavigationProps {
title: string;
titleComponent?: ReactNode;
currentSection?: string;
titleTransitionProps?:Partial<GrowProps>
}
export default function Navigation({
@@ -33,6 +34,7 @@ export default function Navigation({
title,
titleComponent,
currentSection,
titleTransitionProps,
}: INavigationProps) {
const [open, setOpen] = useState(false);
const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });
@@ -91,7 +93,7 @@ export default function Navigation({
</IconButton>
</Grow>
<Grow in key={title}>
<Grow in key={title} {...titleTransitionProps}>
<Box sx={{ flex: 1, overflowX: "auto", userSelect: "none" }}>
{titleComponent || (
<Typography

64
src/components/Table/Skeleton/HeaderRowSkeleton.tsx
View File

@@ -1,34 +1,48 @@
import { Stack, Skeleton, Button } from "@material-ui/core";
import { Fade, Stack, Skeleton, Button } from "@material-ui/core";
import AddColumnIcon from "assets/icons/AddColumn";
const NUM_CELLS = 5;
export default function HeaderRowSkeleton() {
return (
<Stack direction="row" alignItems="center">
{new Array(NUM_CELLS + 1).fill(undefined).map((_, i) => (
<Skeleton
key={i}
variant="rectangular"
sx={{
bgcolor: "background.default",
border: "1px solid",
borderColor: "divider",
borderLeftWidth: 0,
width: i === NUM_CELLS ? 46 : 150,
height: 44,
borderRadius: i === NUM_CELLS ? 1 : 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
}}
/>
))}
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Stack
direction="row"
alignItems="center"
sx={{
marginLeft: (theme) =>
`max(env(safe-area-inset-left), ${theme.spacing(2)})`,
marginRight: `env(safe-area-inset-right)`,
}}
>
{new Array(NUM_CELLS + 1).fill(undefined).map((_, i) => (
<Skeleton
key={i}
variant="rectangular"
sx={{
bgcolor: "background.default",
border: "1px solid",
borderColor: "divider",
borderLeftWidth: i === 0 ? 1 : 0,
width: i === NUM_CELLS ? 46 : 150,
height: 44,
borderRadius: i === NUM_CELLS ? 1 : 0,
borderTopLeftRadius:
i === 0 ? (theme) => theme.shape.borderRadius : 0,
borderBottomLeftRadius:
i === 0 ? (theme) => theme.shape.borderRadius : 0,
}}
/>
))}
<Skeleton sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}>
<Button variant="contained" startIcon={<AddColumnIcon />}>
Add Column
</Button>
</Skeleton>
</Stack>
<Skeleton
sx={{ transform: "none", ml: (-46 + 6) / 8, borderRadius: 1 }}
>
<Button variant="contained" startIcon={<AddColumnIcon />}>
Add Column
</Button>
</Skeleton>
</Stack>
</Fade>
);
}

69
src/components/Table/Skeleton/TableHeaderSkeleton.tsx
View File

@@ -1,4 +1,4 @@
import { Stack, Button } from "@material-ui/core";
import { Fade, Stack, Button } from "@material-ui/core";
import Skeleton from "@material-ui/core/Skeleton";
import AddRowIcon from "assets/icons/AddRow";
@@ -10,39 +10,46 @@ const ButtonSkeleton = (props) => (
export default function TableHeaderSkeleton() {
return (
<Stack
direction="row"
alignItems="center"
spacing={1}
sx={{ pl: 2, pr: 2, pb: 1.5, height: TABLE_HEADER_HEIGHT }}
>
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Add Row
</Button>
</ButtonSkeleton>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Stack
direction="row"
alignItems="center"
spacing={1}
sx={{
ml: "env(safe-area-inset-left)",
mr: "env(safe-area-inset-right)",
pl: 2,
pr: 2,
pb: 1.5,
height: TABLE_HEADER_HEIGHT,
}}
>
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Add Row
</Button>
</ButtonSkeleton>
<div />
<div />
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Hide
</Button>
</ButtonSkeleton>
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Filter
</Button>
</ButtonSkeleton>
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Hide
</Button>
</ButtonSkeleton>
<ButtonSkeleton>
<Button variant="contained" startIcon={<AddRowIcon />}>
Filter
</Button>
</ButtonSkeleton>
<div style={{ flexGrow: 1 }} />
<div style={{ flexGrow: 1 }} />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
<div />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
<div />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
</Stack>
<ButtonSkeleton style={{ width: 40, height: 32 }} />
<div />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
<ButtonSkeleton style={{ width: 40, height: 32 }} />
</Stack>
</Fade>
);
}

101
src/components/Table/TableHeader/index.tsx
View File

@@ -53,58 +53,61 @@ export default function TableHeader() {
"& > *": { flexShrink: 0 },
}}
>
{!isCollectionGroup() && (
/* <ButtonGroup
variant="contained"
aria-label="Split button"
style={{ display: "flex" }}
> */
{/*
<ButtonGroup
variant="contained"
aria-label="Split button"
style={{ display: "flex" }}
>
*/}
<Button
disabled={isCollectionGroup()}
onClick={() => {
const requiredFields = Object.values(columns)
.map((column) => {
if (column.config.required) {
return column.key;
}
})
.filter((c) => c);
const initialVal = Object.values(columns).reduce((acc, column) => {
if (column.config?.defaultValue?.type === "static") {
return {
...acc,
[column.key]: column.config.defaultValue.value,
};
} else if (column.config?.defaultValue?.type === "null") {
return { ...acc, [column.key]: null };
} else return acc;
}, {});
tableActions?.row.add(
{
...initialVal,
_updatedBy: rowyUser(currentUser),
_createdBy: rowyUser(currentUser),
},
requiredFields
);
}}
variant="contained"
color="primary"
startIcon={<AddRowIcon />}
// sx={{ pr: 1.5 }}
>
Add Row
</Button>
{/*
<Button
onClick={() => {
const requiredFields = Object.values(columns)
.map((column) => {
if (column.config.required) {
return column.key;
}
})
.filter((c) => c);
const initialVal = Object.values(columns).reduce((acc, column) => {
if (column.config?.defaultValue?.type === "static") {
return {
...acc,
[column.key]: column.config.defaultValue.value,
};
} else if (column.config?.defaultValue?.type === "null") {
return { ...acc, [column.key]: null };
} else return acc;
}, {});
tableActions?.row.add(
{
...initialVal,
_updatedBy: rowyUser(currentUser),
_createdBy: rowyUser(currentUser),
},
requiredFields
);
}}
variant="contained"
color="primary"
startIcon={<AddRowIcon />}
// sx={{ pr: 1.5 }}
// aria-controls={open ? 'split-button-menu' : undefined}
// aria-expanded={open ? 'true' : undefined}
// aria-label="select merge strategy"
aria-haspopup="menu"
style={{ padding: 0 }}
>
Add Row
<ArrowDropDownIcon />
</Button>
/* <Button
// aria-controls={open ? 'split-button-menu' : undefined}
// aria-expanded={open ? 'true' : undefined}
// aria-label="select merge strategy"
aria-haspopup="menu"
style={{ padding: 0 }}
>
<ArrowDropDownIcon />
</Button>
</ButtonGroup> */
)}
</ButtonGroup>
*/}
{/* Spacer */} <div />
<HiddenFields />
<Filters />

2
src/pages/Home.tsx
View File

@@ -94,7 +94,7 @@ export default function HomePage() {
if (!Array.isArray(tables))
return (
<Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<div>
{view === "list" ? <TableListSkeleton /> : <TableGridSkeleton />}
</div>

2
src/pages/Settings/ProjectSettings.tsx
View File

@@ -76,7 +76,7 @@ export default function ProjectSettingsPage() {
return (
<Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
{settingsState.loading || publicSettingsState.loading ? (
<Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Stack spacing={4}>
{new Array(sections.length).fill(null).map((_, i) => (
<SettingsSkeleton key={i} />

2
src/pages/Settings/UserManagement.tsx
View File

@@ -69,7 +69,7 @@ export default function UserManagementPage() {
</SlideTransition>
{loading || (query === "" && results.length === 0) ? (
<Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Paper>
<List sx={{ py: { xs: 0, sm: 1.5 }, px: { xs: 0, sm: 1 } }}>
<UserSkeleton />

2
src/pages/Settings/UserSettings.tsx
View File

@@ -55,7 +55,7 @@ export default function UserSettingsPage() {
return (
<Container maxWidth="sm" sx={{ px: 1, pt: 1, pb: 7 + 3 + 3 }}>
{!currentUser || settingsState.loading ? (
<Fade in style={{ transitionDelay: "1s" }} unmountOnExit>
<Fade in timeout={1000} style={{ transitionDelay: "1s" }} unmountOnExit>
<Stack spacing={4}>
{new Array(sections.length).fill(null).map((_, i) => (
<SettingsSkeleton key={i} />

1
src/pages/Table.tsx
View File

@@ -71,6 +71,7 @@ export default function TablePage() {
title={tableName}
titleComponent={<Breadcrumbs />}
currentSection={currentSection}
titleTransitionProps={{ style: { transformOrigin: "0 50%" } }}
>
<ActionParamsProvider>
{tableState.loadingColumns ? (