@mui/material#Rating TypeScript Examples
The following examples show how to use
@mui/material#Rating.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.ts From Cromwell with MIT License | 6 votes |
|
MuiProductCard = withElements(BaseProductCard, {
Button: IconButton,
AddCartButton: IconButton,
AddWishlistButton: IconButton,
Alert,
Rating,
QuantityField,
Tooltip: Tooltip,
} as ProductCardProps['elements'], {
notifierOptions: {
position: toastify.POSITION.TOP_RIGHT,
className: notifierStyles.muiToast,
Wrapper: NotifierWrapper,
}
} as ProductCardProps)
Example #2
| Source File: index.ts From Cromwell with MIT License | 5 votes |
|
MuiProductReviews = withElements(BaseProductReviews, {
Alert,
Button,
Rating,
TextField,
Pagination,
Tooltip: Tooltip as any,
} as ProductReviewsProps['elements'])
Example #3
| Source File: EntityTableItem.tsx From Cromwell with MIT License | 4 votes |
|
render() {
const { data, listItemProps } = this.props;
const cstore = getCStore();
let selected = false;
if (this.props.allSelected && !this.props.selectedItems[data.id]) selected = true;
if (!this.props.allSelected && this.props.selectedItems[data.id]) selected = true;
const tableColumns = this.props.listItemProps.getColumns();
return (
<div className={styles.listItem}>
<div className={commonStyles.center}>
<Checkbox
checked={selected}
onChange={() => this.props.listItemProps.toggleSelection(data)} />
</div>
<div className={styles.columns}>
{!!tableColumns?.length && tableColumns.map(col => {
if (!col.visible) return null;
const value = !col.meta ? data?.[col.name] : data?.customMeta?.[col.name];
let tooltipValue = value ?? '';
let content;
if (!this.columnRefs[col.name]) this.columnRefs[col.name] = React.createRef();
if (col.type === 'Select' || col.type === 'Simple text') {
content = (
<p className={styles.ellipsis}
ref={this.columnRefs[col.name]}
>{value ?? ''}</p>
)
}
if (col.type === 'Color') {
content = (
<div style={{
width: '30px',
height: '30px',
backgroundColor: value,
borderRadius: '100%',
}}></div>
)
}
if (col.type === 'Image') {
content = (
<div className={styles.imageItem}
style={{ backgroundImage: value && `url(${value})` }}
></div>
)
}
if (col.type === 'Datetime') {
tooltipValue = toLocaleDateTimeString(value);
content = (
<p className={styles.ellipsis} ref={this.columnRefs[col.name]}>{toLocaleDateTimeString(value)}</p>
)
}
if (col.type === 'Date') {
tooltipValue = toLocaleDateString(value);
content = (
<p className={styles.ellipsis} ref={this.columnRefs[col.name]}>{toLocaleDateString(value)}</p>
)
}
if (col.type === 'Time') {
tooltipValue = toLocaleTimeString(value);
content = (
<p className={styles.ellipsis} ref={this.columnRefs[col.name]}>{toLocaleTimeString(value)}</p>
)
}
if (col.type === 'Currency') {
tooltipValue = cstore.getPriceWithCurrency(value);
content = (
<p className={styles.ellipsis} ref={this.columnRefs[col.name]}>{cstore.getPriceWithCurrency(value)}</p>
)
}
if (col.type === 'Rating') {
content = (
<Rating name="read-only"
size="small"
value={value ?? 0}
precision={0.5}
readOnly
/>
)
}
if (col.getValueView) {
content = <div className={styles.ellipsis}
ref={this.columnRefs[col.name]}>{col.getValueView(value)}</div>;
}
if (col.getTooltipValueView) {
tooltipValue = <div style={{ whiteSpace: 'pre-line' }}>{col.getTooltipValueView(value)}</div>;
}
const TooltipContent = (props: { title: string }): any => {
let title;
if (col.type === 'Color' || col.type === 'Image') title = props.title;
const element = this.columnRefs[col.name]?.current;
// Ellipsis
if (element && element.offsetWidth < element.scrollWidth) title = props.title;
if (title) return <div className={styles.tooltip}>{title}</div>
return null
}
return (
<div className={styles.column}
key={col.name}
style={listItemProps.getColumnStyles(col, tableColumns)}
>
<Tooltip
classes={{ popper: styles.cellTooltipPaper }}
title={<TooltipContent title={(tooltipValue ?? '')} />} enterDelay={1500}
>{content ?? <></>}</Tooltip>
</div>
)
})}
</div>
<div className={styles.listItemActions}>
{data && listItemProps.tableProps?.customElements?.getListItemActions?.(data, this)}
{listItemProps.tableProps?.entityBaseRoute && data?.id && (
<Link to={`${listItemProps.tableProps.entityBaseRoute}/${data?.id}`}>
<IconButton
aria-label="edit"
>
<EditIcon />
</IconButton>
</Link>
)}
{data?.id && (
<IconButton
aria-label="delete"
onClick={() => listItemProps.handleDeleteBtnClick(data)}
>
<DeleteForeverIcon />
</IconButton>
)}
</div>
</div >
);
}
Example #4
| Source File: Dashboard.tsx From Cromwell with MIT License | 4 votes |
|
render() {
const averageRating = this.state?.stats?.averageRating ?? 0;
const reviewsNumber = this.state?.stats?.reviews ?? 0;
return (
<div className={styles.Dashboard} ref={this.contentRef}>
<ResponsiveGridLayout
margin={[15, 15]}
layouts={this.getGridLayout()}
onLayoutChange={this.onLayoutChange}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
rowHeight={30}
cols={{ lg: 12, md: 9, sm: 6, xs: 4, xxs: 2 }}
draggableCancel='.draggableCancel'
>
<div key="productRating" className={styles.topStatItem}>
<div className={styles.topStatContent}>
<div className={styles.topStatIcon} style={{ backgroundImage: 'url(/admin/static/dashboard-rating.png)' }}></div>
<div className={styles.topStatCaption + ' draggableCancel'}>
<h3 className={styles.topStatTitle}>Product Rating</h3>
<Rating name="read-only"
value={averageRating}
className={styles.rating}
precision={0.2} readOnly
/>
<p className={styles.statTip}>
{averageRating.toFixed(2)}, based on {reviewsNumber} reviews</p>
</div>
</div>
</div>
<div key="salesValue" className={styles.topStatItem}>
<div className={styles.topStatContent}>
<div className={styles.topStatIcon} style={{ backgroundImage: 'url(/admin/static/dashboard-sales.png)' }}></div>
<div className={styles.topStatCaption + ' draggableCancel'}>
<h3 className={styles.topStatTitle}>Sales value</h3>
<p className={styles.statBig} id="salesValue">{this.state?.stats?.salesValue ?? 0}</p>
<p className={styles.statTip}>From {this.state?.stats?.orders ?? 0} orders</p>
</div>
</div>
</div>
<div key="pageViews" className={styles.topStatItem}>
<div className={styles.topStatContent}>
<div className={styles.topStatIcon} style={{ backgroundImage: 'url(/admin/static/dashboard-views.png)' }}></div>
<div className={styles.topStatCaption + ' draggableCancel'}>
<h3 className={styles.topStatTitle}>Page views</h3>
<p className={styles.statBig} id="pageViews">{this.state?.stats?.pageViews ?? 0}</p>
<p className={styles.statTip}>For {this.state?.stats?.pages ?? 0} pages</p>
</div>
</div>
</div>
<div key="ordersLastWeek" className={styles.chartBox}>
<div className={styles.chartCaption}>
<p className={styles.chartTitle + ' draggableCancel'}>Orders last week</p>
<p className={styles.statBig + ' draggableCancel'} id="ordersTotalLastWeek">{this.state?.stats?.salesPerDay?.reduce<number>((prev, curr) => curr.orders + prev, 0) ?? 0}</p>
</div>
<ReactResizeDetector handleWidth handleHeight>
{({ targetRef }) => {
this.ordersChart?.resize?.();
return (
<div id="ordersLastWeek" ref={targetRef as any} className={styles.chart}></div>
)
}}
</ReactResizeDetector>
</div>
<div key="salesValueLastWeek" className={styles.chartBox}>
<div className={styles.chartCaption}>
<p className={styles.chartTitle + ' draggableCancel'}>Sales value last week</p>
<p className={styles.chartTotal + ' draggableCancel'} id="salesValueTotalLastWeek">{this.state?.stats?.salesPerDay?.reduce<number>((prev, curr) => curr.salesValue + prev, 0) ?? 0}</p>
</div>
<ReactResizeDetector handleWidth handleHeight>
{({ targetRef }) => {
this.salesValueChart?.resize?.();
return (
<div id="salesValueLastWeek" ref={targetRef as any} className={styles.chart}></div>
)
}}
</ReactResizeDetector>
</div>
<div key="pageViewsStats" className={styles.chartBox}>
<div className={styles.chartCaption}>
<p className={styles.chartTitle + ' draggableCancel'}>Most viewed pages</p>
</div>
<div className={styles.pageViewList}>
{this.state?.stats?.topPageViews?.map(stats => {
return (
<div key={stats.pageRoute} className={styles.pageViewItem}>
<p className={styles.pageViewText + ' draggableCancel'}>{stats.pageRoute}</p>
<p className={styles.pageViewText + ' draggableCancel'}>{stats.views ?? 0}</p>
</div>
)
})}
</div>
</div>
<div key="productReviews" className={styles.chartBox}>
<div className={styles.chartCaption}>
<p className={styles.chartTitle + ' draggableCancel'}>Recent product reviews</p>
</div>
<div className={styles.productReviewsList}>
{this.state?.reviews?.map(review => {
return (
<ReviewListItem
embedded={true}
key={review.id}
data={review}
listItemProps={{
handleDeleteBtnClick: () => null,
toggleSelection: () => null,
handleOpenReview: () => null,
handleApproveReview: () => null,
}}
/>
)
})}
</div>
</div>
{this.widgets.map(widget => {
return (
<div key={`$widget_${widget.key}`} className={styles.chartBox}>
{widget}
</div>
)
})}
</ResponsiveGridLayout>
</div>
)
}
Example #5
| Source File: ReviewList.tsx From Cromwell with MIT License | 4 votes |
|
export default function ProductReviewTable() {
const client = getGraphQLClient();
const [itemToView, setItemToView] = useState<TProductReview | null>(null);
const approvedToast = useRef<number | string | null>(null);
const [productToView, setProductToView] = useState<TProduct | null>(null);
const entityListPageRef = useRef<IEntityListPage<TProductReviewFilter> | null>(null);
const ellipsisStyle: React.CSSProperties = {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}
const handleApproveReview = async (data: TProductReview, inst?: React.Component<any>): Promise<boolean> => {
const review = await client.getProductReviewById(data.id);
try {
await client?.updateProductReview(data.id, {
productId: review.productId,
title: review.title,
description: review.description,
rating: review.rating,
userName: review.userName,
userId: review.userId,
approved: true,
});
if (approvedToast.current) {
toast.dismiss(approvedToast.current);
}
approvedToast.current = toast.success('Approved!');
if (inst) {
inst.props.data.approved = true;
inst.forceUpdate();
}
return true;
} catch (e) {
toast.error('Failed to save');
console.error(e);
return false;
}
}
const handleOpenReview = async (data: TProductReview) => {
const review = await client.getProductReviewById(data.id);
const product = await client.getProductById(review.productId);
setItemToView(review);
if (product) {
setProductToView(product);
}
}
return (
<>
<EntityTableComp
entityCategory={EDBEntity.ProductReview}
entityListRoute={reviewListPageInfo.route}
listLabel="Product reviews"
entityLabel="Review"
hideAddNew
getManyFiltered={client.getFilteredProductReviews}
deleteOne={client.deleteProductReview}
deleteMany={client.deleteManyProductReviews}
deleteManyFiltered={client.deleteManyFilteredProductReviews}
getPageListInstance={inst => {
entityListPageRef.current = inst;
}}
columns={[
{
name: 'userName',
label: 'Name',
type: 'Simple text',
visible: true,
},
{
name: 'rating',
label: 'Rating',
type: 'Rating',
visible: true,
exactSearch: true,
},
{
name: 'createDate',
label: 'Created',
type: 'Datetime',
visible: true,
},
{
name: 'productId',
label: 'Product ID',
type: 'Simple text',
exactSearch: true,
visible: true,
},
{
name: 'approved',
label: 'Status',
type: 'Simple text',
visible: true,
exactSearch: true,
searchOptions: [
{
label: 'Approved',
value: true,
},
{
label: 'Pending',
value: false,
},
],
getValueView: (value: boolean) => (
<p style={ellipsisStyle} className={styles.status}>{value ? <DoneIcon /> : <HourglassEmptyIcon />} {value ? 'Approved' : 'Pending'}</p>
)
},
{
name: 'id',
label: 'ID',
type: 'Simple text',
exactSearch: true,
visible: false,
},
{
name: 'title',
label: 'Title',
type: 'Simple text',
visible: false,
},
{
name: 'userEmail',
label: 'Email',
type: 'Simple text',
visible: false,
},
{
name: 'userId',
label: 'User ID',
type: 'Simple text',
visible: false,
},
{
name: 'updateDate',
label: 'Updated',
type: 'Datetime',
visible: false,
},
]}
customElements={{
getListItemActions: (entity, inst) => {
return (
<>
{!entity?.approved && (
<Tooltip title="Approve">
<IconButton
aria-label="view"
onClick={() => handleApproveReview(entity, inst)}
>
<ThumbUpIcon />
</IconButton>
</Tooltip>
)}
<Tooltip title="Open">
<IconButton
aria-label="view"
onClick={() => handleOpenReview(entity)}
>
<VisibilityIcon />
</IconButton>
</Tooltip>
</>
)
}
}}
/>
<Modal
open={!!itemToView}
onClose={() => {
setItemToView(null);
setProductToView(null);
}}
blurSelector="#root"
>
<div className={styles.itemToView}>
<div className={styles.itemToViewHeader}>
<p className={styles.userName}>{itemToView?.userName}</p>
<Rating name="read-only"
className={styles.rating}
value={itemToView?.rating}
precision={0.5}
readOnly />
</div>
<h4 className={styles.title}>{itemToView?.title}</h4>
<p className={styles.description}>{itemToView?.description}</p>
{!itemToView?.approved && (
<Tooltip title="Approve">
<IconButton
className={styles.approveBtn}
aria-label="view"
onClick={async () => {
const success = await handleApproveReview(itemToView);
if (success) {
itemToView.approved = true;
setItemToView({ ...itemToView });
entityListPageRef.current?.resetList();
}
}}
>
<ThumbUpIcon />
</IconButton>
</Tooltip>
)}
{productToView && (
<div className={styles.productToView}>
<ProductListItem
embedded={true}
data={productToView}
listItemProps={{
handleDeleteProductBtnClick: () => null,
toggleSelection: () => null,
}}
/>
</div>
)}
</div>
</Modal>
</>
)
}
Example #6
| Source File: ReviewListItem.tsx From Cromwell with MIT License | 4 votes |
|
ReviewListItem = (props: TPropsType) => {
const { data } = props;
const forceUpdate = useForceUpdate();
let selected = false;
if (props.allSelected && !props.selectedItems[data.id]) selected = true;
if (!props.allSelected && props.selectedItems[data.id]) selected = true;
const handleApproveReview = async () => {
const success = await props.listItemProps.handleApproveReview(props.data);
if (success) {
props.data.approved = true;
forceUpdate();
}
}
return (
<Grid container className={styles.listItem + (props.embedded ? ' ' + styles.embedded : '')}>
{props.data && (
<>
<Grid item xs={3} className={styles.itemMain}>
{!props.embedded && (
<div className={commonStyles.center}>
<Checkbox
checked={selected}
onChange={() => props.listItemProps.toggleSelection(data)} />
</div>
)}
<div className={styles.itemMainInfo}>
<p className={styles.itemTitle}>{props.data?.userName ?? ''}</p>
</div>
</Grid>
<Grid item xs={props.embedded ? 4 : 3} className={styles.itemSubInfo}>
<p className={styles.status}>{props.data?.approved ? <DoneIcon /> : <HourglassEmptyIcon />} {props.data?.approved ? 'Approved' : 'Pending'}</p>
{!props.embedded && (
<p className={styles.createDate}>{toLocaleDateTimeString(props.data?.createDate)}</p>
)}
</Grid>
<Grid item xs={props.embedded ? 5 : 4} className={styles.itemSubInfo}>
{props.data?.title && (
<p className={styles.title}>{props.data?.title ?? ''}</p>
)}
<Rating name="read-only"
size="small"
className={styles.rating}
value={props.data?.rating ?? 0}
precision={0.5} readOnly
/>
</Grid>
{!props.embedded && (
<Grid item xs={2} className={styles.listItemActions}>
{!props.data?.approved && (
<Tooltip title="Approve">
<IconButton
aria-label="view"
onClick={handleApproveReview}
>
<ThumbUpIcon />
</IconButton>
</Tooltip>
)}
<Tooltip title="Open">
<IconButton
aria-label="view"
onClick={() => props.listItemProps.handleOpenReview(props.data)}
>
<VisibilityIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
aria-label="delete"
onClick={() => props.listItemProps.handleDeleteBtnClick(props.data.id)}
>
<DeleteForeverIcon />
</IconButton>
</Tooltip>
</Grid>
)}
</>
)}
</Grid>
)
}
Example #7
| Source File: ProductDetails.tsx From Cromwell with MIT License | 4 votes |
|
export default function ProductDetails(props: {
compact?: boolean;
} & ProductProps) {
const cstore = getCStore();
const router = useRouter();
const { attributes, compact, product: originalProduct } = props;
const productVariant = useProductVariants(originalProduct);
useEffect(() => {
if (originalProduct) cstore.addToViewedItems({ product: originalProduct });
}, [props.product]);
const scrollToReviews = () => {
if (compact) return;
document.getElementById(getBlockHtmlId('product_reviewsBlock'))?.scrollIntoView({ behavior: "smooth" });
}
const onTitleClick = () => {
if (compact) {
const productLink = `/product/${productVariant?.slug ?? productVariant?.id}`;
router.push(productLink);
appState.closeAllModals();
}
}
if (!originalProduct || !productVariant) {
return (
<div className={styles.productNotFound}>
<h3>Product not found</h3>
</div>
)
}
return (
<CContainer id="product_01"
className={styles.ProductDetails + (compact ? ' ' + styles.compact : '')}
style={{ backgroundColor: !compact ? '#fff' : undefined }}
>
<CContainer id="product_0" className={styles.imageAndCaptionBlock}>
<CContainer id="product_2" className={styles.imageBlock}>
<ProductGallery product={productVariant}
noImagePlaceholder="/themes/@cromwell/theme-store/no-photos.png"
/>
</CContainer>
<CContainer id="product_3" className={styles.captionBlock}>
<CContainer id="product_4">
<h1 onClick={onTitleClick}
style={{
textDecoration: compact ? 'underline' : 'none',
cursor: compact ? 'pointer' : 'initial',
}}
className={styles.productName}>{productVariant?.name}</h1>
</CContainer>
<CContainer id="product_13" className={styles.ratingBlock}>
<Rating name="read-only" value={productVariant?.rating?.average} precision={0.5} readOnly />
{!!productVariant?.rating?.reviewsNumber && (
<a className={styles.ratingCaption} onClick={scrollToReviews}>
({productVariant?.rating?.average ? productVariant?.rating?.average.toFixed(2) : ''}) {productVariant?.rating?.reviewsNumber} reviews.</a>
)}
</CContainer>
<CContainer id="product_5" className={styles.priceBlock}>
{(productVariant?.oldPrice !== undefined && productVariant.oldPrice !== null) && (
<p className={styles.oldPrice}>{cstore.getPriceWithCurrency(productVariant.oldPrice)}</p>
)}
<p className={styles.price}>{cstore.getPriceWithCurrency(productVariant.price)}</p>
</CContainer>
<CContainer id="productActionsBlock">
<MuiProductAttributes
attributes={attributes || undefined}
product={originalProduct}
/>
<CContainer id="product_41" className={styles.delimiter}></CContainer>
<MuiProductActions
attributes={attributes || undefined}
product={originalProduct}
onCartOpen={() => appState.isCartOpen = true}
onWishlistOpen={() => appState.isWishlistOpen = true}
/>
</CContainer>
</CContainer>
</CContainer>
<CContainer id="product_31" className={styles.tabsAndSidebar}>
<CContainer id="product_11" className={styles.tabsBlock}>
<div className={styles.tab} >
<div className={styles.tabDescription}
dangerouslySetInnerHTML={(productVariant?.description) ? { __html: productVariant.description } : undefined}
></div>
</div>
</CContainer>
{!compact && (
<CContainer id="product_8" className={styles.infoBlock}>
<CContainer id="product_9" className={styles.advantagesBlock}>
<CContainer id="main_02" className={styles.advantageItem}>
<CImage id="main_09" src="/themes/@cromwell/theme-store/free_shipping.png" />
<CContainer id="main_11" className={styles.advantageItemText}>
<CText id="main_06" className={styles.advantageItemHeader}>FREE SHIPPING & RETURN</CText>
</CContainer>
</CContainer>
<CContainer id="main_03" className={styles.advantageItem}>
<CImage id="main_09" src="/themes/@cromwell/theme-store/wallet.png" />
<CContainer id="main_13" className={styles.advantageItemText}>
<CText id="main_07" className={styles.advantageItemHeader}>MONEY BACK GUARANTEE</CText>
</CContainer>
</CContainer>
<CContainer id="main_04" className={styles.advantageItem}>
<CImage id="main_09" src="/themes/@cromwell/theme-store/technical-support.png" />
<CContainer id="main_10" className={styles.advantageItemText}>
<CText id="main_08" className={styles.advantageItemHeader} >ONLINE SUPPORT 24/7</CText>
</CContainer>
</CContainer>
</CContainer>
</CContainer>
)}
</CContainer>
</CContainer>
)
}
