Merge pull request #7985 from weseek/support/128463-128494-replace-custom-input

support: reactstrap breaking changes

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -130,18 +130,20 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
 
   }, [afterResolvedHandler, close, currentPagePath, currentPathname, optionsToSave, pageId, remoteRevisionId, saveOrUpdate, setRemoteLatestPageData]);
 
-  const resizeAndCloseButtons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isModalExpanded}
-        expandWindow={() => setIsModalExpanded(true)}
-        contractWindow={() => setIsModalExpanded(false)}
-      />
-      <button type="button" className="close text-white" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [isModalExpanded, close]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const resizeAndCloseButtons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isModalExpanded}
+  //       expandWindow={() => setIsModalExpanded(true)}
+  //       contractWindow={() => setIsModalExpanded(false)}
+  //     />
+  //     <button type="button" className="close text-white" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [isModalExpanded, close]);
 
   const isOpen = props.isOpen ?? false;
 
@@ -153,7 +155,8 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
       className={`${isModalExpanded ? ' grw-modal-expanded' : ''}`}
       size="xl"
     >
-      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}>
+      {/* <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3" close={resizeAndCloseButtons}> */}
+      <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light align-items-center py-3">
         <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody className="mx-4 my-1">

apps/app/src/components/Admin/Users/UserMenu.tsx

@@ -99,7 +99,7 @@ const UserMenu = (props: UserMenuProps) => {
         {(user.status === USER_STATUS.INVITED && !isInvitationEmailSended)
         && <i className={`fa fa-circle text-danger grw-usermenu-notification-icon ${styles['grw-usermenu-notification-icon']}`} />}
       </DropdownToggle>
-      <DropdownMenu positionFixed>
+      <DropdownMenu strategy='fixed'>
         {renderEditMenu()}
         {user.status !== USER_STATUS.DELETED && renderStatusMenu()}
         {user.status === USER_STATUS.ACTIVE && renderAdminMenu()}

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -191,9 +191,9 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     >
       {children}
       <DropdownMenu
-        right
+        end
         persist
-        positionFixed
+        strategy='fixed'
         className='grw-bookmark-folder-menu'
       >
         { renderBookmarkMenuItem() }

apps/app/src/components/DescendantsPageListModal.tsx

@@ -70,18 +70,20 @@ export const DescendantsPageListModal = (): JSX.Element => {
     };
   }, [isSharedUser, status, t]);
 
