From 5670a12910f4c140d826ce43903a8197440c1967 Mon Sep 17 00:00:00 2001 From: monoid Date: Thu, 1 Jun 2023 17:50:23 +0900 Subject: [PATCH] add: restore colored tag chip --- src/client/component/tagchip.tsx | 83 +++++++++++++------------------- 1 file changed, 33 insertions(+), 50 deletions(-) diff --git a/src/client/component/tagchip.tsx b/src/client/component/tagchip.tsx index ec724fa..3e84519 100644 --- a/src/client/component/tagchip.tsx +++ b/src/client/component/tagchip.tsx @@ -1,48 +1,15 @@ -import { Chip, colors } from "@mui/material"; -import { ChipTypeMap } from "@mui/material/Chip"; -import { emphasize, Theme } from "@mui/material/styles"; +import * as colors from "@mui/material/colors"; +import Chip, { ChipTypeMap } from "@mui/material/Chip"; +import { emphasize, styled, Theme, useTheme } from "@mui/material/styles"; import React from "react"; import { Link as RouterLink } from "react-router-dom"; type TagChipStyleProp = { - color: string; + color: `rgba(${number},${number},${number},${number})` | `#${string}` | 'default'; }; -const useTagStyles = (theme: Theme) => ({ - root: (props: TagChipStyleProp) => ({ - color: theme.palette.getContrastText(props.color), - backgroundColor: props.color, - }), - clickable: (props: TagChipStyleProp) => ({ - "&:hover, &:focus": { - backgroundColor: emphasize(props.color, 0.08), - }, - }), - deletable: { - "&:focus": { - backgroundColor: (props: TagChipStyleProp) => emphasize(props.color, 0.2), - }, - }, - outlined: { - color: (props: TagChipStyleProp) => props.color, - border: (props: TagChipStyleProp) => `1px solid ${props.color}`, - "$clickable&:hover, $clickable&:focus, $deletable&:focus": { - // backgroundColor:(props:TagChipStyleProp)=> (props.color,theme.palette.action.hoverOpacity), - }, - }, - icon: { - color: "inherit", - }, - deleteIcon: { - // color:(props:TagChipStyleProp)=> (theme.palette.getContrastText(props.color),0.7), - "&:hover, &:active": { - color: (props: TagChipStyleProp) => theme.palette.getContrastText(props.color), - }, - }, -}); - const { blue, pink } = colors; -const getTagColorName = (tagname: string): string => { +const getTagColorName = (tagname: string): TagChipStyleProp['color'] => { if (tagname.startsWith("female")) { return pink[600]; } else if (tagname.startsWith("male")) { @@ -57,8 +24,21 @@ type ColorChipProp = Omit & TagChipStyleProp & { export const ColorChip = (props: ColorChipProp) => { const { color, ...rest } = props; - // const classes = useTagStyles({color : color !== "default" ? color : "#000"}); - return ; + const theme = useTheme(); + + let newcolor = color; + if (color === "default"){ + newcolor = "#ebebeb"; + } + return ; }; type TagChipProp = Omit & { @@ -67,29 +47,32 @@ type TagChipProp = Omit & { export const TagChip = (props: TagChipProp) => { const { tagname, label, clickable, ...rest } = props; - let newlabel: string | undefined = undefined; + const colorName = getTagColorName(tagname); + + let newlabel: React.ReactNode = label; if (typeof label === "string") { - if (label.startsWith("female:")) { - newlabel = "♀ " + label.slice(7); - } else if (label.startsWith("male:")) { - newlabel = "♂ " + label.slice(5); + const female = "female:"; + const male = "male:"; + if (label.startsWith(female)) { + newlabel = "♀ " + label.slice(female.length); + } else if (label.startsWith(male)) { + newlabel = "♂ " + label.slice(male.length); } } + const inner = clickable ? ( - + /> ) : ( - - + ); return inner; };