@wwog/react 1.2.5 → 1.2.7

package/src/hooks/useControlled.ts

@@ -1,36 +1,36 @@
-import { useCallback, useMemo, useState, type Dispatch } from "react";
+import {type Dispatch, useCallback, useMemo, useState} from 'react'
 
-const DEFAULT_TRIGGER = "onChange";
-const DEFAULT_VALUE_PROP_NAME = "value";
+const DEFAULT_TRIGGER = 'onChange'
+const DEFAULT_VALUE_PROP_NAME = 'value'
 
 export interface UseControlledOptions<T> {
   /**
    * @description - 非受控模式下的默认值,会被受控模式下的值覆盖
    * @description_en - Default value in uncontrolled mode, will be overridden by the value in controlled mode
    */
-  defaultValue: T;
+  defaultValue: T
   /**
    * @description - 值变更前的回调函数，可用于拦截或修改新值
    * @description_en - Callback function before the value changes, can be used to intercept or modify the new value
    */
-  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void;
+  onBeforeChange?: (newValue: T, currentValue: T) => boolean | void
   /**
    * @description - 当值发生变化时触发的回调函数名
    * @description_en - Callback function name triggered when the value changes
    * @default - onChange
    */
-  trigger?: string;
+  trigger?: string
   /**
    * @description - 值的属性名
    * @description_en - Property name of the value
    * @default - value
    */
-  valuePropName?: string;
-  props: Record<string, any>;
+  valuePropName?: string
+  props: Record<string, any>
 }
 
 export function useControlled<T>(
-  options: UseControlledOptions<T>
+  options: UseControlledOptions<T>,
 ): [T, Dispatch<React.SetStateAction<T>>] {
   const {
     defaultValue,
@@ -38,36 +38,31 @@ export function useControlled<T>(
     trigger = DEFAULT_TRIGGER,
     valuePropName = DEFAULT_VALUE_PROP_NAME,
     props,
-  } = options;
-  const isControlled = Object.prototype.hasOwnProperty.call(
-    props,
-    valuePropName
-  );
-  const [internalValue, setInternalValue] = useState<T>(defaultValue);
-  const value = isControlled ? props[valuePropName] : internalValue;
-  const onChange = useMemo(() => props[trigger], [props, trigger]);
+  } = options
+  const isControlled = Object.prototype.hasOwnProperty.call(props, valuePropName)
+  const [internalValue, setInternalValue] = useState<T>(defaultValue)
+  const value = isControlled ? props[valuePropName] : internalValue
+  const onChange = useMemo(() => props[trigger], [props, trigger])
 
   const setValue = useCallback<Dispatch<React.SetStateAction<T>>>(
     (newValue) => {
       const resolvedValue =
-        typeof newValue === "function"
-          ? (newValue as (prev: T) => T)(value)
-          : newValue;
+        typeof newValue === 'function' ? (newValue as (prev: T) => T)(value) : newValue
       if (onBeforeChange) {
-        const shouldProceed = onBeforeChange(resolvedValue, value);
+        const shouldProceed = onBeforeChange(resolvedValue, value)
         if (shouldProceed === false) {
-          return;
+          return
         }
       }
       if (!isControlled) {
-        setInternalValue(resolvedValue);
+        setInternalValue(resolvedValue)
       }
       if (onChange) {
-        onChange(resolvedValue);
+        onChange(resolvedValue)
       }
     },
-    [isControlled, onBeforeChange, trigger, value, onChange]
-  );
+    [isControlled, onBeforeChange, value, onChange],
+  )
 
-  return [value, setValue];
+  return [value, setValue]
 }

package/src/index.ts

@@ -1,5 +1,9 @@
-export * from "./components/ProcessControl";
-export * from "./components/Sundry";
-export * from "./components/Struct";
-export * from "./utils";
-export * from "./hooks";
+export * from './components/ProcessControl'
+export * from './components/Sundry'
+export * from './components/Struct'
+
+export * from './hooks'
+
+export * from './utils/sundry'
+export * from './utils/cx'
+export * from './utils/reactUtils'

package/src/utils/cx.test.ts

