react-toolkits 0.0.1

package/src/components/DynamicTags/index.tsx

@@ -0,0 +1,160 @@
+import { PlusOutlined } from '@ant-design/icons'
+import type { InputRef } from 'antd'
+import { Input, Space, Tag, theme } from 'antd'
+import type { FC } from 'react'
+import { useEffect, useRef, useState } from 'react'
+
+export interface DynamicTagsProps {
+  initialTags?: string[]
+  addable?: boolean
+  removable?: boolean
+  // 返回 Promise。如果返回 Promise.resolve(true)，则添加; 如果返回 Promise.resolve(false) 或 Promise.reject，则不添加
+  addCallback?: (addedTag: string) => Promise<boolean>
+  // 返回 Promise。如果返回 Promise.resolve(true)，则删除; 如果返回 Promise.resolve(false) 或 Promise.reject，则不删除
+  removeCallback?: (removedTag: string) => Promise<boolean>
+}
+
+const DynamicTags: FC<DynamicTagsProps> = props => {
+  const { initialTags, addable, removable, addCallback, removeCallback } = props
+  const { token } = theme.useToken()
+  const [tags, setTags] = useState<string[]>([])
+  const [inputVisible, setInputVisible] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const [editInputIndex, setEditInputIndex] = useState(-1)
+  const [editInputValue, setEditInputValue] = useState<string>('')
+  const inputRef = useRef<InputRef>(null)
+  const editInputRef = useRef<InputRef>(null)
+
+  useEffect(() => {
+    setTags(initialTags ?? [])
+  }, [initialTags])
+
+  useEffect(() => {
+    if (inputVisible) {
+      inputRef.current?.focus()
+    }
+  }, [inputVisible])
+
+  useEffect(() => {
+    editInputRef.current?.focus()
+  }, [inputValue])
+
+  const handleClose = async (removedTag: string) => {
+    const success = await removeCallback?.(removedTag)
+
+    if (success) {
+      const newTags = tags.filter(tag => tag !== removedTag)
+      setTags(newTags)
+    }
+  }
+
+  const showInput = () => {
+    setInputVisible(true)
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+
+  const handleInputConfirm = async () => {
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      const success = await addCallback?.(inputValue)
+
+      if (success) {
+        setTags([...tags, inputValue])
+      }
+    }
+
+    setInputVisible(false)
+    setInputValue('')
+  }
+
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEditInputValue(e.target.value)
+  }
+
+  const handleEditInputConfirm = () => {
+    const newTags = [...tags]
+    newTags[editInputIndex] = editInputValue
+    setTags(newTags)
+    setEditInputIndex(-1)
+    setInputValue('')
+  }
+
+  const tagInputStyle: React.CSSProperties = {
+    width: 78,
+    verticalAlign: 'top',
+  }
+
+  const tagPlusStyle: React.CSSProperties = {
+    background: token.colorBgContainer,
+    borderStyle: 'dashed',
+  }
+
+  return (
+    <Space wrap size={[0, 8]}>
+      <Space wrap size={[0, 8]}>
+        {tags.map((tag, index) => {
+          if (editInputIndex === index) {
+            return (
+              <Input
+                ref={editInputRef}
+                key={tag}
+                size="small"
+                style={tagInputStyle}
+                value={editInputValue}
+                onChange={handleEditInputChange}
+                onBlur={handleEditInputConfirm}
+                onPressEnter={handleEditInputConfirm}
+              />
+            )
+          }
+
+          return (
+            <Tag
+              key={tag}
+              closable={removable}
+              style={{ userSelect: 'none' }}
+              onClose={async e => {
+                e.preventDefault()
+                await handleClose(tag)
+              }}
+            >
+              <span
+                onDoubleClick={e => {
+                  if (index !== 0) {
+                    setEditInputIndex(index)
+                    setEditInputValue(tag)
+                    e.preventDefault()
+                  }
+                }}
+              >
+                {tag}
+              </span>
+            </Tag>
+          )
+        })}
+      </Space>
+      {addable &&
+        (inputVisible ? (
+          <Input
+            ref={inputRef}
+            type="text"
+            size="small"
+            style={tagInputStyle}
+            value={inputValue}
+            onChange={handleInputChange}
+            onBlur={handleInputConfirm}
+            onPressEnter={handleInputConfirm}
+          />
+        ) : (
+          <Tag style={tagPlusStyle} onClick={showInput}>
+            <PlusOutlined />
+            &nbsp;添加
+          </Tag>
+        ))}
+    </Space>
+  )
+}
+
+export default DynamicTags

