-
Notifications
You must be signed in to change notification settings - Fork 508
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1151 from devsgnr/rowy-135
Select & MultiSelect Chip Colors - ROWY-135
- Loading branch information
Showing
14 changed files
with
501 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,39 @@ | ||
| import { Chip, ChipProps } from "@mui/material"; | ||
| import palette, { paletteToMui } from "@src/theme/palette"; | ||
| import { useTheme } from "@mui/material"; | ||
| import { isEqual } from "lodash-es"; | ||
|
|
||
| export const VARIANTS = ["yes", "no", "maybe"] as const; | ||
| const paletteColor = { | ||
| yes: "success", | ||
| maybe: "warning", | ||
| no: "error", | ||
| yes: paletteToMui(palette.green), | ||
| maybe: paletteToMui(palette.yellow), | ||
| no: paletteToMui(palette.aRed), | ||
| } as const; | ||
|
|
||
| // TODO: Create a more generalised solution for this | ||
| // Switched to a more generalized solution - adding backwards compatibility to maintain [Yes, No, Maybe] colors even if no color is selected | ||
| // Modified by @devsgnr | ||
| export default function FormattedChip(props: ChipProps) { | ||
| const defaultColor = paletteToMui(palette.aGray); | ||
| const { mode } = useTheme().palette; | ||
| const fallback = { backgroundColor: defaultColor[mode] }; | ||
| const { sx, ...newProps } = props; | ||
|
|
||
| const label = | ||
| typeof props.label === "string" ? props.label.toLowerCase() : ""; | ||
| const inVariant = VARIANTS.includes(label as any); | ||
|
|
||
| if (VARIANTS.includes(label as any)) { | ||
| return ( | ||
| <Chip | ||
| size="small" | ||
| color={paletteColor[label as typeof VARIANTS[number]]} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return <Chip size="small" {...props} />; | ||
| return ( | ||
| <Chip | ||
| size="small" | ||
| sx={ | ||
| inVariant && isEqual(props.sx, fallback) | ||
| ? { | ||
| backgroundColor: | ||
| paletteColor[label as typeof VARIANTS[number]][mode], | ||
| } | ||
| : props.sx | ||
| } | ||
| {...newProps} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { FC, useEffect, useState } from "react"; | ||
| import Button from "@mui/material/Button"; | ||
| import Box from "@mui/material/Box"; | ||
| import Grid from "@mui/material/Grid"; | ||
| import { Chip, Typography } from "@mui/material"; | ||
| import Modal from "@src/components/Modal"; | ||
| import ColorPickerInput from "@src/components/ColorPickerInput"; | ||
| import { toColor } from "react-color-palette"; | ||
| import { SelectColorThemeOptions } from "."; | ||
|
|
||
| interface CustomizeColor { | ||
| currentColor: SelectColorThemeOptions; | ||
| onChange: (value: SelectColorThemeOptions) => void; | ||
| } | ||
|
|
||
| const CustomizeColorModal: FC<CustomizeColor> = ({ | ||
| currentColor, | ||
| onChange, | ||
| }) => { | ||
| const [color, setColor] = useState<SelectColorThemeOptions>(currentColor); | ||
|
|
||
| /* Update color value onFocus */ | ||
| useEffect(() => { | ||
| setColor(currentColor); | ||
| }, [currentColor]); | ||
|
|
||
| /* Pass value to the onChange function */ | ||
| const handleChange = (color: SelectColorThemeOptions) => { | ||
| setColor(color); | ||
| onChange(color); | ||
| }; | ||
|
|
||
| /* MUI Specific state */ | ||
| const [open, setOpen] = useState<boolean>(false); | ||
|
|
||
| /* MUI Menu event handlers */ | ||
| const handleClick = () => setOpen(true); | ||
| const handleClose = () => setOpen(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button size="small" color="success" variant="text" onClick={handleClick}> | ||
| Customise | ||
| </Button> | ||
| <Modal | ||
| title="Customize Color" | ||
| aria-labelledby="custom-color-picker-modal" | ||
| aria-describedby="custom-color-picker-modal" | ||
| open={open} | ||
| onClose={handleClose} | ||
| disableBackdropClick | ||
| > | ||
| <Box display="grid" gridTemplateColumns="repeat(6, 1fr)" gap={1}> | ||
| {/* Light Theme Customize Color */} | ||
| <Box gridColumn="span 3"> | ||
| <ColorPickerInput | ||
| value={toColor("hex", color.light)} | ||
| onChangeComplete={(value) => | ||
| handleChange({ ...color, ...{ light: value.hex } }) | ||
| } | ||
| /> | ||
| <Grid container gap={1} py={1} px={2} alignItems="center"> | ||
| <Grid item> | ||
| <Typography fontSize={13} fontWeight="light"> | ||
| Light Theme | ||
| </Typography> | ||
| </Grid> | ||
| <Grid item> | ||
| <Chip | ||
| component="small" | ||
| size="small" | ||
| label="Option 1" | ||
| sx={{ backgroundColor: color.light, color: "black" }} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
|
|
||
| {/* Dark Theme Customize Color */} | ||
| <Box gridColumn="span 3"> | ||
| <ColorPickerInput | ||
| value={toColor("hex", color.dark)} | ||
| onChangeComplete={(value) => | ||
| handleChange({ ...color, ...{ dark: value.hex } }) | ||
| } | ||
| /> | ||
| <Grid container gap={1} py={1} px={2} alignItems="center"> | ||
| <Grid item> | ||
| <Typography fontSize={13} fontWeight="light"> | ||
| Dark Theme | ||
| </Typography> | ||
| </Grid> | ||
| <Grid item> | ||
| <Chip | ||
| component="small" | ||
| size="small" | ||
| label="Option 1" | ||
| sx={{ backgroundColor: color.dark, color: "white" }} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| </Box> | ||
| </Box> | ||
| </Modal> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomizeColorModal; |
Oops, something went wrong.