Skip to content

Commit 2fd16d6

Browse files
Amber-Nan杨楠
Amber-Nan
and
杨楠
authored
feat(Rating): 增加自定义每项的提示信息 & 更新文档 (#326)
* fix(Divider):优化 gutter属性不生效问题 * feat(Divider): 增加分割线标题的位置调整功能 & 更新文档 * feat(Rating):增加自定义每项的提示信息 & 更新文档 * feat(Rating):增加只读功能 & 文档更新 Co-authored-by: 杨楠 <[email protected]>
1 parent 6ac2fce commit 2fd16d6

File tree

3 files changed

+140
-35
lines changed

3 files changed

+140
-35
lines changed

‎example/examples/src/routes/Rating/index.tsx

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import {StyleSheet, View} from 'react-native';
2+
import {View} from 'react-native';
33
import Layout, {Container} from '../../Layout';
44
import {Rating, Icon} from '@uiw/react-native';
55
import {ComProps} from '../../routes';
@@ -10,7 +10,8 @@ export interface IndexProps extends ComProps {}
1010
export interface IndexState {
1111
visible: boolean;
1212
}
13-
13+
const desc = ['', '1星', '2星', '3星', '4星', '5星'];
14+
const descs = ['terrible', 'bad', 'normal', 'good', 'wonderful', 'perfect'];
1415
export default class Index extends Component<IndexProps, IndexState> {
1516
static state: IndexState;
1617
constructor(props: IndexProps) {
@@ -31,33 +32,48 @@ export default class Index extends Component<IndexProps, IndexState> {
3132
<Layout>
3233
<Header title={title} description={description} />
3334
<Body>
34-
<View style={styles.divider} />
35-
<Rating
36-
defaultRating={2}
37-
resultRating={10}
38-
icon={{
39-
unactived: <Icon name="star-off" />,
40-
actived: <Icon name="star-on" />,
41-
}}
42-
onPress={console.log}
43-
/>
44-
<View style={styles.divider} />
45-
<Rating />
35+
<Card title="基本使用">
36+
<Rating />
37+
</Card>
38+
<Card title="指定 Icon">
39+
<Rating
40+
defaultRating={3}
41+
icon={{
42+
unactived: <Icon name="smile-o" fill="red" />,
43+
actived: <Icon name="smile" fill="red" />,
44+
}}
45+
onPress={console.log}
46+
/>
47+
</Card>
48+
<Card title="默认选中及总数">
49+
<Rating
50+
defaultRating={2}
51+
resultRating={10}
52+
icon={{
53+
unactived: <Icon name="star-off" />,
54+
actived: <Icon name="star-on" />,
55+
}}
56+
onPress={console.log}
57+
/>
58+
</Card>
59+
<Card title="评分组件加上文案展示">
60+
<Rating tooltips={desc} defaultRating={1} />
61+
</Card>
62+
<Card title="评分文案样式修改">
63+
<Rating
64+
tooltips={descs}
65+
defaultRating={3}
66+
color="blue"
67+
tooltipsStyle={{fontSize: 25, color: 'blue'}}
68+
/>
69+
</Card>
70+
<Card title="只读">
71+
<Rating defaultRating={3} color="green" disabled />
72+
</Card>
4673
</Body>
4774
<Footer />
4875
</Layout>
4976
</Container>
5077
);
5178
}
5279
}
53-
54-
const styles = StyleSheet.create({
55-
card: {
56-
backgroundColor: '#fff',
57-
paddingLeft: 20,
58-
paddingRight: 20,
59-
},
60-
divider: {
61-
marginVertical: 10,
62-
},
63-
});

‎packages/core/src/Rating/README.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Rating 评分
33

44
在你想用任意需要评分的的地方使用。
55

6-
<img src='https://user-images.githubusercontent.com/66067296/140004186-31b369e2-13f1-4dd2-aef5-331aa133b0fe.gif' alt='Rating' style='zoom:33%;' />
6+
<img src='https://user-images.githubusercontent.com/66067296/140290956-1328745e-63da-4d17-8db9-238c18078272.gif' alt='Rating' style='zoom:33%;' />
77

88
### 基础示例
99

@@ -44,6 +44,58 @@ function Demo() {
4444
}
4545
```
4646

47+
### 默认选中及总数
48+
49+
```jsx
50+
import { Fragment } from 'react';
51+
import { Rating, Icon } from '@uiw/react-native';
52+
function Demo() {
53+
return (
54+
<Fragment>
55+
<Rating
56+
defaultRating={3}
57+
resultRating={10}
58+
icon={{
59+
unactived: <Icon name="smile-o" fill="red" />,
60+
actived: <Icon name="smile" fill="red" />,
61+
}}
62+
onPress={console.log}
63+
/>
64+
</Fragment>
65+
);
66+
}
67+
```
68+
69+
### 评分组件加上文案展示及样式修改
70+
71+
```jsx
72+
import { Fragment } from 'react';
73+
import { Rating, Icon } from '@uiw/react-native';
74+
function Demo() {
75+
const desc = ['0星', '1星', '2星', '3星', '4星', '5星'];
76+
return (
77+
<Fragment>
78+
<Rating tooltips={desc} tooltipsStyle={{ fontSize: 25, color: 'blue' }} />
79+
</Fragment>
80+
);
81+
}
82+
```
83+
84+
### 只读
85+
86+
```jsx
87+
import { Fragment } from 'react';
88+
import { Rating, Icon } from '@uiw/react-native';
89+
function Demo() {
90+
const desc = ['0星', '1星', '2星', '3星', '4星', '5星'];
91+
return (
92+
<Fragment>
93+
<Rating defaultRating={3} color="green" disabled />
94+
</Fragment>
95+
);
96+
}
97+
```
98+
4799
### Props
48100

49101
```ts
@@ -69,5 +121,11 @@ export interface RatingProps {
69121
* @param score type: number 选中几个
70122
*/
71123
onPress?: (score: number) => void;
124+
/** 自定义每项的提示信息 */
125+
tooltips?: string[];
126+
/** 自定义提示信息样式 */
127+
tooltipsStyle?: StyleProp<TextStyle>;
128+
/** 只读模式 */
129+
disabled: boolean
72130
}
73131
```

‎packages/core/src/Rating/index.tsx

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { View, StyleSheet, TouchableOpacity } from 'react-native';
2+
import { View, StyleSheet, TouchableOpacity, Text, StyleProp, TextStyle } from 'react-native';
33

44
import Icon, { IconsName } from '../Icon';
55
import { TabsItemIconTypes } from '../Tabs/TabsItem';
@@ -24,6 +24,12 @@ export interface RatingProps {
2424
* @param score type: number 得到几分
2525
*/
2626
onPress?: (score: number) => void;
27+
/** 自定义每项的提示信息 */
28+
tooltips?: string[];
29+
/** 自定义提示信息样式 */
30+
tooltipsStyle?: StyleProp<TextStyle>;
31+
/** 只读模式 */
32+
disabled: boolean;
2733
}
2834

2935
export interface RatingState {
@@ -33,66 +39,87 @@ export interface RatingState {
3339
color: string;
3440
defaultRating: number;
3541
typeIcon: icoType;
42+
tooltips?: string[];
43+
tooltipsText?: string;
44+
disabled: boolean;
3645
}
3746

3847
export default class Rating extends React.Component<RatingProps, RatingState> {
3948
constructor(props: RatingProps) {
4049
super(props);
4150
let start = (props.icon && props.icon.unactived) || 'star-off';
4251
let end = (props.icon && props.icon.actived) || 'star-on';
52+
4353
this.state = {
4454
defaultRating: props.defaultRating || 0,
4555
resultRating: props.resultRating || 5,
4656
icon: [],
4757
size: props.size ?? 24,
4858
color: props.color || '#ebc445',
4959
typeIcon: [start, end],
60+
tooltips: props.tooltips,
61+
tooltipsText: '',
62+
disabled: false,
5063
};
5164
}
5265
componentDidMount() {
5366
const { defaultRating } = this.state;
5467
this.updateIcon(defaultRating);
5568
}
69+
5670
flag = true;
5771
updateIcon = (index: number) => {
5872
const { resultRating } = this.state;
59-
const { onPress } = this.props;
73+
const { onPress, disabled } = this.props;
6074
let start = this.state.typeIcon[0];
6175
let end = this.state.typeIcon[1];
76+
if (disabled) {
77+
this.setState({ disabled: disabled });
78+
}
6279
if (index === 1 && this.flag) {
6380
this.setState({ icon: [...new Array(index).fill(end), ...new Array(resultRating - index).fill(start)] });
6481
onPress?.(1);
82+
if (this.state.tooltips) {
83+
this.setState({ tooltipsText: this.state.tooltips[index] });
84+
}
6585
this.flag = false;
6686
} else if (index === 1 && !this.flag) {
6787
this.setState({ icon: [...new Array(index - 1).fill(end), ...new Array(resultRating - index + 1).fill(start)] });
88+
if (this.state.tooltips) {
89+
this.setState({ tooltipsText: this.state.tooltips[index - 1] });
90+
}
6891
this.flag = true;
6992
onPress?.(0);
7093
} else {
7194
this.setState({ icon: [...new Array(index).fill(end), ...new Array(resultRating - index).fill(start)] });
95+
if (this.state.tooltips) {
96+
this.setState({ tooltipsText: this.state.tooltips[index] });
97+
}
7298
this.flag = true;
7399
onPress?.(index);
74100
}
75101
};
76102
render() {
103+
const { icon, size, color, tooltipsText, disabled } = this.state;
104+
const { tooltipsStyle } = this.props;
77105
return (
78106
<View>
79107
<View style={styles.RatingContainer}>
80-
{this.state.icon.map((item, index) => {
108+
{icon.map((item, index) => {
81109
return (
82110
<TouchableOpacity
83111
onPress={() => {
84-
this.updateIcon(index + 1);
112+
if (disabled === false) {
113+
this.updateIcon(index + 1);
114+
}
85115
}}
86116
key={index}
87117
>
88-
{typeof item === 'string' ? (
89-
<Icon name={item as IconsName} color="#ebc445" size={this.state.size} />
90-
) : (
91-
item
92-
)}
118+
{typeof item === 'string' ? <Icon name={item as IconsName} color={color} size={size} /> : item}
93119
</TouchableOpacity>
94120
);
95121
})}
122+
<Text style={[styles.tooltipsText, { fontSize: size - 5, color: color }, tooltipsStyle]}>{tooltipsText}</Text>
96123
</View>
97124
</View>
98125
);
@@ -102,5 +129,9 @@ export default class Rating extends React.Component<RatingProps, RatingState> {
102129
const styles = StyleSheet.create({
103130
RatingContainer: {
104131
flexDirection: 'row',
132+
alignItems: 'center',
133+
},
134+
tooltipsText: {
135+
marginHorizontal: 10,
105136
},
106137
});

0 commit comments

Comments
 (0)