I have the following code to style a button based off of a select box:
const buttonStyles = {
backgroundColor: buttonStyle === 'Black' ? colors.interactiveForegroundSecondary : buttonStyle === 'Green' ? colors.backgroundInverseSecondary : buttonStyle === 'White' ? colors.backgroundPrimary : buttonStyle === 'Lime Green' ? colors.graphTertiary : '',
color: buttonStyle === 'Black' ? colors.textInversePrimary : buttonStyle === 'Green' ? colors.textInversePrimary : buttonStyle === 'White' ? colors.interactiveForegroundSecondary : buttonStyle === 'Lime Green' ? colors.backgroundInverseSecondary : '',
"&:hover": {
background: buttonStyle === 'Black' ? colors.backgroundInversePrimary : buttonStyle === 'Green' ? colors.accentPrimary : buttonStyle === 'White' ? colors.errorBackground : buttonStyle === 'Lime Green' ? colors.backgroundInverseSecondary : '',
color: buttonStyle === 'Lime Green' ? colors.graphTertiary : ''
},
} as CrateStyleObject
And I am trying to refactor this into an Enum map in typescript like so:
enum ButtonBackground {
Black = colors.interactiveForegroundSecondary,
Green = colors.backgroundInverseSecondary,
White = colors.backgroundPrimary,
Lime Green = colors.graphTertiary ,
}
const submitBackground = (Object.keys(ButtonBackground) as (keyof typeof ButtonBackground)[]).map(
(key, index) => {
console.log(key);
return ButtonBackground[key] index;
},
);
then setting it here on the component:
<Button
style={
buttonStyles
}
type="submit">
{text}
</Button/>
But I am having trouble assigning colors.interactiveForegroundSecondary
to one of the keys since it is not a string.
Also the background color and color of the button needs to change based off of the selected value – would I have to create a separate Enum for each of the Background Color/Text Color as well as the Hover Background Color / Text Color?
CodePudding user response:
I think that it would be convenient to create a separate enum for ButtonBackgroundColor
, ButtonColor
, ButtonBackgroundColorOnHover
and ButtonColorOnHover
.
I'm not sure though why are you trying to iterate over the enum when you actually want to set the buttonStyles
according only to the value of the buttonStyle
variable. I would go about it like this:
const buttonStyle = 'Lime Green' // For example
// You'll need to remove whitespace because enums cannot have two words
const buttonStyleWithNoWhitespace = buttonStyle.replace(/\s/g, '')
enum ButtonBackground {
Black = colors.interactiveForegroundSecondary,
Green = colors.backgroundInverseSecondary,
White = colors.backgroundPrimary,
LimeGreen = colors.graphTertiary,
}
enum ButtonColor {
Black = colors.backgroundInversePrimary,
Green = colors.accentPrimary,
White = colors.errorBackground,
LimeGreen = colors.backgroundInverseSecondary,
}
enum ButtonBackgroundOnHover {
Black = colors.backgroundInversePrimary,
Green = colors.accentPrimary,
White = colors.errorBackground,
LimeGreen = colors.backgroundInverseSecondary,
}
enum ButtonColorOnHover {
Black = '',
Green = '',
White = '',
LimeGreen = colors.graphTertiary,
}
const buttonStyles = {
backgroundColor: ButtonBackground[buttonStyle as keyof typeof ButtonBackground],
color: ButtonColor[buttonStyle as keyof typeof ButtonColor],
"&:hover": {
background: ButtonBackgroundOnHover[buttonStyle as keyof typeof ButtonBackgroundOnHover],
color: ButtonColorOnHover[buttonStyle as keyof typeof ButtonColorOnHover]
}
} as CreateStyleObject
<Button
style={buttonStyles}
type="submit">
{text}
</Button/>
The as keyof typeof Enum
makes the usage of enums a bit too much when you can use a simple object for each of them, but perhaps there are other specific reasons that makes using enums necessary.