@wzyjs/uis 0.3.28 → 0.3.30

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/components/Range.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import React from 'react'
-import { InputNumber, InputNumberProps, Space } from 'antd'
-import { _ } from '@wzyjs/utils/web'
-
-export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
-  value?: number[];
-  min?: number;
-  max?: number;
-  onChange?: (numbers: number[]) => void;
-}
-
-// 最小值 最大值 的输入框
-export const Range = (props: RangeProps) => {
-  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/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/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/index.ts

@@ -1,11 +0,0 @@
-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 './Tabs'
-export * from './Typography'
-export * from './Popconfirm'

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>
-  )
-}

package/src/components/Com2Canvas/index.tsx

@@ -1,60 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, ReactNode } from 'react'
-
-import html2canvas from 'html2canvas'
-
-import { useDebounceFn } from '@wzyjs/hooks/web'
-import { getRandomColor } from '@wzyjs/utils/web'
-
-interface Com2CanvasProps {
-  children: ReactNode;
-  downloadName?: string;
-  onChange?: (url: string) => void;
-}
-
-export const Com2Canvas = (props: Com2CanvasProps) => {
-  const { children, downloadName, onChange } = props
-
-  const random = useRef(getRandomColor())
-  const htmlId = `h2c_html_${random.current}`
-  const canvasId = `htc_canvas_${random.current}`
-
-  const { run } = useDebounceFn(() => {
-    const el = document.querySelector(`#${canvasId}`) as HTMLElement
-    if (!el) {
-      return
-    }
-
-    html2canvas(el, {
-      allowTaint: true, // 允许污染
-      useCORS: true, // 使用跨域(当allowTaint为true时这段代码没什么用)
-      scale: 2,
-    }).then((canvas: any) => {
-      el.innerHTML = ''
-      el.appendChild(canvas)
-
-      onChange?.(canvas.toDataURL('image/png'))
-
-      if (downloadName) {
-        el.onclick = () => {
-          const a = document.createElement('a')
-          a.download = downloadName
-          a.href = canvas.toDataURL('image/png')
-          document.body.appendChild(a)
-          a.click()
-          a.remove()
-        }
-      }
-    })
-  }, { wait: 500 })
-
-  useEffect(run, [children])
-
-  return (
-    <span style={{ position: 'relative' }}>
-      <span id={htmlId}>{children}</span>
-      <span id={canvasId} style={{ position: 'absolute', top: 0 }} />
-    </span>
-  )
-}

package/src/components/CompileHtml/index.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import React, { useMemo } from 'react'
-import Handlebars from 'handlebars'
-
-interface Props {
-  template?: string
-  data: any
-}
-
-export default (props: Props) => {
-  const { template, data } = props
-
-  const html = useMemo(() => {
-    const html = Handlebars.compile(template || '')(data)
-    return html.replaceAll('\n', '').replaceAll('\t', '')
-  }, [template, data])
-
-  if (!html) {
-    return null
-  }
-
-  return (
-    <div dangerouslySetInnerHTML={{ __html: html }} />
-  )
-}