@@ -0,0 +1,33 @@
+import {describe, expect, it} from 'vitest'
+import {cx} from './cx'
+
+describe('cx', () => {
+  it('应该正确合并字符串类名', () => {
+    expect(cx('foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', 'bar', 'baz')).toBe('foo bar baz')
+  })
+
+  it('应该过滤掉 falsy 值', () => {
+    expect(cx('foo', null, 'bar', undefined, false)).toBe('foo bar')
+  })
+
+  it('应该正确处理数组', () => {
+    expect(cx(['foo', 'bar'])).toBe('foo bar')
+    expect(cx('baz', ['foo', 'bar'])).toBe('baz foo bar')
+  })
+
+  it('应该正确处理对象', () => {
+    expect(cx({foo: true, bar: false})).toBe('foo')
+    expect(cx({foo: true, bar: true})).toBe('foo bar')
+  })
+
+  it('应该正确处理混合输入', () => {
+    expect(cx('foo', ['bar', 'baz'], {qux: true, quux: false})).toBe('foo bar baz qux')
+  })
+
+  it('应该去除重复的类名', () => {
+    expect(cx('foo', 'foo', 'bar')).toBe('foo bar')
+    expect(cx('foo', ['foo', 'bar'])).toBe('foo bar')
+    expect(cx('foo', {foo: true})).toBe('foo')
+  })
+})

package/src/utils/cx.ts

@@ -0,0 +1,25 @@
+export type CxInput = string | string[] | Record<string, boolean> | undefined | null | false
+
+export function cx(...args: CxInput[]): string {
+  const classes = new Set<string>()
+
+  for (const arg of args) {
+    if (!arg) {
+      continue
+    }
+
+    if (typeof arg === 'string') {
+      classes.add(arg)
+    } else if (Array.isArray(arg)) {
+      arg.forEach((item) => classes.add(item))
+    } else if (typeof arg === 'object') {
+      for (const [key, value] of Object.entries(arg)) {
+        if (value) {
+          classes.add(key)
+        }
+      }
+    }
+  }
+
+  return Array.from(classes).join(' ')
+}

package/src/utils/reactUtils.ts

@@ -0,0 +1,22 @@
+import type React from 'react'
+/**
+ * @description 性能优化，替代 React.Children.forEach, 回调可以返回 false 来中断循环
+ * @description_en Replace React.Children.forEach, the callback can return false to interrupt the loop
+ */
+export function childrenLoop(
+  children: React.ReactNode | undefined,
+  callback: (child: React.ReactNode, index: number) => boolean | void,
+): void {
+  if (children === undefined) return
+  let index = 0
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const shouldContinue = callback(child, index++)
+      if (shouldContinue === false) {
+        break
+      }
+    }
+  } else {
+    callback(children, index)
+  }
+}

package/src/utils/sundry.test.ts

