fix(Rating): Rating 评分组件 使用繁琐(#244) (#231)

cuilanxin · web-flow · commit 0890b76f51c5 · 2021-09-20T22:52:54.000+08:00
* 编写选项卡组件 * 类型名称请调整，添加组件文档在网站上展示 * #162修复报错 * fix:#162修复报错 * SpeedDial 悬浮标记 * 优化类型 * feat(ActionSheet): Add new component. * fix: ActionSheet 实例优化，组件优化 * feat(SearchInputBar): Add new component. * feat(Pagination): Add new component. * fix(Tooltip): 修复cloud弹出元素位置问题 * doc(Drawer): Update README.md * doc: Update README.md * fix(Rating): Rating 评分组件 使用繁琐(#244) * fix(Rating): Rating 评分组件 使用繁琐(#244)
diff --git a/example/examples/src/routes/Rating/index.tsx b/example/examples/src/routes/Rating/index.tsx
@@ -33,10 +33,11 @@ export default class Index extends Component<IndexProps, IndexState> {
           <Body>
             <View style={styles.divider} />
             <Rating
-              defaultRating={5}
-              // count={10}
+              defaultRating={2}
+              resultRating={10}
               icon={[<Icon name="star-off" />, <Icon name="star-on" />]}
               // icon={["star-off", "star-on"]}
+              onPress={console.log}
             />
             <View style={styles.divider} />
             <Rating />
diff --git a/packages/core/src/Drawer/README.md b/packages/core/src/Drawer/README.md
@@ -55,6 +55,7 @@ function Demo() {
 ```
 
 ## 注意事项 - 抽屉高度是页面有效高度
+
 ```jsx
 import { Fragment } from 'react';
 import { View, Text, SafeAreaView } from 'react-native';
@@ -77,7 +78,9 @@ function Demo() {
   );
 }
 ```   
+
 ## 抽屉覆盖全屏
+
 - 可查看 [react-native-root-siblings](https://www.npmjs.com/package/react-native-root-siblings) 文档
 ```jsx
 // 在 App.js 文件中 
@@ -123,6 +126,7 @@ function Demo() {
   );
 }
 ``` 
+
 ## props
 
 | 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/core/src/Rating/README.md b/packages/core/src/Rating/README.md
@@ -49,22 +49,20 @@ import { TabsItemIconTypes } from '@uiw/react-native'
 
 export type icoType = [TabsItemIconTypes, TabsItemIconTypes]
 export interface RatingProps {
-  /**  默认几个 */
-  defaultRating?: number,
-  /** 总分 */
-  count?: number,
-  /** 默认分数 */
-  defaultCount?: number,
+  /**  默认选中几个 */
+  defaultRating?: number;
+  /** 总数*/
+  resultRating?: number;
   /** icon 大小 */
-  size?: number,
+  size?: number;
   /** icon 颜色 */
-  color?: string,
+  color?: string;
   /** [未选中, 已选中] */
-  icon?: icoType,
+  icon?: icoType;
   /**
    * void
-   * @param score type: number 得到几分
+   * @param score type: number 选中几个
    */
-  onPress?: (score: number) => void
+  onPress?: (score: number) => void;
 }
 ```
diff --git a/packages/core/src/Rating/index.tsx b/packages/core/src/Rating/index.tsx
@@ -6,12 +6,10 @@ import { TabsItemIconTypes } from '../Tabs/TabsItem';
 
 export type icoType = [TabsItemIconTypes, TabsItemIconTypes];
 export interface RatingProps {
-  /**  默认几个 */
+  /**  默认选中几个 */
   defaultRating?: number;
-  /** 总分 */
-  count?: number;
-  /** 默认分数 */
-  defaultCount?: number;
+  /** 总数*/
+  resultRating?: number;
   /** icon 大小 */
   size?: number;
   /** icon 颜色 */
@@ -27,83 +25,70 @@ export interface RatingProps {
 
 export interface RatingState {
   icon: Array<IconsName | React.ReactElement | React.ReactNode>;
-  count: number;
-  defaultCount: number;
+  resultRating: number;
   size: number;
   color: string;
   defaultRating: number;
   typeIcon: icoType;
 }
 
 export default class Rating extends React.Component<RatingProps, RatingState> {
-  // static state: RatingState
   constructor(props: RatingProps) {
     super(props);
     let start = (props.icon && props.icon[0]) || 'star-off';
     let end = (props.icon && props.icon[1]) || 'star-on';
     this.state = {
-      defaultRating: props.defaultRating || 5,
+      defaultRating: props.defaultRating || 0,
+      resultRating: props.resultRating || 5,
       icon: [],
-      count: props.count ?? 5,
-      defaultCount: props.defaultCount ?? 1,
       size: props.size ?? 24,
       color: props.color || '#ebc445',
       typeIcon: [start, end],
     };
   }
   componentDidMount() {
-    const { defaultCount } = this.state;
-    this.updateIcon(defaultCount);
+    const { defaultRating } = this.state;
+    this.updateIcon(defaultRating);
   }
   flag = true;
   updateIcon = (index: number) => {
-    const { defaultRating } = this.state;
+    const { resultRating } = this.state;
+    const { onPress } = this.props;
     let start = this.state.typeIcon[0];
     let end = this.state.typeIcon[1];
     if (index === 1 && this.flag) {
-      this.setState({ icon: [...new Array(index).fill(end), ...new Array(defaultRating - index).fill(start)] });
+      this.setState({ icon: [...new Array(index).fill(end), ...new Array(resultRating - index).fill(start)] });
+      onPress?.(1);
       this.flag = false;
     } else if (index === 1 && !this.flag) {
-      this.setState({ icon: [...new Array(index - 1).fill(end), ...new Array(defaultRating - index + 1).fill(start)] });
+      this.setState({ icon: [...new Array(index - 1).fill(end), ...new Array(resultRating - index + 1).fill(start)] });
       this.flag = true;
+      onPress?.(0);
     } else {
-      this.setState({ icon: [...new Array(index).fill(end), ...new Array(defaultRating - index).fill(start)] });
+      this.setState({ icon: [...new Array(index).fill(end), ...new Array(resultRating - index).fill(start)] });
       this.flag = true;
+      onPress?.(index);
     }
   };
   render() {
     return (
       <View>
-        {/* <Text >{this.state.count}</Text> */}
         <View style={styles.RatingContainer}>
           {this.state.icon.map((item, index) => {
-            if (typeof item === 'string') {
-              return (
-                <TouchableOpacity
-                  onPress={() => {
-                    this.updateIcon(index + 1);
-                    this.props.onPress &&
-                      this.props.onPress((this.state.count / this.state.defaultRating) * (index + 1));
-                  }}
-                  key={index}
-                >
+            return (
+              <TouchableOpacity
+                onPress={() => {
+                  this.updateIcon(index + 1);
+                }}
+                key={index}
+              >
+                {typeof item === 'string' ? (
                   <Icon name={item as IconsName} color="#ebc445" size={this.state.size} />
-                </TouchableOpacity>
-              );
-            } else {
-              return (
-                <TouchableOpacity
-                  onPress={() => {
-                    this.updateIcon(index + 1);
-                    this.props.onPress &&
-                      this.props.onPress((this.state.count / this.state.defaultRating) * (index + 1));
-                  }}
-                  key={index}
-                >
-                  {item}
-                </TouchableOpacity>
-              );
-            }
+                ) : (
+                  item
+                )}
+              </TouchableOpacity>
+            );
           })}
         </View>
       </View>
