feat: ✨ add sidebar

haydenull · Mar 23, 2022 · 1325a74 · 1325a74
1 parent 7ff9e1c
commit 1325a74
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 26 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Calendar, { ISchedule } from 'tui-calendar'
 import { Button, Modal, Select, Tooltip } from 'antd'
 import { LeftOutlined, RightOutlined, SettingOutlined, ReloadOutlined, FullscreenOutlined, FullscreenExitOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
@@ -11,7 +11,7 @@ import ModifySchedule from './components/ModifySchedule'
 import type { IScheduleValue } from './components/ModifySchedule'
 import dayjs, { Dayjs } from 'dayjs'
 import { getSchedules } from './util/schedule'
-import { ISettingsForm } from './util/type'
+import { ICustomCalendar, ISettingsForm } from './util/type'
 import { updateBlock } from './util/logseq'
 import { getDefaultCalendarOptions, getInitalSettings } from './util/baseInfo'
 import 'tui-calendar/dist/tui-calendar.css'
@@ -23,8 +23,12 @@ const App: React.FC<{ env: string }> = ({ env }) => {
 
   const calendarOptions = getDefaultCalendarOptions()
 
+  const { calendarList, subscriptionList, logKey } = getInitalSettings()
+  const enabledCalendarList: ICustomCalendar[] = (logKey?.enabled ? [logKey] : []).concat((calendarList as ICustomCalendar[])?.filter(calendar => calendar.enabled))
+  const enabledSubscriptionList: ICustomCalendar[] = subscriptionList ? subscriptionList?.filter(subscription => subscription.enabled) : []
+
   const [isFullScreen, setIsFullScreen] = useState(false)
-  const [isFold, setIsFold] = useState(false)
+  const [isFold, setIsFold] = useState(true)
   const [currentView, setCurrentView] = useState(logseq.settings?.defaultView || 'month')
   const [showDate, setShowDate] = useState<string>()
   const [showExportWeekly, setShowExportWeekly] = useState<boolean>(Boolean(logseq.settings?.logKey?.enabled) && logseq.settings?.defaultView === 'week')
@@ -176,6 +180,17 @@ const App: React.FC<{ env: string }> = ({ env }) => {
       logseq.hideMainUI()
     }
   }
+  const onShowCalendarChange = (showCalendarList: string[]) => {
+    const enabledCalendarIds = enabledCalendarList.concat(enabledSubscriptionList)?.map(calendar => calendar.id)
+
+    enabledCalendarIds.forEach(calendarId => {
+      if (showCalendarList.includes(calendarId)) {
+        calendarRef.current?.toggleSchedules(calendarId, false)
+      } else {
+        calendarRef.current?.toggleSchedules(calendarId, true)
+      }
+    })
+  }
 
   useEffect(() => {
     managePluginTheme()
@@ -284,7 +299,7 @@ const App: React.FC<{ env: string }> = ({ env }) => {
       <div className={`${isFullScreen ? 'w-full h-full' : 'w-5/6'} flex flex-col justify-center overflow-hidden bg-white relative rounded text-black p-3`} style={{ maxWidth: isFullScreen ? 'none' : '1200px' }}>
         <div className="mb-2 flex items-center justify-between">
           <div className="flex items-center">
-            <Button className="mr-2" onClick={toggleFold} icon={isFold ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} />
+            <Button className="mr-2" onClick={toggleFold} icon={isFold ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} />
             <Select
               value={currentView}
               defaultValue={calendarOptions.defaultView}
@@ -320,10 +335,14 @@ const App: React.FC<{ env: string }> = ({ env }) => {
 
         {/* ========= content start ========= */}
         <div className="flex">
-          <div className={`transition-all ${isFold ? 'w-0' : 'w-40'}`}>
-            <Sidebar />
+          <div className={`transition-all overflow-hidden bg-gray-100 mr-2 ${isFold ? 'w-0 mr-0' : 'w-40'}`}>
+            <Sidebar
+              onShowCalendarChange={onShowCalendarChange}
+              calendarList={enabledCalendarList}
+              subscriptionList={enabledSubscriptionList}
+            />
           </div>
-          <div id="calendar" className="flex-1"></div>
+          <div id="calendar" className="flex-1" style={{ height: '624px' }}></div>
         </div>
         {/* ========= content end ========= */}
 

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Checkbox: React.FC<{
+  checked?: boolean
+  color?: string
+  onChange?: (checked: boolean) => void
+  [props: string]: any
+}> = ({ checked, color, onChange, children, ...props }) => {
+  return (
+    <div onClick={() => onChange?.(!checked)} {...props}>
+      <span className={`check-box mr-2 ${checked ? 'checked' : ''}`} style={{ backgroundColor: color }}></span>
+      {children}
+    </div>
+  )
+}
+
+export default Checkbox
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,27 +1,77 @@
 import React, { useState } from 'react'
-import { Collapse } from 'antd'
-import { getInitalSettings } from '../util/baseInfo'
+import { Collapse, Tooltip, Typography } from 'antd'
+import { DownOutlined } from '@ant-design/icons'
+import Checkbox from './Checkbox'
+import { ICustomCalendar } from '../util/type'
 
-const Sidebar: React.FC<{}> = () => {
-  const { calendarList, subscriptionList } = getInitalSettings()
+const Sidebar: React.FC<{
+  onShowCalendarChange?: (showCalendar: string[]) => void
+  calendarList?: ICustomCalendar[]
+  subscriptionList?: ICustomCalendar[]
+}> = ({ onShowCalendarChange, calendarList = [], subscriptionList = [] }) => {
+  const [collapseActiveKeys, setCollapseActiveKeys] = useState<string[]>(['calendar', 'subscription'])
+
+  const [checkedCalendarList, setCheckedCalendarList] = useState<string[]>(calendarList.map(calendar => calendar.id)?.concat(subscriptionList?.map(subscription => subscription.id)))
+
+  const onCheck = (checkedCalendarId: string, checked: boolean) => {
+    let newCheckedCalendarList = checkedCalendarList.filter(calendarId => calendarId !== checkedCalendarId)
+    if (checked) {
+      newCheckedCalendarList = checkedCalendarList.concat(checkedCalendarId)
+    }
+    setCheckedCalendarList(newCheckedCalendarList)
+    onShowCalendarChange?.(newCheckedCalendarList)
+  }
+  const renderCollapsePanelHeader = (title: string) => {
+    return <span className="text-gray-400 text-xs">{title}</span>
+  }
 
   return (
-    <div>
-      <Collapse>
-        <Collapse.Panel header="Calendar" key="1">
-          {
-            calendarList?.filter(calendar => calendar.enabled).map(calendar => (
-              <div key={calendar.id}>{calendar.id}</div>
-            ))
-          }
-        </Collapse.Panel>
-        <Collapse.Panel header="Subscription" key="2">
-          {
-            subscriptionList?.filter(subscription => subscription.enabled).map(subscription => (
-              <div key={subscription.id}>{subscription.id}</div>
-            ))
-          }
+    <div className="sidebar pt-2">
+      <Collapse
+        ghost
+        expandIconPosition="right"
+        activeKey={collapseActiveKeys}
+        expandIcon={({ isActive }) => <span className="opacity-50"><DownOutlined rotate={isActive ? 0 : -90} /></span>}
+        onChange={key => setCollapseActiveKeys(typeof key === 'string' ? [key] : key)}
+      >
+        <Collapse.Panel header={renderCollapsePanelHeader('Calendar')} key="calendar">
+            {
+              calendarList.map(calendar => (
+                <Checkbox
+                  className="mb-1 cursor-pointer flex items-center"
+                  key={calendar.id}
+                  color={calendar.bgColor}
+                  checked={checkedCalendarList?.includes(calendar.id)}
+                  onChange={(checked) => onCheck(calendar.id, checked)}
+                >
+                  <Tooltip title={calendar.id} placement="right">
+                    <span className="singlge-line-ellipsis flex-1">{calendar.id}</span>
+                  </Tooltip>
+                </Checkbox>
+              ))
+            }
         </Collapse.Panel>
+        {
+          subscriptionList?.length > 0 && (
+            <Collapse.Panel header={renderCollapsePanelHeader('Subscription')} key="subscription" className="mt-3">
+              {
+                subscriptionList.map(subscription => (
+                  <Checkbox
+                    className="mb-1 cursor-pointer flex items-center"
+                    key={subscription.id}
+                    color={subscription.bgColor}
+                    checked={checkedCalendarList?.includes(subscription.id)}
+                    onChange={(checked) => onCheck(subscription.id, checked)}
+                  >
+                    <Tooltip title={subscription.id} placement="right">
+                      <span className="singlge-line-ellipsis flex-1">{subscription.id}</span>
+                    </Tooltip>
+                  </Checkbox>
+                ))
+              }
+            </Collapse.Panel>
+          )
+        }
       </Collapse>
     </div>
   )

diff --git a/src/index.css b/src/index.css
@@ -8,6 +8,19 @@ html, body {
   @apply w-screen h-screen;
 }
 
+.sidebar .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 4px 10px;
+}
+.sidebar .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding: 2px 10px;
+}
+
+.singlge-line-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .dark {
   filter: invert(1) hue-rotate(180deg);
 }
@@ -19,3 +32,28 @@ html, body {
   max-height: 200px;
   overflow-y: auto;
 }
+
+.check-box {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  /* border: 2px solid #409eff; */
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.check-box.checked::before {
+  content: "";
+  box-sizing: border-box;
+  display: inline-block;
+  width: 6px;
+  height: 9px;
+  border: 2px solid #ddd;
+  border-top: 0;
+  border-left: 0;
+  position: absolute;
+  left: 5px;
+  top: 7px;
+  transform: translateY(-50%) rotate(45deg);
+}