chore: refactor pos

Author: zombieJ

src/PickerInput/Selector/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PickerContext from '../context';
-import classNames from 'classnames';
+import cls from 'classnames';
 
 export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
   icon?: React.ReactNode;
@@ -9,12 +9,12 @@ export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
 
 export default function Icon(props: IconProps) {
   const { icon, type, ...restProps } = props;
-  const { prefixCls, classNames: iconClassNames, styles } = React.useContext(PickerContext);
+  const { prefixCls, classNames, styles } = React.useContext(PickerContext);
 
   return icon ? (
     <span
-      className={classNames(`${prefixCls}-${type}`, iconClassNames?.suffix)}
-      style={styles?.suffix}
+      className={cls(`${prefixCls}-${type}`, classNames.suffix)}
+      style={styles.suffix}
       {...restProps}
     >
       {icon}

src/PickerInput/Selector/Input.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import raf from '@rc-component/util/lib/raf';
@@ -75,7 +75,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const {
     prefixCls,
     input: Component = 'input',
-    classNames: inputClassNames,
+    classNames,
     styles,
   } = React.useContext(PickerContext);
   const inputPrefixCls = `${prefixCls}-input`;
@@ -383,7 +383,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   return (
     <div
       ref={holderRef}
-      className={classNames(
+      className={cls(
         inputPrefixCls,
         {
           [`${inputPrefixCls}-active`]: active && showActiveCls,
@@ -404,8 +404,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
         // Value
         value={inputValue}
         onChange={onInternalChange}
-        className={inputClassNames?.input}
-        style={styles?.input}
+        className={classNames.input}
+        style={styles.input}
       />
       <Icon type="suffix" icon={suffixIcon} />
       {clearIcon}

src/PickerInput/Selector/RangeSelector.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import ResizeObserver from '@rc-component/resize-observer';
 import { useEvent } from '@rc-component/util';
 import * as React from 'react';
@@ -121,7 +121,7 @@ function RangeSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls, classNames: selectorClassNames, styles } = React.useContext(PickerContext);
+  const { prefixCls, classNames, styles } = React.useContext(PickerContext);
 
   // ========================== Id ==========================
   const ids = React.useMemo(() => {
@@ -211,7 +211,7 @@ function RangeSelector<DateType extends object = any>(
     <ResizeObserver onResize={syncActiveOffset}>
       <div
         {...rootProps}
-        className={classNames(
+        className={cls(
           prefixCls,
           `${prefixCls}-range`,
           {
@@ -239,10 +239,7 @@ function RangeSelector<DateType extends object = any>(
         }}
       >
         {prefix && (
-          <div
-            className={classNames(`${prefixCls}-prefix`, selectorClassNames?.prefix)}
-            style={styles?.prefix}
-          >
+          <div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
             {prefix}
           </div>
         )}

src/PickerInput/Selector/SingleSelector/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import type { InternalMode, PickerRef, SelectorProps } from '../../../interface';
 import { isSame } from '../../../utils/dateUtil';
@@ -110,7 +110,7 @@ function SingleSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls, classNames: selectorClassNames, styles } = React.useContext(PickerContext);
+  const { prefixCls, classNames, styles } = React.useContext(PickerContext);
 
   // ========================= Refs =========================
   const rootRef = React.useRef<HTMLDivElement>();
@@ -201,7 +201,7 @@ function SingleSelector<DateType extends object = any>(
   return (
     <div
       {...rootProps}
-      className={classNames(
+      className={cls(
         prefixCls,
         {
           [`${prefixCls}-multiple`]: multiple,
@@ -226,10 +226,7 @@ function SingleSelector<DateType extends object = any>(
       }}
     >
       {prefix && (
-        <div
-          className={classNames(`${prefixCls}-prefix`, selectorClassNames?.prefix)}
-          style={styles?.prefix}
-        >
+        <div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
           {prefix}
         </div>
       )}

src/PickerPanel/context.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { PanelMode, SemanticStructure, SharedPanelProps } from '../interface';
+import type { PanelMode, SharedPanelProps } from '../interface';
+import type { FilledPanelClassNames, FilledPanelStyles } from '../hooks/useSemantic';
 
 export interface PanelContextProps<DateType extends object = any>
   extends Pick<
@@ -31,6 +32,9 @@ export interface PanelContextProps<DateType extends object = any>
 
   // Shared
   now: DateType;
+
+  classNames: FilledPanelClassNames;
+  styles: FilledPanelStyles;
 }
 
 /** Used for each single Panel. e.g. DatePanel */
@@ -49,7 +53,7 @@ export function useInfo<DateType extends object = any>(
 ): [sharedProps: PanelContextProps<DateType>, now: DateType] {
   const {
     prefixCls,
-    generateConfig,
+    // generateConfig,
     locale,
     disabledDate,
     minDate,
@@ -69,6 +73,9 @@ export function useInfo<DateType extends object = any>(
     superNextIcon,
   } = props;
 
+  // ======================= Context ========================
+  const { classNames, styles, generateConfig } = usePanelContext();
+
   // ========================= MISC =========================
   const now = generateConfig.getNow();
 
@@ -78,6 +85,8 @@ export function useInfo<DateType extends object = any>(
     values,
     pickerValue,
     prefixCls,
+    classNames,
+    styles,
     disabledDate,
     minDate,
     maxDate,
@@ -106,8 +115,6 @@ export interface PickerHackContextProps {
   hideNext?: boolean;
   hideHeader?: boolean;
   onCellDblClick?: () => void;
-  styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-  classNames?: Partial<Record<SemanticStructure, string>>;
 }
 
 /**

src/hooks/useSemantic.ts

@@ -1,12 +1,16 @@
 import { useMemo } from 'react';
 import type { SharedPickerProps } from '../interface';
 
+export type FilledPanelClassNames = NonNullable<SharedPickerProps['classNames']>['popup'];
+
+export type FilledPanelStyles = NonNullable<SharedPickerProps['styles']>['popup'];
+
 export type FilledClassNames = NonNullable<SharedPickerProps['classNames']> & {
-  popup: NonNullable<SharedPickerProps['classNames']>['popup'];
+  popup: FilledPanelClassNames;
 };
 
 export type FilledStyles = NonNullable<SharedPickerProps['styles']> & {
-  popup: NonNullable<SharedPickerProps['styles']>['popup'];
+  popup: FilledPanelStyles;
 };
 
 /**