refactor: Semantic structure

docs/examples/basic.tsx

@@ -51,7 +51,16 @@ export default () => {
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
         <div style={{ margin: '0 8px' }}>
           <h3>Basic</h3>
-          <Picker<Moment> {...sharedProps} locale={zhCN} suffixIcon="SUFFIX" />
+          <Picker<Moment>
+            {...sharedProps}
+            locale={zhCN}
+            suffixIcon="SUFFIX"
+            rootClassName="bamboo"
+            className="little"
+            classNames={{
+              root: 'light',
+            }}
+          />
           <Picker<Moment> {...sharedProps} locale={enUS} />
         </div>
         <div style={{ margin: '0 8px' }}>

src/PickerInput/Popup/Footer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import cls from 'classnames';
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
 import useTimeInfo from '../../hooks/useTimeInfo';
@@ -42,7 +42,13 @@ export default function Footer(props: FooterProps) {
     disabledDate,
   } = props;
 
-  const { prefixCls, locale, button: Button = 'button' } = React.useContext(PickerContext);
+  const {
+    prefixCls,
+    locale,
+    button: Button = 'button',
+    classNames,
+    styles,
+  } = React.useContext(PickerContext);
 
   // >>> Now
   const now = generateConfig.getNow();
@@ -70,7 +76,7 @@ export default function Footer(props: FooterProps) {
   const presetNode = showNow && (
     <li className={nowPrefixCls}>
       <a
-        className={classNames(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
+        className={cls(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
         aria-disabled={nowDisabled}
         onClick={onInternalNow}
       >
@@ -101,7 +107,10 @@ export default function Footer(props: FooterProps) {
   }
 
   return (
-    <div className={`${prefixCls}-footer`}>
+    <div
+      className={cls(`${prefixCls}-footer`, classNames.popup.footer)}
+      style={styles.popup.footer}
+    >
       {extraNode && <div className={`${prefixCls}-footer-extra`}>{extraNode}</div>}
       {rangeNode}
     </div>

src/PickerInput/RangePicker.tsx

@@ -1,4 +1,5 @@
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -35,6 +36,7 @@ import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
 import Popup, { type PopupShowTimeConfig } from './Popup';
 import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector';
+import useSemantic from '../hooks/useSemantic';
 
 function separateConfig<T>(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] {
   const singleConfig = config ?? defaultConfig;
@@ -158,8 +160,9 @@ function RangePicker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
-    styles,
-    classNames,
+    rootClassName,
+    styles: propStyles,
+    classNames: propClassNames,
 
     // Value
     defaultValue,
@@ -224,6 +227,9 @@ function RangePicker<DateType extends object = any>(
   // ========================= Refs =========================
   const selectorRef = usePickerRef(ref);
 
+  // ======================= Semantic =======================
+  const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
+
   // ========================= Open =========================
   const [mergedOpen, setMergeOpen] = useOpen(open, defaultOpen, disabled, onOpenChange);
 
@@ -562,6 +568,8 @@ function RangePicker<DateType extends object = any>(
       'className',
       'onPanelChange',
       'disabledTime',
+      'classNames',
+      'styles',
     ]);
     return restProps;
   }, [filledProps]);
@@ -693,10 +701,18 @@ function RangePicker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
-      styles,
-      classNames,
+      classNames: mergedClassNames,
+      styles: mergedStyles,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input, classNames, styles],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      mergedClassNames,
+      mergedStyles,
+    ],
   );
 
   // ======================== Effect ========================
@@ -755,8 +771,8 @@ function RangePicker<DateType extends object = any>(
       <PickerTrigger
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
-        popupStyle={styles.popup}
-        popupClassName={classNames.popup}
+        popupStyle={mergedStyles.popup.root}
+        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -768,6 +784,12 @@ function RangePicker<DateType extends object = any>(
           {...filledProps}
           // Ref
           ref={selectorRef}
+          // Style
+          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{
+            ...mergedStyles.root,
+            ...filledProps.style,
+          }}
           // Icon
           suffixIcon={suffixIcon}
           // Active

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,16 +383,14 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   return (
     <div
       ref={holderRef}
-      className={classNames(
+      className={cls(
         inputPrefixCls,
-        inputClassNames?.input,
         {
           [`${inputPrefixCls}-active`]: active && showActiveCls,
           [`${inputPrefixCls}-placeholder`]: helped,
         },
         className,
       )}
-      style={styles?.input}
     >
       <Component
         ref={inputRef}
@@ -406,6 +404,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
         // Value
         value={inputValue}
         onChange={onInternalChange}
+        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/PickerInput/SinglePicker.tsx

@@ -1,4 +1,5 @@
 import { useEvent, useMergedState } from '@rc-component/util';
+import cls from 'classnames';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import omit from '@rc-component/util/lib/omit';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -31,6 +32,7 @@ import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
 import Popup from './Popup';
 import SingleSelector from './Selector/SingleSelector';
+import useSemantic from '../hooks/useSemantic';
 
 // TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop
 
@@ -122,8 +124,9 @@ function Picker<DateType extends object = any>(
   const {
     // Style
     prefixCls,
-    styles,
-    classNames,
+    rootClassName,
+    styles: propStyles,
+    classNames: propClassNames,
 
     // Value
     order,
@@ -202,6 +205,9 @@ function Picker<DateType extends object = any>(
 
   const toggleDates = useToggleDates(generateConfig, locale, internalPicker);
 
+  // ======================= Semantic =======================
+  const [mergedClassNames, mergedStyles] = useSemantic(propClassNames, propStyles);
+
   // ========================= Open =========================
   const [mergedOpen, triggerOpen] = useOpen(open, defaultOpen, [disabled], onOpenChange);
 
@@ -478,6 +484,8 @@ function Picker<DateType extends object = any>(
       'style',
       'className',
       'onPanelChange',
+      'classNames',
+      'styles',
     ]);
     return {
       ...restProps,
@@ -577,10 +585,18 @@ function Picker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
-      styles,
-      classNames,
+      classNames: mergedClassNames,
+      styles: mergedStyles,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input, styles, classNames],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      mergedClassNames,
+      mergedStyles,
+    ],
   );
 
   // ======================== Effect ========================
@@ -615,8 +631,8 @@ function Picker<DateType extends object = any>(
       <PickerTrigger
         {...pickTriggerProps(filledProps)}
         popupElement={panel}
-        popupStyle={styles.popup}
-        popupClassName={classNames.popup}
+        popupStyle={mergedStyles.popup.root}
+        popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
         // Visible
         visible={mergedOpen}
         onClose={onPopupClose}
@@ -626,6 +642,12 @@ function Picker<DateType extends object = any>(
           {...filledProps}
           // Ref
           ref={selectorRef}
+          // Style
+          className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
+          style={{
+            ...mergedStyles.root,
+            ...filledProps.style,
+          }}
           // Icon
           suffixIcon={suffixIcon}
           removeIcon={removeIcon}

src/PickerInput/context.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { GenerateConfig } from '../generate';
-import type { Components, Locale, SemanticStructure } from '../interface';
+import type { Components, Locale } from '../interface';
+import type { FilledClassNames, FilledStyles } from '../hooks/useSemantic';
 
 export interface PickerContextProps<DateType = any> {
   prefixCls: string;
@@ -9,8 +10,8 @@ export interface PickerContextProps<DateType = any> {
   /** Customize button component */
   button?: Components['button'];
   input?: Components['input'];
-  styles?: Partial<Record<SemanticStructure, React.CSSProperties>>;
-  classNames?: Partial<Record<SemanticStructure, string>>;
+  classNames: FilledClassNames;
+  styles: FilledStyles;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);