@rainbow-oh/yee-c 0.4.4 → 0.5.0

package/src/Form/interface.ts

@@ -113,7 +113,7 @@ export interface FormInstance<Values = any> {
   /**
    * Submit form
    */
-  submit: () => ValidateMessage[];
+  submit: () => Promise<ValidateMessage[]>;
   /**
    * Get all field values
    */
@@ -140,7 +140,7 @@ export interface FormInstance<Values = any> {
   validateField: (
     name: Name,
     trigger?: 'onChange' | 'onBlur',
-  ) => ValidateMessage[];
+  ) => Promise<ValidateMessage[]>;
   /**
    * Get callback functions
    */
@@ -152,7 +152,10 @@ export interface FormInstance<Values = any> {
   /**
    * Validate fields and get error messages
    */
-  validateFields: (names?: Name[], trigger?: TRIGGER) => ValidateMessage[];
+  validateFields: (
+    names?: Name[],
+    trigger?: TRIGGER,
+  ) => Promise<ValidateMessage[]>;
   /**
    * Initialize form - mainly used to set initial values and callbacks
    */
@@ -233,9 +236,12 @@ export type Rule = {
    */
   message?: string;
   /**
-   * Custom validation function, returns true for pass, false or throw for fail
+   * Custom validation function. Supports sync and async:
+   *  - sync:  return true/undefined to pass, return false or throw to fail
+   *  - async: return a Promise (resolve to pass, reject/throw to fail)
+   * When throwing/rejecting with an Error, its message overrides rule.message.
    */
-  validator?: (value: unknown) => boolean;
+  validator?: (value: unknown) => boolean | void | Promise<boolean | void>;
   /**
    * Validation trigger timing
    */
@@ -354,7 +360,7 @@ export type FormListField<T = any> = {
 };
 
 export type FormListOperation = {
-  add: (defaultValue?: any, insertIndex?: number) => void;
+  add: (defaultValue?: any, insertIndex?: number) => void | Promise<void>;
   remove: (index: number | number[]) => void;
   move: (from: number, to: number) => void;
 };
@@ -403,6 +409,6 @@ export type FieldGroupProps = {
 };
 
 export interface GroupEntity {
-  validate: (force: boolean) => ValidateMessage[];
+  validate: (force: boolean) => Promise<ValidateMessage[]>;
   reset: () => void;
 }

package/src/Form/style/index.less

@@ -56,5 +56,20 @@
         color: var(--yee-error-color);
       }
     }
+
+    // 表单校验态：在此重定义控件读取的 border / box-shadow 变量，
+    // 后代里的 Input / Selector / InputNumber / TextArea 等通过 CSS 变量继承自动变色，
+    // 无需在每个组件里重复 .yee-form-item-error 块，也不存在 specificity / !important 问题。
+    &&-error {
+      --yee-input-border-color: var(--yee-error-color);
+      --yee-input-hover-border-color: var(--yee-error-color-hover);
+      --yee-input-focus-bs-color: var(--yee-error-color-border);
+    }
+
+    &&-warning {
+      --yee-input-border-color: var(--yee-warning-color);
+      --yee-input-hover-border-color: var(--yee-warning-color-hover);
+      --yee-input-focus-bs-color: var(--yee-warning-color-border);
+    }
   }
 }

package/src/Form/utils/validate.ts

@@ -1,5 +1,4 @@
-// true: 校验通过；false校验未通过
-import { Rule } from '../interface';
+import type { Rule } from '../interface';
 
 function isEmpty(v: unknown) {
   return v === undefined || v === null || v === '' ? true : false;
@@ -60,11 +59,15 @@ function verifyRuleOfRegexp(regexp: RegExp, value: unknown) {
   }
 }
 
