refactor: use rc-util/lib/pickAttrs (#643)

* refactor: use rc-util/lib/pickAttrs

* test: fix test case

Author: afc163

src/Picker.tsx

@@ -15,6 +15,7 @@ import type { AlignType } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import warning from 'rc-util/lib/warning';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import useHoverValue from './hooks/useHoverValue';
 import usePickerInput from './hooks/usePickerInput';
@@ -33,7 +34,7 @@ import PickerPanel from './PickerPanel';
 import PickerTrigger from './PickerTrigger';
 import PresetPanel from './PresetPanel';
 import { formatValue, isEqual, parseValue } from './utils/dateUtil';
-import getDataOrAriaProps, { toArray } from './utils/miscUtil';
+import { toArray } from './utils/miscUtil';
 import { elementsContains, getDefaultFormat, getInputSize } from './utils/uiUtil';
 import { legacyPropsWarning } from './utils/warnUtil';
 
@@ -143,6 +144,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   const {
     prefixCls = 'rc-picker',
     id,
+    name,
     tabIndex,
     style,
     className,
@@ -386,14 +388,10 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   if (pickerRef) {
     pickerRef.current = {
       focus: () => {
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
+        inputRef.current?.focus();
       },
       blur: () => {
-        if (inputRef.current) {
-          inputRef.current.blur();
-        }
+        inputRef.current?.blur();
       },
     };
   }
@@ -501,7 +499,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     );
   }
 
-  const mergedInputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+  const mergedInputProps: React.InputHTMLAttributes<HTMLInputElement> & { ref: React.MutableRefObject<HTMLInputElement> } = {
     id,
     tabIndex,
     disabled,
@@ -516,7 +514,8 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
     title: text,
     ...inputProps,
     size: getInputSize(picker, formatList[0], generateConfig),
-    ...getDataOrAriaProps(props),
+    name,
+    ...pickAttrs(props, { aria: true, data: true}),
     autoComplete,
   };
 

src/RangePicker.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import raf from 'rc-util/lib/raf';
 import warning from 'rc-util/lib/warning';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type { PickerPanelProps } from '.';
@@ -44,7 +45,7 @@ import {
 } from './utils/dateUtil';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
-import getDataOrAriaProps, { getValue, toArray, updateValues } from './utils/miscUtil';
+import { getValue, toArray, updateValues } from './utils/miscUtil';
 import { elementsContains, getDefaultFormat, getInputSize } from './utils/uiUtil';
 import { legacyPropsWarning } from './utils/warnUtil';
 
@@ -387,9 +388,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     // Use setTimeout to make sure panel DOM exists
     raf(() => {
       const inputRef = [startInputRef, endInputRef][index];
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
+      inputRef.current?.focus();
     }, 0);
   }
 
@@ -1150,7 +1149,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           onMouseLeave={onMouseLeave}
           onMouseDown={onPickerMouseDown}
           onMouseUp={onMouseUp}
-          {...getDataOrAriaProps(props)}
+          {...pickAttrs(props, { aria: true, data: true })}
         >
           <div
             className={classNames(`${prefixCls}-input`, {

src/utils/miscUtil.ts

@@ -20,24 +20,6 @@ export function toArray<T>(val: T | T[]): T[] {
   return Array.isArray(val) ? val : [val];
 }
 
-export default function getDataOrAriaProps(props: any) {
-  const retProps: any = {};
-
-  Object.keys(props).forEach(key => {
-    if (
-      (key.substr(0, 5) === 'data-' ||
-        key.substr(0, 5) === 'aria-' ||
-        key === 'role' ||
-        key === 'name') &&
-      key.substr(0, 7) !== 'data-__'
-    ) {
-      retProps[key] = props[key];
-    }
-  });
-
-  return retProps;
-}
-
 export function getValue<T>(
   values: null | undefined | (T | null)[],
   index: number,