From 71045a6d4e9e80b95f9f21b86579f291263531ea Mon Sep 17 00:00:00 2001 From: manacy-keyvalue <112211103+manacy-keyvalue@users.noreply.github.com> Date: Thu, 21 Dec 2023 14:00:02 +0530 Subject: [PATCH] Fix: Added support for ordering rating summary and fixed minor issues (#17) * Added support for ordering rating summary, fixed console error related to svg, updated readMe * formatted code --- README.md | 29 ++++++++------ src/assets/star-grey.svg | 1 - src/constants.ts | 6 +++ src/rating-average/star/Star.tsx | 7 +--- src/rating-summary/RatingSummary.tsx | 56 ++++++++++++++------------- src/rating-summary/types.d.ts | 3 +- src/stories/RatingSummary.stories.tsx | 10 +++++ src/tests/ratingSummary.test.tsx | 6 ++- 8 files changed, 71 insertions(+), 47 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) => { 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'); });