@wzyjs/components 0.2.41

package/src/Crud/powers/validator.ts

@@ -0,0 +1,73 @@
+'use client'
+
+import { getRequire } from '../utils'
+import { Apis, Column } from '../types'
+
+interface ValidatorProps<I> {
+  columns: Column<I>[],
+  findApi?: Apis<I>['find']
+}
+
+const validatorValue = <I>(item: Column<I>, findApi: Apis<I>['find']): any[] => {
+  const { validator, title } = item
+
+  if (!validator?.length) {
+    return []
+  }
+
+  return validator.map(item => {
+    if (!item) {
+      return
+    }
+
+    const [type, option] = Array.isArray(item) ? item : [item]
+
+    switch (type) {
+      case 'require':
+        return getRequire(title as string)
+
+      case 'unique':
+        if (!findApi) {
+          return
+        }
+
+        return {
+          asyncValidator: async ({ field }: { field: keyof I }, value: string) => {
+            if (!value || !findApi) {
+              return
+            }
+
+            const { data } = await findApi({ [field]: { type: 'eq', value } } as any)
+            if (data) {
+              return Promise.reject(option)
+            }
+
+            return Promise.resolve()
+          },
+        }
+
+      default:
+        return {}
+    }
+  }).filter(item => item)
+}
+
+export default <I>(props: ValidatorProps<I>): Column<I>[] => {
+  const { columns, findApi } = props
+
+  return columns.map(item => {
+    if (item?.validator) {
+      item.formItemProps = {
+        ...(item.formItemProps || {}),
+        rules: [
+          // @ts-ignore
+          ...(item.rules || []),
+          ...validatorValue(item, findApi),
+        ].flat(),
+      }
+      delete item.validator
+    }
+
+    return item
+  })
+}

package/src/Crud/types.ts

@@ -0,0 +1,36 @@
+import { TableProColumns } from '../TablePro'
+import { RequestRes, Pagination, Where, Order } from '@wzyjs/types'
+
+// 扩展了 ProColumns 的能力
+export type Column<I, ValueType = 'text'> = TableProColumns<I, ValueType> & {
+  hideInCreate?: true, // 创建表单里隐藏
+  hideInUpdate?: true, // 编辑表单里隐藏
+  validator?: ('require' | null | ['unique', string])[], // 使用内置的校验规则
+}
+
+export type ColumnContent = {
+  type: 'create' | 'update' | 'list',
+  isCreate?: boolean,
+  isUpdate?: boolean,
+  isList?: boolean,
+}
+
+export type Columns<I, ValueType = 'text'> = Column<I, ValueType>[] | ((content: ColumnContent) => Column<I>[])
+
+export type Apis<I> = {
+  list: (params: {
+    where?: Where,
+    order?: Order,
+    pagination?: Pagination
+  }) => Promise<RequestRes<{ data: I[], total: number }>>,
+  find?: (params: I) => Promise<RequestRes<unknown>>,
+  create?: (data: Partial<I>) => Promise<RequestRes<unknown>>,
+  update?: (id: string, data: Partial<I>) => Promise<RequestRes<unknown>>,
+  remove?: (id: string) => Promise<RequestRes<unknown>>,
+}
+
+// 调用各个接口时的附加参数
+export type ApiParams = {
+  list?: Where,
+  create?: Where,
+}

package/src/Crud/utils.ts

@@ -0,0 +1,17 @@
+import { isFunction, cloneDeep } from '@wzyjs/utils'
+import { Column, Columns, ColumnContent } from './types'
+
+export const getRequireFormProps = (label?: string) => ({
+  rules: [
+    getRequire(label),
+  ],
+})
+
+export const getRequire = (label?: string) => ({
+  required: true,
+  message: `${label + ' ' || '此项'}为必填项`,
+})
+
+export const handleColumns = <I>(columns: Columns<I>, content: ColumnContent, mids: any[]): Column<I>[] => {
+  return mids.reduce((columns, mid) => mid(columns), isFunction(columns) ? columns(content) : cloneDeep(columns))
+}

package/src/DateSwitcher/index.module.scss

@@ -0,0 +1,10 @@
+.picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  :global(.ant-picker-input input) {
+    text-align: center !important;
+    cursor: pointer;
+  }
+}

