@douyinfe/semi-ui 2.2.1 → 2.2.2

package/inputNumber/_story/inputNumber.stories.js

@@ -641,3 +641,15 @@ export const FormCustomInput = () => {
 FormCustomInput.story = {
   name: 'Form.CustomInput',
 };
+
+
+export const FixPrecision = () => {
+  const [value, setValue] = useState(5.12);
+  const [value2, setValue2] = useState(5.12);
+  return (
+    <div>
+        <InputNumber onChange={v => setValue(v)} value={value} style={{ width: 190 }} precision={2} />
+        <InputNumber keepFocus onBlur={() => console.log('blur')} onChange={v => setValue2(v)} value={value2} style={{ width: 190 }} precision={2} />
+    </div>
+  );
+}

package/inputNumber/index.tsx

@@ -225,6 +225,7 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
     currentValue!: number | string;
     cursorBefore!: string;
     cursorAfter!: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps) {
         super(props);
         this.state = {
@@ -291,7 +292,10 @@ class InputNumber extends BaseComponent<InputNumberProps, InputNumberState> {
                 if (focusing) {
                     if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
                         const obj: { number?: number; value?: string } = { number: parsedNum };
-                        // Updates input when a button is clicked
+                        /**
+                         * If you are clicking the button, it will automatically format once
+                         * We need to set the status to false after trigger focus event
+                         */
                         if (this.clickUpOrDown) {
                             obj.value = this.foundation.doFormat(valueStr, true);
                         }

package/lib/cjs/datePicker/datePicker.js

@@ -466,7 +466,8 @@ class DatePicker extends _baseComponent.default {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -513,7 +514,8 @@ class DatePicker extends _baseComponent.default {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 

package/lib/cjs/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/cjs/datePicker/monthsGrid.js

@@ -695,7 +695,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: _propTypes.default.bool,
   // Callback function for panel date switching
   onPanelChange: _propTypes.default.func,
-  focusRecordsRef: _propTypes.default.object
+  focusRecordsRef: _propTypes.default.object,
+  triggerRender: _propTypes.default.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',

package/lib/cjs/inputNumber/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/cjs/inputNumber/inputNumber.css';
@@ -85,20 +85,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/cjs/inputNumber/index.js

@@ -363,7 +363,11 @@ class InputNumber extends _baseComponent.default {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);

package/lib/cjs/transfer/index.d.ts

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/cjs/transfer/index.js

@@ -373,11 +373,11 @@ class Transfer extends _baseComponent.default {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = (0, _classnames.default)("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -432,7 +432,7 @@ class Transfer extends _baseComponent.default {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);

package/lib/es/datePicker/datePicker.js

@@ -433,7 +433,8 @@ export default class DatePicker extends BaseComponent {
       density,
       syncSwitchMonth,
       onPanelChange,
-      timeZone
+      timeZone,
+      triggerRender
     } = this.props;
     const {
       value,
@@ -480,7 +481,8 @@ export default class DatePicker extends BaseComponent {
       syncSwitchMonth: syncSwitchMonth,
       onPanelChange: onPanelChange,
       timeZone: timeZone,
-      focusRecordsRef: this.focusRecordsRef
+      focusRecordsRef: this.focusRecordsRef,
+      triggerRender: triggerRender
     });
   }
 

package/lib/es/datePicker/monthsGrid.d.ts

@@ -49,6 +49,7 @@ export default class MonthsGrid extends BaseComponent<MonthsGridProps, MonthsGri
         syncSwitchMonth: PropTypes.Requireable<boolean>;
         onPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
         focusRecordsRef: PropTypes.Requireable<object>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
         type: string;

package/lib/es/datePicker/monthsGrid.js

@@ -664,7 +664,8 @@ MonthsGrid.propTypes = {
   syncSwitchMonth: PropTypes.bool,
   // Callback function for panel date switching
   onPanelChange: PropTypes.func,
-  focusRecordsRef: PropTypes.object
+  focusRecordsRef: PropTypes.object,
+  triggerRender: PropTypes.func
 };
 MonthsGrid.defaultProps = {
   type: 'date',

package/lib/es/inputNumber/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputProps } from '../input';
-import { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
+import InputNumberFoundation, { InputNumberAdapter } from '@douyinfe/semi-foundation/lib/es/inputNumber/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { strings } from '@douyinfe/semi-foundation/lib/es/inputNumber/constants';
 import '@douyinfe/semi-foundation/lib/es/inputNumber/inputNumber.css';
@@ -85,20 +85,21 @@ declare class InputNumber extends BaseComponent<InputNumberProps, InputNumberSta
     currentValue: number | string;
     cursorBefore: string;
     cursorAfter: string;
+    foundation: InputNumberFoundation;
     constructor(props: InputNumberProps);
     componentDidUpdate(prevProps: InputNumberProps): void;
     setInputRef: (node: HTMLInputElement) => void;
-    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => any;
-    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => any;
-    handleInputKeyDown: (e: React.KeyboardEvent) => any;
-    handleInputMouseEnter: (e: React.MouseEvent) => any;
-    handleInputMouseLeave: (e: React.MouseEvent) => any;
-    handleInputMouseMove: (e: React.MouseEvent) => any;
-    handleUpClick: (e: React.KeyboardEvent) => any;
-    handleDownClick: (e: React.KeyboardEvent) => any;
-    handleMouseUp: (e: React.MouseEvent) => any;
-    handleMouseLeave: (e: React.MouseEvent) => any;
+    handleInputFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputChange: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleInputKeyDown: (e: React.KeyboardEvent) => void;
+    handleInputMouseEnter: (e: React.MouseEvent) => void;
+    handleInputMouseLeave: (e: React.MouseEvent) => void;
+    handleInputMouseMove: (e: React.MouseEvent) => void;
+    handleUpClick: (e: React.KeyboardEvent) => void;
+    handleDownClick: (e: React.KeyboardEvent) => void;
+    handleMouseUp: (e: React.MouseEvent) => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     renderButtons: () => JSX.Element;
     renderSuffix: () => React.ReactNode;
     render(): JSX.Element;

package/lib/es/inputNumber/index.js

@@ -334,7 +334,11 @@ class InputNumber extends BaseComponent {
           if (this.foundation.isValidNumber(parsedNum) && parsedNum !== this.state.number) {
             const obj = {
               number: parsedNum
-            }; // Updates input when a button is clicked
+            };
+            /**
+             * If you are clicking the button, it will automatically format once
+             * We need to set the status to false after trigger focus event
+             */
 
             if (this.clickUpOrDown) {
               obj.value = this.foundation.doFormat(valueStr, true);

package/lib/es/transfer/index.d.ts

@@ -152,7 +152,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderHeader(headerConfig: HeaderConfig): JSX.Element;
     renderLeftItem(item: ResolvedDataItem, index: number): React.ReactNode;
     renderLeft(locale: Locale['Transfer']): React.ReactNode;
-    renderGroupTitle(group: GroupItem): JSX.Element;
+    renderGroupTitle(group: GroupItem, index: number): JSX.Element;
     renderLeftTree(): JSX.Element;
     renderLeftList(visibileItems: Array<ResolvedDataItem>): JSX.Element;
     renderRightItem(item: ResolvedDataItem): React.ReactNode;

package/lib/es/transfer/index.js

@@ -329,11 +329,11 @@ class Transfer extends BaseComponent {
     }, inputCom, content);
   }
 
-  renderGroupTitle(group) {
+  renderGroupTitle(group, index) {
     const groupCls = cls("".concat(prefixcls, "-group-title"));
     return /*#__PURE__*/React.createElement("div", {
       className: groupCls,
-      key: group.title
+      key: "title-".concat(index)
     }, group.title);
   }
 
@@ -390,7 +390,7 @@ class Transfer extends BaseComponent {
         // group content already insert
         content.push(optionContent);
       } else if (parentGroup) {
-        const groupContent = this.renderGroupTitle(parentGroup);
+        const groupContent = this.renderGroupTitle(parentGroup, index);
         groupStatus.set(parentGroup.title, true);
         content.push(groupContent);
         content.push(optionContent);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.2.1",
+    "version": "2.2.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.2.1",
-        "@douyinfe/semi-foundation": "2.2.1",
-        "@douyinfe/semi-icons": "2.2.1",
-        "@douyinfe/semi-illustrations": "2.2.1",
-        "@douyinfe/semi-theme-default": "2.2.1",
+        "@douyinfe/semi-animation-react": "2.2.2",
+        "@douyinfe/semi-foundation": "2.2.2",
+        "@douyinfe/semi-icons": "2.2.2",
+        "@douyinfe/semi-illustrations": "2.2.2",
+        "@douyinfe/semi-theme-default": "2.2.2",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "6d8bb9dd22bf199225fa2a0dda4f8524a4b97f6f",
+    "gitHead": "de84e4f81bb443c457c075e808c4bd1fcf9441d7",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.2.1",
+        "@douyinfe/semi-scss-compile": "2.2.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/transfer/index.tsx

@@ -445,10 +445,10 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         );
     }
 
-    renderGroupTitle(group: GroupItem) {
+    renderGroupTitle(group: GroupItem, index: number) {
         const groupCls = cls(`${prefixcls }-group-title`);
         return (
-            <div className={groupCls} key={group.title}>
+            <div className={groupCls} key={`title-${index}`}>
                 {group.title}
             </div>
         );
@@ -493,7 +493,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 // group content already insert
                 content.push(optionContent);
             } else if (parentGroup) {
-                const groupContent = this.renderGroupTitle(parentGroup);
+                const groupContent = this.renderGroupTitle(parentGroup, index);
                 groupStatus.set(parentGroup.title, true);
                 content.push(groupContent);
                 content.push(optionContent);