@wzyjs/uis 0.3.29 → 0.3.31

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

@@ -1,131 +0,0 @@
-'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/RangeInput/index.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import React from 'react'
-import { InputNumber, InputNumberProps, Space } from 'antd'
-import { _ } from '@wzyjs/utils/web'
-
-export interface RangeInputProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
-  value?: number[];
-  min?: number;
-  max?: number;
-  onChange?: (numbers: number[]) => void;
-}
-
-// 最小值 最大值 的输入框
-export const RangeInput = (props: RangeInputProps) => {
-  const { value = [], min, max, onChange } = props
-
-  const onNumberChange = (index: 0 | 1, v: number | null) => {
-    if (Number.isNaN(v) || v === null) {
-      return
-    }
-
-    const numbers = _.cloneDeep(value) || []
-    numbers[index] = v
-
-    onChange?.(numbers)
-  }
-
-  return (
-    <Space>
-      <InputNumber
-        min={min}
-        max={max}
-        value={value[0]}
-        onChange={(v: number | null) => onNumberChange(0, v)}
-      />
-      <span style={{ margin: '0 3px' }}> - </span>
-      <InputNumber
-        min={min}
-        max={max}
-        value={value[1]}
-        onChange={(v: number | null) => onNumberChange(1, v)}
-      />
-    </Space>
-  )
-}

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

@@ -1,135 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Tabs, type TabsProps } from 'antd'
-
-type SyncMode = 'replace' | 'push'
-
-export interface TabsProProps extends TabsProps {
-  syncToUrl?: boolean
-  queryKey?: string
-  historyMode?: SyncMode
-}
-
-const getItemKeys = (items?: TabsProps['items']): string[] => {
-  return (items || [])
-  .map(item => item?.key)
-  .filter((key): key is string => typeof key === 'string' && !!key)
-}
-
-const getUrlTabKey = (queryKey: string): string | undefined => {
-  if (typeof window === 'undefined') {
-    return undefined
-  }
-
-  const value = new URLSearchParams(window.location.search).get(queryKey)
-  return value || undefined
-}
-
-const updateUrlTabKey = (queryKey: string, key: string, mode: SyncMode) => {
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  const url = new URL(window.location.href)
-  url.searchParams.set(queryKey, key)
-
-  const nextUrl = `${url.pathname}${url.search}${url.hash}`
-  if (mode === 'push') {
-    window.history.pushState(window.history.state, '', nextUrl)
-    return
-  }
-
-  window.history.replaceState(window.history.state, '', nextUrl)
-}
-
-export const TabsPro = (props: TabsProProps) => {
-  const {
-    syncToUrl = false,
-    queryKey = 'tab',
-    historyMode = 'replace',
-    activeKey,
-    defaultActiveKey,
-    items,
-    onChange,
-    ...rest
-  } = props
-
-  const itemKeys = React.useMemo(() => getItemKeys(items), [items])
-
-  const initialKey = React.useMemo(() => {
-    const urlKey = syncToUrl ? getUrlTabKey(queryKey) : undefined
-    if (urlKey && itemKeys.includes(urlKey)) {
-      return urlKey
-    }
-
-    if (typeof defaultActiveKey === 'string' && itemKeys.includes(defaultActiveKey)) {
-      return defaultActiveKey
-    }
-
-    return itemKeys[0]
-  }, [defaultActiveKey, itemKeys, queryKey, syncToUrl])
-
-  const [innerActiveKey, setInnerActiveKey] = React.useState<string | undefined>(initialKey)
-
-  const mergedActiveKey = typeof activeKey === 'string' ? activeKey : innerActiveKey
-
-  React.useEffect(() => {
-    if (typeof activeKey === 'string') {
-      return
-    }
-
-    setInnerActiveKey(prev => {
-      if (prev && itemKeys.includes(prev)) {
-        return prev
-      }
-      return initialKey
-    })
-  }, [activeKey, initialKey, itemKeys])
-
-  React.useEffect(() => {
-    if (!syncToUrl || !mergedActiveKey) {
-      return
-    }
-
-    updateUrlTabKey(queryKey, mergedActiveKey, historyMode)
-  }, [historyMode, mergedActiveKey, queryKey, syncToUrl])
-
-  React.useEffect(() => {
-    if (!syncToUrl) {
-      return
-    }
-
-    const onPopState = () => {
-      const urlKey = getUrlTabKey(queryKey)
-      if (!urlKey || !itemKeys.includes(urlKey)) {
-        return
-      }
-
-      if (typeof activeKey !== 'string') {
-        setInnerActiveKey(urlKey)
-      }
-
-      onChange?.(urlKey)
-    }
-
-    window.addEventListener('popstate', onPopState)
-    return () => {
-      window.removeEventListener('popstate', onPopState)
-    }
-  }, [activeKey, itemKeys, onChange, queryKey, syncToUrl])
-
-  return (
-    <Tabs
-      {...rest}
-      items={items}
-      activeKey={mergedActiveKey}
-      onChange={key => {
-        if (typeof activeKey !== 'string') {
-          setInnerActiveKey(key)
-        }
-        onChange?.(key)
-      }}
-    />
-  )
-}

