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

Fixed color on multiselect chip in side drawer field and start of logic changes

Browse Source
This commit is contained in:
Emmanuel Watila
2023-03-07 00:11:18 +01:00
parent bfa23ea829
commit d283a4721d
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/fields/MultiSelect/SideDrawerField.tsx
View File

@@ -1,6 +1,6 @@
import { ISideDrawerFieldProps } from "@src/components/fields/types";
import { Grid, Button, Tooltip } from "@mui/material";
import { Grid, Button, Tooltip, useTheme } from "@mui/material";
import WarningIcon from "@mui/icons-material/WarningAmber";
import MultiSelectComponent from "@rowy/multiselect";
import FormattedChip from "@src/components/FormattedChip";
@@ -16,6 +16,8 @@ export default function MultiSelect({
disabled,
}: ISideDrawerFieldProps) {
const config = column.config ?? {};
const colors = column.config?.colors ?? {};
const { mode } = useTheme().palette;
const handleDelete = (index: number) => () => {
const newValues = [...value];
@@ -75,6 +77,7 @@ export default function MultiSelect({
<FormattedChip
label={item}
onDelete={disabled ? undefined : handleDelete(i)}
sx={{ backgroundColor: colors[item.toLowerCase()][mode] }}
/>
</Grid>
)

52
src/components/fields/SingleSelect/Settings.tsx
View File

@@ -42,7 +42,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
const [newOption, setNewOption] = useState("");
/* State for holding Chip Colors for Select and MultiSelect */
const colors = config.colors ?? {};
let colors = config.colors ?? {};
const handleAdd = () => {
if (newOption.trim() !== "") {
@@ -65,8 +65,12 @@ export default function Settings({ onChange, config }: ISettingsProps) {
onChange("colors")(Object(colors));
};
const handleChipColorDelete = (key: string) => {
const _key = key.toLocaleLowerCase();
const handleItemDelete = (option: string) => {
onChange("options")(options.filter((o: string) => o !== option));
};
const handleItemColorDelete = (option: string) => {
const _key = option.toLocaleLowerCase();
delete colors[_key];
onChange("colors")(Object(colors));
};
@@ -114,6 +118,7 @@ export default function Settings({ onChange, config }: ISettingsProps) {
{...provided.dragHandleProps}
item
sx={{ display: "flex" }}
alignItems="center"
>
<DragIndicatorOutlinedIcon
color="disabled"
@@ -123,33 +128,30 @@ export default function Settings({ onChange, config }: ISettingsProps) {
},
]}
/>
<Grid item>
<Grid
container
direction="row"
alignItems="center"
gap={2}
>
<ColorSelect
initialValue={
colors[option.toLocaleLowerCase()]
}
handleChange={(color) =>
handleChipColorChange(option, color)
}
/>
<Typography>{option}</Typography>
</Grid>
<Grid
container
direction="row"
alignItems="center"
gap={2}
>
<ColorSelect
initialValue={
colors[option.toLocaleLowerCase()]
}
handleChange={(color) =>
handleChipColorChange(option, color)
}
/>
<Typography>{option}</Typography>
</Grid>
</Grid>
<Grid item>
<IconButton
aria-label="Remove"
onClick={() =>
onChange("options")(
options.filter((o: string) => o !== option)
)
}
onClick={() => {
handleItemDelete(option);
//handleItemColorDelete(option);
}}
>
{<RemoveIcon />}
</IconButton>