From 177d0431a00eea3f47c6dfa0487dcc59d1d970ab Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Thu, 3 Aug 2023 14:32:49 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20Nav=E7=BB=84=E4=BB=B6=20visibleOn=20?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=8E=A7=E5=88=B6=E5=A4=B1=E6=95=88=E9=97=AE?= =?UTF-8?q?=E9=A2=98;=20chore:=20InputNumber=E4=BE=9D=E8=B5=96=E5=8C=85?= =?UTF-8?q?=E5=85=BC=E5=AE=B9=E9=97=AE=E9=A2=98=20(#7682)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/nav.md | 40 ++++++++++++ package.json | 3 +- src/components/NumberInput.tsx | 114 ++++++++++++++++++++------------- src/renderers/Nav.tsx | 5 +- 4 files changed, 116 insertions(+), 46 deletions(-) diff --git a/docs/zh-CN/components/nav.md b/docs/zh-CN/components/nav.md index 7662cc59a..563e47372 100755 --- a/docs/zh-CN/components/nav.md +++ b/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，这样只有点开的时才会加载。 diff --git a/package.json b/package.json index d02bd7335..38345159f 100644 --- a/package.json +++ b/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", diff --git a/src/components/NumberInput.tsx b/src/components/NumberInput.tsx index fe0fa6bbf..68c2ad75d 100644 --- a/src/components/NumberInput.tsx +++ b/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 { 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 { } return updateValue; - }; const updatedValue = triggerValueUpdate(target, false); val = Number(updatedValue.toString()); @@ -153,28 +158,34 @@ export class NumberInput extends React.Component { if (typeof precision === 'number') { precisionProps.precision = precision; } - return + return ( + + ); } render(): JSX.Element { const { @@ -198,29 +209,44 @@ export class NumberInput extends React.Component { } return ( <> - {displayMode === 'enhance' ? -
+ {displayMode === 'enhance' ? ( +
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')} + >
{this.renderBase()}
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')} + >
-
: this.renderBase()} +
+ ) : ( + this.renderBase() + )} ); } diff --git a/src/renderers/Nav.tsx b/src/renderers/Nav.tsx index 10358027c..4a90de808 100644 --- a/src/renderers/Nav.tsx +++ b/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} @@ -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'); } }