bpk-component-nudger

Backpack nudger component.

Installation

npm install bpk-component-nudger --save-dev

Usage

BpkNudger

import React, { Component } from 'react';
import BpkLabel from 'bpk-component-label';
import BpkNudger from 'bpk-component-nudger';

class App extends Component {
  constructor() {
    super();

    this.state = {
      value: 1,
    };
  }

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

  render() {
    return (
      <div>
        <BpkLabel htmlFor="my-nudger">Number of passengers</BpkLabel>
        <BpkNudger
          id="my-nudger"
          min={1}
          max={10}
          value={this.state.value}
          onChange={this.handleChange}
          decreaseButtonLabel="Decrease"
          increaseButtonLabel="Increase"
        />
      </div>
    );
  }
}

BpkConfigurableNudger

import React, { Component } from 'react';
import BpkLabel from 'bpk-component-label';
import { BpkConfigurableNudger } from 'bpk-component-nudger';

const options = ['economy', 'premium', 'business', 'first'];

const compareValues = (value1, value2) => {
    const [aIndex, bIndex] = [options.indexOf(value1), options.indexOf(value2)];
    return aIndex - bIndex;
  };

const incrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) + 1];
    return options[aIndex];
  };

const decrementValue = currentValue => {
    const [aIndex] = [options.indexOf(currentValue) - 1];
    return options[aIndex];
  };

const formatValue = currentValue => currentValue.toString();

class App extends Component {
  constructor() {
    super();

    this.state = {
      value: 1,
    };
  }

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

  render() {
    return (
      <div>
        <BpkLabel htmlFor="nudger">Number of passengers</BpkLabel>
        <BpkConfigurableNudger
          id="nudger"
          min="economy"
          max="first"
          value={this.state.value}
          onChange={this.handleChange}
          decreaseButtonLabel="Decrease"
          increaseButtonLabel="Increase"
          compareValues={compareValues}
          incrementValue={incrementValue}
          decrementValue={decrementValue}
          formatValue={formatValue}
        />
      </div>
    );
  }
}

Props

BpkNudger

| Property | PropType | Required | Default Value | | ------------------- | ----------------------------- | -------- | ------------- | | id | string | true | - | | decreaseButtonLabel | string | true | - | | increaseButtonLabel | string | true | - | | max | number | true | - | | min | number | true | - | | onChange | func | true | - | | value | number | true | - | | className | string | false | null | | buttonType | oneOf('secondary', 'secondaryOnDark') | false | secondary |

BpkConfigurableNudger

| Property | PropType | Required | Default Value | | ------------------- | ----------------------------- | -------- | ------------- | | id | string | true | - | | decreaseButtonLabel | string | true | - | | increaseButtonLabel | string | true | - | | max | number | true | - | | min | number | true | - | | onChange | func | true | - | | value | number | true | - | | compareValues | func | true | - | | incrementValue | func | true | - | | decrementValue | func | true | - | | formatValue | func | true | - | | className | string | false | null | | inputClassName | string | false | null | | buttonType | oneOf('secondary', 'secondaryOnDark') | false | secondary |

compareValues

Given a and b:

• If a is less than b then compareValues(a, b) should return a value less than 0
• If a and b are equal then compareValues(a, b) should return exactly 0
• If a is greater than b then compareValues(a, b) should return a value greater than 0

We use this along with the min and max values to determine when we should disable the increment and decrement buttons. This is inspired by the compareFunction in Array.prototype.sort

For integer numbers the following is a correct implementation const compareValues = (a: number, b: number): number => a - b;

incrementValue & decrementValue

Functions that handle the incrementing or decrementing of the current selected value.

formatValue

A simple function that will allow you to set the format of the display value e.g. local dates or times.

Theme Props

Same as secondary button