-  const buttons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        expandWindow={() => setIsWindowExpanded(true)}
-        contractWindow={() => setIsWindowExpanded(false)}
-      />
-      <button type="button" className="close" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [close, isWindowExpanded]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const buttons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       expandWindow={() => setIsWindowExpanded(true)}
+  //       contractWindow={() => setIsWindowExpanded(false)}
+  //     />
+  //     <button type="button" className="close" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [close, isWindowExpanded]);
 
 
   if (status == null) {
@@ -98,7 +100,8 @@ export const DescendantsPageListModal = (): JSX.Element => {
       data-testid="descendants-page-list-modal"
       className={`grw-descendants-page-list-modal ${styles['grw-descendants-page-list-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      <ModalHeader className="p-0" toggle={close} close={buttons}>
+      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
+      <ModalHeader className="p-0" toggle={close}>
         <CustomNavTab
           activeTab={activeTab}
           navTabMapping={navTabMapping}

apps/app/src/components/Page/CopyDropdown.jsx

@@ -119,7 +119,7 @@ const CopyDropdown = (props) => {
         </DropdownToggle>
 
         <DropdownMenu
-          positionFixed
+          strategy='fixed'
           style={{ zIndex: 1016 }} /* zIndex: 1016 // larger than z-index value of grw-subnav-fixed-container in GrowiSubNavigationSwitcher.module.scss */
         >
           <div className="d-flex align-items-center justify-content-between">

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.tsx

@@ -71,18 +71,20 @@ export const PageAccessoriesModal = (): JSX.Element => {
     };
   }, [t, close, isGuestUser, isReadOnlyUser, isSharedUser, isLinkSharingDisabled]);
 
-  const buttons = useMemo(() => (
-    <div className="d-flex flex-nowrap">
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        expandWindow={() => setIsWindowExpanded(true)}
-        contractWindow={() => setIsWindowExpanded(false)}
-      />
-      <button type="button" className="close" onClick={close} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-  ), [close, isWindowExpanded]);
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const buttons = useMemo(() => (
+  //   <div className="d-flex flex-nowrap">
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       expandWindow={() => setIsWindowExpanded(true)}
+  //       contractWindow={() => setIsWindowExpanded(false)}
+  //     />
+  //     <button type="button" className="close" onClick={close} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //   </div>
+  // ), [close, isWindowExpanded]);
 
   if (status == null || status.activatedContents == null) {
     return <></>;
@@ -98,7 +100,8 @@ export const PageAccessoriesModal = (): JSX.Element => {
       data-testid="page-accessories-modal"
       className={`grw-page-accessories-modal ${styles['grw-page-accessories-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
-      <ModalHeader className="p-0" toggle={close} close={buttons}>
+      {/* <ModalHeader className="p-0" toggle={close} close={buttons}> */}
+      <ModalHeader className="p-0" toggle={close}>
         <CustomNavTab
           activeTab={status.activatedContents}
           navTabMapping={navTabMapping}

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -428,19 +428,21 @@ export const HandsontableModal = (): JSX.Element => {
     contextMenu: createCustomizedContextMenu(),
   });
 
-  const closeButton = (
-    <span>
-      {/* change order because of `float: right` by '.close' class */}
-      <button type="button" className="close" onClick={cancel} aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      <ExpandOrContractButton
-        isWindowExpanded={isWindowExpanded}
-        contractWindow={contractWindow}
-        expandWindow={expandWindow}
-      />
-    </span>
-  );
+  // TODO: No longer support custom close icon in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128470
+  // const closeButton = (
+  //   <span>
+  //     {/* change order because of `float: right` by '.close' class */}
+  //     <button type="button" className="close" onClick={cancel} aria-label="Close">
+  //       <span aria-hidden="true">&times;</span>
+  //     </button>
+  //     <ExpandOrContractButton
+  //       isWindowExpanded={isWindowExpanded}
+  //       contractWindow={contractWindow}
+  //       expandWindow={expandWindow}
+  //     />
+  //   </span>
+  // );
 
   return (
     <Modal
@@ -453,7 +455,8 @@ export const HandsontableModal = (): JSX.Element => {
       className={`handsontable-modal ${isWindowExpanded && 'grw-modal-expanded'}`}
       onOpened={handleModalOpen}
     >
-      <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light">
+      {/* <ModalHeader tag="h4" toggle={cancel} close={closeButton} className="bg-primary text-light"> */}
+      <ModalHeader tag="h4" toggle={cancel} className="bg-primary text-light">
         {t('handsontable_modal.title')}
       </ModalHeader>
       <ModalBody className="p-0 d-flex flex-column">

apps/app/src/components/PageList/PageListItemL.tsx

@@ -3,7 +3,6 @@ import React, {
   ForwardRefRenderFunction, memo, useCallback, useImperativeHandle, useRef, useEffect,
 } from 'react';
 
-
 import type {
   IPageInfoAll, IPageWithMeta, IPageInfoForListing,
 } from '@growi/core';
@@ -16,7 +15,7 @@ import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import Clamp from 'react-multiline-clamp';
-// import { CustomInput } from 'reactstrap';
+import { Input } from 'reactstrap';
 
 import { ISelectable } from '~/client/interfaces/selectable-all';
 import { unlink, bookmark, unbookmark } from '~/client/services/page-operation';
@@ -198,14 +197,13 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
           {/* checkbox */}
           {onCheckboxChanged != null && (
             <div className="d-flex align-items-center justify-content-center">
-              {/* // TODO: replace CustomInput https://redmine.weseek.co.jp/issues/128494 */}
-              {/* <CustomInput
-                type="checkbox"
+              <Input
+                type='checkbox'
                 id={`cbSelect-${pageData._id}`}
                 data-testid="cb-select"
                 innerRef={inputRef}
                 onChange={(e) => { onCheckboxChanged(e.target.checked, pageData._id) }}
-              /> */}
+              />
             </div>
           )}
 

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -77,7 +77,7 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
           >
             <i className="ti ti-clipboard"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed end >
+          <DropdownMenu strategy='fixed' end >
             {/* Page path URL */}
             <CopyToClipboard text={generateURL(currentPagePath)}>
               <DropdownItem className="px-3">

apps/app/src/components/SearchPage/OperateAllControl.tsx

@@ -2,14 +2,14 @@ import React, {
   ChangeEvent, forwardRef, ForwardRefRenderFunction, useImperativeHandle, useRef,
 } from 'react';
 
-// import { CustomInput } from 'reactstrap';
+import { Input } from 'reactstrap';
+
 import { ISelectableAndIndeterminatable } from '~/client/interfaces/selectable-all';
 import { IndeterminateInputElement } from '~/interfaces/indeterminate-input-elm';
 
 type Props = {
   isCheckboxDisabled?: boolean,
   onCheckboxChanged?: (isChecked: boolean) => void,
-
   children?: React.ReactNode,
 }
 
@@ -17,7 +17,6 @@ const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeter
   const {
     isCheckboxDisabled,
     onCheckboxChanged,
-
     children,
   } = props;
 
@@ -54,21 +53,18 @@ const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeter
   };
 
   return (
-
     <div className="d-flex align-items-center">
-      {/* // TODO: replace CustomInput https://redmine.weseek.co.jp/issues/128494 */}
-      {/* <CustomInput
+      <Input
         type="checkbox"
         id="cb-check-all"
         data-testid="cb-select-all"
         innerRef={selectAllCheckboxElm}
         disabled={isCheckboxDisabled}
         onChange={checkboxChangedHandler}
-      /> */}
+      />
       {children}
     </div>
   );
-
 };
 
 export const OperateAllControl = React.memo(forwardRef(OperateAllControlSubstance));

apps/app/src/components/Sidebar/RecentChanges/RecentChangesContentSkeleton.tsx

@@ -4,35 +4,34 @@ import { Skeleton } from '~/components/Skeleton';
 
 import styles from './RecentChangesSubstance.module.scss';
 
-// TODO: enable skeltonItem https://redmine.weseek.co.jp/issues/128495
-// const SkeletonItem = () => {
-
-//   const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
-
-//   return (
-//     <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
-//       <div className="d-flex w-100">
-//         <Skeleton additionalClass='rounded-circle picture' roundedPill />
-//         <div className="flex-grow-1 ml-2">
-//           <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
-//           <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
-//           <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
-//             <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
-//           </div>
-//         </div>
-//       </div>
-//     </li>
-//   );
-// };
+const SkeletonItem = () => {
+
+  const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
+
+  return (
+    <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
+      <div className="d-flex w-100">
+        <Skeleton additionalClass='rounded-circle picture' roundedPill />
+        <div className="flex-grow-1 ml-2">
+          <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
+          <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
+          <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
+            <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
+          </div>
+        </div>
+      </div>
+    </li>
+  );
+};
 
 const RecentChangesContentSkeleton = (): JSX.Element => {
 
   return (
     <div className="grw-recent-changes py-3">
       <ul className="list-group list-group-flush">
-        {/* <SkeletonItem />
         <SkeletonItem />
-        <SkeletonItem /> */}
+        <SkeletonItem />
+        <SkeletonItem />
         <li className={'list-group-item p-0'}></li>
       </ul>
     </div>);