react-toolkits 0.1.0 → 0.1.2

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "react-toolkits",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "sideEffects": [
     "**/*.css"
   ],
   "module": "./dist/index.esm.js",
   "typings": "./dist/index.d.mts",
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "dist/"
+  ],
   "exports": {
     ".": "./dist/index.esm.js",
     "./style.css": "./dist/index.css"
@@ -30,7 +35,6 @@
     "dayjs": "^1.11.9",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "react-router-dom": "^6.14.2",
     "swr": "^2.2.0",
     "zustand": "^4.3.9"
   },
@@ -44,17 +48,19 @@
     "prettier": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "tailwindcss": "^3.3.3",
     "ts-essentials": "^9.3.2",
     "tsup": "^7.1.0",
     "typescript": "^5.1.6",
-    "@flow97/eslint-config-mono": "0.0.2",
     "tailwind-config": "0.0.1",
-    "tsconfig": "0.0.1"
+    "tsconfig": "0.0.1",
+    "@flow97/eslint-config-mono": "0.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2"
   },
   "scripts": {
     "build": "tsup",

package/.eslintignore

@@ -1,2 +0,0 @@
-dist
-public

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [require.resolve('@flow97/eslint-config-mono/react')],
-}

package/.turbo/turbo-build.log

@@ -1,20 +0,0 @@
-
-> react-toolkits@0.1.0 build /home/runner/work/everythingflow/everythingflow/packages/react-toolkits
-> tsup
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v7.1.0
-CLI Using tsup config: /home/runner/work/everythingflow/everythingflow/packages/react-toolkits/tsup.config.ts
-CLI Target: es6
-CLI Cleaning output folder
-ESM Build start
-DTS Build start
-ESM dist/512_orange_nobackground-L6MFCL6M.png 9.49 KB
-ESM dist/index.css                            4.74 KB
-ESM dist/index.css.map                        8.08 KB
-ESM dist/index.esm.js                         139.24 KB
-ESM dist/index.esm.js.map                     188.23 KB
-ESM ⚡️ Build success in 1656ms
-DTS ⚡️ Build success in 7161ms
-DTS dist/index.d.mts 8.72 KB

package/postcss.config.js

@@ -1,9 +0,0 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/src/components/DynamicTags/index.tsx

@@ -1,160 +0,0 @@
-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

@@ -1,63 +0,0 @@
-import type { FormInstance, FormProps } from 'antd'
-import { Button, Col, Form, Row, Space, theme } from 'antd'
-import type { PropsWithChildren } from 'react'
-import * as React 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

@@ -1,47 +0,0 @@
-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'>,
-  {
-    content: FormModalProps<T>['children']
-  }
->
-
-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 ref={formRef} {...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

@@ -1,137 +0,0 @@
-import type { FormInstance, FormProps, ModalProps } from 'antd'
-import { Button, Form, Modal } from 'antd'
-import type { ForwardedRef, ReactElement } 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]
-    }
-  : unknown
-
-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) => Promise<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>> },
-) => ReactElement
-
-export default FormModal

package/src/components/GameSelect/index.tsx

@@ -1,82 +0,0 @@
-import { Select, Space, Typography } from 'antd'
-import { useCallback, useMemo } from 'react'
-import { useTokenStore } from '@/stores'
-import useSWRImmutable from 'swr/immutable'
-import { useReactToolkitsContext } from '@/components'
-
-const { Text } = Typography
-
-export interface GameType {
-  id: string
-  name: string
-  area: 'cn' | 'global'
-  Ctime: string
-}
-
-function useGames() {
-  const { isPermissionV2, isGlobalNS } = useReactToolkitsContext(state => state)
-  const user = useTokenStore(state => state.getUser())
-
-  const { data, isLoading } = useSWRImmutable<GameType[]>(
-    isPermissionV2 && !isGlobalNS && user
-      ? {
-          method: 'GET',
-          url: '/api/usystem/game/all',
-          params: { user: user.authorityId },
-          headers: {
-            'App-ID': 'global',
-          },
-        }
-      : null,
-  )
-
-  return {
-    games: data,
-    isLoading,
-  }
-}
-
-const GameSelect = () => {
-  const { game, setGame, isGlobalNS, isPermissionV2 } = useReactToolkitsContext(state => state)
-  const { games, isLoading } = useGames()
-
-  const options = useMemo(
-    () =>
-      games?.map(item => ({
-        label: item.name,
-        value: item.id,
-      })),
-    [games],
-  )
-
-  const onGameChange = useCallback(
-    (id: string) => {
-      const matchGame = (games ?? []).find(item => item.id === id) ?? null
-      setGame(matchGame)
-      // queryClient.clear()
-    },
-    [games, setGame],
-  )
-
-  if (!isPermissionV2 || isGlobalNS) {
-    return null
-  }
-
-  return (
-    <Space>
-      <Text>当前游戏</Text>
-      <Select
-        showSearch
-        optionFilterProp="label"
-        value={game?.id}
-        placeholder="请选择游戏"
-        loading={isLoading}
-        style={{ width: '200px' }}
-        options={options}
-        onChange={onGameChange}
-      />
-    </Space>
-  )
-}
-
-export default GameSelect

package/src/components/Highlight/index.tsx

@@ -1,51 +0,0 @@
-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