fix: should render correctly in ssr

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+lint-staged

package.json

@@ -28,44 +28,53 @@
   ],
   "scripts": {
     "compile": "father build && lessc assets/index.less assets/index.css",
+    "coverage": "rc-test --coverage",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d docs-dist",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "now-build": "npm run docs:build",
+    "prepare": "husky install",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "dumi dev",
-    "test": "jest",
-    "coverage": "jest --coverage"
+    "test": "rc-test"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,tsx,ts,md,json}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "@rc-component/mini-decimal": "^1.0.1",
     "classnames": "^2.2.5",
-    "rc-util": "^5.23.0"
+    "rc-util": "^5.25.0"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.1",
+    "@swc-node/jest": "^1.5.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@swc-node/jest": "^1.5.5",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.2.4",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/responselike": "^1.0.0",
-    "@umijs/test": "^4.0.36",
     "@umijs/fabric": "^2.0.0",
+    "@umijs/test": "^4.0.36",
     "cross-env": "^7.0.3",
     "dumi": "^2.0.13",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
     "eslint": "^7.1.0",
     "expect.js": "~0.3.1",
     "father": "^4.1.1",
     "glob": "^7.1.6",
+    "husky": "^8.0.3",
+    "jest-environment-jsdom": "^29.3.1",
     "less": "^3.12.2",
+    "lint-staged": "^13.1.2",
     "np": "^7.2.0",
+    "rc-test": "^7.0.14",
     "rc-tooltip": "^5.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/StepHandler.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import * as React from 'react';
 import classNames from 'classnames';
-import isMobile from 'rc-util/lib/isMobile';
+import useMobile from 'rc-util/lib/hooks/useMobile';
 
 /**
  * When click and hold on a button - the speed of auto changing the value.
@@ -60,7 +60,8 @@ export default function StepHandler({
   React.useEffect(() => onStopStep, []);
 
   // ======================= Render =======================
-  if (isMobile()) {
+  const isMobile = useMobile();
+  if (isMobile) {
     return null;
   }
 

tests/mobile.test.tsx

@@ -1,141 +1,21 @@
 import * as React from 'react';
-import { render, fireEvent } from './util/wrapper';
+import { render } from './util/wrapper';
 import InputNumber from '../src';
+import { renderToString } from 'react-dom/server';
 
 jest.mock('rc-util/lib/isMobile', () => () => true);
 
-// Mobile touch experience is not user friendly which not apply in antd.
+// Mobile touch experience is not user-friendly which not apply in antd.
 // Let's hide operator instead.
 
 describe('InputNumber.Mobile', () => {
   it('not show steps when mobile', () => {
     const {container} = render(<InputNumber />);
     expect(container.querySelector('.rc-input-number-handler-wrap')).toBeFalsy();
   });
-});
-
-// it('formatter on touchstart', () => {
-//   class Demo extends React.Component {
-//     render() {
-//       return (
-//         <InputNumber
-//           ref="inputNum"
-//           step={1}
-//           defaultValue={5}
-//           useTouch
-//           formatter={(num) => `${num} ¥`}
-//         />
-//       );
-//     }
-//   }
-//   example = ReactDOM.render(<Demo />, container);
-//   inputNumber = example.refs.inputNum;
-//   inputElement = ReactDOM.findDOMNode(inputNumber.input);
-
-//   Simulate.touchStart(findRenderedDOMComponentWithClass(example, 'rc-input-number-handler-up'));
-//   expect(inputNumber.state.value).to.be(6);
-//   expect(inputElement.value).to.be('6 ¥');
-//   Simulate.touchStart(findRenderedDOMComponentWithClass(example, 'rc-input-number-handler-down'));
-//   expect(inputNumber.state.value).to.be(5);
-//   expect(inputElement.value).to.be('5 ¥');
-// });
-
-// describe('Mobile inputNumber use TouchEvents', () => {
-//   const container = document.createElement('div');
-//   document.body.appendChild(container);
-
-//   class Component extends React.Component {
-//     state = {
-//       min: 1,
-//       max: 200,
-//       value: defaultValue,
-//       step: 1,
-//       disabled: false,
-//       autoFocus: false,
-//       readOnly: false,
-//       name: 'inputNumber',
-//     };
-
-//     onChange = value => {
-//       this.setState({ value });
-//     };
-
-//     triggerBoolean = propName => {
-//       const prop = {};
-//       prop[propName] = !this.state[propName];
-//       this.setState(prop);
-//     };
 
-//     render() {
-//       return (
-//         <div>
-//           <InputNumber
-//             ref="inputNum"
-//             min={this.state.min}
-//             max={this.state.max}
-//             onChange={this.onChange}
-//             value={this.state.value}
-//             step={this.state.step}
-//             disabled={this.state.disabled}
-//             autoFocus={this.state.autoFocus}
-//             readOnly={this.state.readOnly}
-//             name={this.state.name}
-//             useTouch
-//           />
-//         </div>
-//       );
-//     }
-//   }
-
-//   let inputNumber;
-//   let example;
-//   let inputElement;
-//   beforeEach(() => {
-//     example = ReactDOM.render(<Component />, container);
-//     inputNumber = example.refs.inputNum;
-//     inputElement = ReactDOM.findDOMNode(inputNumber.input);
-//   });
-
-//   afterEach(() => {
-//     ReactDOM.unmountComponentAtNode(container);
-//   });
-
-//   describe('touchable', () => {
-//     it('up button works', () => {
-//       Simulate.touchStart(findRenderedDOMComponentWithClass(example, 'rc-input-number-handler-up'));
-//       expect(inputNumber.state.value).to.be(99);
-//     });
-
-//     it('down button works', () => {
-//       Simulate.touchStart(
-//         findRenderedDOMComponentWithClass(example, 'rc-input-number-handler-down'),
-//       );
-//       expect(inputNumber.state.value).to.be(97);
-//     });
-//   });
-
-//   // https://github.com/ant-design/ant-design/issues/17593
-//   it('onBlur should be sync', () => {
-//     class Demo extends React.Component {
-//       render() {
-//         return (
-//           <InputNumber
-//             onBlur={({ target: { value } }) => {
-//               expect(value).to.be('1');
-//             }}
-//             mergedPPrecision={0}
-//             ref="inputNum"
-//           />
-//         );
-//       }
-//     }
-//     example = ReactDOM.render(<Demo />, container);
-//     inputNumber = example.refs.inputNum;
-//     inputElement = ReactDOM.findDOMNode(inputNumber.input);
-//     Simulate.focus(inputElement);
-//     inputElement.value = '1.2';
-//     Simulate.change(inputElement);
-//     Simulate.blur(inputElement);
-//     expect(inputElement.value).to.be('1');
-//   });
-// });
+  it('should render in server side', () => {
+    const serverHTML = renderToString(<InputNumber />);
+    expect(serverHTML).toContain('rc-input-number-handler-wrap');
+  })
+});