Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

imprv: Display page tree in page select modal with scrollbar #9023

Merged
merged 11 commits into from
Sep 3, 2024
Merged

imprv: Display page tree in page select modal with scrollbar #9023

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6abca6a
add SimpleBar to PageSelectModal
kazutoweseek Aug 8, 2024
b88291a
StickyStretchableScroller delete
kazutoweseek Aug 9, 2024
40c528a
calcViewHeight delete
kazutoweseek Aug 9, 2024
cc50ee7
SimpleBar add
kazutoweseek Aug 9, 2024
13957f2
size change
kazutoweseek Aug 26, 2024
a5b70e7
component delete
kazutoweseek Sep 2, 2024
15d6206
memo delete
kazutoweseek Sep 2, 2024
80072af
remove unnecessary file
yuki-takei Sep 2, 2024
d292823
improve modal size
yuki-takei Sep 2, 2024
e5810a2
improve simple-bar height calculation
yuki-takei Sep 2, 2024
f1e7df6
remove unnecessary style imports
yuki-takei Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/app/src/client/components/PageSelectModal/PageSelectModal.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.grw-page-select-modal-wrapper {
height: 50vh;
}
42 changes: 31 additions & 11 deletions apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { FC } from 'react';
import {
Suspense, useState, useCallback,
memo,
} from 'react';

import nodePath from 'path';
Expand All @@ -10,6 +11,7 @@ import { useTranslation } from 'next-i18next';
import {
Modal, ModalHeader, ModalBody, ModalFooter, Button,
} from 'reactstrap';
import SimpleBar from 'simplebar-react';

import type { IPageForItem } from '~/interfaces/page';
import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
Expand All @@ -22,6 +24,20 @@ import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils';

import { TreeItemForModal } from './TreeItemForModal';

import 'simplebar-react/dist/simplebar.min.css';

const TreeForModalWrapper = memo((props: { children: JSX.Element }) => {
miya marked this conversation as resolved.
Show resolved Hide resolved

const { children } = props;
return (
<div className="grw-page-select-modal-wrapper">
<SimpleBar style={{ maxHeight: 350 }}>
{ children }
</SimpleBar>
</div>
);
});

export const PageSelectModal: FC = () => {
const {
data: PageSelectModalData,
Expand Down Expand Up @@ -82,20 +98,24 @@ export const PageSelectModal: FC = () => {
isOpen={isOpened}
toggle={closeModal}
centered
size="sm"
size="lg"
>
<ModalHeader toggle={closeModal}>{t('page_select_modal.select_page_location')}</ModalHeader>
<ModalBody>
<ModalBody className="p-0">
<Suspense fallback={<ItemsTreeContentSkeleton />}>
<ItemsTree
CustomTreeItem={TreeItemForModal}
isEnableActions={!isGuestUser}
isReadOnlyUser={!!isReadOnlyUser}
targetPath={targetPath}
targetPathOrId={targetPathOrId}
targetAndAncestorsData={targetAndAncestorsData}
onClickTreeItem={onClickTreeItem}
/>
<TreeForModalWrapper>
<div className="p-3">
<ItemsTree
CustomTreeItem={TreeItemForModal}
isEnableActions={!isGuestUser}
isReadOnlyUser={!!isReadOnlyUser}
targetPath={targetPath}
targetPathOrId={targetPathOrId}
targetAndAncestorsData={targetAndAncestorsData}
onClickTreeItem={onClickTreeItem}
/>
</div>
</TreeForModalWrapper>
</Suspense>
</ModalBody>
<ModalFooter>
Expand Down
Loading