@@ -0,0 +1,130 @@
+import {describe, expect, it} from 'vitest'
+import {Counter, formatDate} from './sundry'
+
+describe('formatDate', () => {
+  // 使用一个固定的日期来测试，以避免时间差异导致的测试失败
+  // 2023-04-15 14:30:45.678 星期六
+  const testDate = new Date(2023, 3, 15, 14, 30, 45, 678)
+
+  it('应该正确格式化年份', () => {
+    expect(formatDate('YY', testDate)).toBe('23')
+    expect(formatDate('YYYY', testDate)).toBe('2023')
+  })
+
+  it('应该正确格式化月份', () => {
+    expect(formatDate('M', testDate)).toBe('4')
+    expect(formatDate('MM', testDate)).toBe('04')
+    expect(formatDate('MMM', testDate)).toBe('Apr')
+    expect(formatDate('MMMM', testDate)).toBe('April')
+  })
+
+  it('应该正确格式化日期', () => {
+    expect(formatDate('D', testDate)).toBe('15')
+    expect(formatDate('DD', testDate)).toBe('15')
+  })
+
+  it('应该正确格式化星期', () => {
+    expect(formatDate('d', testDate)).toBe('6')
+    expect(formatDate('dd', testDate)).toBe('Sat')
+    expect(formatDate('ddd', testDate)).toBe('Sat')
+    expect(formatDate('dddd', testDate)).toBe('Saturday')
+  })
+
+  it('应该正确格式化小时', () => {
+    expect(formatDate('H', testDate)).toBe('14')
+    expect(formatDate('HH', testDate)).toBe('14')
+    expect(formatDate('h', testDate)).toBe('2')
+    expect(formatDate('hh', testDate)).toBe('02')
+  })
+
+  it('应该正确格式化分钟和秒', () => {
+    expect(formatDate('m', testDate)).toBe('30')
+    expect(formatDate('mm', testDate)).toBe('30')
+    expect(formatDate('s', testDate)).toBe('45')
+    expect(formatDate('ss', testDate)).toBe('45')
+  })
+
+  it('应该正确格式化毫秒', () => {
+    expect(formatDate('SSS', testDate)).toBe('678')
+  })
+
+  it('应该正确格式化上午/下午', () => {
+    expect(formatDate('A', testDate)).toBe('PM')
+    expect(formatDate('a', testDate)).toBe('pm')
+
+    const morningDate = new Date(2023, 3, 15, 9, 30, 45, 678)
+    expect(formatDate('A', morningDate)).toBe('AM')
+    expect(formatDate('a', morningDate)).toBe('am')
+  })
+
+  it('应该正确组合多种格式', () => {
+    expect(formatDate('YYYY-MM-DD', testDate)).toBe('2023-04-15')
+    expect(formatDate('YYYY/MM/DD HH:mm:ss', testDate)).toBe('2023/04/15 14:30:45')
+    expect(formatDate('YYYY年MM月DD日 HH时mm分ss秒', testDate)).toBe('2023年04月15日 14时30分45秒')
+    expect(formatDate('YY-MM-DD hh:mm:ss A', testDate)).toBe('23-04-15 02:30:45 PM')
+  })
+
+  it('当不传入日期时应该使用当前日期', () => {
+    // 由于测试时间不确定，这里只测试格式是否正确，不测试具体的值
+    const result = formatDate('YYYY-MM-DD')
+    expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/)
+  })
+})
+
+describe('Counter', () => {
+  it('应该从0开始计数', () => {
+    const counter = new Counter()
+    expect(counter.count).toBe(0)
+  })
+
+  it('next() 方法应该返回当前计数并递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.count).toBe(1)
+    expect(counter.next()).toBe(1)
+    expect(counter.count).toBe(2)
+  })
+
+  it('连续调用 next() 应该正确递增', () => {
+    const counter = new Counter()
+    expect(counter.next()).toBe(0)
+    expect(counter.next()).toBe(1)
+    expect(counter.next()).toBe(2)
+    expect(counter.next()).toBe(3)
+    expect(counter.count).toBe(4)
+  })
+})
+
+/* describe("cx", () => {
+  it("应该正确合并字符串类名", () => {
+    expect(cx("foo", "bar")).toBe("foo bar");
+    expect(cx("foo", "bar", "baz")).toBe("foo bar baz");
+  });
+
+  it("应该过滤掉 falsy 值", () => {
+    expect(cx("foo", null, "bar", undefined, false)).toBe("foo bar");
+  });
+
+  it("应该正确处理数组", () => {
+    expect(cx(["foo", "bar"])).toBe("foo bar");
+    expect(cx("baz", ["foo", "bar"])).toBe("baz foo bar");
+  });
+
+  it("应该正确处理对象", () => {
+    expect(cx({ foo: true, bar: false })).toBe("foo");
+    expect(cx({ foo: true, bar: true })).toBe("foo bar");
+  });
+
+  it("应该正确处理混合输入", () => {
+    expect(cx("foo", ["bar", "baz"], { qux: true, quux: false })).toBe(
+      "foo bar baz qux"
+    );
+  });
+
+  it("应该去除重复的类名", () => {
+    expect(cx("foo", "foo", "bar")).toBe("foo bar");
+    expect(cx("foo", ["foo", "bar"])).toBe("foo bar");
+    expect(cx("foo", { foo: true })).toBe("foo");
+  });
+});
+ */

package/src/utils/sundry.ts

