132 lines
4.2 KiB
JavaScript
132 lines
4.2 KiB
JavaScript
'use client';
|
|
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
|
|
import { tokens } from '@fluentui/react-theme';
|
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
export const ratingItemClassNames = {
|
|
root: 'fui-RatingItem',
|
|
selectedIcon: 'fui-RatingItem__selectedIcon',
|
|
unselectedIcon: 'fui-RatingItem__unselectedIcon',
|
|
halfValueInput: 'fui-RatingItem__halfValueInput',
|
|
fullValueInput: 'fui-RatingItem__fullValueInput'
|
|
};
|
|
/**
|
|
* Styles for the root slot
|
|
*/ const useStyles = makeStyles({
|
|
root: {
|
|
position: 'relative',
|
|
...createFocusOutlineStyle({
|
|
style: {},
|
|
selector: 'focus-within'
|
|
})
|
|
},
|
|
small: {
|
|
fontSize: '12px',
|
|
width: '12px',
|
|
height: '12px'
|
|
},
|
|
medium: {
|
|
fontSize: '16px',
|
|
width: '16px',
|
|
height: '16px'
|
|
},
|
|
large: {
|
|
fontSize: '20px',
|
|
width: '20px',
|
|
height: '20px'
|
|
},
|
|
'extra-large': {
|
|
fontSize: '28px',
|
|
width: '28px',
|
|
height: '28px'
|
|
}
|
|
});
|
|
const useInputBaseClassName = makeResetStyles({
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
boxSizing: 'border-box',
|
|
margin: 0,
|
|
opacity: 0,
|
|
cursor: 'pointer',
|
|
height: '100%'
|
|
});
|
|
const useInputStyles = makeStyles({
|
|
lowerHalf: {
|
|
right: '50%'
|
|
},
|
|
upperHalf: {
|
|
left: '50%'
|
|
}
|
|
});
|
|
const useIndicatorBaseClassName = makeResetStyles({
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
color: tokens.colorNeutralForeground1,
|
|
fill: 'currentColor',
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0
|
|
});
|
|
const useIndicatorStyles = makeStyles({
|
|
lowerHalf: {
|
|
right: '50%',
|
|
'& > svg': {
|
|
flex: '0 0 auto'
|
|
}
|
|
},
|
|
upperHalf: {
|
|
left: '50%',
|
|
marginLeft: '-50%'
|
|
},
|
|
brand: {
|
|
color: tokens.colorBrandForeground1
|
|
},
|
|
marigold: {
|
|
color: tokens.colorPaletteMarigoldBorderActive
|
|
},
|
|
filled: {
|
|
color: tokens.colorNeutralBackground6,
|
|
stroke: tokens.colorTransparentStroke,
|
|
'@media (forced-colors: active)': {
|
|
color: 'Canvas',
|
|
stroke: 'CanvasText'
|
|
}
|
|
},
|
|
brandFilled: {
|
|
color: tokens.colorBrandBackground2
|
|
},
|
|
marigoldFilled: {
|
|
color: tokens.colorPaletteMarigoldBackground2
|
|
}
|
|
});
|
|
/**
|
|
* Apply styling to the RatingItem slots based on the state
|
|
*/ export const useRatingItemStyles_unstable = (state)=>{
|
|
'use no memo';
|
|
const { color, size, iconFillWidth, appearance } = state;
|
|
const styles = useStyles();
|
|
const inputBaseClassName = useInputBaseClassName();
|
|
const inputStyles = useInputStyles();
|
|
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
const indicatorStyles = useIndicatorStyles();
|
|
state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
|
|
if (state.halfValueInput) {
|
|
state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
|
|
}
|
|
if (state.fullValueInput) {
|
|
state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
|
|
}
|
|
if (state.unselectedIcon) {
|
|
state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
|
|
}
|
|
if (state.selectedIcon) {
|
|
state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
|
|
}
|
|
return state;
|
|
};
|