fix: 评分组件 count 支持变量获取 (#5681)

* fix: 评分组件 count 支持变量获取

* tokenize 修改为 filter
This commit is contained in:
sansiro 2022-11-08 10:35:36 +08:00 committed by GitHub
parent a262db9e21
commit c30b1400d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 4 deletions

View File

@ -9,6 +9,7 @@ import {ClassNamesFn, themeable} from 'amis-core';
import {isObject} from 'amis-core'; import {isObject} from 'amis-core';
import {validations} from 'amis-core'; import {validations} from 'amis-core';
import {Icon} from './icons'; import {Icon} from './icons';
import {isObjectShallowModified} from 'amis-core';
export type textPositionType = 'left' | 'right'; export type textPositionType = 'left' | 'right';
@ -96,7 +97,18 @@ export class Rating extends React.Component<RatingProps, any> {
componentDidUpdate(prevProps: RatingProps) { componentDidUpdate(prevProps: RatingProps) {
const props = this.props; const props = this.props;
if (props.value !== prevProps.value) { if (
isObjectShallowModified(
{
value: props.value,
count: props.count
},
{
value: prevProps.value,
count: prevProps.count
}
)
) {
this.setState( this.setState(
{ {
stars: this.getStars(props.value), stars: this.getStars(props.value),
@ -110,6 +122,11 @@ export class Rating extends React.Component<RatingProps, any> {
this.getShowColorAndText(props.value); this.getShowColorAndText(props.value);
} }
); );
} else if (
isObjectShallowModified(props.colors, prevProps.colors) ||
isObjectShallowModified(props.texts, prevProps.texts)
) {
this.getShowColorAndText(props.value);
} }
} }

View File

@ -5,7 +5,7 @@ import {
FormBaseControl, FormBaseControl,
resolveEventData resolveEventData
} from 'amis-core'; } from 'amis-core';
import {autobind, createObject} from 'amis-core'; import {autobind, createObject, filter, toNumber} from 'amis-core';
import {ActionObject} from 'amis-core'; import {ActionObject} from 'amis-core';
import {Rating} from 'amis-ui'; import {Rating} from 'amis-ui';
import type {textPositionType} from 'amis-ui/lib/components/Rating'; import type {textPositionType} from 'amis-ui/lib/components/Rating';
@ -178,13 +178,17 @@ export default class RatingControl extends React.Component<RatingProps, any> {
classnames: cx classnames: cx
} = this.props; } = this.props;
let finalCount: number = getFinalCount(count, this.props.data);
// 限制最大 100 星,避免渲染卡死问题
finalCount > 100 && (finalCount = 100);
return ( return (
<div className={cx('RatingControl', className)}> <div className={cx('RatingControl', className)}>
<Rating <Rating
classnames={cx} classnames={cx}
value={value} value={value}
disabled={disabled} disabled={disabled}
count={count} count={finalCount}
half={half} half={half}
allowClear={allowClear} allowClear={allowClear}
readOnly={readOnly} readOnly={readOnly}
@ -205,8 +209,28 @@ export default class RatingControl extends React.Component<RatingProps, any> {
} }
} }
function getFinalCount(name: number | string, data: any): number {
if (typeof name === 'number') {
return name;
}
return toNumber(filter(name, data));
}
@FormItem({ @FormItem({
type: 'input-rating', type: 'input-rating',
sizeMutable: false sizeMutable: false,
shouldComponentUpdate: (props: any, prevProps: any) =>
getFinalCount(props.count, props.data) !==
getFinalCount(prevProps.count, prevProps.data),
detectProps: [
'half',
'allowClear',
'colors',
'inactiveColor',
'texts',
'textPosition',
'char'
]
}) })
export class RatingControlRenderer extends RatingControl {} export class RatingControlRenderer extends RatingControl {}