@rainbow-oh/yee-c 0.4.3 → 0.4.5

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

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

@@ -1,10 +1,12 @@
 import React from 'react';
 
 import { Dayjs } from 'dayjs';
+import type { PickerPanelProps } from '../../interface';
+import type { RangePanelProps } from './interface';
 import PickerPanel from '../../picker-panel';
 import pickerUtils from '../../utils/pickerUtils';
 
-function RangePanel(props: any) {
+function RangePanel(props: RangePanelProps) {
   const {
     prefixCls = 'yee-picker',
     panel = 'start',
@@ -28,12 +30,12 @@ function RangePanel(props: any) {
           picker={picker}
           value={panel === 'start' ? value[0] : value[1]}
           pickerView={pickerUtils.init(pickerView[panel === 'start' ? 0 : 1])}
-          onChange={onChange}
+          onChange={onChange as PickerPanelProps['onChange']}
           onPanelChange={onPanelChange}
           onCellMouse={onCellMouse}
           hoverRange={hoverRange}
           selectedRange={selectedRange}
-          disabledDate={disabledDate}
+          disabledDate={disabledDate as PickerPanelProps['disabledDate']}
           footer={false}
         />
       </div>
@@ -61,12 +63,12 @@ function RangePanel(props: any) {
         picker={picker}
         value={startValue}
         pickerView={startViewDate}
-        onChange={onChange}
-        onPanelChange={(viewDate) => onPanelChange(viewDate, 'start')}
+        onChange={onChange as PickerPanelProps['onChange']}
+        onPanelChange={(viewDate) => onPanelChange?.(viewDate, 'start')}
         onCellMouse={onCellMouse}
         hoverRange={hoverRange}
         selectedRange={selectedRange}
-        disabledDate={disabledDate}
+        disabledDate={disabledDate as PickerPanelProps['disabledDate']}
         footer={false}
         showNextIcon={false}
         showSuperNextIcon={false}
@@ -76,12 +78,12 @@ function RangePanel(props: any) {
         picker={picker}
         value={endValue}
         pickerView={endViewDate}
-        onChange={onChange}
-        onPanelChange={(viewDate) => onPanelChange(viewDate, 'end')}
+        onChange={onChange as PickerPanelProps['onChange']}
+        onPanelChange={(viewDate) => onPanelChange?.(viewDate, 'end')}
         onCellMouse={onCellMouse}
         hoverRange={hoverRange}
         selectedRange={selectedRange}
-        disabledDate={disabledDate}
+        disabledDate={disabledDate as PickerPanelProps['disabledDate']}
         footer={false}
         showPrevIcon={false}
         showSuperPrevIcon={false}

package/src/PickerPanel/panels/RangePanel/interface.ts

@@ -22,17 +22,17 @@ export type PickerType =
 export interface RangePanelProps {
   prefixCls?: string;
   panel?: 'start' | 'end';
-  value?: Array<Dayjs | string | undefined>;
-  viewDate?: string;
+  value: Array<Dayjs | undefined>;
+  pickerView: [Dayjs, Dayjs];
   picker?: PickerType;
   mode?: PickerMode;
   format?: string;
   saveFormat?: string;
   onChange?: (date: Dayjs, panel: string) => void;
-  onPanelChange?: (dates: Dayjs[]) => void;
+  onPanelChange?: (date: Dayjs, type?: 'start' | 'end') => void;
   onCellMouse?: (date: Dayjs | string) => void;
-  hoverRange?: Array<Dayjs | null>;
-  selectedRange?: Array<Dayjs | null>;
+  hoverRange?: Array<Dayjs | null | undefined>;
+  selectedRange?: Array<Dayjs | null | undefined>;
   disabledDate?: (current: Dayjs, type: 'start' | 'end') => boolean;
   showNextIcon?: boolean;
   showSuperNextIcon?: boolean;

package/src/PickerPanel/panels/TimePanel/TimeBody.tsx

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
 import * as React from 'react';
+import type { PanelSharedProps, TimeUnit } from '../../interface';
 import panelConfig from '../../configs';
 import pickerUtils from '../../utils/pickerUtils';
 import TimeColumn from './TimeColumn';
@@ -10,7 +11,7 @@ function getTimeArray(
   length: number,
   step: number,
   viewDate: Dayjs,
-  type: string,
+  type: TimeUnit,
 ): Array<Dayjs> {
   const arr = new Array(length)
     .fill(0)
@@ -25,7 +26,22 @@ function getTimeArray(
   }
 }
 
-function TimeBody(props: any) {
+interface TimeBodyProps extends PanelSharedProps {
+  value?: Dayjs;
+  showTitle?: boolean;
+  showHour?: boolean;
+  showMinute?: boolean;
+  showSecond?: boolean;
+  disabledHours?: boolean;
+  disabledMinutes?: boolean;
+  disabledSeconds?: boolean;
+  is12hour?: boolean;
+  hourStep?: number;
+  minuteStep?: number;
+  secondStep?: number;
+}
+
+function TimeBody(props: TimeBodyProps) {
   const {
     value,
     prefixCls,
@@ -48,10 +64,10 @@ function TimeBody(props: any) {
   const columns: React.ReactNode[] = [];
 
   function addColumnNode(
-    type: string,
-    selectedValue: number,
+    type: TimeUnit,
+    selectedValue: Dayjs | undefined,
     cells: Array<Dayjs>,
-    disabled: boolean,
+    disabled?: boolean,
   ): React.ReactNode {
     return (
       <TimeColumn

package/src/PickerPanel/panels/TimePanel/TimeCell.tsx

@@ -1,7 +1,14 @@
 import clsx from 'clsx';
 import React from 'react';
 
-function TimeCell(props: any) {
+interface TimeCellProps {
+  prefixCls?: string;
+  value: number;
+  onSelect?: (value: number) => void;
+  active?: boolean;
+}
+
+function TimeCell(props: TimeCellProps) {
   const { prefixCls, value, onSelect, active } = props;
 
   const cls = clsx(`${prefixCls}-time-panel-cell`, {
@@ -11,7 +18,7 @@ function TimeCell(props: any) {
   const renderValue = value < 10 ? '0' + value : value;
 
   return (
-    <li className={cls} onClick={() => onSelect(value)}>
+    <li className={cls} onClick={() => onSelect?.(value)}>
       <div className={`${prefixCls}-time-panel-cell-inner`}>{renderValue}</div>
     </li>
   );

package/src/PickerPanel/panels/TimePanel/TimeColumn.tsx

@@ -1,9 +1,22 @@
 import clsx from 'clsx';
 import dayjs, { Dayjs } from 'dayjs';
 import React from 'react';
+import type { TimeUnit } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 
-function TimeColumn(props: any) {
+interface TimeColumnProps {
+  prefixCls?: string;
+  type: TimeUnit;
+  value?: Dayjs;
+  cells: Dayjs[];
+  disabled?: boolean;
+  onSelect?: (date: Dayjs) => void;
+  viewDate?: Dayjs;
+  maxDate?: Dayjs;
+  minDate?: Dayjs;
+}
+
+function TimeColumn(props: TimeColumnProps) {
   const {
     prefixCls,
     type,
@@ -20,7 +33,7 @@ function TimeColumn(props: any) {
   const [selectedCell, setSelectedCell] = React.useState<number>();
 
   React.useLayoutEffect(() => {
-    if (value !== -1 && selectedRef.current) {
+    if (value !== undefined && selectedRef.current) {
       ref.current?.scrollTo({
         top: selectedRef.current?.offsetTop,
         behavior: 'smooth',

package/src/PickerPanel/panels/TimePanel/TimeHeader.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-function TimeHeader(props: any) {
+interface TimeHeaderProps {
+  prefixCls?: string;
+}
+
+function TimeHeader(props: TimeHeaderProps) {
   const { prefixCls } = props;
 
   return (

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

@@ -1,8 +1,17 @@
 import * as React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import TimeBody from './TimeBody';
 import TimeHeader from './TimeHeader';
 
-function TimePanel(props: any) {
+interface TimePanelProps extends PanelSharedProps {
+  format?: string;
+  hourStep?: number;
+  minuteStep?: number;
+  secondStep?: number;
+  showTitle?: boolean;
+}
+
+function TimePanel(props: TimePanelProps) {
   const {
     format = 'HH:mm:ss',
     prefixCls,

package/src/PickerPanel/panels/WeekPanel/WeekBody.tsx

@@ -3,10 +3,11 @@ import { Dayjs } from 'dayjs';
 import * as React from 'react';
 import useEvent from '../../../hooks/useEvent';
 import { useLocale } from '../../../locale';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import PanelBody from '../PanelBody';
 
-function WeekBody(props: any) {
+function WeekBody(props: PanelSharedProps) {
   const { locale } = useLocale();
   const { weekpicker } = locale;
 

package/src/PickerPanel/panels/WeekPanel/WeekHeader.tsx

@@ -1,10 +1,11 @@
 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 WeekHeader(props: any) {
+export default function WeekHeader(props: PanelSharedProps) {
   const { viewDate, onViewDateChange, onPanelChange } = props;
 
   const year = pickerUtils.getYear(viewDate);

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

@@ -1,11 +1,12 @@
 import clsx from 'clsx';
 import { Dayjs } from 'dayjs';
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 import DateBody from '../DatePanel/DateBody';
 import DateHeader from '../DatePanel/DateHeader';
 
-export default function WeekPanel(props: any) {
+export default function WeekPanel(props: PanelSharedProps) {
   const { prefixCls, selectedDate } = props;
 
   const prefixColumn = (currentDate: Dayjs) => {

package/src/PickerPanel/panels/YearPanel/YearBody.tsx

@@ -4,9 +4,10 @@ import * as React from 'react';
 import PanelBody from '../PanelBody';
 
 import useEvent from '../../../hooks/useEvent';
+import type { PanelSharedProps } from '../../interface';
 import pickerUtils from '../../utils/pickerUtils';
 
-function YearBody(props: any) {
+function YearBody(props: PanelSharedProps) {
   const {
     prefixCls,
     viewDate,
@@ -14,7 +15,7 @@ function YearBody(props: any) {
     maxDate,
     minDate,
     nowDate,
-    offsetYear,
+    offsetYear = 0,
     hoverRange = [],
     selectedRange = [],
   } = props;
@@ -34,7 +35,7 @@ function YearBody(props: any) {
 
   const getCellTitle = useEvent((currentDate: Dayjs) => {
     const _year = pickerUtils.getYear(currentDate) + offsetYear;
-    return _year < 1000 ? '0' + _year : _year;
+    return _year < 1000 ? '0' + _year : String(_year);
   });
 
   const getCellClassName = useEvent((currentDate: Dayjs) => {

package/src/PickerPanel/panels/YearPanel/YearHeader.tsx

@@ -2,12 +2,18 @@ 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 YearHeader(props: any) {
-  const { prefixCls, viewDate, onViewDateChange, onPanelChange, offsetYear } =
-    props;
+export default function YearHeader(props: PanelSharedProps) {
+  const {
+    prefixCls,
+    viewDate,
+    onViewDateChange,
+    onPanelChange,
+    offsetYear = 0,
+  } = props;
 
   const viewYear = pickerUtils.getYear(viewDate);
   const startYear = viewYear - (viewYear % 10) + offsetYear;

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

@@ -1,13 +1,14 @@
 import React from 'react';
+import type { PanelSharedProps } from '../../interface';
 import YearBody from './YearBody';
 import YearHeader from './YearHeader';
 
-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/picker-panel.tsx

@@ -76,7 +76,7 @@ const PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
     });
 
     // Panel view switch
-    const handlePanelChange = (newView: 'year' | 'month' | 'date') => {
+    const handlePanelChange = (newView: PickerType) => {
       prevPanelView.current = panelView;
       setPanelView(newView);
     };
@@ -87,8 +87,10 @@ const PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
       onPanelChange?.(newViewDate);
     };
 
-    const handleMouseChange = (date: Dayjs) => {
-      onCellMouse?.(date);
+    // `PanelBody` clears the hover by passing `''`; forward as-is to preserve
+    // the existing runtime behavior.
+    const handleMouseChange = (date: Dayjs | '') => {
+      onCellMouse?.(date as Dayjs);
     };
 
     const handleNowClick = () => {

package/src/PickerPanel/utils/pickerUtils.ts

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import dayjs, { Dayjs, QUnitType } from 'dayjs';
+import dayjs, { Dayjs, OpUnitType, QUnitType } from 'dayjs';
 import buddhistEra from 'dayjs/plugin/buddhistEra';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -26,7 +26,7 @@ type PickerType =
 
 const d = {
   dayjs: dayjs,
-  init: (date?: string, ...rest: any[]) => dayjs(date, ...rest),
+  init: (date?: dayjs.ConfigType, option?: dayjs.OptionType) => dayjs(date, option),
   getNow: () => {
     return d.init(undefined);
   },
@@ -40,7 +40,11 @@ const d = {
   getSecond: (date: Dayjs) => date.second(),
 
   format: (date: Dayjs, format: string) => dayjs(date).format(format),
-  isSame: (date1: Dayjs, date2: Dayjs, type?: PickerType) => {
+  isSame: (
+    date1: Dayjs | undefined,
+    date2: Dayjs | undefined,
+    type?: PickerType,
+  ) => {
     if (!d.isValid(date1) && !d.isValid(date2)) return true;
     return date1 && date2 ? date1.isSame(date2, type as QUnitType) : false;
   },
@@ -56,18 +60,23 @@ const d = {
   addDate: (date: Dayjs, offset: number) => date?.add(offset, 'day'),
   isAfter: (
     date1: Dayjs,
-    date2: Dayjs,
+    date2: Dayjs | undefined,
     type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month',
   ) => (date2 ? date1.isAfter(date2, type) : false),
   isBefore: (
     date1: Dayjs,
-    date2: Dayjs,
+    date2: Dayjs | undefined,
     type?: 'day' | 'hour' | 'minute' | 'second' | 'year' | 'month',
   ) => (date2 ? date1.isBefore(date2, type) : false),
-  isValid: (date: Dayjs, format?: string, strict?: boolean) =>
+  isValid: (date: Dayjs | undefined, format?: string, strict?: boolean) =>
     dayjs(date, format, strict).isValid(),
-  isBetween: (date: Dayjs, start: Dayjs, end: Dayjs, ...args: any[]) =>
-    date && start && end ? date.isBetween(start, end, ...args) : false,
+  isBetween: (
+    date: Dayjs,
+    start: Dayjs,
+    end: Dayjs,
+    unit?: OpUnitType,
+    nulls?: '()' | '[]' | '[)' | '(]',
+  ) => (date && start && end ? date.isBetween(start, end, unit, nulls) : false),
 
   getCellClassName: ({
     date,

package/src/Popover/style/index.less

@@ -6,6 +6,7 @@
   color: var(--yee-color-text);
   background-color: var(--yee-popover-bg-color);
   border-radius: var(--yee-popover-border-radius);
+  overflow: hidden;
 
   &-header {
     margin-bottom: var(--yee-popover-header-margin-bottom);