handle rtl styles
This commit is contained in:
@@ -52,7 +52,13 @@ export function RateBottomSheet() {
|
|||||||
|
|
||||||
// Calculate which part of the star was clicked
|
// Calculate which part of the star was clicked
|
||||||
// Divide star into 4 parts: 0-25% = 0.25, 25-50% = 0.5, 50-75% = 0.75, 75-100% = 1.0
|
// Divide star into 4 parts: 0-25% = 0.25, 25-50% = 0.5, 50-75% = 0.75, 75-100% = 1.0
|
||||||
const clickPercentage = clickX / starWidth;
|
let clickPercentage = clickX / starWidth;
|
||||||
|
|
||||||
|
// In RTL mode, invert the click percentage since stars are displayed in reverse
|
||||||
|
if (isRTL) {
|
||||||
|
clickPercentage = 1 - clickPercentage;
|
||||||
|
}
|
||||||
|
|
||||||
let starValue = 0;
|
let starValue = 0;
|
||||||
|
|
||||||
if (clickPercentage <= 0.25) {
|
if (clickPercentage <= 0.25) {
|
||||||
@@ -179,7 +185,7 @@ export function RateBottomSheet() {
|
|||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
...(isRTL ? { right: 0 } : { left: 0 }),
|
||||||
width: `${fillPercentage}%`,
|
width: `${fillPercentage}%`,
|
||||||
height: "100%",
|
height: "100%",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
@@ -194,7 +200,7 @@ export function RateBottomSheet() {
|
|||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
...(isRTL ? { right: 0 } : { left: 0 }),
|
||||||
width: 40,
|
width: 40,
|
||||||
height: 40,
|
height: 40,
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user