package/src/components/FilterForm/index.tsx

@@ -0,0 +1,62 @@
+import type { FormInstance, FormProps } from 'antd'
+import { Button, Col, Form, Row, Space, theme } from 'antd'
+import type { PropsWithChildren } from 'react'
+
+export interface FilterFormProps<Values>
+  extends Pick<
+    FormProps<Values>,
+    | 'initialValues'
+    | 'requiredMark'
+    | 'onError'
+    | 'onChange'
+    | 'onValuesChange'
+    | 'onFinish'
+    | 'onFinishFailed'
+    | 'layout'
+    | 'labelCol'
+  > {
+  form?: FormInstance<Values>
+  onReset?: () => void
+  confirmText?: React.ReactNode
+}
+
+const FilterForm = <Values = unknown,>(props: PropsWithChildren<FilterFormProps<Values>>) => {
+  const { children, confirmText, form, onReset, ...restProps } = props
+  const { token } = theme.useToken()
+
+  const formStyle = {
+    maxWidth: 'none',
+    background: token.colorFillAlter,
+    borderWidth: token.lineWidth,
+    borderStyle: token.lineType,
+    borderColor: token.colorBorder,
+    borderRadius: token.borderRadiusLG,
+    padding: 24,
+    marginBottom: 24,
+  }
+
+  return (
+    <Form {...restProps} form={form} autoComplete="off">
+      {children && (
+        <div style={formStyle}>
+          <Row gutter={18}>
+            {children}
+            <Col flex="auto" />
+            <Col flex="auto" span={24} style={{ textAlign: 'right' }}>
+              <Space>
+                <Button type="primary" htmlType="submit">
+                  {confirmText || '查询'}
+                </Button>
+                <Button htmlType="reset" onClick={onReset}>
+                  重置
+                </Button>
+              </Space>
+            </Col>
+          </Row>
+        </div>
+      )}
+    </Form>
+  )
+}
+
+export default FilterForm

package/src/components/FormModal/hooks.tsx

@@ -0,0 +1,48 @@
+import type { FormModalProps, FormModalRef, RecursivePartial } from './index'
+import FormModal from './index'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import type { Merge } from 'ts-essentials'
+import { createPortal } from 'react-dom'
+
+export type UseFormModalProps<T> = Merge<
+  Omit<FormModalProps<T>, 'open' | 'onCancel' | 'closeFn' | 'children' | 'onConfirm'>,
+  {
+    content: FormModalProps<T>['children']
+    onConfirm?: (values: T) => void
+  }
+>
+
+export function useFormModal<T extends object>(props: UseFormModalProps<T>) {
+  const { content, onConfirm, ...restProps } = props
+  const [open, setOpen] = useState(false)
+  const [title, setTitle] = useState<FormModalProps<T>['title']>()
+  const formRef = useRef<FormModalRef>(null)
+
+  const showModal = (options?: { initialValues?: RecursivePartial<T>; title?: FormModalProps<T>['title'] }) => {
+    setTitle(options?.title ?? restProps.title)
+
+    if (options?.initialValues) {
+      formRef.current?.setFieldsValue(options?.initialValues)
+    }
+
+    setOpen(true)
+  }
+
+  const closeModal = useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  const Modal = useMemo(() => {
+    return (
+      <FormModal {...restProps} open={open} closeFn={closeModal} title={title} onConfirm={onConfirm}>
+        {content}
+      </FormModal>
+    )
+  }, [title, content, restProps, open, closeModal, onConfirm])
+
+  return {
+    Modal: createPortal(Modal, document.body),
+    showModal,
+    closeModal,
+  }
+}

