Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

More explicit opacity declaration for custom icons

Browse Source
This commit is contained in:
Miriam Shams-Rainey
2022-10-28 14:23:01 -04:00
parent 7a5b181852
commit 986a02293b
4 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/fields/Rating/Icon.tsx Normal file
View File

@@ -0,0 +1,25 @@
import RatingIcon from "@mui/icons-material/Star";
import RatingOutlineIcon from "@mui/icons-material/StarBorder"
import { get } from "lodash-es";
export default function Icon(config: any, isEmpty: Boolean) {
// console.log(config)
if (isEmpty) {
//console.log(getStateOutline(config))
return getStateOutline(config.config)
} else {
return getStateIcon(config.config)
}
}
const getStateIcon = (config: any) => {
// only use the config to get the custom rating icon if enabled via toggle
if (!get(config, "customIcons.enabled")) { return <RatingIcon /> }
console.log(get(config, "customIcons.rating"))
return get(config, "customIcons.rating") || <RatingIcon />;
};
const getStateOutline = (config: any) => {
if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
return get(config, "customIcons.rating") || <RatingOutlineIcon />;
}

5
src/components/fields/Rating/Settings.tsx
View File

@@ -6,6 +6,7 @@ import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import MuiRating from "@mui/material/Rating";
import { get } from "lodash-es";
import Icon from "./Icon"
export default function Settings({ onChange, config }: ISettingsProps) {
return (
@@ -79,9 +80,9 @@ export default function Settings({ onChange, config }: ISettingsProps) {
<MuiRating aria-label="Preview of the rating field with custom icon"
name="Preview"
onClick={(e) => e.stopPropagation()}
icon={get(config, "customIcons.rating") || <RatingIcon />}
icon={<Icon config={config} isEmpty={false} />}
size="small"
emptyIcon={get(config, "customIcons.rating") || <RatingOutlineIcon />}
emptyIcon={<Icon config={config} isEmpty={true} style={{ opacity: 0.55 }} />}
max={get(config, "max")}
precision={get(config, "precision")}
sx={{ pt: 0.5 }}

6
src/components/fields/Rating/SideDrawerField.tsx
View File

@@ -3,8 +3,8 @@ import { ISideDrawerFieldProps } from "@src/components/fields/types";
import { Grid } from "@mui/material";
import { Rating as MuiRating } from "@mui/material";
import "@mui/lab";
import { getStateIcon, getStateOutline } from "./TableCell";
import { fieldSx } from "@src/components/SideDrawer/utils";
import Icon from "./Icon"
export default function Rating({
column,
@@ -28,8 +28,8 @@ export default function Rating({
onChange(newValue);
onSubmit();
}}
icon={getStateIcon(column.config)}
emptyIcon={getStateOutline(column.config)}
icon={<Icon config={column.config} isEmpty={false}/>}
emptyIcon={<Icon config={column.config} isEmpty={true} style={{opacity: 0.5}}/>}
size="small"
max={max}
precision={precision}

15
src/components/fields/Rating/TableCell.tsx
View File

@@ -4,18 +4,9 @@ import MuiRating from "@mui/material/Rating";
import RatingIcon from "@mui/icons-material/Star";
import RatingOutlineIcon from "@mui/icons-material/StarBorder"
import { get } from "lodash-es";
import Icon from "./Icon"
export const getStateIcon = (config: any) => {
// only use the config to get the custom rating icon if enabled via toggle
if (!get(config, "customIcons.enabled")) { return <RatingIcon /> }
return get(config, "customIcons.rating") || <RatingIcon />;
};
export const getStateOutline = (config: any) => {
if (!get(config, "customIcons.enabled")) { return <RatingOutlineIcon /> }
return get(config, "customIcons.rating") || <RatingOutlineIcon />;
}
export default function Rating({
row,
@@ -42,11 +33,11 @@ export default function Rating({
name={`${row.id}-${column.key}`}
value={typeof value === "number" ? value : 0}
onClick={(e) => e.stopPropagation()}
icon={getStateIcon(column.config)}
icon={<Icon config={column.config} isEmpty={false} />}
size="small"
disabled={disabled}
onChange={(_, newValue) => onSubmit(newValue)}
emptyIcon={getStateOutline(column.config)}
emptyIcon={<Icon config={column.config} isEmpty={true} style={{ opacity: 0.55 }} />}
max={max}
precision={precision}
sx={{ mx: -0.25 }}