Naturally Pacifist Marsupials

    bpk-component-input-css

    6.1.11 • Public • Published

    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

    Property PropType Required Default Value
    id string true -
    name string true -
    type INPUT_TYPES (one of) false INPUT_TYPES.text
    value string true -
    clearButtonMode CLEAR_BUTTON_MODES (one of) false CLEAR_BUTTON_MODES.never
    clearButtonLabel string if clearable={true} null
    dockedFirst bool false false
    dockedLast bool false false
    dockedMiddle bool false false
    inputRef func false null
    large bool false false
    onClear func if clearable={true} null
    valid bool false null

    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.

    Property PropType Required Default Value
    isOpen bool false false
    onOpen func false null
    hasTouchSupport bool false (feature detection)
    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>
        );
      }
    }

    Keywords

    none

    Install

    npm i bpk-component-input-css

    DownloadsWeekly Downloads

    46

    Version

    6.1.11

    License

    Apache-2.0

    Unpacked Size

    58.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • k0nserv
    • shaundon
    • georgegillams
    • tiagohngl
    • ojcurt