@wzyjs/uis 0.3.28 → 0.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "description": "description",
   "author": "wzy",
   "sideEffects": false,
@@ -39,7 +39,6 @@
   },
   "peerDependencies": {
     "@wzyjs/hooks": "^0.2.37",
-    "@wzyjs/types": "^0.2.37",
     "@wzyjs/utils": "^0.2.37",
     "antd": "^6.0.0"
   },
@@ -47,7 +46,7 @@
     "@types/js-beautify": "^1.14.3",
     "@types/react-grid-layout": "1.3.5"
   },
-  "gitHead": "cfb708a071a9f7f0e2c819760c95427d7196623b",
+  "gitHead": "a78702bb9367a10779eaa376ed70834d8b42b5a8",
   "publishConfig": {
     "access": "public"
   }

package/src/antd/pro/FoldCard/index.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import React, { useState, useRef, useEffect, forwardRef, CSSProperties } from 'react'
+import { Card, Button, CardProps } from 'antd'
+import { DownOutlined, UpOutlined } from '@ant-design/icons'
+
+export interface FoldCardProps extends CardProps {
+  max?: number; // 默认折叠高度，可根据需要调整
+  buttonStyle?: CSSProperties;
+  defaultCollapsed?: boolean;
+  showButtonOnHover?: boolean;
+}
+
+export const FoldCard = forwardRef((props: FoldCardProps, ref: any) => {
+  const {
+    max,
+    buttonStyle,
+    defaultCollapsed = true,
+    showButtonOnHover = true,
+    children,
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  } = props
+
+  const maxHeight = max ?? 300
+
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+  const [hovered, setHovered] = useState(false)
+  const [isOverflow, setIsOverflow] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const measureOverflow = () => {
+    const contentEl = contentRef.current
+    if (!contentEl) {
+      return
+    }
+
+    setIsOverflow(contentEl.scrollHeight > maxHeight)
+  }
+
+  const toggleCollapse = (ev: React.MouseEvent<HTMLElement>) => {
+    ev.stopPropagation()
+    setCollapsed(value => !value)
+  }
+
+  useEffect(() => {
+    measureOverflow()
+
+    const contentEl = contentRef.current
+    if (!contentEl || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    const observer = new ResizeObserver(measureOverflow)
+    observer.observe(contentEl)
+    return () => observer.disconnect()
+  }, [children, maxHeight])
+
+  const contentStyle: CSSProperties = {
+    maxHeight: collapsed ? maxHeight : undefined,
+    transition: 'max-height 0.3s ease',
+    overflow: collapsed ? 'hidden' : 'visible',
+  }
+
+  const hoverButtonContainerStyle: CSSProperties = {
+    position: 'absolute',
+    bottom: hovered ? 10 : -40,
+    left: '50%',
+    transform: 'translateX(-50%)',
+    transition: 'bottom 0.3s ease, opacity 0.3s ease',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    pointerEvents: 'none',
+    opacity: hovered && isOverflow ? 1 : 0,
+  }
+
+  const inlineButtonContainerStyle: CSSProperties = {
+    textAlign: 'center',
+    marginTop: 8,
+  }
+
+  const finalButtonStyle: CSSProperties = {
+    pointerEvents: 'auto',
+    border: 'none',
+    boxShadow: showButtonOnHover ? '0 2px 8px rgba(0, 0, 0, 0.15)' : undefined,
+    ...buttonStyle,
+  }
+
+  const button = (
+    <Button
+      size='small'
+      icon={collapsed ? <DownOutlined /> : <UpOutlined />}
+      onClick={toggleCollapse}
+      style={finalButtonStyle}
+    />
+  )
+
+  return (
+    <Card
+      ref={ref}
+      style={{ position: 'relative', overflow: 'hidden', ...style }}
+      onMouseEnter={(ev) => {
+        setHovered(true)
+        onMouseEnter?.(ev)
+      }}
+      onMouseLeave={(ev) => {
+        setHovered(false)
+        onMouseLeave?.(ev)
+      }}
+      {...rest}
+    >
+      <div style={contentStyle} ref={contentRef}>
+        {children}
+      </div>
+      {isOverflow && (
+        showButtonOnHover ? (
+          <div style={hoverButtonContainerStyle}>
+            {button}
+          </div>
+        ) : (
+          <div style={inlineButtonContainerStyle}>
+            {button}
+          </div>
+        )
+      )}
+    </Card>
+  )
+})

package/src/antd/pro/{Input/components/Range.tsx → RangeInput/index.tsx}

@@ -4,7 +4,7 @@ import React from 'react'
 import { InputNumber, InputNumberProps, Space } from 'antd'
 import { _ } from '@wzyjs/utils/web'
 
-export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+export interface RangeInputProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
   value?: number[];
   min?: number;
   max?: number;
@@ -12,7 +12,7 @@ export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'>
 }
 
 // 最小值 最大值 的输入框