package/src/antd/pro/Typography/components/String.tsx

@@ -1,72 +0,0 @@
-'use client'
-
-import React, { useMemo } from 'react'
-
-import { Typography } from 'antd'
-import { TextProps } from 'antd/lib/typography/Text'
-
-import { replaceByRules } from '@wzyjs/utils/web'
-
-export interface StringProps extends TextProps {
-  isCopy?: boolean;
-  isEllipsis?: boolean;
-}
-
-export const String = (props: StringProps) => {
-  const { isEllipsis, isCopy, children } = props
-
-  const { source = '', __html = '' } = useMemo<{ source?: string, __html?: string }>(() => {
-    if (typeof children !== 'string') {
-      return {}
-    }
-
-    if (!children.includes('’')) {
-      return {
-        source: children.trim(),
-      }
-    }
-
-    return {
-      source: children.trim(),
-      __html: replaceByRules(children.trim(), [
-        [
-          '‘',
-          '<xmp style="display: inline-block; color: #d56161; margin: 0 3px; font-family: Consolas, Monaco, monospace;">',
-        ],
-        ['’', '</xmp>'],
-      ]),
-    }
-  }, [])
-
-  const ellipsis = useMemo(() => {
-    if (!isEllipsis) {
-      return false
-    }
-    return { rows: 100, expandable: true }
-  }, [isEllipsis])
-
-  const copyable = useMemo(() => {
-    if (!isCopy) {
-      return
-    }
-    return {
-      text: replaceByRules(source, [
-        ['‘', ''],
-        ['’', ''],
-      ]),
-    }
-  }, [isCopy, source])
-
-  return (
-    <Typography.Paragraph
-      {...props}
-      ellipsis={ellipsis}
-      copyable={copyable}
-    >
-      <span
-        style={{ whiteSpace: 'pre' }}
-        dangerouslySetInnerHTML={{ __html: __html || source }}
-      />
-    </Typography.Paragraph>
-  )
-}

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

@@ -1,9 +0,0 @@
-'use client'
-
-import { String as String_ } from './components/String'
-
-export const TypographyPro = {
-  String: String_,
-}
-
-export const String = String_

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

@@ -1,26 +0,0 @@
-'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/buttons/ConfirmButton.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import React from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Popconfirm, PopconfirmProps, ButtonProps } from 'antd'
-
-export interface ConfirmButtonProps extends PopconfirmProps {
-  btnProps?: ButtonProps
-}
-
-// 1. 给按钮增加了确认功能
-export const ConfirmButton = (props: ConfirmButtonProps) => {
-  const { children, btnProps } = props
-
-  return (
-    <Popconfirm
-      okText='是'
-      cancelText='否'
-      {..._.omit(props, ['children', 'btnProps'])}
-    >
-      <Button type='link' {...btnProps}>{children}</Button>
-    </Popconfirm>
-  )
-}

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

@@ -1,47 +0,0 @@
-'use client'
-
-import React, { useState, ReactNode } from 'react'
-
-import { App, Button, ButtonProps } from 'antd'
-import { CheckOutlined } from '@ant-design/icons'
-
-import { copy, readClipboard } from '@wzyjs/utils/web'
-import { useControllableValue } from '@wzyjs/hooks/web'
-
-export interface CopyButtonProps extends ButtonProps {
-  value?: string,
-  canPaste?: boolean,
-}
-
-export const CopyButton = (props: CopyButtonProps) => {
-  const [icon, setIcon] = useState<ReactNode>(null)
-  const { message } = App.useApp()
-
-  const [value, setValue] = useControllableValue<string>(props, {
-    defaultValue: props.value,
-  })
-
-  const onContextMenu = async () => {
-    setValue(await readClipboard())
-  }
-
-  return (
-    <Button
-      {...props}
-      icon={icon}
-      onContextMenu={props.canPaste ? onContextMenu : undefined}
-      children={props.children || value || '记录'}
-      onClick={(ev: any) => {
-        props.onClick?.(ev)
-
-        copy(value)
-        message.success('复制成功')
-
-        setIcon(<CheckOutlined />)
-        setTimeout(() => {
-          setIcon(null)
-        }, 1000)
-      }}
-    />
-  )
-}

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

