feat: [color-picker] 添加屏幕滚动时颜色面板是否收起的配置功能 fix #997

components/color-picker/color-picker-panel.tsx

@@ -22,6 +22,7 @@ import devWarning from '../_utils/devwarning'
 import { useOnClickOutside } from '../_utils/hooks'
 import { isIE } from '../_utils/ieUtil'
 import { ICurrentColorType, removeTransparency } from './utils/removeTransparency'
+import debounce from 'lodash/debounce'
 
 const ColorPickerPanel: FC<IColorPickerPanelProps> = (props) => {
   const {
@@ -63,6 +64,7 @@ const ColorPickerPanel: FC<IColorPickerPanelProps> = (props) => {
     showColorPickerBox,
     showColorPickerPanel,
     showAlphaInput,
+    scrollHidden,
     value,
     visible,
     showPanel,
@@ -401,6 +403,23 @@ const ColorPickerPanel: FC<IColorPickerPanelProps> = (props) => {
     showPanel && onVisibleChange && onVisibleChange(false)
   })
 
+  useEffect(() => {
+    if (showPanel) {
+      const scrollAlign = debounce((e: Event) => {
+        const isPopperScroll = e.target === panelClsRef.current || panelClsRef?.current?.contains(e.target as Node)
+        if (scrollHidden && !isPopperScroll) {
+          visible === undefined && setShowPanel(!showPanel)
+          onVisibleChange && onVisibleChange(false)
+        }
+      }, 10)
+      document.addEventListener('scroll', scrollAlign, true)
+
+      return () => {
+        document.removeEventListener('scroll', scrollAlign, true)
+      }
+    }
+  }, [showPanel])
+
   useEffect(() => {
     if (!panelFormatConfig) return
     if (!Array.isArray(panelFormatConfig.show) || panelFormatConfig.show.length === 0) {

components/color-picker/color-picker.tsx

@@ -50,6 +50,7 @@ const InternalColorPicker = (props: Partial<IColorPickerProps>, ref: RefObject<I
     defaultOpen,
     disabled,
     visible,
+    scrollHidden,
     popperClassName,
     suffixIcon,
     prefixIcon,
@@ -258,6 +259,7 @@ const InternalColorPicker = (props: Partial<IColorPickerProps>, ref: RefObject<I
       panelFormatConfig={panelFormatConfig}
       presetColor={presetColor}
       historicalColor={historicalColor}
+      scrollHidden={scrollHidden}
       value={value}
       visible={visible}
       showPanel={showPanel}

components/color-picker/demo/color-picker-scroll-hidden.md

@@ -0,0 +1,22 @@
+---
+title: 滚动时面板关闭可配置
+order: 16
+---
+
+我们提供滚动时面板关闭的配置能力，可通过 scrollHidden 控制颜色面板在滚动时是否自动收起
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ColorPicker } from '@kdcloudjs/kdesign'
+
+const Demo: React.FC = () => {
+  const onChange = (inputValue: string) => {
+    console.log('color', inputValue)
+  }
+
+  return <ColorPicker onChange={onChange} scrollHidden />
+}
+
+ReactDOM.render(<Demo />, mountNode)
+```

components/color-picker/index.md

@@ -37,6 +37,7 @@ subtitle: 颜色选择器
 | showPresetColor | 是否展示预设颜色 | boolean | true | 1.7.0 |
 | showColorPickerBox | 是否展示拾色容器 | { showBox?: boolean; showHue?: boolean; showOpacity?: boolean } | { showBox: false, showHue: false, showOpacity: false } | 1.7.0 |
 | suffixIcon | color-picker 输入框右侧图标(其中 rgbColor 为 RGB 格式的字符串，可以同步颜色选择面板的透明度) | (rgbColor: string) => React.ReactNode | - | 1.7.0 |
+| scrollHidden | 滚动时浮层是否可关闭 | boolean | false | 1.8.22 |
 | prefixIcon | color-picker 输入框左侧图标(其中 rgbColor 为 RGB 格式的字符串，可以同步颜色选择面板的透明度) | (rgbColor: string) => React.ReactNode | - | 1.8.16 |
 | value | 设置输入框的值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 |
 | visible | 手动控制面板显隐 | boolean | - | 1.7.35 |

components/color-picker/interface.ts

@@ -108,6 +108,7 @@ export interface IColorPickerPanelProps {
   value: string
   visible: boolean
   showPanel: boolean
+  scrollHidden: boolean
   setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void
   setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void
   setClickedPresetColorIndex: (clickedColorIndex: number) => void

components/config-provider/compDefaultProps.tsx

@@ -67,6 +67,7 @@ const compDefaultProps = {
     functionalColorName: '#themeColor',
     switchName: { name: '', internationalName: 'followFunctionalColor' },
     placeholder: '#',
+    scrollHidden: false,
     pure: false,
     showAlphaInput: true,
     showClear: true,