refactor(NumberPicker): Upgrade tests and docs, convert to TypeScript

alibaba-fusion · Mar 25, 2024 · f5d032c · f5d032c
1 parent 90fa0c1
commit f5d032c
Show file tree

Hide file tree

Showing 21 changed files with 1,227 additions and 1,047 deletions.
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
@@ -360,6 +360,11 @@ export interface InputProps extends HTMLAttributesWeak, CommonProps {
  * @version 1.24
  */
  hoverShowClear?: boolean;
+
+ /**
+ * NumberPicker组件展示调节增减按钮(配合 hasTrigger=true 使用)
+ */
+ extra?: React.ReactNode | null;
 }
 export interface PasswordProps extends InputProps {
  /**

diff --git a/components/number-picker/__docs__/adaptor/index.tsx b/components/number-picker/__docs__/adaptor/index.tsx
@@ -2,6 +2,16 @@ import React from 'react';
 import { NumberPicker } from '@alifd/next';
 import { Types } from '@alifd/adaptor-helper';
 
+export interface AdaptorProps {
+ level?: 'normal' | 'inline';
+ width?: React.CSSProperties['minWidth'];
+ size?: 'large' | 'medium' | 'small';
+ state?: 'normal' | 'hover' | 'disabled';
+ value?: number | string;
+ style?: React.CSSProperties;
+ className?: string;
+}
+
 export default {
  name: 'NumberPicker',
  editor: () => ({
@@ -37,7 +47,7 @@ export default {
  },
  ],
  }),
- adaptor: ({ level, size, state, width, value, style, className, ...others }) => {
+ adaptor: ({ level, size, state, width, value, style, className, ...others }: AdaptorProps) => {
  return (
  <NumberPicker
  className={`${className} ${state === 'hover' ? 'hover' : ''}`}

diff --git a/components/number-picker/__docs__/demo/accessibility/index.tsx b/components/number-picker/__docs__/demo/accessibility/index.tsx
@@ -3,19 +3,24 @@ import ReactDOM from 'react-dom';
 
 import { NumberPicker } from '@alifd/next';
 
-class App extends React.Component {
- constructor(props) {
+interface AppState {
+ value: number;
+ tip: string;
+}
+
+class App extends React.Component<any, AppState> {
+ constructor(props: any) {
  super(props);
  this.state = {
  value: 0,
  tip: '',
  };
  this.onChange = this.onChange.bind(this);
  }
- onChange(value, e) {
+ onChange(value: number, e: Event) {
  let num = '';
  if (value >= 0) {
- num = value;
+ num = value.toString();
  } else {
  num = `negative ${value * -1}`;
  }

diff --git a/components/number-picker/__docs__/demo/basic/index.tsx b/components/number-picker/__docs__/demo/basic/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-function onChange(value, e) {
+function onChange(value: number, e: any) {
  console.log(value, e.type, e.triggerType);
 }
 

diff --git a/components/number-picker/__docs__/demo/bignumber/index.tsx b/components/number-picker/__docs__/demo/bignumber/index.tsx
@@ -3,21 +3,20 @@ import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
 const step = '0.000000000000000000000001';
-const precision = step.length - step.indexOf('.') - 1;
 
-function onChange(value) {
+function onChange(value: number) {
  console.log('changed', value);
 }
 
-function onCorrect(value) {
+function onCorrect(value: object) {
  console.log('corrected', value);
 }
 
 class App extends React.Component {
  state = {
  value: `${Number.MIN_SAFE_INTEGER}`,
  };
- onChange = value => {
+ onChange = (value: number) => {
  console.log(value);
  this.setState({
  value,

diff --git a/components/number-picker/__docs__/demo/editable/index.tsx b/components/number-picker/__docs__/demo/editable/index.tsx
@@ -2,8 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker, Button } from '@alifd/next';
 
-class App extends React.Component {
- constructor(props) {
+interface DemoState {
+ editable: boolean;
+ value: number;
+}
+
+class App extends React.Component<any, DemoState> {
+ constructor(props: any) {
  super(props);
  this.state = {
  editable: false,
@@ -17,7 +22,7 @@ class App extends React.Component {
  });
  }
 
- onChange(value) {
+ onChange(value: number) {
  console.log('changed', value);
  this.setState({
  value: value,

diff --git a/components/number-picker/__docs__/demo/format/index.tsx b/components/number-picker/__docs__/demo/format/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-const intlize = val => Intl.NumberFormat('en-US').format(val);
+const intlize = (val: number) => Intl.NumberFormat('en-US').format(val);
 
 ReactDOM.render(
  <div>

diff --git a/components/number-picker/__docs__/demo/limit/index.tsx b/components/number-picker/__docs__/demo/limit/index.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-function onChange(value, e) {
+function onChange(value: number, e: any) {
  console.log('onChange', value, e);
 }
 
-function onCorrect(obj) {
+function onCorrect(obj: object) {
  console.log('onCorrect', obj);
 }
 ReactDOM.render(

diff --git a/components/number-picker/__docs__/demo/mobile/index.tsx b/components/number-picker/__docs__/demo/mobile/index.tsx
@@ -3,11 +3,11 @@ import ReactDOM from 'react-dom';
 import { NumberPicker, Radio } from '@alifd/next';
 
 class Demo extends React.Component {
- state = {
+ state: { device: 'phone' | 'tablet' | 'desktop' } = {
  device: 'desktop',
  };
 
- handleDeviceChange = device => {
+ handleDeviceChange = (device: 'phone' | 'tablet' | 'desktop') => {
  this.setState({
  device,
  });

diff --git a/components/number-picker/__docs__/demo/precision/index.tsx b/components/number-picker/__docs__/demo/precision/index.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-function onChange(value) {
+function onChange(value: number) {
  console.log('changed', value);
 }
-function onCorrect(obj) {
+function onCorrect(obj: object) {
  console.log(obj);
 }
 ReactDOM.render(

diff --git a/components/number-picker/__docs__/demo/step/index.tsx b/components/number-picker/__docs__/demo/step/index.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-function onChange(value) {
+function onChange(value: number) {
  console.log('changed', value);
 }
-function onCorrect(obj) {
+function onCorrect(obj: object) {
  console.log(obj);
 }
 ReactDOM.render(

diff --git a/components/number-picker/__docs__/demo/trigger/index.tsx b/components/number-picker/__docs__/demo/trigger/index.tsx
@@ -2,18 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { NumberPicker } from '@alifd/next';
 
-function onChange(value) {
+function onChange(value: number) {
  console.log('changed', value);
 }
-function onCorrect(obj) {
+function onCorrect(obj: object) {
  console.log(obj);
 }
 ReactDOM.render(
  <div>
- <NumberPicker alwaysShowTrigger />
+ <NumberPicker alwaysShowTrigger onChange={onChange} onCorrect={onCorrect} />
  <br />
  <br />
- <NumberPicker hasTrigger={false} />
+ <NumberPicker hasTrigger={false} onChange={onChange} onCorrect={onCorrect} />
  </div>,
  mountNode
 );
diff --git a/components/number-picker/__docs__/index.en-us.md b/components/number-picker/__docs__/index.en-us.md
@@ -9,46 +9,61 @@
 ## Guide
 
 ### When to use
+
 Number input and auto correct data.
+
 ### Attentions
 
 1. auto Correct may change the input value and let it be diffrent with onChange return value。
 
 2. Some interval value may not trigger the onChange, For example：
 
- - `0`=>`0.`=>`0.0`=>`0.01`  the second & third step will not trigger onChange, because auto correct will let  value  always be '0'
- - Assume min=10, `1`=>`12`  the step one ,`1`, will not  not trigger onChange, because the numbers are input one by one
+ - `0`=>`0.`=>`0.0`=>`0.01` the second & third step will not trigger onChange, because auto correct will let value always be '0'
+ - Assume min=10, `1`=>`12` the step one ,`1`, will not not trigger onChange, because the numbers are input one by one
 
-3. if input action does not trigger onChange, it will  correct data and trigger onChange when it gets blur
+3. if input action does not trigger onChange, it will correct data and trigger onChange when it gets blur
 
 ## API
 
 ### NumberPicker
 
-| Param | Descripiton | Type | Default Value |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------- |
-| size | size<br><br>**option**:<br>'large', 'medium' | Enum | 'medium' |
-| type | display type<br><br>**option**:<br>'normal'<br>'inline' | Enum | 'normal' |
-| value | current value | Number | - |
-| defaultValue | default value | Number | 0 |
-| disabled | disabled or not | Boolean | - |
-| step | number changes per click | Number/String | 1 |
-| precision | precision for decimals number | Number | 0 |
-| editable | editable or not | Boolean | true |
-| autoFocus | auto get focused or not | Boolean | - |
-| onChange | callback when value changes<br><br>**signature**:<br>Function(value: Number, e: Event) => void<br>**params**:<br>_value_: {Number} data<br>_e_: {Event} DOM Event | Function | func.noop |
-| onKeyDown | callback when key press<br><br>**signature**:<br>Function() => void | Function | func.noop |
-| onBlur | callback when lose focus<br><br>**signature**:<br>Function() => void | Function | func.noop |
-| onCorrect | callback when data are corrected<br><br>**signature**:<br>Function(obj: Object) => void<br>**params**:<br>_obj_: {Object} {currentValue,oldValue:String} | Function | func.noop |
-| max | maximum value | Number | Infinity |
-| min | minimum value | Number | -Infinity |
-| format | format value for display<br><br>**signature**:<br>Function(value: Number) => String/Number<br>**params**:<br>_value_: {Number} current value<br>**return**:<br>{String/Number} formatted value<br> | Function | - |
-| hasTrigger | display btn trigger | Boolean | true |
-| alwaysShowTrigger | always show btn trigger without hover | Boolean | false |
+| Param | Description | Type | Default Value | Required | Supported Version |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------- | -------- | ----------------- |
+| prefix | Prefix | string | 'next\-' | | - |
+| type | Set type (when device is phone, the type of NumberPicker is forced to normal and cannot be modified through type) | 'normal' \| 'inline' | 'normal' | | - |
+| size | Size | 'large' \| 'medium' \| 'small' | 'medium' | | - |
+| value | Current value | number \| string | - | | - |
+| defaultValue | Default value | number \| string | - | | - |
+| label | Inline left label | React.ReactNode | - | | - |
+| innerAfter | Inline right additional content | React.ReactNode | - | | - |
+| disabled | Is disabled | boolean | - | | - |
+| step | Step | number \| string | 1 | | - |
+| precision | Decimal places | number | 0 | | - |
+| editable | Whether the user can enter | boolean | true | | - |
+| autoFocus | Auto focus | boolean | - | | - |
+| onChange | Callback when the value changes<br/><br/>**signature**:<br/>**params**:<br/>_value_: value<br/>_e_: e | (value: number \| string \| undefined, e: object) => void | func.noop | | - |
+| onKeyDown | Key down<br/><br/>**signature**:<br/>**params**:<br/>_e_: e | (e: React.KeyboardEvent<HTMLInputElement>, ...args: any[]) => void | func.noop | | - |
+| onFocus | Focus<br/><br/>**signature**:<br/>**params**:<br/>_e_: e | (e: React.FocusEvent<HTMLInputElement>, ...args: any[]) => void | - | | - |
+| onBlur | Blur<br/><br/>**signature**:<br/>**params**:<br/>_e_: e | (e: React.FocusEvent<HTMLInputElement>, ...args: any[]) => void | func.noop | | - |
+| onCorrect | Callback after the value is corrected<br/><br/>**signature**:<br/>**params**:<br/>_obj_: obj | (obj: object) => void | func.noop | | - |
+| max | Maximum | number \| string | - | | - |
+| min | Minimum | number \| string | - | | - |
+| className | Custom class | string | - | | - |
+| style | Custom inline style | React.CSSProperties | - | | - |
+| format | Format current value<br/><br/>**signature**:<br/>**params**:<br/>_value_: value | (value: string \| number) => string \| number | - | | - |
+| upBtnProps | Increase button props | ButtonProps | - | | - |
+| downBtnProps | Decrease button props | ButtonProps | - | | - |
+| alwaysShowTrigger | Control button always show or hide | boolean | false | | - |
+| isPreview | Is preview | boolean | - | | - |
+| renderPreview | Render content in preview mode<br/><br/>**signature**:<br/>**params**:<br/>_value_: value<br/>_props_: props | (value: number \| string, props: object) => React.ReactNode | - | | - |
+| device | Screen width | 'phone' \| 'tablet' \| 'desktop' | - | | - |
+| hasTrigger | Show click button | boolean | true | | - |
+| stringMode | Enable big number support, input and output are all string types | boolean | false | | 1.24 |
+| state | State | 'error' \| 'success' \| undefined | - | | - |
 
 ## ARIA and KeyBoard
 
-| KeyBoard  | Descripiton  |
-| :---------- | :------------------------------ |
-| Up Arrow  | increase the number  |
-| Down Arrow  | decrease the number  |
+| KeyBoard | Descripiton |
+| :--------- | :------------------ |
+| Up Arrow | increase the number |
+| Down Arrow | decrease the number |