package/src/DateSwitcher/index.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import { DatePicker, Button } from 'antd'
+import { LeftOutlined, RightOutlined } from '@ant-design/icons'
+
+import { dayjs, type Dayjs } from '@wzyjs/utils'
+
+import styles from './index.module.scss'
+
+interface DateSwitcherProps {
+  value?: Dayjs
+  onChange?: (date: Dayjs) => void
+}
+
+export const DateSwitcher = (props: DateSwitcherProps) => {
+  const { value = dayjs(), onChange } = props
+
+  const [selectedDate, setSelectedDate] = useState(value)
+
+  const handleDateChange = (date: Dayjs | null) => {
+    if (date) {
+      setSelectedDate(date)
+      onChange?.(date)
+    }
+  }
+
+  const handlePrevDay = () => {
+    const newDate = selectedDate.subtract(1, 'day')
+    handleDateChange(newDate)
+  }
+
+  const handleNextDay = () => {
+    const newDate = selectedDate.add(1, 'day')
+    handleDateChange(newDate)
+  }
+
+  const isToday = selectedDate.isSame(dayjs(), 'day')
+
+  return (
+    <div className={styles.picker}>
+      <Button
+        type='text'
+        icon={<LeftOutlined />}
+        onClick={handlePrevDay}
+        className='flex items-center justify-center'
+      />
+      <DatePicker
+        value={selectedDate}
+        onChange={handleDateChange}
+        allowClear={false}
+        suffixIcon={null}
+        className='w-40 text-center cursor-pointer'
+        style={{ border: 'none' }}
+        components={{
+          input: props => (
+            <div {...props} className={isToday ? 'text-green-600' : ''}>
+              <span>{selectedDate.format('YYYY-MM-DD')}</span>
+              <span style={{ marginLeft: 5 }}>
+                (周{['日', '一', '二', '三', '四', '五', '六'][dayjs(selectedDate).day()]})
+              </span>
+            </div>
+          ),
+        }}
+      />
+      <Button
+        type='text'
+        icon={<RightOutlined />}
+        onClick={handleNextDay}
+        className='flex items-center justify-center'
+      />
+    </div>
+  )
+}

package/src/DownloadLink/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+interface DownloadLinkProps {
+  url: string
+  filename?: string
+}
+
+export const DownloadLink = ({ url, filename }: DownloadLinkProps) => {
+  const handleDownload = (e: any) => {
+    e.preventDefault()
+    fetch(url, { method: 'GET' })
+    .then(response => response.blob())
+    .then(blob => {
+      const downloadUrl = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = downloadUrl
+      a.download = filename || '下载文件'
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      window.URL.revokeObjectURL(downloadUrl)
+    })
+    .catch((err) => {
+      console.log(666, err)
+      alert('下载失败')
+    })
+  }
+
+  return (
+    <a href={url} onClick={handleDownload}>
+      下载
+    </a>
+  )
+}

