Merge branch 'react-component:master' into master

Author: bombillazo

README.md

@@ -2,24 +2,31 @@
 
 Input number control.
 
-[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-input-number.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/rc-input-number
+[travis-image]: https://img.shields.io/travis/react-component/input-number/master?style=flat-square
+[travis-url]: https://travis-ci.com/react-component/input-number
 [github-actions-image]: https://github.com/react-component/input-number/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/input-number/actions
-[circleci-image]: https://img.shields.io/circleci/react-component/input-number/master?style=flat-square
-[circleci-url]: https://circleci.com/gh/react-component/input-number
-[coveralls-image]: https://img.shields.io/coveralls/react-component/input-number.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/input-number?branch=master
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/input-number/master.svg?style=flat-square
+[codecov-url]: https://app.codecov.io/gh/react-component/input-number
 [david-url]: https://david-dm.org/react-component/input-number
 [david-image]: https://david-dm.org/react-component/input-number/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/input-number?type=dev
 [david-dev-image]: https://david-dm.org/react-component/input-number/dev-status.svg?style=flat-square
 [download-image]: https://img.shields.io/npm/dm/rc-input-number.svg?style=flat-square
 [download-url]: https://npmjs.org/package/rc-input-number
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-input-number
+[bundlephobia-url]: https://bundlephobia.com/package/rc-input-number
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-input-number
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
 ## Screenshots
 

package.json

@@ -49,8 +49,8 @@
     "@babel/runtime": "^7.10.1",
     "@rc-component/mini-decimal": "^1.0.1",
     "classnames": "^2.2.5",
-    "rc-input": "~1.4.0",
-    "rc-util": "^5.28.0"
+    "rc-input": "~1.5.0",
+    "rc-util": "^5.40.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.1",

src/InputNumber.tsx

@@ -9,18 +9,24 @@ import getMiniDecimal, {
 import clsx from 'classnames';
 import { BaseInput } from 'rc-input';
 import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect';
+import proxyObject from 'rc-util/lib/proxyObject';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import useCursor from './hooks/useCursor';
 import StepHandler from './StepHandler';
 import { getDecupleSteps } from './utils/numberUtil';
 
+import type { HolderRef } from 'rc-input/lib/BaseInput';
+import { BaseInputProps } from 'rc-input/lib/interface';
 import { InputFocusOptions, triggerFocus } from 'rc-input/lib/utils/commonUtils';
 import useFrame from './hooks/useFrame';
-import { BaseInputProps } from 'rc-input/lib/interface';
 
 export type { ValueType };
 
+export interface InputNumberRef extends HTMLInputElement {
+  nativeElement: HTMLElement;
+}
+
 /**
  * We support `stringMode` which need handle correct type when user call in onChange
  * format max or min value
@@ -105,12 +111,14 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   changeOnBlur?: boolean;
 }
 
-type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'>;
+type InternalInputNumberProps = Omit<InputNumberProps, 'prefix' | 'suffix'> & {
+  domRef: React.Ref<HTMLDivElement>;
+};
 
 const InternalInputNumber = React.forwardRef(
   (props: InternalInputNumberProps, ref: React.Ref<HTMLInputElement>) => {
     const {
-      prefixCls = 'rc-input-number',
+      prefixCls,
       className,
       style,
       min,
@@ -142,6 +150,8 @@ const InternalInputNumber = React.forwardRef(
 
       changeOnBlur = true,
 
+      domRef,
+
       ...inputProps
     } = props;
 
@@ -478,7 +488,7 @@ const InternalInputNumber = React.forwardRef(
      */
     const flushInputValue = (userTyping: boolean) => {
       const parsedValue = getMiniDecimal(mergedParser(inputValue));
-      let formatValue: DecimalClass = parsedValue;
+      let formatValue: DecimalClass;
 
       if (!parsedValue.isNaN()) {
         // Only validate value or empty value can be re-fill to inputValue
@@ -595,6 +605,7 @@ const InternalInputNumber = React.forwardRef(
     // ============================ Render ============================
     return (
       <div
+        ref={domRef}
         className={clsx(prefixCls, className, {
           [`${prefixCls}-focused`]: focus,
           [`${prefixCls}-disabled`]: disabled,
@@ -645,66 +656,76 @@ const InternalInputNumber = React.forwardRef(
   },
 );
 
-const InputNumber = React.forwardRef(
-  (props: InputNumberProps, ref: React.Ref<HTMLInputElement>) => {
-    const {
-      disabled,
-      style,
-      prefixCls,
-      value,
-      prefix,
-      suffix,
-      addonBefore,
-      addonAfter,
-      className,
-      classNames,
-      ...rest
-    } = props;
-
-    const inputFocusRef = React.useRef<HTMLInputElement>(null);
-
-    const focus = (option?: InputFocusOptions) => {
-      if (inputFocusRef.current) {
-        triggerFocus(inputFocusRef.current, option);
-      }
-    };
+const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, ref) => {
+  const {
+    disabled,
+    style,
+    prefixCls = 'rc-input-number',
+    value,
+    prefix,
+    suffix,
+    addonBefore,
+    addonAfter,
+    className,
+    classNames,
+    ...rest
+  } = props;
+
+  const holderRef = React.useRef<HolderRef>(null);
+  const inputNumberDomRef = React.useRef<HTMLDivElement>(null);
+  const inputFocusRef = React.useRef<HTMLInputElement>(null);
+
+  const focus = (option?: InputFocusOptions) => {
+    if (inputFocusRef.current) {
+      triggerFocus(inputFocusRef.current, option);
+    }
+  };
 
-    return (
-      <BaseInput
-        className={className}
-        triggerFocus={focus}
+  React.useImperativeHandle(ref, () =>
+    proxyObject(inputFocusRef.current, {
+      nativeElement: holderRef.current.nativeElement || inputNumberDomRef.current,
+    }),
+  );
+
+  return (
+    <BaseInput
+      className={className}
+      triggerFocus={focus}
+      prefixCls={prefixCls}
+      value={value}
+      disabled={disabled}
+      style={style}
+      prefix={prefix}
+      suffix={suffix}
+      addonAfter={addonAfter}
+      addonBefore={addonBefore}
+      classNames={classNames}
+      components={{
+        affixWrapper: 'div',
+        groupWrapper: 'div',
+        wrapper: 'div',
+        groupAddon: 'div',
+      }}
+      ref={holderRef}
+    >
+      <InternalInputNumber
         prefixCls={prefixCls}
-        value={value}
         disabled={disabled}
-        style={style}
-        prefix={prefix}
-        suffix={suffix}
-        addonAfter={addonAfter}
-        addonBefore={addonBefore}
-        classNames={classNames}
-        components={{
-          affixWrapper: 'div',
-          groupWrapper: 'div',
-          wrapper: 'div',
-          groupAddon: 'div',
-        }}
-      >
-        <InternalInputNumber
-          prefixCls={prefixCls}
-          disabled={disabled}
-          ref={composeRef(inputFocusRef, ref)}
-          className={classNames?.input}
-          {...rest}
-        />
-      </BaseInput>
-    );
-  },
-) as (<T extends ValueType = ValueType>(
+        ref={inputFocusRef}
+        domRef={inputNumberDomRef}
+        className={classNames?.input}
+        {...rest}
+      />
+    </BaseInput>
+  );
+}) as (<T extends ValueType = ValueType>(
   props: React.PropsWithChildren<InputNumberProps<T>> & {
     ref?: React.Ref<HTMLInputElement>;
   },
 ) => React.ReactElement) & { displayName?: string };
 
-InputNumber.displayName = 'InputNumber';
+if (process.env.NODE_ENV !== 'production') {
+  InputNumber.displayName = 'InputNumber';
+}
 
 export default InputNumber;

src/index.ts

@@ -1,6 +1,6 @@
-import type { InputNumberProps, ValueType } from './InputNumber';
+import type { InputNumberProps, ValueType, InputNumberRef } from './InputNumber';
 import InputNumber from './InputNumber';
 
-export type { InputNumberProps, ValueType };
+export type { InputNumberProps, ValueType, InputNumberRef };
 
 export default InputNumber;

tests/github.test.tsx

@@ -1,8 +1,7 @@
 import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import InputNumber from '../src';
-import { fireEvent, render, screen, waitFor } from './util/wrapper';
+import { act, fireEvent, render, screen, waitFor } from './util/wrapper';
 
 // Github issues
 describe('InputNumber.Github', () => {

tests/input.test.tsx

@@ -1,6 +1,6 @@
 import KeyCode from 'rc-util/lib/KeyCode';
 import React from 'react';
-import InputNumber, { InputNumberProps } from '../src';
+import InputNumber, { InputNumberProps, InputNumberRef } from '../src';
 import { fireEvent, render } from './util/wrapper';
 
 describe('InputNumber.Input', () => {
@@ -223,4 +223,20 @@ describe('InputNumber.Input', () => {
     fireEvent.blur(container.querySelector('input'));
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  describe('nativeElement', () => {
+    it('basic', () => {
+      const ref = React.createRef<InputNumberRef>();
+      const { container } = render(<InputNumber ref={ref} />);
+      expect(ref.current.nativeElement).toBe(container.querySelector('.rc-input-number'));
+    });
+
+    it('wrapper', () => {
+      const ref = React.createRef<InputNumberRef>();
+      const { container } = render(<InputNumber ref={ref} suffix="suffix" />);
+      expect(ref.current.nativeElement).toBe(
+        container.querySelector('.rc-input-number-affix-wrapper'),
+      );
+    });
+  });
 });

tests/longPress.test.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { render, fireEvent, waitFor } from './util/wrapper';
 import InputNumber from '../src';
+import { act, fireEvent, render, waitFor } from './util/wrapper';
 
 // Jest will mass of advanceTimersByTime if other test case not use fakeTimer.
 // Let's create a pure file here for test.

tests/util/wrapper.ts

@@ -1,13 +1,12 @@
-import type { ReactElement } from 'react';
-import { act } from 'react-dom/test-utils';
 import type { RenderOptions } from '@testing-library/react';
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import type { ReactElement } from 'react';
 
 const globalTimeout = global.setTimeout;
 
 export const sleep = async (timeout = 0) => {
   await act(async () => {
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       globalTimeout(resolve, timeout);
     });
   });
@@ -16,6 +15,5 @@ export const sleep = async (timeout = 0) => {
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
   render(ui, { ...options });
 
-export { customRender as render };
-
 export * from '@testing-library/react';
+export { customRender as render };