package/src/components/FormModal/index.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable react/jsx-indent */
+import type { FormInstance, FormProps, ModalProps } from 'antd'
+import { Button, Form, Modal } from 'antd'
+import type { ForwardedRef } from 'react'
+import { forwardRef, useId, useImperativeHandle, useRef, useState } from 'react'
+
+type RenderChildren<T> = (props: {
+  form: FormInstance<T>
+  open?: boolean
+  closeFn?: VoidFunction
+}) => JSX.Element | JSX.Element[]
+
+type ChildrenType<T> = RenderChildren<T> | JSX.Element | JSX.Element[]
+
+export type RecursivePartial<T> = T extends object
+  ? {
+      [P in keyof T]?: T[P] extends (infer U)[]
+        ? RecursivePartial<U>[]
+        : T[P] extends object
+        ? RecursivePartial<T[P]>
+        : T[P]
+    }
+  : any
+
+export interface FormModalProps<T>
+  extends Pick<ModalProps, 'width' | 'title' | 'open' | 'afterClose' | 'bodyStyle' | 'maskClosable'>,
+    Pick<FormProps, 'labelCol' | 'layout' | 'colon'> {
+  children?: ChildrenType<T>
+  footer?: ModalProps['footer']
+  closeFn?: VoidFunction
+  initialValues?: RecursivePartial<T>
+  onConfirm?: (values: T) => void
+}
+
+export interface FormModalRef<T = object> {
+  setFieldsValue: (values: RecursivePartial<T>) => void
+}
+
+const InternalFormModal = <T extends object>(props: FormModalProps<T>, ref: ForwardedRef<FormModalRef<T>>) => {
+  const {
+    width,
+    children,
+    title,
+    open,
+    footer,
+    layout,
+    labelCol,
+    bodyStyle,
+    initialValues,
+    maskClosable,
+    closeFn,
+    afterClose,
+    onConfirm,
+  } = props
+  const id = useId()
+  const [form] = Form.useForm<T>()
+  const formRef = useRef<FormInstance<T>>(null)
+  const isRenderProps = typeof children === 'function'
+  const [confirmLoading, setConfirmLoading] = useState(false)
+
+  useImperativeHandle(ref, () => {
+    return {
+      setFieldsValue(values) {
+        formRef.current?.setFieldsValue(values)
+      },
+    }
+  })
+
+  return (
+    <Modal
+      destroyOnClose
+      bodyStyle={bodyStyle}
+      style={{ textAlign: 'start' }}
+      width={width}
+      open={open}
+      title={title}
+      forceRender={true}
+      getContainer={false}
+      maskClosable={maskClosable}
+      footer={
+        typeof footer === 'object'
+          ? footer
+          : [
+              <Button
+                key="cancel"
+                onClick={() => {
+                  closeFn?.()
+                }}
+              >
+                取消
+              </Button>,
+              <Button form={id} key="submit" type="primary" htmlType="submit" loading={confirmLoading}>
+                确定
+              </Button>,
+            ]
+      }
+      afterClose={() => {
+        afterClose?.()
+        form.resetFields()
+      }}
+      onCancel={closeFn}
+    >
+      <Form
+        form={form}
+        ref={formRef}
+        id={id}
+        autoComplete="off"
+        labelAlign="right"
+        labelWrap={true}
+        layout={layout}
+        initialValues={initialValues}
+        labelCol={
+          labelCol || {
+            flex: !layout || layout === 'horizontal' ? '120px' : '0',
+          }
+        }
+        onFinish={async values => {
+          try {
+            setConfirmLoading(true)
+            await onConfirm?.(values)
+            closeFn?.()
+            form.resetFields()
+          } finally {
+            setConfirmLoading(false)
+          }
+        }}
+      >
+        {isRenderProps ? children({ form, open, closeFn }) : children}
+      </Form>
+    </Modal>
+  )
+}
+
+const FormModal = forwardRef(InternalFormModal) as <T extends object>(
+  props: FormModalProps<T> & { ref?: ForwardedRef<FormModalRef<T>> },
+) => React.ReactElement
+
+export default FormModal

package/src/components/Highlight/index.tsx

