@rainbow-oh/yee-c 0.4.4 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Carousel/carousel.tsx

@@ -16,13 +16,21 @@ import { GlobalContext } from '../Config-Provider';
 import useElementSize from '../hooks/useElementSize';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import Item from './carousel-item';
-import type { CarouselProps } from './interface';
+import type {
+  CarouselContextProps,
+  CarouselItemProps,
+  CarouselProps,
+} from './interface';
 
 import './style/index.less';
 
 const DEFAULT_ANIMATION_DURATION = 500;
 
-export const CarouselCtx = React.createContext({} as any);
+export const CarouselCtx = React.createContext<CarouselContextProps>({
+  prefixCls: 'yee-carousel',
+  effect: 'scrollx',
+  current: 1,
+});
 
 const Carousel = React.forwardRef(
   (baseprops: CarouselProps, ref: React.Ref<HTMLDivElement>) => {
@@ -249,7 +257,10 @@ const Carousel = React.forwardRef(
 
     const renderFadeChilds = () => {
       return React.Children.map(children, (child, index) => {
-        return React.cloneElement(child as any, { index });
+        return React.cloneElement(
+          child as React.ReactElement<CarouselItemProps>,
+          { index },
+        );
       });
     };
 

package/src/Carousel/interface.ts

@@ -1,5 +1,11 @@
 export type SemanticDOM = 'dot' | 'prev' | 'next';
 
+export interface CarouselContextProps {
+  prefixCls: string;
+  effect: 'fade' | 'scrollx';
+  current: number;
+}
+
 export interface CarouselItemProps {
   index: number;
   style?: React.CSSProperties;

package/src/Cascader/cascader.tsx

@@ -65,7 +65,9 @@ const Cascader = (baseprops: CascaderProps) => {
 
   // Status variables for internal use
   const [columns, setColumns] = useState<Array<FlattenOption[]>>([]);
-  const [expandedPath, setExpandedPath] = useState<Array<any>>([]);
+  const [expandedPath, setExpandedPath] = useState<
+    Array<{ key: string; label: string }>
+  >([]);
   const [searchValue, setSearchValue] = useState(''); // Input field input
   // NOTE: popupVisible uses ref instead of state to avoid triggering re-renders
   // This is intentional - it's only used for side effects tracking, not for rendering

package/src/Cascader/column.tsx

@@ -13,7 +13,7 @@ const Column = (props: ColumnProps) => {
   return (
     <ul className={`${prefixCls}-menu`} role="menu">
       {Array.isArray(data) &&
-        data.map((item: any, idx: number) => {
+        data.map((item, idx: number) => {
           return (
             <Node
               {...item}

package/src/Drawer/style/index.less

@@ -37,6 +37,10 @@
     padding: var(--yee-drawer-header-padding);
   }
 
+  &-title {
+    font-weight: var(--yee-drawer-title-font-weight);
+  }
+
   &-body {
     flex: 1;
     padding: var(--yee-drawer-body-padding);

package/src/Dropdown/dropdown.tsx

@@ -56,7 +56,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
     <Trigger
       {...rest}
       arrow={arrow}
-      popup={renderPopup() as any}
+      popup={renderPopup() as React.ReactElement}
       placement={placement}
       popupClassName={`${prefixCls}-popup`}
       open={mergedOpen}

package/src/FloatButton/float-button.tsx

@@ -8,8 +8,8 @@ import { FloatButtonGroupCtx } from './float-button-group';
 import type { FloatButtonProps } from './interface';
 import './style/index.less';
 
-const FloatButton = React.forwardRef(
-  (baseprops: FloatButtonProps, ref: any) => {
+const FloatButton = React.forwardRef<HTMLButtonElement, FloatButtonProps>(
+  (baseprops, ref) => {
     const { floatbutton } = useContext(GlobalContext);
     const props = mergeContextToProps(baseprops, floatbutton);
     const {
@@ -26,7 +26,9 @@ const FloatButton = React.forwardRef(
       ...rest
     } = props;
 
-    const componentRef = ref || React.createRef();
+    const componentRef =
+      (ref as React.RefObject<HTMLButtonElement | null>) ||
+      React.createRef<HTMLButtonElement>();
 
     const onMove = (pos: { x: number; y: number }) => {
       // Check if element exists before operating

package/src/Form/demo/basic.tsx

@@ -64,7 +64,7 @@ export default () => {
           </Form.Field>
         </Grid.Item>
         <Grid.Item>
-          <Form.Field name="gender" label="Gender" initialValue="male">
+          <Form.Field name="gender" label="Gender" initialValue="male" required>
             <Select
               options={[
                 { label: 'male', value: 'male' },
@@ -76,7 +76,7 @@ export default () => {
         </Grid.Item>
 
         <Grid.Item>
-          <Form.Field name="birthday" label="Birthday">
+          <Form.Field name="birthday" label="Birthday" required>
             <DatePicker />
           </Form.Field>
         </Grid.Item>

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/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`}>