-export const Range = (props: RangeProps) => {
+export const RangeInput = (props: RangeInputProps) => {
   const { value = [], min, max, onChange } = props
 
   const onNumberChange = (index: 0 | 1, v: number | null) => {

package/src/antd/pro/buttons/ButtonGroup.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React from 'react'
+import { Space } from 'antd'
+import { ConfirmButton, ConfirmButtonProps } from './ConfirmButton'
+
+export interface ButtonGroupProps {
+  list?: (ConfirmButtonProps & { visible?: boolean, title?: string })[]
+}
+
+// 1. 按钮组
+export const ButtonGroup = (props: ButtonGroupProps) => {
+  const { list = [] } = props
+
+  if (!list?.length) {
+    return null
+  }
+
+  return (
+    <Space.Compact>
+      {list.filter(item => item.visible).map((item, index) => (
+        <ConfirmButton key={index} {...item}>{item.title}</ConfirmButton>
+      ))}
+    </Space.Compact>
+  )
+}

package/src/antd/pro/{Button/components/Confirm.tsx → buttons/ConfirmButton.tsx}

@@ -4,12 +4,12 @@ import React from 'react'
 import { _ } from '@wzyjs/utils/web'
 import { Button, Popconfirm, PopconfirmProps, ButtonProps } from 'antd'
 
-export interface ConfirmProps extends PopconfirmProps {
+export interface ConfirmButtonProps extends PopconfirmProps {
   btnProps?: ButtonProps
 }
 
 // 1. 给按钮增加了确认功能
-export const Confirm = (props: ConfirmProps) => {
+export const ConfirmButton = (props: ConfirmButtonProps) => {
   const { children, btnProps } = props
 
   return (

package/src/antd/pro/{Button/components/Copy.tsx → buttons/CopyButton.tsx}

@@ -8,12 +8,12 @@ import { CheckOutlined } from '@ant-design/icons'
 import { copy, readClipboard } from '@wzyjs/utils/web'
 import { useControllableValue } from '@wzyjs/hooks/web'
 
-export interface CopyProps extends ButtonProps {
+export interface CopyButtonProps extends ButtonProps {
   value?: string,
   canPaste?: boolean,
 }
 
-export const Copy = (props: CopyProps) => {
+export const CopyButton = (props: CopyButtonProps) => {
   const [icon, setIcon] = useState<ReactNode>(null)
   const { message } = App.useApp()
 

package/src/antd/pro/{Button/components/Drawer.tsx → buttons/DrawerButton.tsx}

@@ -4,12 +4,12 @@ import React, { useState } from 'react'
 import { _ } from '@wzyjs/utils/web'
 import { Button, Drawer as AntdDrawer, DrawerProps as AntdDrawerProps, ButtonProps } from 'antd'
 
-export interface DrawerProps extends AntdDrawerProps {
+export interface DrawerButtonProps extends AntdDrawerProps {
   btnProps?: ButtonProps
   defaultOpen?: boolean
 }
 
-export const Drawer = (props: DrawerProps) => {
+export const DrawerButton = (props: DrawerButtonProps) => {
   const { children, defaultOpen, btnProps } = props
   const [open, setOpen] = useState<boolean>(defaultOpen ?? false)
 

package/src/antd/pro/buttons/index.tsx

@@ -0,0 +1,4 @@
+export * from './ButtonGroup'
+export * from './ConfirmButton'
+export * from './CopyButton'
+export * from './DrawerButton'

package/src/antd/pro/index.ts

@@ -1,11 +1,5 @@
-export * from './Alert'
-export * from './Button'
-export * from './Card'
-export * from './Collapse'
-export * from './Image'
-export * from './Input'
-export * from './Radio'
-export * from './Space'
+export * from './buttons'
+export * from './FoldCard'
+export * from './RangeInput'
 export * from './Tabs'
 export * from './Typography'
-export * from './Popconfirm'

package/src/components/DynamicSelect/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { AutoComplete, Button, Space } from 'antd'
 
+import type { Option } from './types'
+
 interface DynamicSelectProps {
   value?: string[]
   onChange?: (value: string[]) => void

package/src/components/DynamicSelect/types.ts

@@ -0,0 +1,8 @@
+export type OptionValue = string | number | boolean
+
+export interface Option<V extends OptionValue = OptionValue> {
+  label: string
+  value: V
+  children?: Option<V>[]
+  extra?: Record<string, any>
+}

package/src/components/DynamicSelect/utils.ts

@@ -1,3 +1,5 @@
+import type { Option } from './types'
+
 export const transformOptions = (data: string[][]): Option[] => {
   const result: Option[] = []
 

package/src/components/index.ts

@@ -6,7 +6,6 @@ export * from './Com2Canvas'
 export * from './Video'
 export * from './MultiImageDisplay'
 export * from './DownloadLink'
-export * from './Fold'
 export * from './DragSort'
 export * from './DateSwitcher'
 export * from './GroupLayout'

package/src/antd/pro/Alert/index.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import React, { ReactNode } from 'react'
-import { Alert, AlertProps, Space } from 'antd'
-
-export interface AlertProProps extends AlertProps {
-  children?: ReactNode,
-}
-
-// 1. 支持 children 作为 description 显示
-export const AlertPro = (props: AlertProProps) => {
-  const { children, description = children } = props
-
-  return (
-    <Alert
-      {...props}
-      description={(
-        <Space style={{ width: '100%' }} orientation='vertical'>
-          {description}
-        </Space>
-      )}
-    />
-  )
-}

package/src/antd/pro/Button/components/Group.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Button } from 'antd'
-import { Confirm, ConfirmProps } from './Confirm'
-
-export interface GroupProps {
-  list?: (ConfirmProps & { visible?: boolean, title?: string })[]
-}
-
-// 1. 按钮组
-export const Group = (props: GroupProps) => {
-  const { list = [] } = props
-
-  if (!list?.length) {
-    return null
-  }
-
-  return (
-    <Button.Group>
-      {list.filter(item => item.visible).map((item, index) => (
-        <Confirm key={index} {...item}>{item.title}</Confirm>
-      ))}
-    </Button.Group>
-  )
-}

package/src/antd/pro/Button/index.tsx

@@ -1,11 +0,0 @@
-import { Group } from './components/Group'
-import { Confirm } from './components/Confirm'
-import { Copy } from './components/Copy'
-import { Drawer } from './components/Drawer'
-
-export const ButtonPro = {
-  Group,
-  Confirm,
-  Copy,
-  Drawer,
-}

package/src/antd/pro/Card/index.tsx

@@ -1,92 +0,0 @@
-'use client'
-
-import React, { useState, useRef, useEffect, forwardRef } from 'react'
-import { Card, Button, CardProps } from 'antd'
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-interface CardProProps extends CardProps {
-  collapsedHeight?: number; // 默认折叠高度，可根据需要调整
-}
-
-export const CardPro = forwardRef((props: CardProProps, ref: any) => {
-  const { collapsedHeight = 300, children, ...rest } = props
-
-  const [collapsed, setCollapsed] = useState(true)
-  const [hovered, setHovered] = useState(false)
-  const [isOverflow, setIsOverflow] = useState(false)
-  const contentRef = useRef<HTMLSpanElement>(null)
-
-  const toggleCollapse = (ev: any) => {
-    ev.stopPropagation()
-    setCollapsed(!collapsed)
-  }
-
-  useEffect(() => {
-    const contentEl = contentRef.current
-    if (contentEl) {
-      // 获取内容的实际高度
-      const actualHeight = contentEl.scrollHeight
-      if (actualHeight > collapsedHeight) {
-        setIsOverflow(true)
-      } else {
-        setIsOverflow(false)
-      }
-    }
-  }, [children, collapsedHeight])
-
-  const cardStyle: React.CSSProperties = {
-    position: 'relative',
-    overflow: 'hidden',
-  }
-
-  const contentStyle: React.CSSProperties = {
-    maxHeight: collapsed ? `${collapsedHeight}px` : 'none',
-    overflowY: collapsed ? 'auto' : 'visible',
-    transition: 'max-height 0.3s ease',
-    display: 'block',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  }
-
-  const buttonContainerStyle: React.CSSProperties = {
-    position: 'absolute',
-    bottom: hovered ? '10px' : '-40px', // 增加隐藏时的负值，确保按钮完全隐藏
-    left: '50%',
-    transform: 'translateX(-50%)',
-    transition: 'bottom 0.3s ease, opacity 0.3s ease',
-    display: 'flex',
-    justifyContent: 'center',
-    width: '100%',
-    pointerEvents: 'none', // 默认情况下，禁止点击
-    opacity: hovered && isOverflow ? 1 : 0, // 控制按钮的透明度
-  }
-
-  const buttonStyle: React.CSSProperties = {
-    pointerEvents: 'auto', // 允许按钮在悬停时可点击
-    border: 'none',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-  }
-
-  return (
-    <Card
-      ref={ref}
-      style={cardStyle}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      {...rest}
-    >
-      <span style={contentStyle} ref={contentRef}>
-        {children}
-      </span>
-      {isOverflow && (
-        <div style={buttonContainerStyle}>
-          <Button
-            icon={collapsed ? <DownOutlined /> : <UpOutlined />}
-            onClick={toggleCollapse}
-            style={buttonStyle}
-          />
-        </div>
-      )}
-    </Card>
-  )
-})

package/src/antd/pro/Collapse/components/Item.tsx

@@ -1,30 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Collapse, CollapsePanelProps, Space } from 'antd'
-
-export interface CollapseItemProps extends Omit<CollapsePanelProps, 'key'> {
-  step?: boolean; // 为true自动给标题添加 `第{index}步：`
-  index?: number; // step为true时才需要
-  space?: boolean; // 子元素是否有间距
-}
-
-export const Item = (props: CollapseItemProps) => {
-  const { step = true, header, index, space } = props
-
-  return (
-    <Collapse.Panel
-      key={String(header)}
-      {...props}
-      header={step ? `第${index}步: ${header}` : header}
-    >
-      {space ? (
-        <Space orientation='vertical' size='small' style={{ width: '100%' }}>
-          {props.children}
-        </Space>
-      ) : (
-        props.children
-      )}
-    </Collapse.Panel>
-  )
-}

package/src/antd/pro/Collapse/index.tsx

@@ -1,27 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Collapse, CollapseProps } from 'antd'
-import { Item, CollapseItemProps } from './components/Item'
-
-export interface CollapseProProps extends CollapseProps {
-  list?: CollapseItemProps[],
-  step?: boolean; // 为true自动给标题添加 `第{index}步：`
-  space?: boolean; // 子元素是否有间距
-}
-
-export const CollapsePro = (props: CollapseProProps) => {
-  const { list = [], step = false, space = true, accordion = true } = props
-
-  if (!props.children && list.length) {
-    props.children = list.map((item, index) => (
-      <Item key={index} step={step} space={space} index={index + 1} {...item} />
-    ))
-  }
-
-  return (
-    <Collapse accordion={accordion} {...props} />
-  )
-}
-
-CollapsePro.Pane = Item

package/src/antd/pro/Image/index.tsx

@@ -1,17 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Image, ImageProps } from 'antd'
-
-export type ImageProProps = ImageProps
-
-export const ImagePro = (props: ImageProProps) => {
-  const { preview = false } = props
-
-  return (
-    <Image
-      {...props}
-      preview={preview}
-    />
-  )
-}

package/src/antd/pro/Input/index.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import React, { useState, useEffect, useMemo } from 'react'
-import { Input, InputProps } from 'antd'
-import { getStrLength } from '@wzyjs/utils/web'
-import { Range } from './components/Range'
-
-export interface InputProProps extends Omit<InputProps, 'onChange'> {
-  maxLengthChinese?: boolean; // 限制长度：中文算2个字符
-  onChange?: (value: string) => void
-}
-
-// 1. 增加对中文字符串的长度限制 (Input的maxLength会认为汉字为1个长度)
-export const InputPro = (props: InputProProps) => {
-  const {
-    value: _value,
-    onChange: _onChange,
-    addonAfter: _addonAfter,
-    maxLength,
-    maxLengthChinese,
-    ...rest
-  } = props
-
-  const [value, setValue] = useState<string>('')
-
-  const addonAfter = useMemo(() => {
-    if (!maxLengthChinese) {
-      return _addonAfter
-    }
-
-    return (
-      <>
-        {_addonAfter}
-        {maxLength ? `${getStrLength(value)} / ${maxLength}` : null}
-      </>
-    )
-  }, [_addonAfter, value, maxLength])
-
-  useEffect(() => {
-    _onChange?.(value)
-  }, [value])
-
-  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    if (maxLengthChinese && maxLength && getStrLength(ev.target.value) > maxLength) {
-      return
-    }
-    setValue(ev.target.value)
-  }
-
-  return (
-    <Input
-      value={value}
-      onChange={onChange}
-      addonAfter={addonAfter}
-      maxLength={maxLength}
-      {...rest}
-    />
-  )
-}
-
-InputPro.Range = Range

package/src/antd/pro/Popconfirm/index.tsx

@@ -1,16 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Popconfirm, PopconfirmProps } from 'antd'
-
-export type PopconfirmProProps = PopconfirmProps
-
-export const PopconfirmPro = (props: PopconfirmProProps) => {
-  return (
-    <Popconfirm
-      okText="确定"
-      cancelText="取消"
-      {...props}
-    />
-  )
-}

package/src/antd/pro/Radio/components/Cancel.tsx

@@ -1,30 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Checkbox, CheckboxProps, CheckboxOptionType } from 'antd'
-
-export interface CancelProps {
-  value: CheckboxProps['value'];
-  options: CheckboxOptionType[];
-  onChange?: CheckboxProps['onChange'];
-}
-
-// 给Radio组件增加取消选择的功能，是用Checkbox组件实现的
-export const Cancel = (props: CancelProps) => {
-  const { value, options, onChange } = props
-
-  const evs = {
-    onChange: (checkedValue: CheckboxProps['value'][]) => {
-      onChange?.(checkedValue.find(i => i !== value) || '')
-    },
-  }
-
-  return (
-    <Checkbox.Group
-      value={[value]}
-      prefixCls='ant-radio'
-      options={options}
-      onChange={evs.onChange}
-    />
-  )
-}

package/src/antd/pro/Radio/index.tsx

@@ -1,7 +0,0 @@
-'use client'
-
-import { Cancel } from './components/Cancel'
-
-export const RadioPro = {
-  Cancel,
-}

package/src/antd/pro/Space/index.tsx

@@ -1,15 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Space, SpaceProps } from 'antd'
-
-export type SpaceProProps = SpaceProps
-
-export const SpacePro = (props: SpaceProProps) => {
-  return (
-    <Space
-      style={{ width: '100%' }}
-      {...props}
-    />
-  )
-}

package/src/components/Fold/index.tsx

@@ -1,52 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { Button } from 'antd'
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-interface FoldProps {
-  max: number
-  children?: React.ReactNode
-  btnStyle?: React.CSSProperties
-}
-
-export const Fold = (props: FoldProps) => {
-  const { max, children, btnStyle = {} } = props
-
-  const [collapsed, setCollapsed] = useState<boolean | undefined>(undefined)
-
-  const divRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (divRef.current) {
-      const { clientHeight } = divRef.current
-      if (clientHeight > max) {
-        setCollapsed(true)
-      }
-    }
-  }, [divRef.current])
-
-  return (
-    <div ref={divRef} style={{ overflow: 'hidden' }}>
-      <div style={{ maxHeight: collapsed ? max : undefined }}>
-        {children}
-      </div>
-
-      <div style={{ textAlign: 'center', ...btnStyle }}>
-        {collapsed === undefined ? null : collapsed ? (
-          <Button
-            size='small'
-            icon={<DownOutlined />}
-            onClick={() => setCollapsed(false)}
-          />
-        ) : (
-          <Button
-            size='small'
-            icon={<UpOutlined />}
-            onClick={() => setCollapsed(true)}
-          />
-        )}
-      </div>
-    </div>
-  )
-}