@@ -0,0 +1,51 @@
+import type { PropsWithChildren, ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
+const splitByTags = (str: string) => {
+  const regex = /(<[^>]*>)/
+  return str.split(regex).filter(part => part !== '')
+}
+
+function renderToString(node: ReactNode): Promise<string> {
+  const container = document.createElement('div')
+  const root = createRoot(container)
+
+  return new Promise(resolve => {
+    setTimeout(() => {
+      flushSync(() => {
+        root.render(node)
+      })
+      resolve(container.innerHTML)
+    })
+  })
+}
+
+export interface HighlightTextsProps extends PropsWithChildren {
+  texts: Array<string | number>
+}
+
+const Highlight = (props: HighlightTextsProps) => {
+  const { texts, children } = props
+  const [htmlString, setHtmlString] = useState<string>('')
+
+  useEffect(() => {
+    renderToString(children).then(str => {
+      const result = splitByTags(str)
+
+      for (const text of texts) {
+        for (let index = 0; index < result.length; index++) {
+          // TODO: 忽略 HTML tag
+          result[index] = result[index].replace(String(text), `<span style='color: #DC143C;'>${text}</span>`)
+        }
+      }
+
+      setHtmlString(result.join(''))
+    })
+  }, [children, texts])
+
+  return <p dangerouslySetInnerHTML={{ __html: htmlString }}></p>
+}
+
+export default Highlight

package/src/components/PermissionButton/index.tsx

@@ -0,0 +1,36 @@
+import { usePermission } from '@/hooks'
+import type { ButtonProps } from 'antd'
+import { Button, Tooltip } from 'antd'
+import type { FC, PropsWithChildren } from 'react'
+
+export interface PermissionButtonProps extends Omit<ButtonProps, 'disabled'> {
+  code: string
+  showLoading?: boolean
+}
+
+const PermissionButton: FC<PropsWithChildren<PermissionButtonProps>> = props => {
+  const { children, code, showLoading, ...restProps } = props
+  const { accessible, isValidating } = usePermission(code)
+
+  if (isValidating) {
+    return (
+      <Button loading={showLoading} disabled={!showLoading} {...restProps}>
+        {children}
+      </Button>
+    )
+  }
+
+  if (!accessible) {
+    return (
+      <Tooltip defaultOpen={false} title="无权限，请联系管理员进行授权">
+        <Button disabled {...restProps}>
+          {children}
+        </Button>
+      </Tooltip>
+    )
+  }
+
+  return <Button {...restProps}>{children}</Button>
+}
+
+export default PermissionButton

package/src/components/QueryList/index.tsx

@@ -0,0 +1,158 @@
+import { useFetcher, usePermission } from '@/hooks'
+import { useQueryTriggerStore } from '@/stores'
+import type { ListResponse, PaginationParams } from '@/types'
+import type { FormInstance, FormProps } from 'antd'
+import { Form, Result, Spin, Table } from 'antd'
+import type { TableProps } from 'antd/es/table'
+import type { AxiosRequestConfig } from 'axios'
+import type { ReactNode } from 'react'
+import { useCallback, useEffect, useState } from 'react'
+import useSWRMutation from 'swr/mutation'
+import FilterForm from '../FilterForm'
+
+export type QueryListKey = Omit<AxiosRequestConfig, 'data' | 'params'>
+
+export interface QueryListProps<Item, Values>
+  extends Pick<TableProps<Item>, 'columns' | 'rowKey' | 'tableLayout' | 'expandable' | 'rowSelection' | 'bordered'>,
+    Pick<FormProps<Values>, 'initialValues' | 'labelCol'> {
+  // 由于表单的值和分页数据是封装在组件内部的，不便于在组件外部构造 swr key，所以组件内部的 useSWRMutation hook 使用的 key 是排除了 arg 字段的。
+  // 因此 swr 的缓存并未发挥作用，同一个 key 的所有页面共享缓存。
+  swrKey: QueryListKey
+  confirmText?: ReactNode
+  code?: string
+  renderForm?: (form: FormInstance<Values>) => ReactNode
+  // 把表单的值和分页数据转换成请求参数
+  transformArg?: (arg: Values & PaginationParams) => unknown
+}
+
+const QueryList = <Item extends object, Values = NonNullable<unknown>>(props: QueryListProps<Item, Values>) => {
+  const { code, confirmText, labelCol, swrKey, renderForm, transformArg, initialValues, ...tableProps } = props
+  const { accessible, isValidating } = usePermission(code)
+  const [form] = Form.useForm<Values>()
+  const setTrigger = useQueryTriggerStore(state => state.setTrigger)
+
+  const [paginationData, setPaginationData] = useState<PaginationParams>({
+    page: 1,
+    perPage: 10,
+  })
+
+  const fetcher = useFetcher()
+
+  const { data, isMutating, trigger } = useSWRMutation(
+    swrKey,
+    async (
+      key,
+      {
+        arg,
+      }: {
+        arg?: Partial<PaginationParams>
+      },
+    ) => {
+      const newPaginationData = {
+        page: arg?.page ?? paginationData.page ?? 1,
+        perPage: arg?.perPage ?? paginationData.perPage ?? 10,
+      }
+
+      setPaginationData(newPaginationData)
+
+      const values = form.getFieldsValue()
+
+      const fetcherArg = {
+        ...values,
+        ...newPaginationData,
+      }
+
+      return fetcher<ListResponse<Item>>({
+        ...key,
+        // TODO: 兼容 params 与 data
+        params: typeof transformArg === 'function' ? transformArg(fetcherArg) : fetcherArg,
+      })
+    },
+  )
+
+  const onFinish = async () => {
+    await trigger({ page: 1 })
+  }
+
+  const onReset = useCallback(async () => {
+    try {
+      form.resetFields()
+      await form.validateFields()
+      await trigger({ page: 1 })
+    } catch (_) {
+      console.log('表单校验失败')
+    }
+  }, [form, trigger])
+
+  const onPaginationChange = useCallback(
+    async (currentPage: number, currentSize: number) => {
+      await trigger({
+        page: currentPage,
+        perPage: currentSize,
+      })
+    },
+    [trigger],
+  )
+
+  useEffect(() => {
+    setTrigger(swrKey, trigger)
+  }, [swrKey, setTrigger, trigger])
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        await form.validateFields()
+        await trigger()
+      } catch (_) {
+        form.resetFields()
+      }
+    })()
+  }, [form, trigger])
+
+  if (isValidating) {
+    return (
+      <Spin
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 200,
+        }}
+      />
+    )
+  }
+
+  if (!accessible) {
+    return <Result status={403} subTitle="无权限，请联系管理员进行授权" />
+  }
+
+  return (
+    <>
+      <FilterForm<Values>
+        initialValues={initialValues}
+        form={form}
+        labelCol={labelCol}
+        confirmText={confirmText}
+        onFinish={onFinish}
+        onReset={onReset}
+      >
+        {renderForm?.(form)}
+      </FilterForm>
+      <Table
+        {...tableProps}
+        dataSource={data?.List}
+        loading={isMutating}
+        pagination={{
+          showSizeChanger: true,
+          showQuickJumper: true,
+          current: paginationData.page,
+          pageSize: paginationData.perPage,
+          total: data?.Total,
+          onChange: onPaginationChange,
+        }}
+      />
+    </>
+  )
+}
+
+export default QueryList

