mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-31 01:39:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated the input limit for pagesize

Browse source
This commit is contained in:
Rajnish2105 2025-01-06 20:28:13 +05:30
parent 2ba196b68c
commit 64996107c0
2 changed files with 13 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
src/app/pages/client/explore/LimitWarning.tsx
View file

@ -1,140 +0,0 @@
import React, { FormEventHandler, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
Box,
Button,
Dialog,
Header,
Icon,
IconButton,
Icons,
Input,
Overlay,
OverlayBackdrop,
OverlayCenter,
Text,
config,
} from 'folds';
import { stopPropagation } from '../../../utils/keyboard';
type RectCords = {
x: number;
y: number;
width: number;
height: number;
};
type LimitButtonProps = {
limit: number;
onLimitChange: (limit: string) => void;
setMenuAnchor: React.Dispatch<React.SetStateAction<RectCords | undefined>>;
};
export function LimitWarning({ limit, onLimitChange, setMenuAnchor }: LimitButtonProps) {
const [dialog, setDialog] = useState(false);
const [xlimit, setXLimit] = useState<number>(limit);
const checklimit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
const limitInput = evt.currentTarget.limitInput as HTMLInputElement;
if (!limitInput) return;
const newLimit = limitInput.value.trim();
if (!newLimit) return;
if (parseInt(newLimit, 10) > 9999) {
setDialog(true);
setXLimit(Number(newLimit));
} else {
onLimitChange(newLimit);
setMenuAnchor(undefined);
}
};
const handleLimitSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
onLimitChange(xlimit.toString());
setDialog(false);
setMenuAnchor(undefined);
};
return (
<>
<Overlay open={dialog} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
clickOutsideDeactivates: true,
onDeactivate: () => setDialog(false),
escapeDeactivates: stopPropagation,
}}
>
<Dialog variant="Surface">
<Header
style={{
padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
}}
variant="Surface"
size="500"
>
<Box grow="Yes">
<Text size="H4">Warning!!</Text>
</Box>
<IconButton size="300" onClick={() => setDialog(false)} radii="300">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
<Box
as="form"
onSubmit={handleLimitSubmit}
style={{ padding: config.space.S400 }}
direction="Column"
gap="400"
>
<Text priority="400">
You are about to change the limit of items. Changing the limit higher than 9,999
may cause performance issues and may crash the app. It is recommended to keep the
limit below 9,999 for the smooth functioning of the app. Are you sure you want to
continue?
</Text>
<Box direction="Column" gap="200">
<Button
type="button"
onClick={() => setDialog(false)}
variant="Secondary"
fill="Soft"
>
<Text size="B300">No</Text>
</Button>
<Button type="submit" variant="Secondary" fill="Soft">
<Text size="B300">Continue</Text>
</Button>
</Box>
</Box>
</Dialog>
</FocusTrap>
</OverlayCenter>
</Overlay>
<Box as="form" onSubmit={checklimit} direction="Column" gap="300">
<Box direction="Column" gap="100">
<Text size="L400">Custom Limit</Text>
<Input
name="limitInput"
size="300"
variant="Background"
defaultValue={limit}
min={1}
step={1}
outlined
type="number"
radii="400"
aria-label="Per Page Item Limit"
/>
</Box>
<Button type="submit" size="300" variant="Primary" radii="400">
<Text size="B300">Change Limit</Text>
</Button>
</Box>
</>
);
}

17
src/app/pages/client/explore/Server.tsx
View file

@ -45,7 +45,7 @@ import { getMxIdServer } from '../../../utils/matrix';
import { stopPropagation } from '../../../utils/keyboard';
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { LimitWarning } from './LimitWarning';
// import { LimitWarning } from './LimitWarning';
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
useMemo(
@ -301,18 +301,27 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
<Chip variant="SurfaceVariant" onClick={() => setLimit('96')} radii="Pill">
<Text size="T200">96</Text>
</Chip>
<Chip variant="SurfaceVariant" onClick={() => setLimit('10000')} radii="Pill">
<Text size="T200">Max</Text>
</Chip>
</Box>
</Box>
<LimitWarning limit={limit} onLimitChange={setLimit} setMenuAnchor={setMenuAnchor} />
{/* <Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
<Box as="form" onSubmit={handleLimitSubmit} direction="Column" gap="300">
<Box direction="Column" gap="100">
<Text size="L400">Custom Limit</Text>
<Input
placeholder="Max limit- 10000"
name="limitInput"
size="300"
variant="Background"
defaultValue={limit}
min={1}
max={10000}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (parseInt(e.target.value) > 10000) {
e.target.value = e.target.value.slice(0, 4);
}
}}
step={1}
outlined
type="number"
@ -323,7 +332,7 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
<Button type="submit" size="300" variant="Primary" radii="400">
<Text size="B300">Change Limit</Text>
</Button>
</Box> */}
</Box>
</Box>
</Menu>
</FocusTrap>