From 6b682b98aaacd89c9095ab5b51af6379788f9616 Mon Sep 17 00:00:00 2001 From: Manacy John Date: Tue, 19 Dec 2023 18:22:40 +0530 Subject: [PATCH 1/2] Added support for ordering rating summary, fixed console error related to svg, updated readMe --- README.md | 29 ++++++++++++++++----------- src/assets/star-grey.svg | 1 - src/constants.ts | 6 ++++++ src/rating-average/star/Star.tsx | 1 - src/rating-summary/RatingSummary.tsx | 11 +++++----- src/rating-summary/types.d.ts | 3 ++- src/stories/RatingSummary.stories.tsx | 10 +++++++++ src/tests/ratingSummary.test.tsx | 4 +++- 8 files changed, 44 insertions(+), 21 deletions(-) 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) => { return ( diff --git a/src/rating-summary/RatingSummary.tsx b/src/rating-summary/RatingSummary.tsx index 1767f00..d846da8 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,8 @@ const RatingSummary: FC = (props) => { const ranks: RatingRanks = getRatingRanks(); + const ratingKeys = order === ORDER.REVERSE ? Object.keys(ratings).reverse() : Object.keys(ratings); + return (
{showAverageRating && ( @@ -58,9 +61,7 @@ const RatingSummary: FC = (props) => { style={styles[GenericElements.SummaryContainer]} id="ratings-container" > - {Object.keys(ratings) - .reverse() - .map((ratingId) => ( + {ratingKeys.map((ratingId) => (
; @@ -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..50e1713 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,7 @@ 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'); }); From 9ab37753f4421455950bd8e9f1d4ee0ac0c3dc48 Mon Sep 17 00:00:00 2001 From: Manacy John Date: Thu, 21 Dec 2023 11:18:34 +0530 Subject: [PATCH 2/2] formatted code --- src/rating-average/star/Star.tsx | 6 +--- src/rating-summary/RatingSummary.tsx | 47 ++++++++++++++------------- src/stories/RatingSummary.stories.tsx | 6 ++-- src/tests/ratingSummary.test.tsx | 4 ++- 4 files changed, 32 insertions(+), 31 deletions(-) diff --git a/src/rating-average/star/Star.tsx b/src/rating-average/star/Star.tsx index ccdc7b2..ea8a369 100644 --- a/src/rating-average/star/Star.tsx +++ b/src/rating-average/star/Star.tsx @@ -6,11 +6,7 @@ const Star: FC = (props) => { const { fillColor, bgColor, colorFilledFraction, id } = props; return ( - + diff --git a/src/rating-summary/RatingSummary.tsx b/src/rating-summary/RatingSummary.tsx index d846da8..17b467e 100644 --- a/src/rating-summary/RatingSummary.tsx +++ b/src/rating-summary/RatingSummary.tsx @@ -40,7 +40,10 @@ const RatingSummary: FC = (props) => { const ranks: RatingRanks = getRatingRanks(); - const ratingKeys = order === ORDER.REVERSE ? Object.keys(ratings).reverse() : Object.keys(ratings); + const ratingKeys = + order === ORDER.REVERSE + ? Object.keys(ratings).reverse() + : Object.keys(ratings); return (
@@ -62,27 +65,27 @@ const RatingSummary: FC = (props) => { id="ratings-container" > {ratingKeys.map((ratingId) => ( -
- {(renderLabel && <>{renderLabel(ratingId)}) || ( - - )} - -
- ))} +
+ {(renderLabel && <>{renderLabel(ratingId)}) || ( + + )} + +
+ ))}
); diff --git a/src/stories/RatingSummary.stories.tsx b/src/stories/RatingSummary.stories.tsx index 49f9d37..59f2599 100644 --- a/src/stories/RatingSummary.stories.tsx +++ b/src/stories/RatingSummary.stories.tsx @@ -50,7 +50,7 @@ export default { } }, order: { - control: { type: 'radio'}, + control: { type: 'radio' }, options: ['ORIGINAL', 'REVERSE'] } } @@ -211,7 +211,7 @@ VariantWithCustomRanks.args = { }; export const VariantWithOriginalOrder = Template.bind({}); -VariantWithOriginalOrder.args={ +VariantWithOriginalOrder.args = { ...VariantWithStringBasedRatings.args, order: 'ORIGINAL' -} +}; diff --git a/src/tests/ratingSummary.test.tsx b/src/tests/ratingSummary.test.tsx index 50e1713..b8b40d4 100644 --- a/src/tests/ratingSummary.test.tsx +++ b/src/tests/ratingSummary.test.tsx @@ -17,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'); });