woocommerce/packages/woocommerce-blocks/assets/js/blocks/reviews/frontend-block.js
2021-12-10 12:03:04 +00:00

75 lines
1.8 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { getSetting } from '@woocommerce/settings';
import LoadMoreButton from '@woocommerce/base-components/load-more-button';
import {
ReviewList,
ReviewSortSelect,
} from '@woocommerce/base-components/reviews';
import withReviews from '@woocommerce/base-hocs/with-reviews';
/**
* Block rendered in the frontend.
*
* @param {Object} props Incoming props for the component.
* @param {Object} props.attributes Incoming block attributes.
* @param {function(any):any} props.onAppendReviews Function called when appending review.
* @param {function(any):any} props.onChangeOrderby
* @param {Array} props.reviews
* @param {string} props.sortSelectValue
* @param {number} props.totalReviews
*/
const FrontendBlock = ( {
attributes,
onAppendReviews,
onChangeOrderby,
reviews,
sortSelectValue,
totalReviews,
} ) => {
if ( reviews.length === 0 ) {
return null;
}
const reviewRatingsEnabled = getSetting( 'reviewRatingsEnabled', true );
return (
<>
{ attributes.showOrderby !== 'false' && reviewRatingsEnabled && (
<ReviewSortSelect
value={ sortSelectValue }
onChange={ onChangeOrderby }
/>
) }
<ReviewList attributes={ attributes } reviews={ reviews } />
{ attributes.showLoadMore !== 'false' &&
totalReviews > reviews.length && (
<LoadMoreButton
onClick={ onAppendReviews }
screenReaderLabel={ __(
'Load more reviews',
'woocommerce'
) }
/>
) }
</>
);
};
FrontendBlock.propTypes = {
/**
* The attributes for this block.
*/
attributes: PropTypes.object.isRequired,
onAppendReviews: PropTypes.func,
onChangeArgs: PropTypes.func,
// from withReviewsattributes
reviews: PropTypes.array,
totalReviews: PropTypes.number,
};
export default withReviews( FrontendBlock );