How to refactor ternary into Enum Map with properties?-CodePudding

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.