What is the best way to transform a ternary operation into an Enum Map with custom properties

Question

What is the best way to transform a ternary operation into an Enum Map with custom properties

I'm faced with the challenge of styling a button based on the selection made in a select box. The code snippet I have currently is as follows:

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

My aim is to refactor this code into an Enum map in typescript. I have started with the following approach:

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 I plan on applying it to the component as shown below: 

<Button
  style={
    buttonStyles
  }
  type="submit">
{text}
</Button/>

However, I'm facing a challenge in assigning

colors.interactiveForegroundSecondary

to one of the keys due to it not being a string. Additionally, I need the background color and text color of the button to change based on the selected value. Would creating separate Enums for each background color, text color, hover background color, and hover text color be the solution to this issue?

javascript css reactjs typescript

Answer 1

Answer №1

In my opinion, it would be beneficial to establish a distinct enum for ButtonBackgroundColor, ButtonColor, ButtonBackgroundColorOnHover, and ButtonColorOnHover.

I find it puzzling why there is an attempt to loop through the enum when the goal is simply to adjust the buttonStyles based on the value of the buttonStyle variable. Here's how I would approach it:

const buttonStyle = 'Lime Green' // For instance

// We must eliminate spaces since enums cannot have multiple 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 seems to overly complicate the usage of enums, when a simple object could suffice. However, there might be specific reasons that necessitate the use of enums.

Answer 2

In my opinion, it would be beneficial to establish a distinct enum for ButtonBackgroundColor, ButtonColor, ButtonBackgroundColorOnHover, and ButtonColorOnHover.

I find it puzzling why there is an attempt to loop through the enum when the goal is simply to adjust the buttonStyles based on the value of the buttonStyle variable. Here's how I would approach it:

const buttonStyle = 'Lime Green' // For instance

// We must eliminate spaces since enums cannot have multiple 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 seems to overly complicate the usage of enums, when a simple object could suffice. However, there might be specific reasons that necessitate the use of enums.

What is the best way to transform a ternary operation into an Enum Map with custom properties

Answer №1

Similar questions

What is the best way to retrieve class properties within an input change listener in Angular?

The functionality of my script relies on the presence of an alert function within it

Unexpected behavior: getElementById returning URL instead of element

Discover the power of React Meteor, where reactive props and inner state work together

Error: Unable to access property 'camera' as it is undefined

Can you find a method to retrieve the current page on a dashTable?

Using the promise expression in AngularJS's ng-show

Acquiring the parent object (a group) from the children in Three.js

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Tailwind's unique approach to custom @font-faces allows for

Command for controlling volume in DiscordJS

Encountered an unexpected token error while using Jest with TypeScript, expecting a semicolon instead

Effortlessly Styling Children Elements in Emotion JS When Parent Element is Hovered

Selenium is unable to engage with elements within an accordion section

Extract features from React Native components

Playing a game of rock, paper, scissors with two players using JavaScript

Tips for writing an async function using TypeScript

Troubleshooting issue: Bootstrap mixins not functioning properly due to LESS nesting

Receiving 'Module not found' error in Typings on specific machines within the same project. Any suggestions on how to troubleshoot this issue?

What is the best method for eliminating the gap between div elements in CSS?