[TextField: Spinner] Support press and hold to increment/decrement value

[tanhengyeow]

WHY are these changes introduced?

Resolves #420

WHAT is this pull request doing?

Support press and hold to increment/decrement value in Spinner of the numeric TextField.

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, TextField} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  state = {
    value: '1',
  };

  handleChange = (value) => {
    this.setState({value});
  };

  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test here */}
        <TextField
          label="Quantity"
          type="number"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </Page>
    );
  }
}

[danrosenthal]

@tanhengyeow thanks so much for the contribution! On first glance, this is looking like a good step in the right direction. Can you add some tests to this change to cover all new code paths, and in particular all new props added to Spinner?

[tmlayton]

200 might be a bit long and I think we should consider adding a setTimeout first. That way when clicking and holding, there is an initial delay of maybe 500 then the number quickly increments maybe at an interval of 100. Thoughts?

[tmlayton]

Suggested change

	this.buttonPressTimer = setInterval(onChange, 200);
	let interval = 200;
	const onChangeInterval = () => {
	if (interval > 50) {
	interval -= 10;
	} else {
	interval = 50;
	}
	onChange();
	this.buttonPressTimer = window.setTimeout(onChangeInterval, interval);
	};
	this.buttonPressTimer = window.setTimeout(onChangeInterval, interval);

[tmlayton]

Something like this will cause the increment to gradually speed up, with an initial delay of 200ms.

[sarahill]

☝️ I like this suggestion of gradually increasing the speed. Overall, this looks great!

[tmlayton]

Overall, looks good! As @danrosenthal mentioned, this could use tests though.

[dpersing]

Hi @tanhengyeow! Are you able to provide any updates around tests? Thanks!

[tanhengyeow]

Hey everyone, thanks for the review 😄

The suggestion sounds great and I'll look into adding tests :) I'm having exams now so I can only get back to this during December, hope that's fine :D

[danrosenthal]

I'm having exams now so I can only get back to this during December, hope that's fine

Totally fine. I'll add [WIP] to the title to indicate that this pull request is a work in progress.

All feedback has been addressed

[tmlayton]

I went ahead a tied this one up

[danrosenthal]

I might be missing something here, but when I tophat, it still just seems to increment and decrement by one digit.

[tmlayton]

When you git log do you see the latest commits? Depending on how you checked this out an upstream might not be set.

[ghost]

🎉 Thanks for your contribution to Polaris React!