package/src/DragSort/index.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import React from 'react'
+
+import { Space } from 'antd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  type OnDragEndResponder,
+  type DraggableProvided,
+} from 'react-beautiful-dnd'
+
+interface DragSortProps<T> {
+  direction?: 'vertical' | 'horizontal'
+  droppableId?: string
+  list?: T[]
+  children: (item: T, provided: DraggableProvided) => React.ReactNode
+  lastChildren?: React.ReactNode
+  onDragEnd?: OnDragEndResponder
+  hasContext?: boolean
+  dropType?: string
+}
+
+export { type DropResult, type DraggableProvided } from 'react-beautiful-dnd'
+
+export const DragSort = <T extends { id: string }>(props: DragSortProps<T>) => {
+  const {
+    dropType,
+    direction = 'vertical',
+    droppableId = 'list',
+    list,
+    children,
+    hasContext = true,
+    lastChildren,
+    onDragEnd,
+  } = props
+
+  const content = (
+    <Droppable
+      type={dropType}
+      droppableId={droppableId}
+      direction={direction}
+      isDropDisabled={false}
+      isCombineEnabled={false}
+      ignoreContainerClipping
+    >
+      {provided => (
+        <div ref={provided.innerRef} {...provided.droppableProps}>
+          <Space direction={direction} wrap style={{ width: '100%' }}>
+            {list?.map((item, index) => (
+              <Draggable key={item.id} draggableId={item.id.toString()} index={index}>
+                {provided => (
+                  <div ref={provided.innerRef} {...provided.draggableProps} >
+                    {children(item, provided)}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+            {lastChildren}
+          </Space>
+        </div>
+      )}
+    </Droppable>
+  )
+
+  if (!hasContext) {
+    return content
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      {content}
+    </DragDropContext>
+  )
+}

package/src/FetchSelect/index.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useImperativeHandle } from 'react'
+import { Select, SelectProps, Spin } from 'antd'
+import { useRequest } from 'ahooks'
+
+export interface FetchSelectProps<I> extends SelectProps {
+  selectRef?: any,
+  isDetail?: boolean, // 只返回id 还是返回整个信息
+  searchApi: (params: { search: string }) => Promise<any>,
+  convertData?: (data: I[]) => any[],
+  onChange?: (value: any) => void
+}
+
+export interface FetchSelectRef {
+  refresh: () => void
+}
+
+export const FetchSelect = <I extends { id: string | number }, >(props: FetchSelectProps<I>) => {
+  const { searchApi, convertData, onChange, isDetail = false, selectRef, ...other } = props
+
+  const { data, run, loading, refresh } = useRequest(searchApi, {
+    debounceWait: 100,
+  })
+
+  const onSearch = (value: string) => {
+    run({ search: value })
+  }
+
+  useImperativeHandle(selectRef, () => ({
+    refresh,
+  }))
+
+  return (
+    <Select
+      showSearch
+      defaultActiveFirstOption={false}
+      popupMatchSelectWidth={false}
+      suffixIcon={null}
+      filterOption={false}
+      notFoundContent={loading ? <Spin size='small' /> : null}
+      loading={loading}
+      {...other}
+
+      options={convertData ? convertData(data?.data || []) : data?.data}
+      onSearch={onSearch}
+      onChange={value => {
+        if (isDetail) {
+          const detail = data?.data?.find(item => item.id === value)
+          onChange?.(detail)
+        } else {
+          onChange?.(value)
+        }
+      }}
+    />
+  )
+}

package/src/Fold/index.tsx

@@ -0,0 +1,52 @@
+'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>
+  )
+}

package/src/FormPro/index.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import React, { useImperativeHandle, useRef } from 'react'
+import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-components'
+import { FormSchema } from '@ant-design/pro-form/es/components/SchemaForm'
+
+export type { ProFormColumnsType, ProFormInstance } from '@ant-design/pro-components'
+
+export type FormProProps<T, ValueType> = FormSchema<T, ValueType>
+
+export const FormPro = <T, ValueType>(props: FormProProps<T, ValueType>) => {
+
+  const formRef = useRef<ProFormInstance>(null)
+  useImperativeHandle(props.formRef, () => formRef?.current, [formRef])
+
+  // useEffect(() => {
+  //   if (props.value) {
+  //     formRef.current?.setFieldsValue(props.value)
+  //   }
+  // }, [JSON.stringify(props.value)])
+
+  return (
+    <BetaSchemaForm
+      {...props}
+      formRef={formRef}
+    />
+  )
+}

package/src/HtmlPro/index.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import React, { CSSProperties } from 'react'
+
+export interface HtmlProProps {
+  html: string;
+  style?: CSSProperties
+}
+
+export const HtmlPro = (props: HtmlProProps) => {
+  const { html, style = {} } = props
+  return (
+    <div
+      style={{ minWidth: '100%', ...style }}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

package/src/IframePro/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { useEffect, CSSProperties } from 'react'
+import { Spin } from 'antd'
+import { useBoolean } from '@wzyjs/hooks'
+
+export interface IframeProProps {
+  url: string;
+  errMessage?: string;
+  style?: CSSProperties;
+  isShowLoading?: boolean;
+}
+
+export const IframePro = (props: IframeProProps) => {
+  const { url, style, errMessage = '', isShowLoading = false } = props
+
+  const [loading, { setTrue, setFalse }] = useBoolean(true)
+
+  useEffect(() => {
+    setTrue()
+  }, [url])
+
+  if (!url) {
+    return (
+      <span
+        style={{
+          ...style,
+          color: '#ccc',
+          fontSize: 14,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {errMessage || '没有url'}
+      </span>
+    )
+  }
+
+  return (
+    <Spin spinning={loading && isShowLoading}>
+      <iframe
+        src={url}
+        width='100%'
+        height='100%'
+        style={style}
+        onLoad={setFalse}
+      />
+    </Spin>
+  )
+}

package/src/JsonView/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import React from 'react'
+import ReactJson, { ReactJsonViewProps } from 'react-json-view'
+
+export type JsonViewProps = ReactJsonViewProps
+
+export const JsonView = (props: JsonViewProps) => {
+  const { style } = props
+
+  return (
+    <ReactJson
+      enableClipboard={false}
+      collapsed={true}
+      displayObjectSize={false}
+      displayDataTypes={false}
+      {...props}
+      style={{ overflow: 'auto', ...style }}
+    />
+  )
+}

package/src/MultiImageDisplay/index.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React from 'react'
+import { Row, Col, Image } from 'antd'
+
+export const MultiImageDisplay = ({ images = [], preview = false }) => {
+  const renderImages = () => {
+    const count = images.length
+
+    if (count === 1) {
+      return (
+        <Image src={images[0]} preview={preview} style={{ width: '100%', height: 'auto' }} />
+      )
+    }
+
+    if (count === 2) {
+      return (
+        <Row gutter={8}>
+          {images.map((img, index) => (
+            <Col span={12} key={index}>
+              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          ))}
+        </Row>
+      )
+    }
+
+    if (count === 3) {
+      return (
+        <div>
+          <Row gutter={8}>
+            {images.slice(0, 2).map((img, index) => (
+              <Col span={12} key={index}>
+                <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={8} style={{ marginTop: '8px' }}>
+            <Col span={24}>
+              <Image src={images[2]} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          </Row>
+        </div>
+      )
+    }
+
+    if (count >= 4) {
+      return (
+        <Row>
+          {images.map((img, index) => (
+            <Col span={12} key={index}>
+              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          ))}
+        </Row>
+      )
+    }
+
+    return null
+  }
+
+  return <div>{renderImages()}</div>
+}

package/src/TablePro/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { ReactNode, useImperativeHandle, useRef } from 'react'
+import { _ } from '@wzyjs/utils'
+import {
+  ActionType,
+  ParamsType,
+  ProColumns,
+  ProFormInstance,
+  ProTable,
+  ProTableProps,
+} from '@ant-design/pro-components'
+
+export type { ActionType, ProColumns } from '@ant-design/pro-components'
+
+export type TableProColumns<T, ValueType> = ProColumns<T, ValueType> & {
+  summary?: (data: readonly T[]) => ReactNode,
+}
+
+export type TableProProps<T, U, ValueType = 'text'> = Omit<ProTableProps<T, U, ValueType>, 'columns'> & {
+  columns: TableProColumns<T, ValueType>[]
+}
+
+const defaultTableProps = {
+  rowKey: 'id',
+  cardBordered: true,
+  options: false,
+  dateFormatter: 'string',
+  headerTitle: '列表',
+  scroll: {
+    x: 'max-content',
+  },
+}
+
+export const TablePro = <T extends Record<string, any>, U extends ParamsType, ValueType = 'text'>(props: TableProProps<T, U, ValueType>) => {
+  const tableProps = _.merge(_.cloneDeep(defaultTableProps), props)
+
+  const actionRef = useRef<ActionType>(undefined)
+  useImperativeHandle(props.actionRef, () => actionRef?.current, [actionRef])
+
+  const formRef = useRef<ProFormInstance>(undefined)
+  useImperativeHandle(props.formRef, () => formRef?.current, [formRef])
+
+  const defaultsSummary = (data: readonly T[]) => {
+    return (
+      <ProTable.Summary.Row>
+        {tableProps.columns?.map((item: any, index: number) => {
+          return (
+            <ProTable.Summary.Cell key={index} index={index}>
+              {item.summary?.(data) || ''}
+            </ProTable.Summary.Cell>
+          )
+        })}
+      </ProTable.Summary.Row>
+    )
+  }
+
+  return (
+    <ProTable
+      {...tableProps}
+      formRef={formRef}
+      actionRef={actionRef}
+      summary={tableProps.summary || defaultsSummary}
+    />
+  )
+}