package/src/components/index.ts

@@ -0,0 +1,27 @@
+import type { DynamicTagsProps } from './DynamicTags'
+import DynamicTags from './DynamicTags'
+import type { FilterFormProps } from './FilterForm'
+import FilterForm from './FilterForm'
+import type { FormModalProps, FormModalRef } from './FormModal'
+import FormModal from './FormModal'
+import type { UseFormModalProps } from './FormModal/hooks'
+import { useFormModal } from './FormModal/hooks'
+import type { HighlightTextsProps } from './Highlight'
+import Highlight from './Highlight'
+import type { PermissionButtonProps } from './PermissionButton'
+import PermissionButton from './PermissionButton'
+import type { QueryListKey, QueryListProps } from './QueryList'
+import QueryList from './QueryList'
+
+export { FormModal, PermissionButton, DynamicTags, QueryList, FilterForm, Highlight, useFormModal }
+export type {
+  DynamicTagsProps,
+  FilterFormProps,
+  UseFormModalProps,
+  FormModalProps,
+  FormModalRef,
+  QueryListProps,
+  QueryListKey,
+  HighlightTextsProps,
+  PermissionButtonProps,
+}

package/src/constants/index.ts

@@ -0,0 +1,3 @@
+export const SSO_URL = 'https://idaas.ifunplus.cn/enduser/api/application/plugin_FunPlus/sso/v1'
+
+export const SECRET = new TextEncoder().encode('cc7e0d44fd473002f1c42167459001140ec6389b7353f8088f4d9a95f2f596f2')