1
1
import {
2
- $ , Component ,
2
+ $ ,
3
+ Component ,
3
4
component$ ,
4
5
PropFunction ,
5
6
Slot ,
6
7
useId ,
7
8
useStore ,
8
- useStyles$
9
+ useStyles$ ,
9
10
} from '@builder.io/qwik' ;
10
11
import styles from './rating.css?inline' ;
11
12
12
13
export type RatingProps = {
13
14
value ?: number ;
14
15
total ?: number ;
15
- icon ?: Component < any > ;
16
- onChange$ ?: PropFunction < ( index : number ) => void >
17
- }
18
-
19
- export const Rating = component$ (
20
- ( props : RatingProps ) => {
21
- const { value, total = 5 , onChange$} = props
22
- const uniqueId = useId ( )
16
+ icon ?: Component < { } > ;
17
+ onChange$ ?: PropFunction < ( index : number ) => void > ;
18
+ } ;
23
19
24
- useStyles$ ( styles )
25
- const state = useStore ( {
26
- index : 0 ,
27
- tempIndex : 0
28
- } ) ;
20
+ export const Rating = component$ ( ( props : RatingProps ) => {
21
+ const { value, total = 5 , onChange$ } = props ;
22
+ const uniqueId = useId ( ) ;
29
23
30
- const onItemClick$ = $ ( ( index : number ) => {
31
- state . index = index ;
32
- if ( onChange$ ) {
33
- onChange$ ( index + 1 )
34
- }
35
- } )
36
- return (
37
- < span class = "wrapper" >
38
- {
39
- new Array ( total ) . fill ( '' ) . map ( ( item , i ) => {
40
- const Icon = props . icon || DefaultIcon ;
41
- return (
42
- < RatingIcon
43
- key = { useId ( ) }
44
- name = { `rating-${ uniqueId } ` }
45
- index = { i }
46
- onChange$ = { ( ) => onItemClick$ ( i ) }
47
- value = { value }
48
- >
49
- < Icon />
50
- </ RatingIcon >
51
- )
52
- } )
53
- }
54
- </ span >
55
- )
56
- }
57
- ) ;
24
+ useStyles$ ( styles ) ;
25
+ const state = useStore ( {
26
+ index : 0 ,
27
+ tempIndex : 0 ,
28
+ } ) ;
58
29
30
+ const onItemClick$ = $ ( ( index : number ) => {
31
+ state . index = index ;
32
+ if ( onChange$ ) {
33
+ onChange$ ( index + 1 ) ;
34
+ }
35
+ } ) ;
36
+ return (
37
+ < span class = "wrapper" >
38
+ { new Array ( total ) . fill ( '' ) . map ( ( item , i ) => {
39
+ const Icon = props . icon || DefaultIcon ;
40
+ return (
41
+ < RatingIcon
42
+ key = { useId ( ) }
43
+ name = { `rating-${ uniqueId } ` }
44
+ index = { i }
45
+ onChange$ = { ( ) => onItemClick$ ( i ) }
46
+ value = { value }
47
+ >
48
+ < Icon />
49
+ </ RatingIcon >
50
+ ) ;
51
+ } ) }
52
+ </ span >
53
+ ) ;
54
+ } ) ;
59
55
60
56
/**
61
57
* Rating Icon
@@ -66,22 +62,27 @@ interface RatingIconProps {
66
62
value ?: number ;
67
63
onChange$ : PropFunction < ( ) => void > ;
68
64
}
69
- export const RatingIcon = component$ (
70
- ( props : RatingIconProps ) => {
71
- const { index, name, value } = props ;
65
+ export const RatingIcon = component$ ( ( props : RatingIconProps ) => {
66
+ const { index, name, value } = props ;
72
67
73
- return < >
74
- < label for = { `${ name } -${ index } ` } > < Slot /> </ label >
68
+ return (
69
+ < >
70
+ < label for = { `${ name } -${ index } ` } >
71
+ < Slot />
72
+ </ label >
75
73
< input
76
- onChange$ = { props . onChange$ } hidden type = "radio"
77
- checked = { value === ( index + 1 ) }
74
+ onChange$ = { props . onChange$ }
75
+ hidden
76
+ type = "radio"
77
+ checked = { value === index + 1 }
78
78
name = { name }
79
79
id = { `${ name } -${ index } ` }
80
80
/>
81
81
</ >
82
- } )
82
+ ) ;
83
+ } ) ;
83
84
84
85
/**
85
86
* Default Icon
86
87
*/
87
- export const DefaultIcon = component$ ( ( ) => < > ⭐️</ > )
88
+ export const DefaultIcon = component$ ( ( ) => < > ⭐️</ > ) ;
0 commit comments