Colors control

[elisei-timofte]

Hi,

First of all, thanks for this great package. Really well implemented, though I would like more control on colouring.

These said, I want to propose a feature request. I'd like to be able to change colors when the button is disabled, but more important, to override the current color when I want to display an error, something like the example below.

This is how i use it:

               switchId = "#{w._id}-#{section[0]}"
               <Switch
                    checked         = {@state.checked?[switchId]}
                    onChange        = {(checked, e, id) => @onSwitchChange(checked, section[0], w._id, id)}
                    disabled        = {@state.disabled?[switchId]}
                    uncheckedIcon   = {false}
                    checkedIcon     = {false}
                    onColor         = "#D0E2FF"
                    offColor        = {Colors.appBg}
                    onHandleColor   = {Colors.primaryColor}
                    boxShadow       = "0px 1px 5px rgba(0, 0, 0, 0.6)"
                    activeBoxShadow = "0px 0px 5px 5px #D0E2FF"
                    handleDiameter  = {24}
                    height          = {16}
                    width           = {40}
                    id              = {switchId}
               />

Maybe you cand add a fourth state: hasError and ability to set the colors on error state

I would like to have something like

             <Switch
                ...
                disabled            = {true/false}
                disabledHandleColor = 'color'
                disabledBodyColor   = 'color' # not sure about 'body', but you've got the point
                hasError            = {true/false}
                errorHandleColor    = 'color'
                errorBodyColor      = 'color'
              />

Waiting for your feedback.

Thanks!

[markusenglund]

Hi, sorry for the late response.

Putting on a different color when you have some specific state (like disabled===true) can be achieved currently by doing something like this:

<Switch
   onColor={this.state.disabled ? "#ff0000" : "#123456"}
   offColor= {this.state.disabled ? "#eeeeee" : "#333333"}
/>

The only problem is that using the disabled-prop changes the opacity of the switch. Presumably you don't want this. You can fix that with an ugly hack by giving the switch a className and then styling it like this:

.my-switch {
  opacity: 1 !important;
}

Here's an example: https://codesandbox.io/s/k99q1kn52o