bpk-component-input-css v6.1.11

bpk-component-input

Backpack input component.

Installation

npm install bpk-component-input --save-dev

Usage

import React from 'react';
import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';

export default () => (
  <BpkInput
    id="origin"
    type={INPUT_TYPES.text}
    name="origin"
    value="Edinburgh"
    onChange={() => console.log('input changed!')}
    placeholder="Country, city or airport"
    clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
    clearButtonLabel="Clear"
    onClear={() => console.log('input cleared!')}
  />
);

Props

Additionally, all native <input /> attributes such as placeholder and onChange are supported.

Note: When clearButtonMode is set to always, validity icons will not appear.

withOpenEvents

The withOpenEvents higher-order component encapsulates input event handlers for opening popovers or modals.

The onOpen callback is called on the following events:

• click
• focus
• touchend
• keydown (Enter key)
• keyup (Space key)

You can still attach custom handlers for these events as they will still be called. All other key events are prevented.

It is important you pass the isOpen prop, as it is necessary to work around an IE bug.

import React from 'react';
import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkPopover from 'bpk-component-popover';

const EnhancedInput = withOpenEvents(BpkInput);

export default () => {
  constructor() {
    super();

    this.state = { isOpen: false };
  }

  onOpen = () => {
    this.setState({ isOpen: true });
  }

  onClose = () => {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <BpkPopover
        id="popover"
        target={
          <EnhancedInput
            id="input"
            value="An input?"
            isOpen={this.state.isOpen}
            onOpen={this.onOpen}
            onChange={() => null}
          />
        }
        onClose={this.onClose}
        isOpen={this.state.isOpen}
        label="Popover"
        closeButtonText="Close"
      >
        A popover!
      </BpkPopover>
    );
  }
}