Merge pull request NotionX#384 from NotionX/view-tabs

added new tabs for multiple views

Author: normdoow

packages/react-notion-x/package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "@fisch0920/medium-zoom": "^1.0.7",
     "@matejmazur/react-katex": "^3.1.3",
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
     "katex": "^0.15.3",
     "notion-types": "^6.13.4",
     "notion-utils": "^6.13.4",

packages/react-notion-x/src/styles.css

@@ -2740,43 +2740,41 @@ svg.notion-page-icon {
   will-change: transform, opacity;
 }
 
-.notion-collection-view-dropdown-content-item {
+.notion-collection-view-tabs-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 120%
+}
+
+.notion-collection-view-tabs-content-item {
   all: unset;
   position: relative;
   height: 25px;
-  padding: 7px 96px 7px 10px;
+  padding: 7px 10px 7px 10px;
   line-height: 1;
   display: flex;
   align-items: center;
-  border-radius: 3px;
   user-select: none;
   cursor: pointer;
   color: rgb(55, 53, 47);
   font-size: 14px;
 }
 
-.notion-collection-view-dropdown-content-item[data-disabled] {
-  color: #777;
-  pointer-events: none;
-  cursor: unset;
-}
-
-.notion-collection-view-dropdown-content-item:focus,
-.notion-collection-view-dropdown-content-item-active {
-  background-color: #ebfaff;
+.notion-collection-view-tabs-content-item:hover {
+  background-color: var(--fg-color-1);
+  border-radius: 3px;
 }
 
-.notion-collection-view-dropdown-content-item-active-icon {
-  position: absolute;
-  right: 0;
-  width: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.notion-collection-view-tabs-content-item-active {
+  border-bottom: solid 2px #000;
+  font-weight: bold;
 }
 
-.notion-collection-view-dropdown-content-item-active-icon > svg {
-  width: 12px;
+@media only screen and (max-width: 730px) {
+  .notion-collection-view-tabs-row {
+    width: 100%;
+  }
 }
 
 @keyframes slideDownAndFade {

packages/react-notion-x/src/third-party/collection.tsx

@@ -6,12 +6,9 @@ import {
   getTextContent
 } from 'notion-utils'
 import { useLocalStorage, useWindowSize } from 'react-use'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import { CollectionRow } from './collection-row'
 import { CollectionViewIcon } from '../icons/collection-view-icon'
-import CheckIcon from '../icons/check'
-import { ChevronDownIcon } from '../icons/chevron-down-icon'
 import { CollectionView } from './collection-view'
 import { PropertyImplMemo } from './property'
 import { PageIcon } from '../components/page-icon'
@@ -123,7 +120,7 @@ const CollectionViewBlock: React.FC<{
     recordMap.collection_query[collectionId]?.[collectionViewId]
   const parentPage = getBlockParentPage(block, recordMap)
 
-  const { style, width, padding } = React.useMemo(() => {
+  const { width, padding } = React.useMemo(() => {
     const style: React.CSSProperties = {}
 
     if (collectionView?.type !== 'table' && collectionView?.type !== 'board') {
@@ -185,86 +182,69 @@ const CollectionViewBlock: React.FC<{
   }
 
   return (
-    <div className={cs('notion-collection', className)}>
-      <div className='notion-collection-header' style={style}>
-        {title && (
-          <div className='notion-collection-header-title'>
-            <PageIcon
-              block={block}
-              className='notion-page-title-icon'
-              hideDefaultIcon
+    <>
+      <div>
+        <div>
+          {viewIds.length > 1 && showCollectionViewDropdown && (
+            <CollectionViewTabs
+              collectionViewId={collectionViewId}
+              viewIds={viewIds}
+              onChangeView={onChangeView}
             />
-
-            {title}
-          </div>
-        )}
-
-        {viewIds.length > 1 && showCollectionViewDropdown && (
-          <CollectionViewDropdownMenu
-            collectionView={collectionView}
-            collectionViewId={collectionViewId}
-            viewIds={viewIds}
-            onChangeView={onChangeView}
-          />
-        )}
+          )}
+        </div>
+        <div className='notion-collection-header'>
+          {/*TODO: only show if no full DB*/}
+          {title && (
+            <div className='notion-collection-header-title'>
+              <PageIcon
+                block={block}
+                className='notion-page-title-icon'
+                hideDefaultIcon
+              />
+              {title}
+            </div>
+          )}
+        </div>
       </div>
-
-      <CollectionView
-        collection={collection}
-        collectionView={collectionView}
-        collectionData={collectionData}
-        padding={padding}
-        width={width}
-      />
-    </div>
+      <div className={cs('notion-collection', className)}>
+        <CollectionView
+          collection={collection}
+          collectionView={collectionView}
+          collectionData={collectionData}
+          padding={padding}
+          width={width}
+        />
+      </div>
+    </>
   )
 }
 
-const CollectionViewDropdownMenu: React.FC<{
+const CollectionViewTabs: React.FC<{
   collectionViewId: string
-  collectionView: types.CollectionView
   viewIds: string[]
   onChangeView: (viewId: string) => unknown
-}> = ({ collectionViewId, collectionView, viewIds, onChangeView }) => {
+}> = ({ collectionViewId, viewIds, onChangeView }) => {
   const { recordMap } = useNotionContext()
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger className='notion-collection-view-dropdown'>
-        <CollectionViewColumnDesc collectionView={collectionView}>
-          <ChevronDownIcon className='notion-collection-view-dropdown-icon' />
-        </CollectionViewColumnDesc>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Content className='notion-collection-view-dropdown-content'>
-        <DropdownMenu.RadioGroup
-          value={collectionViewId}
-          onValueChange={onChangeView}
+    <div className='notion-collection-view-tabs-row'>
+      {viewIds.map((viewId) => (
+        <button
+          onClick={() => onChangeView(viewId)}
+          key={viewId}
+          className={cs(
+            'notion-collection-view-tabs-content-item',
+            collectionViewId === viewId &&
+              'notion-collection-view-tabs-content-item-active'
+          )}
         >
-          {viewIds.map((viewId) => (
-            <DropdownMenu.RadioItem
-              key={viewId}
-              value={viewId}
-              className={cs(
-                'notion-collection-view-dropdown-content-item',
-                collectionViewId === viewId &&
-                  'notion-collection-view-dropdown-content-item-active'
-              )}
-            >
-              {collectionViewId === viewId && (
-                <div className='notion-collection-view-dropdown-content-item-active-icon'>
-                  <CheckIcon />
-                </div>
-              )}
-
-              <CollectionViewColumnDesc
-                collectionView={recordMap.collection_view[viewId]?.value}
-              />
-            </DropdownMenu.RadioItem>
-          ))}
-        </DropdownMenu.RadioGroup>
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+          <CollectionViewColumnDesc
+            collectionView={recordMap.collection_view[viewId]?.value}
+          />
+        </button>
+      ))}
+    </div>
   )
 }