-/**
- * @returns validated
- * */
-function verifyMain(rule: Rule, value: any): boolean {
-  const { min, max, minLength, maxLength, regexp, validator } = rule;
+export interface ValidateResult {
+  passed: boolean;
+  // Custom message from a thrown/rejected validator; falls back to rule.message upstream
+  message?: string;
+}
+
+// Check the synchronous built-in rules (min/max/minLength/maxLength/regexp).
+function verifySyncRules(rule: Rule, value: unknown): boolean {
+  const { min, max, minLength, maxLength, regexp } = rule;
 
   if (typeof min !== 'undefined' && !verifyRuleOfMin(min, value)) {
     return false;
@@ -87,18 +90,67 @@ function verifyMain(rule: Rule, value: any): boolean {
   if (regexp instanceof RegExp && !verifyRuleOfRegexp(regexp, value)) {
     return false;
   }
-  if (typeof validator === 'function' && !validator(value)) {
-    return false;
-  }
   return true;
 }
 
-function validate(rule: Rule, value: unknown): boolean {
+/**
+ * Run a custom validator, dispatching between sync and async at runtime.
+ *
+ * Supports all of the following shapes (backwards compatible):
+ *  - sync `return true` / `return undefined` → pass
+ *  - sync `return false`                    → fail (use rule.message)
+ *  - sync `throw new Error(msg)`            → fail (use msg)
+ *  - async `return Promise.resolve()`       → pass
+ *  - async `return Promise.resolve(false)`  → fail (use rule.message)
+ *  - async `throw` / `return Promise.reject(new Error(msg))` → fail (use msg)
+ */
+export async function runValidator(
+  validator: NonNullable<Rule['validator']>,
+  value: unknown,
+): Promise<ValidateResult> {
+  try {
+    const res = validator(value);
+    if (res instanceof Promise) {
+      const resolved = await res;
+      if (resolved === false) {
+        return { passed: false };
+      }
+      return { passed: true };
+    }
+    if (res === false) {
+      return { passed: false };
+    }
+    return { passed: true };
+  } catch (e) {
+    return {
+      passed: false,
+      message: e instanceof Error ? e.message : String(e),
+    };
+  }
+}
+
+/**
+ * Validate a single rule against a value.
+ * Returns { passed, message? }. Sync rules short-circuit; the custom validator
+ * is awaited so async validators are supported.
+ */
+async function validate(
+  rule: Rule,
+  value: unknown,
+): Promise<ValidateResult> {
   if (rule.required && isEmpty(value)) {
-    return false;
+    return { passed: false };
+  }
+
+  if (!verifySyncRules(rule, value)) {
+    return { passed: false };
+  }
+
+  if (typeof rule.validator === 'function') {
+    return runValidator(rule.validator, value);
   }
 
-  return verifyMain(rule, value);
+  return { passed: true };
 }
 
 export default validate;

package/src/Input/style/index.less

@@ -110,20 +110,3 @@ input[type='number']::-webkit-outer-spin-button {
 input::placeholder {
   color: var(--yee-placeholder-color);
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:hover {
-      border-color: var(--yee-error-color-hover);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/InputNumber/style/index.less

@@ -185,32 +185,3 @@
     padding-right: 0;
   }
 }
-
-// Form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-
-    &:not(@{pls}-disabled):hover {
-      border-color: var(--yee-error-color);
-    }
-
-    &-focused {
-      box-shadow: 0 0 0 2px var(--yee-input-content-error-focus-bs-color);
-    }
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-
-    &:not(@{pls}-disabled):hover {
-      border-color: var(--yee-warning-color);
-    }
-
-    &-focused {
-      box-shadow: 0 0 0 2px var(--yee-input-content-warning-focus-bs-color);
-    }
-  }
-}

package/src/PickerPanel/interface.ts

@@ -1,4 +1,5 @@
 import { Dayjs } from 'dayjs';
+import type { usePanelConfigs } from './configs/locale-adapter';
 export type PickerType =
   | 'date'
   | 'week'
@@ -18,6 +19,9 @@ export type SemanticType =
 
 export type UnitType = 'day' | 'hour' | 'minute' | 'second';
 
+/** Hour/minute/second granularity used by the time sub-panels. */
+export type TimeUnit = 'hour' | 'minute' | 'second';
+
 interface HeaderProps {
   showPrevIcon?: boolean;
   showNextIcon?: boolean;
@@ -115,13 +119,50 @@ export interface PickerPanelProps extends HeaderProps {
   /**
    * Hover range dates [start date, end date]
    */
-  hoverRange?: Array<Dayjs | null>;
+  hoverRange?: Array<Dayjs | null | undefined>;
   /**
    * Selected range dates [start date, end date]
    */
-  selectedRange?: Array<Dayjs | null>;
+  selectedRange?: Array<Dayjs | null | undefined>;
   /**
    * Disabled date function
    */
   disabledDate?: (current: Dayjs) => boolean;
 }
+
+/**
+ * Locale/config bag produced by `usePanelConfigs`, shared by every panel.
+ */
+export type PanelConfigs = ReturnType<typeof usePanelConfigs>;
+
+/**
+ * The `panelProps` bag shared by all date-picking panels, headers and bodies.
+ *
+ * Standalone (does not extend `PickerPanelProps`) so each panel only declares
+ * the fields it actually reads while still receiving the full bag via
+ * `{...props}` spreads (JSX spreads do not trigger excess-property checks).
+ */
+export interface PanelSharedProps {
+  prefixCls?: string;
+  picker?: PickerType;
+  offset?: { year?: number; month?: number; day?: number };
+  viewDate: Dayjs;
+  selectedDate?: Dayjs;
+  panelConfigs: PanelConfigs;
+  handleMouseChange?: (date: Dayjs | '') => void;
+  onViewDateChange: (date: Dayjs) => void;
+  onPanelChange: (view: PickerType) => void;
+  onSelect?: (date: Dayjs) => void;
+  offsetYear?: number;
+  /** Never set in `panelProps`, so always `undefined` at runtime. */
+  nowDate?: Dayjs;
+  weekStart?: number;
+  showHeader?: boolean;
+  cellRender?: (date: Dayjs, panel: PickerType) => React.ReactNode;
+  prefixColumn?: (currentDate: Dayjs) => React.ReactNode;
+  getRowClassName?: (currentDate: Dayjs) => string;
+  hoverRange?: Array<Dayjs | null | undefined>;
+  selectedRange?: Array<Dayjs | null | undefined>;
+  maxDate?: Dayjs;
+  minDate?: Dayjs;
+}

package/src/PickerPanel/panels/DatePanel/DateBody.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import panelConfig from '../../configs';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
@@ -10,7 +11,7 @@ const DATEPANEL_WEEK_DAY_COUNT = 7;
 
 const weekTitle = panelConfig.shortWeekList;
 
-function DateBody(props: any) {
+function DateBody(props: PanelSharedProps) {
   const {
     prefixCls,
     viewDate,

package/src/PickerPanel/panels/DatePanel/DateHeader.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
 import { useLocale } from '../../../locale';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function DateHeader(props: any) {
+export default function DateHeader(props: PanelSharedProps) {
   const { locale, lang } = useLocale();
   const { datepicker } = locale;
 
@@ -15,7 +16,7 @@ export default function DateHeader(props: any) {
   const month = pickerUtils.getMonth(viewDate);
 
   if (offset?.year) {
-    year = year + parseInt(offset.year);
+    year = year + offset.year;
   }
 
   const onSuperPrevClick = useEvent(() => {

package/src/PickerPanel/panels/DatePanel/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import DateBody from './DateBody';
 import DateHeader from './DateHeader';
 
-export default function DatePanel(props: any) {
+export default function DatePanel(props: PanelSharedProps) {
   const { prefixCls, showHeader = true } = props;
 
   return (

package/src/PickerPanel/panels/DateTimePanel/index.tsx

@@ -1,24 +1,31 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
+import type { PickerType, PanelSharedProps } from '../../interface';
 import DatePanel from '../DatePanel';
 import TimePanel from '../TimePanel';
 
-function DateTimePanel(props: any) {
-  const { prefixCls = 'yee-picker', onSelect, showTime } = props;
+interface DateTimePanelProps extends Omit<PanelSharedProps, 'onSelect'> {
+  onSelect?: (panel: PickerType, date: Dayjs) => void;
+  showTime?: boolean;
+}
+
+function DateTimePanel(props: DateTimePanelProps) {
+  const { onSelect, showTime, ...rest } = props;
+  const prefixCls = rest.prefixCls ?? 'yee-picker';
 
   const handleSelect = (type: string, date: Dayjs) => {
-    onSelect(type, date);
+    onSelect?.(type as PickerType, date);
   };
 
   return (
     <div className={`${prefixCls}-datetime-panel`}>
       <DatePanel
-        {...props}
+        {...rest}
         onSelect={(date: Dayjs) => handleSelect('date', date)}
       />
       {showTime ? (
         <TimePanel
-          {...props}
+          {...rest}
           onSelect={(date: Dayjs) => handleSelect('datetimetime', date)}
           showHeader
         />

package/src/PickerPanel/panels/DecadePanel/DecadeBody.tsx

@@ -2,11 +2,12 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 
-function DecadeBody(props: any) {
-  const { prefixCls, viewDate, offsetYear } = props;
+function DecadeBody(props: PanelSharedProps) {
+  const { prefixCls, viewDate, offsetYear = 0 } = props;
 
   const baseDate = pickerUtils.getBaseDate('decade', viewDate);
 

package/src/PickerPanel/panels/DecadePanel/DecadeHeader.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function DecadeHeader(props: any) {
-  const { viewDate, offsetYear, onViewDateChange } = props;
+export default function DecadeHeader(props: PanelSharedProps) {
+  const { viewDate, offsetYear = 0, onViewDateChange } = props;
   const onSuperPrevClick = useEvent(() => {
     onViewDateChange(pickerUtils.addYear(viewDate, -100));
   });

package/src/PickerPanel/panels/DecadePanel/index.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 
 import DecadeBody from './DecadeBody';
 import DecadeHeader from './DecadeHeader';
 
-export default function DecadePanel(props: any) {
+export default function DecadePanel(props: PanelSharedProps) {
   const { prefixCls, offset } = props;
 
   let offsetYear = 0;
   if (offset?.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
 
   return (

package/src/PickerPanel/panels/Header.tsx

@@ -7,7 +7,20 @@ import {
 import React from 'react';
 import Button from '../../Button';
 
-export default function Header(props: any) {
+export interface PanelHeaderProps {
+  prefixCls?: string;
+  onPrevClick?: () => void;
+  onSuperPrevClick?: () => void;
+  onNextClick?: () => void;
+  onSuperNextClick?: () => void;
+  showPrevIcon?: boolean;
+  showNextIcon?: boolean;
+  showSuperPrevIcon?: boolean;
+  showSuperNextIcon?: boolean;
+  children?: React.ReactNode;
+}
+
+export default function Header(props: PanelHeaderProps) {
   const {
     prefixCls,
     onPrevClick,

package/src/PickerPanel/panels/MonthPanel/MonthBody.tsx

@@ -2,10 +2,11 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 
-function MonthBody(props: any) {
+function MonthBody(props: PanelSharedProps) {
   const {
     prefixCls,
     viewDate,

package/src/PickerPanel/panels/MonthPanel/MonthHeader.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import Header from '../Header';
 
-export default function MonthHeader(props: any) {
-  const { prefixCls, viewDate, offsetYear, onViewDateChange, onPanelChange } =
+export default function MonthHeader(props: PanelSharedProps) {
+  const { prefixCls, viewDate, offsetYear = 0, onViewDateChange, onPanelChange } =
     props;
 
   const year = pickerUtils.getYear(viewDate) + offsetYear;

package/src/PickerPanel/panels/MonthPanel/index.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 
 import MonthBody from './MonthBody';
 import MonthHeader from './MonthHeader';
 
-export default function DecadePanel(props: any) {
+export default function DecadePanel(props: PanelSharedProps) {
   const { prefixCls, offset, showHeader = true } = props;
 
   let offsetYear = 0;
   if (offset?.year) {
-    offsetYear = parseInt(offset.year);
+    offsetYear = offset.year;
   }
 
   return (

package/src/PickerPanel/panels/PanelBody.tsx

@@ -2,8 +2,28 @@ import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import pickerUtils from '../utils/pickerUtils';
+import type { PickerType } from '../interface';
 
-function PanelBody(props: any) {
+export interface PanelBodyProps {
+  prefixCls?: string;
+  picker?: PickerType;
+  rowCount: number;
+  colCount: number;
+  baseDate?: Dayjs | number;
+  onSelect?: (date: Dayjs) => void;
+  handleMouseChange?: (date: Dayjs | '') => void;
+  headerCells?: React.ReactNode;
+  getCellNode?: (currentDate: Dayjs) => React.ReactNode;
+  getCellDate: (baseDate: Dayjs, offset: number) => Dayjs;
+  getCellText: (currentDate: Dayjs) => number | string;
+  getCellTitle?: (currentDate: Dayjs) => string;
+  getCellClassName?: (currentDate: Dayjs) => string;
+  prefixColumn?: (currentDate: Dayjs) => React.ReactNode;
+  getRowClassName?: (currentDate: Dayjs) => string;
+  cellRender?: (date: Dayjs, panel: PickerType) => React.ReactNode;
+}
+
+function PanelBody(props: PanelBodyProps) {
   const {
     prefixCls,
     rowCount,
@@ -39,7 +59,7 @@ function PanelBody(props: any) {
 
     for (let j = 0; j < colCount; j++) {
       const offset = i * colCount + j;
-      const currentDate = getCellDate(baseDate, offset);
+      const currentDate = getCellDate(baseDate as Dayjs, offset);
 
       if (j === 0) {
         rowStartDate = currentDate;
@@ -60,11 +80,13 @@ function PanelBody(props: any) {
             {
               [`${cellPrefixCls}-start`]:
                 getCellText(currentDate) === 1 ||
-                (picker === 'year' && getCellText(currentDate) % 10 === 0),
+                (picker === 'year' &&
+                  Number(getCellText(currentDate)) % 10 === 0),
               [`${cellPrefixCls}-end`]:
                 getCellText(currentDate) ===
                   pickerUtils.getDate(currentDate.endOf('month')) ||
-                (picker === 'year' && getCellText(currentDate) % 10 === 9),
+                (picker === 'year' &&
+                  Number(getCellText(currentDate)) % 10 === 9),
             },
             cls,
           )}
@@ -90,7 +112,7 @@ function PanelBody(props: any) {
               </div>
               {cellRender ? (
                 <div className={`${prefixCls}-cell-content`}>
-                  {cellRender(currentDate, { mode: picker })}
+                  {cellRender(currentDate, picker as PickerType)}
                 </div>
               ) : null}
             </div>

package/src/PickerPanel/panels/QuarterPanel/QuarterBody.tsx

@@ -4,11 +4,12 @@ import React from 'react';
 import PanelBody from '../PanelBody';
 
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 
 const quarter = ['Q1', 'Q2', 'Q3', 'Q4'];
 
-function QuarterBody(props: any) {
+function QuarterBody(props: PanelSharedProps) {
   const { prefixCls, viewDate, nowDate } = props;
 
   const baseDate = pickerUtils.setMonth(viewDate, 0);

package/src/PickerPanel/panels/QuarterPanel/QuarterHeader.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import Button from '../../../Button';
 import useEvent from '../../../hooks/useEvent';
 import Header from '../Header';
+import type { PanelSharedProps } from '../../interface';
 
 import pickerUtils from '../../utils/pickerUtils';
 
-export default function QuarterHeader(props: any) {
+export default function QuarterHeader(props: PanelSharedProps) {
   const { prefixCls, viewDate, onViewDateChange, onPanelChange } = props;
 
   const year = pickerUtils.getYear(viewDate);

package/src/PickerPanel/panels/QuarterPanel/index.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 
 import QuarterBody from './QuarterBody';
 import QuarterHeader from './QuarterHeader';
 
-export default function DecadePanel(props: any) {
+export default function DecadePanel(props: PanelSharedProps) {
   const { prefixCls } = props;
   return (
     <div className={`${prefixCls}-quarter-panel`}>