Failed prop type: Invalid prop `progressBar` supplied to `Rheostat`

[jchapelle]

I get this warning messages in console when using rheostat
Warning: Failed prop type: Invalid prop progressBar supplied to Rheostat.
Warning: Failed prop type: Invalid prop progressBar supplied to withStyles(Rheostat).

Can somebody explain me why I receive this warnings ?

I'm using a custom progressBar element and I had to use register a custom theme in order to have rheostat and react-calendar to work together

ThemedStyleSheet.registerTheme({
  rheostat: {
    ...RheostatDefaultTheme.rheostat,
    color: {
      ...RheostatDefaultTheme.rheostat.color,
      progressBar: 'red',
    },
  },
  reactDates: {
    ...ReactDatesDefaultTheme.reactDates,
  },
});

[Jordan Harband]

What are you passing as the progressBar prop?

[jchapelle]

I'm using styled-components. I have the same error for the handle by the way.

import styled from 'styled-components';
const ProgressBar = styled.div`
    background-color: #008489 !important;
    position: absolute !important;
    width: 100% !important;
    border-radius: 4px !important;
    height: 4px !important;
    top: 0px !important;
}

Here is the Rheostat definition

<Rheostat
   handle={SliderHandle}
   progressBar={ProgressBar}
   onValuesUpdated={this.onValuesUpdated}
   values={[this.state.age]}
   min={0}
   max={18}
/>

[Jordan Harband]

https://github.com/airbnb/rheostat/blob/master/src/Slider.jsx#L23 requires it to be a function or a string - ie, a component, not an element. I’m not familiar with styled-components, what is ProgressBar there?

[jchapelle]

Thanks a lot, by defining my component like below, I have no more warnings.

const SliderHandleStyledComponent = styled.div`
    left: 0%;
    margin-left: -15px;
    position: absolute;
    width: 32px !important;
    height: 32px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #008489 !important;
    background-color: #ffffff !important;
    border-radius: 32px !important;
    outline: none !important;
    z-index: 2 !important;
    box-shadow: 0 2px 2px rgba(72, 72, 72, 0.3) !important;
    top: -15px !important;
    &:hover{
      cursor: pointer;
    }
}
`;

const SliderHandle = ({ className, children }) => (
  <SliderHandleStyledComponent className={className}>
    {children}
  </SliderHandleStyledComponent>
);

[jchapelle]

Hello, I've been a bit too optimistic with the solution. Actually, the handle does not work properly. The drag action of the handle is not working. The handle is staying a left: 0 all the time. If I click on a position on the progressbar with no drag action, then the handle moves to the proper position. The drag action does not work properly. Any idea ?

…

On Tue, Jan 22, 2019 at 10:53 PM Jordan Harband ***@***.***> wrote: Closed #208 <#208>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#208 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF4GXSDic9eCclNRZbtVNxO_Qo1YHMwsks5vF4hNgaJpZM4aM0Ol> .

-- Jean Chapelle

[Jordan Harband]

Your handle isn’t using all the props it’s getting.

I’d recommend starting with the default handle, get everything working, and worry about styling it later.

[jchapelle]

Well it's strange because the (left) position is set by the "style" props but for a reason I don't know, the function is not receiving the updated "style" props on drag and drop event

…

On Wed, Jan 23, 2019 at 6:06 PM Jordan Harband ***@***.***> wrote: Your handle isn’t using all the props it’s getting. I’d recommend starting with the default handle, get everything working, and worry about styling it later. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#208 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF4GXQJYeMO9hp8vY86lxcL65goyB11Pks5vGJaTgaJpZM4aM0Ol> .

-- Jean Chapelle