@@ -1,37 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Drawer as AntdDrawer, DrawerProps as AntdDrawerProps, ButtonProps } from 'antd'
-
-export interface DrawerButtonProps extends AntdDrawerProps {
-  btnProps?: ButtonProps
-  defaultOpen?: boolean
-}
-
-export const DrawerButton = (props: DrawerButtonProps) => {
-  const { children, defaultOpen, btnProps } = props
-  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)
-
-  return (
-    <>
-      <Button
-        type='link'
-        {...btnProps}
-        onClick={ev => {
-          btnProps?.onClick?.(ev)
-          setOpen(true)
-        }}
-      />
-      <AntdDrawer
-        title={btnProps?.children}
-        open={open}
-        onClose={() => setOpen(false)}
-        destroyOnHidden
-        {..._.omit(props, ['children', 'btnProps'])}
-      >
-        {children}
-      </AntdDrawer>
-    </>
-  )
-}

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

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

package/src/antd/pro/index.ts

@@ -1,5 +0,0 @@
-export * from './buttons'
-export * from './FoldCard'
-export * from './RangeInput'
-export * from './Tabs'
-export * from './Typography'

package/src/components/BottomBar/index.tsx

@@ -1,28 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-
-interface BottomBarProps {
-  children?: ReactNode
-  collapsed?: boolean
-}
-
-const style = {
-  display: 'flex',
-  justifyContent: 'center',
-  padding: 10,
-  right: 0,
-  bottom: 0,
-  boxShadow: '0 0 2px 0 rgba(0, 0, 0, 0.1)',
-  background: '#fff',
-}
-
-export const BottomBar = (props: BottomBarProps) => {
-  const { children, collapsed } = props
-
-  return (
-    <div style={{ ...style, left: collapsed ? 64 : 256, position: 'fixed' }}>
-      {children}
-    </div>
-  )
-}

package/src/components/CodeView/index.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import React, { CSSProperties, useEffect, useMemo, useRef } from 'react'
-
-import Prism from 'prismjs'
-import { format } from 'prettier/standalone'
-import parserBabel from 'prettier/parser-babel'
-import parserTs from 'prettier/parser-typescript'
-import { js_beautify, html_beautify, css_beautify } from 'js-beautify'
-
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-tsx'
-import 'prismjs/components/prism-json'
-
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-typescript'
-
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-less'
-import 'prismjs/components/prism-sass'
-import 'prismjs/components/prism-scss'
-
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-http'
-import 'prismjs/components/prism-editorconfig'
-import 'prismjs/components/prism-docker'
-import 'prismjs/components/prism-git'
-import 'prismjs/components/prism-ignore'
-import 'prismjs/components/prism-yaml'
-
-import 'prismjs/themes/prism.css'
-
-interface CodeViewProps {
-  language?: 'html' | 'jsx' | 'tsx' | 'vue' | 'json' | 'javascript' | 'typescript' | 'css' | 'less' | 'sass' | 'scss' | 'bash' | 'http' | 'editorconfig' | 'dockerfile' | 'git' | 'ignore' | 'yaml'
-  code?: string,
-  children?: any,
-  style?: CSSProperties,
-}
-
-export const CodeView = (props: CodeViewProps) => {
-  const { language = 'javascript', style, children, code = children } = props
-
-  const preRef = useRef(null)
-  useEffect(() => {
-    if (!preRef.current) {
-      return
-    }
-    Prism.highlightElement(preRef.current)
-  }, [])
-
-  const beautifydCode = useMemo(() => {
-    if (language === 'html') {
-      return html_beautify(code, { indent_size: 2 })
-    }
-    if (language === 'css') {
-      return css_beautify(code, { indent_size: 2 })
-    }
-    if (language === 'javascript') {
-      return js_beautify(code, { indent_size: 2 })
-    }
-
-    try {
-      return format(code, {
-        semi: false,
-        parser: 'babel',
-        singleQuote: true,
-        tabWidth: 2,
-        jsxSingleQuote: true,
-        plugins: [parserBabel, parserTs],
-      })
-    } catch (e) {
-      return code
-    }
-  }, [code])
-
-  return (
-    <div style={{ overflow: 'scroll', ...style }}>
-      <pre style={{ margin: 0, backgroundColor: 'transparent' }}>
-        <code ref={preRef} className={`language-${language}`}>
-          {beautifydCode}
-        </code>
-      </pre>
-    </div>
-  )
-}

package/src/components/Collapse/index.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-import { useBoolean } from '@wzyjs/hooks/web'
-import { RightOutlined, LeftOutlined } from '@ant-design/icons'
-
-interface CollapseProps {
-  children: ReactNode
-}
-
-export const Collapse = (props: CollapseProps) => {
-  const { children } = props
-
-  const [collapse, { setTrue, setFalse }] = useBoolean(false)
-
-  return (
-    <div>
-      <div style={{ transform: 'translateY(100px)' }}>
-        {collapse ? <LeftOutlined onClick={setFalse} /> : <RightOutlined onClick={setTrue} />}
-      </div>
-      <div style={{ width: collapse ? 0 : 'auto', visibility: collapse ? 'hidden' : 'visible' }}>
-        {children}
-      </div>
-    </div>
-  )
-}