diff --git a/README.md b/README.md
index a83d92e..2389e2a 100644
--- a/README.md
+++ b/README.md
@@ -176,7 +176,7 @@ Props that can be passed to the component are listed below:
ratingAverageIconProps?: object
- An object defining the fill color and background color for customizing the appearance of star icon in the average rating section.
+ An object defining the fill color ( fillColor?: string ) and background color ( bgColor?: string ) for customizing the appearance of star icon in the average rating section.
undefined
@@ -189,6 +189,11 @@ Props that can be passed to the component are listed below:
A string used to customize the text accompanying the star rating average which provides additional information about the total number of reviews.
'reviews'
+
+ order?: 'ORIGINAL' | 'REVERSE'
+ The order prop dictates the summary section's display order. Possible values are: 'ORIGINAL' or 'REVERSE'. For numeric ratingIds, it sorts in ascending (ORIGINAL) or descending (REVERSE) order. For string based ratingIds, it reflects the original/reversed order of keys in the ratings prop.
+ 'REVERSE'
+
@@ -247,22 +252,22 @@ import RatingSummary from '@keyvaluesystems/react-star-rating-summary';
function App() {
const countColors = {
- 1: 'red',
- 2: 'yellow',
- 3: 'blue',
- 4: 'orange',
- 5: 'white'
+ 1: 'red',
+ 2: 'yellow',
+ 3: 'blue',
+ 4: 'orange',
+ 5: 'white'
};
return (
= (props) => {
const { fillColor, bgColor, colorFilledFraction, id } = props;
return (
-
+
diff --git a/src/rating-summary/RatingSummary.tsx b/src/rating-summary/RatingSummary.tsx
index 1767f00..17b467e 100644
--- a/src/rating-summary/RatingSummary.tsx
+++ b/src/rating-summary/RatingSummary.tsx
@@ -3,7 +3,7 @@ import React, { FC } from 'react';
import { ISummaryProp, RatingRanks } from './types';
import RatingLabel from '../rating-label';
import RatingDistributionItem from '../rating-distribution-item';
-import { Elements, GenericElements } from '../constants';
+import { Elements, GenericElements, ORDER } from '../constants';
import { getStyles, getTotalRatingCount } from '../utils';
import RatingAverage from '../rating-average';
import classes from './styles.module.scss';
@@ -23,7 +23,8 @@ const RatingSummary: FC = (props) => {
averageRatingPrecision = 1,
ratingAverageIconProps = {},
thousandsSeparator,
- ratingAverageSubText = 'reviews'
+ ratingAverageSubText = 'reviews',
+ order = ORDER.REVERSE
} = props;
const getRatingRanks = (): RatingRanks => {
@@ -39,6 +40,11 @@ const RatingSummary: FC = (props) => {
const ranks: RatingRanks = getRatingRanks();
+ const ratingKeys =
+ order === ORDER.REVERSE
+ ? Object.keys(ratings).reverse()
+ : Object.keys(ratings);
+
return (
{showAverageRating && (
@@ -58,30 +64,28 @@ const RatingSummary: FC
= (props) => {
style={styles[GenericElements.SummaryContainer]}
id="ratings-container"
>
- {Object.keys(ratings)
- .reverse()
- .map((ratingId) => (
-
- {(renderLabel && <>{renderLabel(ratingId)}>) || (
-
- )}
-
-
- ))}
+ {ratingKeys.map((ratingId) => (
+
+ {(renderLabel && <>{renderLabel(ratingId)}>) || (
+
+ )}
+
+
+ ))}
);
diff --git a/src/rating-summary/types.d.ts b/src/rating-summary/types.d.ts
index 921134e..40279a7 100644
--- a/src/rating-summary/types.d.ts
+++ b/src/rating-summary/types.d.ts
@@ -1,6 +1,6 @@
import { ReactElement } from 'react';
-import { Elements, GenericElements } from '../constants';
+import { Elements, GenericElements, ORDER } from '../constants';
export type StyleObjectType = React.CSSProperties;
@@ -48,4 +48,5 @@ export type ISummaryProp = {
ratingAverageIconProps?: RatingAverageIconProps;
thousandsSeparator?: string;
ratingAverageSubText?: string;
+ order?: ORDER;
};
diff --git a/src/stories/RatingSummary.stories.tsx b/src/stories/RatingSummary.stories.tsx
index ceb024d..59f2599 100644
--- a/src/stories/RatingSummary.stories.tsx
+++ b/src/stories/RatingSummary.stories.tsx
@@ -48,6 +48,10 @@ export default {
fillColor: '#919191',
bgColor: '#F2F2F2'
}
+ },
+ order: {
+ control: { type: 'radio' },
+ options: ['ORIGINAL', 'REVERSE']
}
}
} as ComponentMeta;
@@ -205,3 +209,9 @@ VariantWithCustomRanks.args = {
},
ratingAverageSubText: 'total'
};
+
+export const VariantWithOriginalOrder = Template.bind({});
+VariantWithOriginalOrder.args = {
+ ...VariantWithStringBasedRatings.args,
+ order: 'ORIGINAL'
+};
diff --git a/src/tests/ratingSummary.test.tsx b/src/tests/ratingSummary.test.tsx
index 7549fa7..b8b40d4 100644
--- a/src/tests/ratingSummary.test.tsx
+++ b/src/tests/ratingSummary.test.tsx
@@ -1,8 +1,10 @@
import React from 'react';
import { render, queryByAttribute } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
+
import RatingSummary from '../rating-summary';
import { IRatings } from '../rating-summary/types';
+import { ORDER } from '../constants';
const getById = queryByAttribute.bind(null, 'id');
describe('RatingSummary', () => {
@@ -15,7 +17,9 @@ describe('RatingSummary', () => {
};
const total = 575;
it('should render the RatingSummary component', () => {
- const { container } = render( );
+ const { container } = render(
+
+ );
const ratingSummaryComponent = getById(container, 'ratings-container');
if (!ratingSummaryComponent) throw Error('No Component present');
});