@@ -0,0 +1,130 @@
+/**
+ * @param schema
+ * @example
+ * YY | 18 | Two-digit year
+ * YYYY | 2018 | Four-digit year
+ * M | 1-12 | The month, beginning at 1
+ * MM | 01-12 | The month, 2-digits
+ * MMM | Jan-Dec | The abbreviated month name
+ * MMMM | January-December | The full month name
+ * D | 1-31 | The day of the month
+ * DD | 01-31 | The day of the month, 2-digits
+ * d | 0-6 | The day of the week, with Sunday as 0
+ * dd | Su-Sa | The min name of the day of the week
+ * ddd | Sun-Sat | The short name of the day of the week
+ * dddd | Sunday-Saturday | The name of the day of the week
+ * H | 0-23 | The hour
+ * HH | 00-23 | The hour, 2-digits
+ * h | 1-12 | The hour, 12-hour clock
+ * hh | 01-12 | The hour, 12-hour clock, 2-digits
+ * m | 0-59 | The minute
+ * mm | 00-59 | The minute, 2-digits
+ * s | 0-59 | The second
+ * ss | 00-59 | The second, 2-digits
+ * SSS | 000-999 | The millisecond, 3-digits
+ * Z | +05:00 | The offset from UTC, ±HH:mm
+ * ZZ | +0500 | The offset from UTC, ±HHmm
+ * A | AM | PM
+ * a | am | pm
+ */
+export function formatDate(schema: string, date?: Date): string {
+  const d = date || new Date()
+  const year = d.getFullYear()
+  const month = d.getMonth() + 1
+  const day = d.getDate()
+  const hour = d.getHours()
+  const minute = d.getMinutes()
+  const second = d.getSeconds()
+  const millisecond = d.getMilliseconds()
+  const week = d.getDay()
+  const weekName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+  const weekFullName = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ]
+  const monthName = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ]
+  const monthFullName = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ]
+  // 直接使用 week 索引，不进行转换，因为 getDay() 已经返回了正确的星期索引 (0-6)
+  const weekFull = weekFullName[week]!
+  const weekShort = weekName[week]!
+  const monthIndex = month - 1
+  const monthFull = monthFullName[monthIndex]!
+  const monthShort = monthName[monthIndex]!
+  const map: Record<string, string> = {
+    YY: year.toString().slice(2),
+    YYYY: year.toString(),
+    M: month.toString(),
+    MM: month.toString().padStart(2, '0'),
+    MMM: monthShort,
+    MMMM: monthFull,
+    D: day.toString(),
+    DD: day.toString().padStart(2, '0'),
+    d: week.toString(),
+    dd: weekShort,
+    ddd: weekShort,
+    dddd: weekFull,
+    H: hour.toString(),
+    HH: hour.toString().padStart(2, '0'),
+    h: (hour % 12).toString(),
+    hh: (hour % 12).toString().padStart(2, '0'),
+    m: minute.toString(),
+    mm: minute.toString().padStart(2, '0'),
+    s: second.toString(),
+    ss: second.toString().padStart(2, '0'),
+    SSS: millisecond.toString().padStart(3, '0'),
+    Z: '+08:00',
+    ZZ: '+0800',
+    A: hour < 12 ? 'AM' : 'PM',
+    a: hour < 12 ? 'am' : 'pm',
+  }
+
+  return schema.replace(
+    /YYYY|YY|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|m{1,2}|s{1,2}|SSS|Z{1,2}|A|a/g,
+    (match) => {
+      return map[match]!
+    },
+  )
+}
+
+export class Counter {
+  count = 0
+
+  /**
+   * @description 获取下一个计数值,不考虑越界。
+   * @description_en Get the next count value, without considering overflow.
+   */
+  next() {
+    return this.count++
+  }
+}

package/src/components/Sundry/ClassName.tsx

@@ -1,86 +0,0 @@
-import React, {
-  cloneElement,
-  FC,
-  Fragment,
-  isValidElement,
-  useEffect,
-  type HTMLElementType,
-} from "react";
-import { cx, type CxInput } from "../../utils";
-
-export interface ClassNameProps {
-  className?: {
-    base?: CxInput;
-    hover?: CxInput;
-    active?: CxInput;
-    focus?: CxInput;
-    disabled?: CxInput;
-    [key: string]: CxInput;
-  };
-  /**
-   * @description 传入容器标签名.是否生成包含所有 `className` 的 `wrapper`, 默认 false, 传递 `true` 为 `div。`
-   * @description_en Whether to generate a `wrapper` containing all `className`, default is false, and pass the container tag name, if `true` will be `div`.
-   */
-  asWrapper?: boolean | HTMLElementType;
-  children?: React.ReactNode;
-}
-
-/**
- * @description 用于将 `className` 分类编写的组件，内置了类似`clsx`的功能,并且去除重复的 className。
- * @description_en A component for `className` classification, built-in similar to `clsx` functionality, and removes duplicate className.
- * @component
- * @example
- * ```tsx
- * <ClassName className={{ base: "p-2 bg-red", hover: ["hover:bg-blue", { "hover:text-white": true }] }}>
- *   <button>Click me</button>
- * </ClassName>
- * ```
- *
- * @example
- * ```tsx
- * <ClassName
- *   className={{
- *     base: ["p-2", { "bg-red": condition }],
- *     hover: { "hover:bg-blue": true },
- *   }}
- *   asWrapper="span"
- * >
- *   <button>Click me</button>
- * </ClassName>
- * ```
- */
-export const ClassName: FC<ClassNameProps> = (props) => {
-  const { className, children, asWrapper } = props;
-
-  useEffect(() => {
-    if (isValidElement(children) === false) {
-      console.warn(
-        "<ClassName>: children is not a valid React element. Please check your code."
-      );
-    }
-  }, [children]);
-
-  if (!children) {
-    return null;
-  }
-
-  if (!className) {
-    return <Fragment>{children}</Fragment>;
-  }
-
-  const generatedCls = cx(...Object.values(className));
-
-  if (asWrapper) {
-    const Wrapper = typeof asWrapper === "string" ? asWrapper : "div";
-    return <Wrapper className={generatedCls}>{children}</Wrapper>;
-  }
-
-  if (isValidElement(children)) {
-    return cloneElement(children, {
-      //@ts-expect-error type error
-      className: cx(children.props.className, generatedCls),
-    } as any);
-  }
-
-  return <Fragment>{children}</Fragment>;
-};