@rainbow-oh/yee-c 0.4.4 → 0.4.5

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/Select/style/index.less

@@ -41,16 +41,3 @@
     padding: var(--yee-select-option-padding);
   }
 }
-
-// form error status
-.yee-form-item-error {
-  @{pls} {
-    border-color: var(--yee-error-color);
-  }
-}
-
-.yee-form-item-warning {
-  @{pls} {
-    border-color: var(--yee-warning-color);
-  }
-}

package/src/Selector/style/index.less

@@ -5,8 +5,7 @@
   box-sizing: border-box;
   width: 100%;
   padding: var(--yee-selector-padding);
-  border: var(--yee-selector-border-width) solid
-    var(--yee-selector-border-color);
+  border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-selector-border-radius);
 
   &-small {
@@ -145,7 +144,7 @@
 
   &:not(@{pls}-disabled) {
     &:hover {
-      border-color: var(--yee-selector-hover-border-color);
+      border-color: var(--yee-input-hover-border-color);
     }
   }
 
@@ -206,137 +205,3 @@
     }
   }
 }
-
-// .yee-tags-searchable {
-//   cursor: text;
-
-//   .yee-tags-input-wrapper {
-//     width: 100%;
-//     padding: 0;
-//     border: none;
-//     outline: none;
-
-//     &:focus {
-//       border: none;
-//       box-shadow: none;
-//     }
-//   }
-
-//   .yee-tags-icon {
-//     width: auto;
-//   }
-// }
-
-// .yee-tags-single-mode {
-//   height: var(--yee-tags-height);
-
-//   .yee-tags-input-container {
-//     position: absolute;
-//     z-index: -1;
-//     width: 100%;
-//     font-size: var(--yee-tags-input-font-size);
-//     line-height: var(--yee-tags-input-line-height);
-
-//     input {
-//       width: 100%;
-//     }
-//   }
-
-//   &.yee-tags-searchable {
-//     .yee-tags-single-option {
-//       width: 100%;
-//     }
-
-//     .yee-tags-container {
-//       &:focus-within,
-//       &:focus {
-//         .yee-tags-input-container {
-//           z-index: 1;
-//           opacity: var(--yee-tags-input-focus-opacity);
-
-//           &.has-value {
-//             opacity: 1;
-
-//             + .yee-tags-single-option {
-//               display: none;
-//             }
-//           }
-//         }
-
-//         .yee-tags-single-option {
-//           opacity: var(--yee-tags-single-option-focus-opacity);
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .yee-tags-multi-mode {
-//   height: auto;
-//   min-height: var(--yee-tags-multi-min-height);
-
-//   &.yee-tags-searchable {
-//     .yee-tag {
-//       max-width: var(--yee-tags-multi-tag-max-width);
-//       height: var(--yee-tags-multi-tag-height);
-//     }
-//   }
-
-//   .yee-tags-container {
-//     flex-wrap: wrap;
-//   }
-
-//   .yee-tags-input-container {
-//     display: inline-grid;
-//     // color: var(--yee-tags-input-container-font-color);
-//     flex: 1 1 auto;
-//     grid-area: 1 / 1 / 2 / 3;
-//     grid-template-columns: 0 min-content;
-//     box-sizing: border-box;
-//     height: var(--yee-tags-multi-input-height);
-
-//     &::after {
-//       grid-area: 1 / 2 / auto / auto;
-//       min-width: var(--yee-tags-multi-input-after-min-width);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       white-space: pre;
-//       border: 0;
-//       outline: 0;
-//       visibility: hidden;
-//       content: attr(data-value) ' ';
-//     }
-
-//     & > input {
-//       grid-area: 1 / 2 / auto / auto;
-//       width: 100%;
-//       min-width: var(--yee-tags-multi-input-min-width);
-//       height: var(--yee-tags-multi-input-height);
-//       margin: 0;
-//       padding: 0;
-//       font: inherit;
-//       background-color: transparent;
-//       border: 0;
-//       outline: 0;
-//       opacity: 1;
-//     }
-//   }
-// }
-
-// 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/Splitter/hooks/useMove.ts

@@ -15,13 +15,13 @@ export default function useMove(
   React.useEffect(() => {
     if (!handler.current) return;
     const ele = handler.current as HTMLElement;
-    const onMouseDown = (e: any) => {
+    const onMouseDown = (e: MouseEvent) => {
       e.preventDefault();
       let x = e.pageX;
       let y = e.pageY;
       setMoving(true);
 
-      const onMouseMove = debounce((e: any) => {
+      const onMouseMove = debounce((e: MouseEvent) => {
         document.body.style.userSelect = 'none';
         document.body.style.cursor =
           direction === 'horizontal' ? 'col-resize' : 'row-resize';

package/src/TextArea/style/index.less

@@ -98,20 +98,3 @@
     cursor: not-allowed;
   }
 }
-
-// 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/hooks/useEvent.ts

@@ -2,13 +2,16 @@ import React from 'react';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default function useEvent<T extends Function>(callback?: T): T {
-  const ref = React.useRef<any>(undefined);
+  const ref = React.useRef<T | undefined>(undefined);
   ref.current = callback;
 
-  const memoFn = React.useCallback<T>(
-    ((...args: any) => ref.current?.(...args)) as any,
+  const memoFn = React.useCallback(
+    (...args: unknown[]) =>
+      (ref.current as ((...args: unknown[]) => unknown) | undefined)?.(
+        ...args,
+      ),
     [],
-  );
+  ) as unknown as T;
 
   return memoFn;
 }