feat(popover): 增加 light 和 dark 模式的区分 (jdf2e#1977)

Alex-huxiyang · Mar 7, 2024 · 6238a9e · 6238a9e
1 parent 0cffd3d
commit 6238a9e
Show file tree

Hide file tree

Showing 10 changed files with 107 additions and 58 deletions.
diff --git a/src/packages/popover/demo.taro.tsx b/src/packages/popover/demo.taro.tsx
@@ -41,6 +41,7 @@ const PopoverDemo = () => {
       title2: '自定义内容',
       title3: '位置自定义',
       title4: '自定义目标元素',
+      light: '明亮风格',
       dark: '暗黑风格',
       showIcon: '展示图标',
       disableAction: '禁用选项',
@@ -54,6 +55,7 @@ const PopoverDemo = () => {
       title2: 'Custom Content',
       title3: 'Custom Location',
       title4: 'Custom Target Element',
+      light: 'Light',
       dark: 'Dark',
       showIcon: 'Show Icon',
       disableAction: 'Disabled',
@@ -67,6 +69,7 @@ const PopoverDemo = () => {
       title2: '自定義內容',
       title3: '位置自定義',
       title4: '自定義目標元素',
+      light: '明朗風格',
       dark: '暗黑風格',
       showIcon: '展示圖標',
       disableAction: '禁用選項',
@@ -207,6 +210,7 @@ const PopoverDemo = () => {
     { text: 'left-end', value: 'left-end' },
   ]
   const [basic, setBasic] = useState(false)
+  const [dark, setDark] = useState(false)
   const [showIcon, setShowIcon] = useState(false)
   const [disableAction, setDisableAction] = useState(false)
   const [customized, setCustomized] = useState(false)
@@ -253,7 +257,22 @@ const PopoverDemo = () => {
           }}
         >
           <Button type="primary" shape="square">
-            {translated.title}
+            {translated.light}
+          </Button>
+        </Popover>
+
+        <Popover
+          visible={dark}
+          list={itemList}
+          theme="dark"
+          location="bottom-start"
+          style={{ marginInlineEnd: '30px' }}
+          onClick={() => {
+            dark ? setDark(false) : setDark(true)
+          }}
+        >
+          <Button type="primary" shape="square">
+            {translated.dark}
           </Button>
         </Popover>
 

diff --git a/src/packages/popover/demo.tsx b/src/packages/popover/demo.tsx
@@ -42,6 +42,7 @@ const PopoverDemo = () => {
       title2: '自定义内容',
       title3: '位置自定义',
       title4: '自定义目标元素',
+      light: '明亮风格',
       dark: '暗黑风格',
       showIcon: '展示图标',
       disableAction: '禁用选项',
@@ -57,6 +58,7 @@ const PopoverDemo = () => {
       title2: 'Custom Content',
       title3: 'Custom Location',
       title4: 'Custom Target Element',
+      light: 'Light',
       dark: 'Dark',
       showIcon: 'Show Icon',
       disableAction: 'Disabled',
@@ -72,6 +74,7 @@ const PopoverDemo = () => {
       title2: '自定義內容',
       title3: '位置自定義',
       title4: '自定義目標元素',
+      light: '明朗風格',
       dark: '暗黑風格',
       showIcon: '展示圖標',
       disableAction: '禁用選項',
@@ -214,6 +217,7 @@ const PopoverDemo = () => {
     { text: 'left-end', value: 'left-end' },
   ]
   const [basic, setBasic] = useState(false)
+  const [dark, setDark] = useState(false)
   const [showIcon, setShowIcon] = useState(false)
   const [disableAction, setDisableAction] = useState(false)
   const [customized, setCustomized] = useState(false)
@@ -268,7 +272,22 @@ const PopoverDemo = () => {
           }}
         >
           <Button type="primary" shape="square">
-            {translated.title}
+            {translated.light}
+          </Button>
+        </Popover>
+
+        <Popover
+          visible={dark}
+          list={itemList}
+          theme="dark"
+          location="bottom-start"
+          style={{ marginInlineEnd: '30px' }}
+          onClick={() => {
+            dark ? setDark(false) : setDark(true)
+          }}
+        >
+          <Button type="primary" shape="square">
+            {translated.dark}
           </Button>
         </Popover>
 

diff --git a/src/packages/popover/index.taro.ts b/src/packages/popover/index.taro.ts
@@ -1,4 +1,6 @@
 import { Popover } from './popover.taro'
 
-export type { PopoverLocation, PopoverProps, List } from './popover.taro'
+export type { PopoverProps } from './popover.taro'
+export type { PopoverLocation, List } from './types'
+
 export default Popover
diff --git a/src/packages/popover/index.ts b/src/packages/popover/index.ts
@@ -1,4 +1,5 @@
 import { Popover } from './popover'
 
-export type { PopoverLocation, PopoverProps, List } from './popover'
+export type { PopoverProps } from './popover'
+export type { PopoverLocation, List } from './types'
 export default Popover
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
@@ -219,6 +219,27 @@
   }
 }
 
+.nut-popover-dark {
+  background: $popover-text-color;
+  color: $popover-content-background-color;
+
+  .nut-popover-arrow {
+    border-bottom-color: $popover-text-color;
+  }
+
+  .nut-popover-content {
+    background: $popover-text-color !important;
+    color: $popover-content-background-color !important;
+    .nut-popover-menu-item {
+      border-bottom-color: $popover-content-background-color;
+      &:hover {
+        color: $popover-content-background-color;
+        background-color: $popover-text-color;
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   &-arrow {

diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx
@@ -12,32 +12,11 @@ import { PopupProps } from '@/packages/popup/popup.taro'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { getRect } from '@/utils/use-client-rect'
-
-export type PopoverLocation =
-  | 'bottom'
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left-end'
-  | 'right-start'
-  | 'right-end'
-
-export interface List {
-  key?: string
-  name: string
-  icon?: React.ReactNode
-  disabled?: boolean
-  className?: string
-  action?: { icon?: React.ReactNode; onClick?: (e: any) => void }
-}
+import { PopoverTheme, PopoverLocation, List } from './types'
 
 export interface PopoverProps extends PopupProps {
   list: List[]
+  theme: PopoverTheme | string
   location: PopoverLocation | string
   visible: boolean
   offset: string[] | number[]
@@ -62,16 +41,17 @@ export interface RootPosition {
 const defaultProps = {
   ...ComponentDefaults,
   list: [],
+  theme: 'light',
   location: 'bottom',
   visible: false,
   offset: [0, 12],
   arrowOffset: 0,
   targetId: '',
   className: '',
   showArrow: true,
-  overlay: false,
   closeOnOutsideClick: true,
   closeOnActionClick: true,
+  overlay: false,
   onClick: () => {},
   onOpen: () => {},
   onClose: () => {},
@@ -84,16 +64,17 @@ export const Popover: FunctionComponent<
   const {
     children,
     list,
+    theme,
     location,
     visible,
     offset,
+    arrowOffset,
     targetId,
     overlay,
     closeOnOutsideClick,
     closeOnActionClick,
     className,
     showArrow,
-    arrowOffset,
     style,
     onClick,
     onOpen,
@@ -180,6 +161,7 @@ export const Popover: FunctionComponent<
   const classes = classNames(
     {
       [`${classPrefix}`]: true,
+      [`${classPrefix}-${theme}`]: theme === 'dark',
     },
     className
   )
@@ -209,7 +191,6 @@ export const Popover: FunctionComponent<
       cross += +offset[1]
       parallel += +offset[0]
     }
-
     if (width) {
       if (['bottom', 'top'].includes(direction)) {
         const h =
@@ -302,11 +283,11 @@ export const Popover: FunctionComponent<
           className="nut-popover-wrapper"
           ref={popoverRef}
           onClick={() => {
-            props.onClick && props.onClick()
+            props?.onClick?.()
             if (!visible) {
-              onOpen && onOpen()
+              onOpen?.()
             } else {
-              onClose && onClose()
+              onClose?.()
             }
           }}
           style={style}

diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx
@@ -16,32 +16,11 @@ import { ComponentDefaults } from '@/utils/typings'
 import useClickAway from '@/utils/use-click-away'
 import { canUseDom } from '@/utils/can-use-dom'
 import { getAllScrollableParents } from '@/utils/get-scroll-parent'
-
-export type PopoverLocation =
-  | 'bottom'
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'top-start'
-  | 'top-end'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left-start'
-  | 'left-end'
-  | 'right-start'
-  | 'right-end'
-
-export interface List {
-  key?: string
-  name: string
-  icon?: React.ReactNode
-  disabled?: boolean
-  className?: string
-  action?: { icon?: React.ReactNode; onClick?: (e: any) => void }
-}
+import { PopoverTheme, PopoverLocation, List } from './types'
 
 export interface PopoverProps extends PopupProps {
   list: List[]
+  theme: PopoverTheme | string
   location: PopoverLocation | string
   visible: boolean
   offset: string[] | number[]
@@ -60,6 +39,7 @@ export interface PopoverProps extends PopupProps {
 const defaultProps = {
   ...ComponentDefaults,
   list: [],
+  theme: 'light',
   location: 'bottom',
   visible: false,
   offset: [0, 12],
@@ -81,6 +61,7 @@ export const Popover: FunctionComponent<
   const {
     children,
     list,
+    theme,
     location,
     visible,
     offset,
@@ -181,6 +162,7 @@ export const Popover: FunctionComponent<
   const classes = classNames(
     {
       [`${classPrefix}`]: true,
+      [`${classPrefix}-${theme}`]: theme === 'dark',
     },
     className
   )

diff --git a/src/packages/popover/types.ts b/src/packages/popover/types.ts
@@ -0,0 +1,23 @@
+export type PopoverTheme = 'light' | 'dark'
+export type PopoverLocation =
+  | 'bottom'
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end'
+
+export interface List {
+  key?: string
+  name: string
+  icon?: React.ReactNode
+  disabled?: boolean
+  className?: string
+  action?: { icon?: React.ReactNode; onClick?: (e: any) => void }
+}
diff --git a/src/packages/tour/tour.taro.tsx b/src/packages/tour/tour.taro.tsx
@@ -2,7 +2,8 @@ import React, { useState, useEffect, ReactNode, FunctionComponent } from 'react'
 import type { MouseEvent } from 'react'
 import { Close } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
-import Popover, { PopoverLocation } from '@/packages/popover/index.taro'
+import Popover from '@/packages/popover/index.taro'
+import { PopoverLocation } from '@/packages/popover/types'
 import { getTaroRectById } from '@/utils/use-taro-rect'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useConfig } from '@/packages/configprovider'

diff --git a/src/packages/tour/tour.tsx b/src/packages/tour/tour.tsx
@@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'
 import { Close } from '@nutui/icons-react'
 import classNames from 'classnames'
 import Popover from '@/packages/popover'
-import { PopoverLocation } from '@/packages/popover/popover'
+import { PopoverLocation } from '@/packages/popover/types'
 import { getRect } from '@/utils/use-client-rect'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useConfig } from '@/packages/configprovider'