Merge pull request #3619 from tooeast/feat-input-rating-event

feat: InputRating 评分组件事件&动作补充

examples/components/EventAction/InputRatingEvent.jsx

@@ -0,0 +1,88 @@
+export default {
+  type: 'page',
+  title: '评分组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'InputRating组件',
+      inline: false,
+      wrapperComponent: 'h2'
+    },
+    {
+      type: 'form',
+      debug: true,
+      body: [
+        {
+          name: "input-rating-clear",
+          type: "action",
+          label: 'clear触发器',
+          level: 'primary',
+          onEvent: {
+            click: {
+              actions: [
+                {
+                  actionType: 'clear',
+                  componentId: 'clear-input-rating-clear-receiver',
+                  description: '点击清空内容'
+                }
+              ]
+            }
+          }
+        },
+        {
+          name: 'rate-clear',
+          id: 'clear-input-rating-clear-receiver',
+          type: 'input-rating',
+          value: 3,
+          onEvent: {
+            change: {
+              actions: [
+                {
+                  actionType: 'toast',
+                  msgType: 'info',
+                  msg: '派发change事件'
+                }
+              ]
+            }
+          }
+        },
+        {
+          name: "input-rating-reset",
+          type: "action",
+          label: 'reset触发器',
+          level: 'primary',
+          onEvent: {
+            click: {
+              actions: [
+                {
+                  actionType: 'clear',
+                  componentId: 'clear-input-rating-reset-receiver',
+                  description: '点击清空内容'
+                }
+              ]
+            }
+          }
+        },
+        {
+          name: 'rate-reset',
+          id: 'clear-input-rating-reset-receiver',
+          type: 'input-rating',
+          value: 3,
+          resetValue: 3,
+          onEvent: {
+            change: {
+              actions: [
+                {
+                  actionType: 'toast',
+                  msgType: 'info',
+                  msg: '派发change事件'
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+};

examples/components/Example.jsx

@@ -81,6 +81,7 @@ import TabsEventSchema from './EventAction/TabsEvent';
 import UploadEventSchema from './EventAction/UploadEvent';
 import SelectEventActionSchema from './EventAction/SelectEvent';
 import ButtonEventActionSchema from './EventAction/ButtonEvent';
+import InputRatingEventSchema from './EventAction/InputRatingEvent';
 import WizardSchema from './Wizard';
 import ChartSchema from './Chart';
 import EChartsEditorSchema from './ECharts';
@@ -574,6 +575,11 @@ export const examples = [
                 label: '标签页组件',
                 path: 'examples/event/tabs',
                 component: makeSchemaRenderer(TabsEventSchema)
+              },
+              {
+                label: '评分组件',
+                path: 'examples/event/input-rating',
+                component: makeSchemaRenderer(InputRatingEventSchema)
               }
             ]
           },

src/components/Rating.tsx

@@ -105,6 +105,8 @@ export class Rating extends React.Component<RatingProps, any> {
           at: Math.floor(props.value),
           hidden: props.half && props.value % 1 < 0.5
         }
+      }, () => {
+        this.getShowColorAndText(props.value);
       });
     }
   }

src/renderers/Form/InputRating.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import {autobind, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 import Rating, {textPositionType} from '../../components/Rating';
 
 /**
@@ -84,6 +86,28 @@ export default class RatingControl extends React.Component<RatingProps, any> {
     readOnly: false
   };
 
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue} = this.props;
+    if (action.actionType && ['clear', 'reset'].includes(action.actionType)) {
+      this.handleChange(resetValue ?? '');
+    }
+  }
+
+  @autobind
+  async handleChange(value: any) {
+    const {onChange, dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent('change', createObject(data, {
+      value
+    }));
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+    
+    onChange && onChange(value);
+  }
+
   render() {
     const {
       className,
@@ -92,7 +116,6 @@ export default class RatingControl extends React.Component<RatingProps, any> {
       half,
       readOnly,
       disabled,
-      onChange,
       onHoverChange,
       allowClear,
       char,
@@ -122,9 +145,7 @@ export default class RatingControl extends React.Component<RatingProps, any> {
           charClassName={charClassName}
           textClassName={textClassName}
           textPosition={textPosition}
-          onChange={(value: number) => {
+          onChange={this.handleChange}
-            onChange && onChange(value);
-          }}
           onHoverChange={(value: number) => {
             onHoverChange && onHoverChange(value);
           }}