fix: Nav组件 visibleOn 动态控制失效问题; chore: InputNumber依赖包兼容问题 (#7682)

docs/zh-CN/components/nav.md

@@ -249,6 +249,46 @@ order: 58
 }
 ```
 
+### 表达式控制
+
+使用`visibleOn`或者`hiddenOn`表达式控制导航项目的显隐。
+
+```schema
+{
+    "type": "page",
+    "body": [
+        {
+
+            "type": "switch",
+            "name": "showNav",
+            "label": "切换显隐藏",
+            "onText": "显示Nav2",
+            "offText": "隐藏Nav2",
+        },
+        {
+            "type": "nav",
+            "stacked": false,
+            "links": [
+                {
+                    "label": "Nav 1",
+                    "to": "#更多操作",
+                    "icon": "fa fa-user"
+                },
+                {
+                    "label": "Nav 2",
+                    "to": "#更多操作",
+                    "visibleOn": "data.showNav === true"
+                },
+                {
+                    "label": "Nav 3",
+                    "to": "#更多操作"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ## 懒加载
 
 可以一次只加载部分层级，更深层次的选项可以标记为 `defer` 为 true，这样只有点开的时才会加载。

package.json

@@ -43,6 +43,7 @@
     ]
   },
   "dependencies": {
+    "@rc-component/mini-decimal": "^1.1.0",
     "amis-formula": "^1.3.15",
     "ansi-to-react": "^6.1.6",
     "attr-accept": "2.2.2",
@@ -76,7 +77,7 @@
     "punycode": "^2.1.1",
     "qrcode.react": "^3.0.0",
     "qs": "6.9.7",
-    "rc-input-number": "^7.3.4",
+    "rc-input-number": "^7.4.0",
     "rc-overflow": "^1.2.4",
     "rc-progress": "^3.1.4",
     "react-color": "^2.19.3",

src/components/NumberInput.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import InputNumber from 'rc-input-number';
 import getMiniDecimal, {
   DecimalClass,
-  toFixed
-} from 'rc-input-number/lib/utils/MiniDecimal';
-import {getNumberPrecision} from 'rc-input-number/lib/utils/numberUtil';
+  toFixed,
+  getNumberPrecision
+} from '@rc-component/mini-decimal';
 
 import {Icon} from './icons';
 import {ThemeProps, themeable} from '../theme';
@@ -107,9 +107,15 @@ export class NumberInput extends React.Component<NumberProps, any> {
       if (precision! >= 0) {
         return precision;
       }
-      return Math.max(getNumberPrecision(numStr), getNumberPrecision(Number(step) || 1));
+      return Math.max(
+        getNumberPrecision(numStr),
+        getNumberPrecision(Number(step) || 1)
+      );
     };
-    const triggerValueUpdate = (newValue: DecimalClass, userTyping: boolean): DecimalClass => {
+    const triggerValueUpdate = (
+      newValue: DecimalClass,
+      userTyping: boolean
+    ): DecimalClass => {
       let updateValue = newValue;
       const numStr = updateValue.toString();
       const mergedPrecision = getPrecision(numStr);
@@ -118,7 +124,6 @@ export class NumberInput extends React.Component<NumberProps, any> {
       }
 
       return updateValue;
-
     };
     const updatedValue = triggerValueUpdate(target, false);
     val = Number(updatedValue.toString());
@@ -153,28 +158,34 @@ export class NumberInput extends React.Component<NumberProps, any> {
     if (typeof precision === 'number') {
       precisionProps.precision = precision;
     }
-    return <InputNumber
-      className={cx(className, showSteps === false ? 'no-steps' : '',
-        displayMode === 'enhance' ? 'Number--enhance-input' : '', {
-        [`Number--border${ucFirst(borderMode)}`]: borderMode
-      })}
-      ref={inputRef}
-      readOnly={readOnly}
-      prefixCls={`${ns}Number`}
-      value={value}
-      step={step}
-      max={max}
-      min={min}
-      formatter={formatter}
-      parser={parser}
-      onChange={this.handleChange}
-      disabled={disabled}
-      placeholder={placeholder}
-      onFocus={this.handleFocus}
-      onBlur={this.handleBlur}
-      keyboard={keyboard}
-      {...precisionProps}
-    />
+    return (
+      <InputNumber
+        className={cx(
+          className,
+          showSteps === false ? 'no-steps' : '',
+          displayMode === 'enhance' ? 'Number--enhance-input' : '',
+          {
+            [`Number--border${ucFirst(borderMode)}`]: borderMode
+          }
+        )}
+        ref={inputRef}
+        readOnly={readOnly}
+        prefixCls={`${ns}Number`}
+        value={value}
+        step={step}
+        max={max}
+        min={min}
+        formatter={formatter}
+        parser={parser}
+        onChange={this.handleChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        keyboard={keyboard}
+        {...precisionProps}
+      />
+    );
   }
   render(): JSX.Element {
     const {
@@ -198,29 +209,44 @@ export class NumberInput extends React.Component<NumberProps, any> {
     }
     return (
       <>
-        {displayMode === 'enhance' ?
-          <div className={cx('Number--enhance',
-            disabled ? 'Number--enhance-disabled' : '',
-            showSteps === false ? 'Number--enhance-no-steps' : '',
-            {
-              [`Number--enhance-border${ucFirst(borderMode)}`]: borderMode
-            })}>
+        {displayMode === 'enhance' ? (
+          <div
+            className={cx(
+              'Number--enhance',
+              disabled ? 'Number--enhance-disabled' : '',
+              showSteps === false ? 'Number--enhance-no-steps' : '',
+              {
+                [`Number--enhance-border${ucFirst(borderMode)}`]: borderMode
+              }
+            )}
+          >
             <div
-              className={cx('Number--enhance-left-icon',
-              value && value === min ? 'Number--enhance-border-min': '',
-              disabled ? 'Number--enhance-border-disabled': '',
-              readOnly ? 'Number--enhance-border-readOnly': '')} onClick={() => this.handleEnhanceModeChange('subtract')}>
+              className={cx(
+                'Number--enhance-left-icon',
+                value && value === min ? 'Number--enhance-border-min' : '',
+                disabled ? 'Number--enhance-border-disabled' : '',
+                readOnly ? 'Number--enhance-border-readOnly' : ''
+              )}
+              onClick={() => this.handleEnhanceModeChange('subtract')}
+            >
               <Icon icon="minus" className="icon" />
             </div>
             {this.renderBase()}
             <div
-              className={cx('Number--enhance-right-icon',
-              value && value === max ? 'Number--enhance-border-max': '',
-              disabled ? 'Number--enhance-border-disabled': '',
-              readOnly ? 'Number--enhance-border-readOnly': '')} onClick={() => this.handleEnhanceModeChange('add')}>
+              className={cx(
+                'Number--enhance-right-icon',
+                value && value === max ? 'Number--enhance-border-max' : '',
+                disabled ? 'Number--enhance-border-disabled' : '',
+                readOnly ? 'Number--enhance-border-readOnly' : ''
+              )}
+              onClick={() => this.handleEnhanceModeChange('add')}
+            >
               <Icon icon="plus" className="icon " />
             </div>
-          </div> : this.renderBase()}
+          </div>
+        ) : (
+          this.renderBase()
+        )}
       </>
     );
   }

src/renderers/Nav.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import Overflow from 'rc-overflow';
+import isEqual from 'lodash/isEqual';
 import {Renderer, RendererEnv, RendererProps} from '../factory';
 import getExprProperties from '../utils/filter-schema';
 import {filter, evalExpression} from '../utils/tpl';
@@ -612,7 +613,7 @@ export class Navigation extends React.Component<
                       ) : (
                         generateIcon(cx, overflowIndicator, 'Nav-itemIcon')
                       )}
-                      {overflowLabel && isObject
+                      {overflowLabel && isObject(overflowLabel)
                         ? render('nav-overflow-label', overflowLabel)
                         : overflowLabel}
                     </a>
@@ -799,6 +800,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
         this.props.updateConfig(this.props.config, 'location-change');
       } else if (this.props.links !== prevProps.links) {
         this.props.updateConfig(this.props.links, 'update');
+      } else if (!isEqual(prevProps.data, this.props.data)) {
+        this.props.updateConfig(this.props.links, 'update');
       }
     }