react-component / react-component/slider
Latest (9.3.0) breaks createSliderWithTooltip
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.1k
- Forks
- 768
- Avg merge
- 11d 22h
- Merged PRs (30d)
- 5
Description
What did we do
After updating working code from 9.2.4 -> 9.3.0 we are no longer able to build our project...
Error Detail:
Specifically, here is the error message full detail:
Step #2: /workspace/src/pages/search/filters/SearchByCost.tsx
Step #2: TypeScript error in /workspace/src/pages/search/filters/SearchByCost.tsx(30,9):
Step #2: No overload matches this call.
Step #2: Overload 1 of 2, '(props: Readonly): { state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { ...; }) => Element; ... 17 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }', gave the following error.
Step #2: Type '{ tipFormatter: (value: any) => string; min: number; className: string; max: number; defaultValue: number[]; marks: { 0: string; 50: string; 100: string; 150: string; 200: string; }; step: number; value: number[]; onChange: (x: number[]) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
Step #2: Property 'min' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
Step #2: Overload 2 of 2, '(props: ComponentWrapperProps, context?: any): { state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }', gave the following error.
Step #2: Type '{ tipFormatter: (value: any) => string; min: number; className: string; max: number; defaultValue: number[]; marks: { 0: string; 50: string; 100: string; 150: string; 200: string; }; step: number; value: number[]; onChange: (x: number[]) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
Step #2: Property 'min' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<{ state: { visibles: {}; }; handleTooltipVisibleChange: (index: any, visible: any) => void; handleWithTooltip: ({ value, dragging, index, disabled, ...restProps }: { [x: string]: any; value: any; dragging: any; index: any; disabled: any; }) => Element; ... 17 more ...; ...'.
Example usage...
import { Range as SliderRange, createSliderWithTooltip } from "rc-slider";
export const NumberRange = createSliderWithTooltip(SliderRange);
...
return (
<div className="px-1">
<NumberRange
tipFormatter={(value: any) => `$${value}/day`}
min={0}
className="m-1"
max={100}
defaultValue={[0, 50]}
marks={{ 0: "0", 50: "50", 100: "100", 150: "150", 200: "any" }}
step={5}
value={[ 0, 50 ]}
onChange={update}
/>
</div>
);
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the TypeScript error in src/pages/search/filters/SearchByCost.tsx and the createSliderWithTooltip example from the issue. Inspect the slider's TypeScript declarations and reproduce the 9.3.0 build failure with the shown props; done means the example accepts min and the other range props without a TypeScript overload error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100