Skip to content

Commit 40b1a82

Browse files
shortcutsshortcuts
authoredJun 2, 2021
feat(ts): convert rangeInput widget and component (#4766)
* feat(ts): convert rangeInput widget and component * add description to `ts-expect-error`
·
vue-instantsearch@4.20.6algolia-experiences@1.1.0
1 parent 28d1069 commit 40b1a82

File tree

7 files changed

+388
-352
lines changed

7 files changed

+388
-352
lines changed
 

‎src/components/RangeInput/RangeInput.js ‎src/components/RangeInput/RangeInput.tsx

+36-51
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,62 @@
11
/** @jsx h */
22

33
import { h, Component } from 'preact';
4-
import PropTypes from 'prop-types';
54
import cx from 'classnames';
65
import Template from '../Template/Template';
6+
import {
7+
RangeInputCSSClasses,
8+
RangeInputTemplates,
9+
} from '../../widgets/range-input/range-input';
10+
import { Range, RangeBoundaries } from '../../connectors/range/connectRange';
11+
12+
export type RangeInputComponentCSSClasses = {
13+
[TClassName in keyof RangeInputCSSClasses]: string;
14+
};
715

8-
class RangeInput extends Component {
9-
constructor(props) {
10-
super(props);
16+
export type RangeInputProps = {
17+
min?: number;
18+
max?: number;
19+
step: number;
20+
values: Partial<Range>;
21+
cssClasses: RangeInputComponentCSSClasses;
22+
templateProps: {
23+
templates: RangeInputTemplates;
24+
};
25+
refine(rangeValue: RangeBoundaries): void;
26+
};
1127

12-
this.state = {
13-
min: props.values.min,
14-
max: props.values.max,
15-
};
16-
}
28+
class RangeInput extends Component<RangeInputProps, Partial<Range>> {
29+
public state = {
30+
min: this.props.values.min,
31+
max: this.props.values.max,
32+
};
1733

18-
componentWillReceiveProps(nextProps) {
34+
public componentWillReceiveProps(nextProps: RangeInputProps) {
1935
this.setState({
2036
min: nextProps.values.min,
2137
max: nextProps.values.max,
2238
});
2339
}
2440

25-
onInput = name => event => {
41+
private onInput = (key: string) => (event: Event) => {
42+
const { value } = event.currentTarget as HTMLInputElement;
43+
2644
this.setState({
27-
[name]: event.currentTarget.value,
45+
[key]: Number(value),
2846
});
2947
};
3048

31-
onSubmit = event => {
49+
private onSubmit = (event: Event) => {
3250
event.preventDefault();
3351

34-
this.props.refine([
35-
this.state.min && Number(this.state.min),
36-
this.state.max && Number(this.state.max),
37-
]);
52+
this.props.refine([this.state.min, this.state.max]);
3853
};
3954

40-
render() {
55+
public render() {
4156
const { min: minValue, max: maxValue } = this.state;
4257
const { min, max, step, cssClasses, templateProps } = this.props;
43-
const isDisabled = min >= max;
44-
58+
const isDisabled = min && max ? min >= max : false;
4559
const hasRefinements = Boolean(minValue || maxValue);
46-
4760
const rootClassNames = cx(cssClasses.root, {
4861
[cssClasses.noRefinement]: !hasRefinements,
4962
});
@@ -60,7 +73,7 @@ class RangeInput extends Component {
6073
step={step}
6174
value={minValue ?? ''}
6275
onInput={this.onInput('min')}
63-
placeholder={min}
76+
placeholder={min?.toString()}
6477
disabled={isDisabled}
6578
/>
6679
</label>
@@ -83,7 +96,7 @@ class RangeInput extends Component {
8396
step={step}
8497
value={maxValue ?? ''}
8598
onInput={this.onInput('max')}
86-
placeholder={max}
99+
placeholder={max?.toString()}
87100
disabled={isDisabled}
88101
/>
89102
</label>
@@ -104,32 +117,4 @@ class RangeInput extends Component {
104117
}
105118
}
106119

107-
RangeInput.propTypes = {
108-
min: PropTypes.number.isRequired,
109-
max: PropTypes.number.isRequired,
110-
step: PropTypes.number.isRequired,
111-
values: PropTypes.shape({
112-
min: PropTypes.number,
113-
max: PropTypes.number,
114-
}).isRequired,
115-
cssClasses: PropTypes.shape({
116-
root: PropTypes.string.isRequired,
117-
noRefinement: PropTypes.string.isRequired,
118-
form: PropTypes.string.isRequired,
119-
label: PropTypes.string.isRequired,
120-
input: PropTypes.string.isRequired,
121-
inputMin: PropTypes.string.isRequired,
122-
inputMax: PropTypes.string.isRequired,
123-
separator: PropTypes.string.isRequired,
124-
submit: PropTypes.string.isRequired,
125-
}).isRequired,
126-
templateProps: PropTypes.shape({
127-
templates: PropTypes.shape({
128-
separatorText: PropTypes.string.isRequired,
129-
submitText: PropTypes.string.isRequired,
130-
}).isRequired,
131-
}),
132-
refine: PropTypes.func.isRequired,
133-
};
134-
135120
export default RangeInput;

‎src/components/RangeInput/__tests__/RangeInput-test.js ‎src/components/RangeInput/__tests__/RangeInput-test.tsx

+45-17
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
import { h } from 'preact';
44
import { shallow } from 'enzyme';
55
import { render, fireEvent } from '@testing-library/preact';
6-
import RangeInput from '../RangeInput';
6+
import RangeInput, { RangeInputProps } from '../RangeInput';
7+
import { ReactElementLike } from 'prop-types';
78

89
describe('RangeInput', () => {
9-
const defaultProps = {
10+
const defaultProps: RangeInputProps = {
1011
min: 0,
1112
max: 500,
1213
step: 1,
@@ -31,12 +32,11 @@ describe('RangeInput', () => {
3132
refine: () => {},
3233
};
3334

34-
const shallowRender = props =>
35-
shallow(<RangeInput {...defaultProps} {...props} />);
35+
const shallowRender = (props?: Partial<RangeInputProps>) =>
36+
shallow((<RangeInput {...defaultProps} {...props} />) as ReactElementLike);
3637

3738
it('expect to render', () => {
38-
const props = {};
39-
const component = shallowRender(props);
39+
const component = shallowRender();
4040

4141
expect(component).toMatchSnapshot();
4242
});
@@ -125,7 +125,9 @@ describe('RangeInput', () => {
125125
it('expect to update the state when min change', () => {
126126
const props = {};
127127
const { container } = render(<RangeInput {...defaultProps} {...props} />);
128-
const [minInput] = container.querySelectorAll('input[type="number"]');
128+
const [minInput] = container.querySelectorAll<HTMLInputElement>(
129+
'input[type="number"]'
130+
);
129131

130132
fireEvent.input(minInput, { target: { value: 20 } });
131133

@@ -135,7 +137,9 @@ describe('RangeInput', () => {
135137
it('expect to update the state when max change', () => {
136138
const props = {};
137139
const { container } = render(<RangeInput {...defaultProps} {...props} />);
138-
const [, maxInput] = container.querySelectorAll('input[type="number"]');
140+
const [, maxInput] = container.querySelectorAll<HTMLInputElement>(
141+
'input[type="number"]'
142+
);
139143

140144
fireEvent.input(maxInput, { target: { value: 480 } });
141145

@@ -150,7 +154,7 @@ describe('RangeInput', () => {
150154
};
151155

152156
const { container } = render(<RangeInput {...defaultProps} {...props} />);
153-
const [minInput, maxInput] = container.querySelectorAll(
157+
const [minInput, maxInput] = container.querySelectorAll<HTMLInputElement>(
154158
'input[type="number"]'
155159
);
156160

@@ -161,7 +165,11 @@ describe('RangeInput', () => {
161165
target: { value: 480 },
162166
});
163167

164-
fireEvent.submit(container.querySelector('form'));
168+
const form = container.querySelector('form');
169+
170+
if (form) {
171+
fireEvent.submit(form);
172+
}
165173

166174
expect(props.refine).toHaveBeenCalledWith([20, 480]);
167175
});
@@ -172,7 +180,7 @@ describe('RangeInput', () => {
172180
};
173181

174182
const { container } = render(<RangeInput {...defaultProps} {...props} />);
175-
const [minInput, maxInput] = container.querySelectorAll(
183+
const [minInput, maxInput] = container.querySelectorAll<HTMLInputElement>(
176184
'input[type="number"]'
177185
);
178186

@@ -183,7 +191,11 @@ describe('RangeInput', () => {
183191
target: { value: 480.05 },
184192
});
185193

186-
fireEvent.submit(container.querySelector('form'));
194+
const form = container.querySelector('form');
195+
196+
if (form) {
197+
fireEvent.submit(form);
198+
}
187199

188200
expect(props.refine).toHaveBeenCalledWith([20.05, 480.05]);
189201
});
@@ -194,13 +206,19 @@ describe('RangeInput', () => {
194206
};
195207

196208
const { container } = render(<RangeInput {...defaultProps} {...props} />);
197-
const [minInput] = container.querySelectorAll('input[type="number"]');
209+
const [minInput] = container.querySelectorAll<HTMLInputElement>(
210+
'input[type="number"]'
211+
);
198212

199213
fireEvent.input(minInput, {
200214
target: { value: 20 },
201215
});
202216

203-
fireEvent.submit(container.querySelector('form'));
217+
const form = container.querySelector('form');
218+
219+
if (form) {
220+
fireEvent.submit(form);
221+
}
204222

205223
expect(props.refine).toHaveBeenCalledWith([20, undefined]);
206224
});
@@ -211,13 +229,19 @@ describe('RangeInput', () => {
211229
};
212230

213231
const { container } = render(<RangeInput {...defaultProps} {...props} />);
214-
const [, maxInput] = container.querySelectorAll('input[type="number"]');
232+
const [, maxInput] = container.querySelectorAll<HTMLInputElement>(
233+
'input[type="number"]'
234+
);
215235

216236
fireEvent.input(maxInput, {
217237
target: { value: 480 },
218238
});
219239

220-
fireEvent.submit(container.querySelector('form'));
240+
const form = container.querySelector('form');
241+
242+
if (form) {
243+
fireEvent.submit(form);
244+
}
221245

222246
expect(props.refine).toHaveBeenCalledWith([undefined, 480]);
223247
});
@@ -228,7 +252,11 @@ describe('RangeInput', () => {
228252
};
229253

230254
const { container } = render(<RangeInput {...defaultProps} {...props} />);
231-
fireEvent.submit(container.querySelector('form'));
255+
const form = container.querySelector('form');
256+
257+
if (form) {
258+
fireEvent.submit(form);
259+
}
232260

233261
expect(props.refine).toHaveBeenCalledWith([undefined, undefined]);
234262
});

0 commit comments

Comments
 (0)
Please sign in to comment.