# All files / components/DragBox DragBoxSelect.js

0% Statements 0/35
0% Branches 0/6
0% Functions 0/8
0% Lines 0/13

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84

     import React from 'react';
    import PropTypes from 'prop-types';

    /**
     *  **DragBoxSelect** is a specialized usage of [DragBox](/#!/DragBox) that is also accessible via `DragBox.Select`. It is
     *  provided as a convenience as it is a commonly used group of components. All properties available in both
     *  [Selectable](/#!/Selectable) and [DragBox](/#!/DragBox) are passed into the `renderContents`
     *  render prop for **DragBoxSelect**.
     * @visibleName DragBox.Select
     */
    class DragBoxSelect extends React.Component {
      static propTypes = {
        /**
         * Callback invoked when the mouse is clicked in the **DragBoxSelect** area
         */
        onMouseDown: PropTypes.func,
        /**
         * Callback invoked when the mouse is released in the **DragBoxSelect** area.
         * Passed the **Set** of collision keys as its argument.
         */
        onMouseUp: PropTypes.func,
        /**
         * Callback invoked when the **DragBoxSelect** box set of collisions changes.
         * Called with an object that has two keys, `added` and `removed`, each
         * with an array of items that were just added or removed respectively
         * to the collision set.
         */
        onCollisionChange: PropTypes.func,
        /**
         * Callback invoked when the **DragBoxSelect** box collides with new items
         * that it wasn't colliding with at the previous mouse position.
         * Called with an array of items that have just been collided with.
         */
        onCollisionBegin: PropTypes.func,
        /**
         * Callback invoked when the **DragBoxSelect** box stops colliding with items
         * that it was colliding with at the previous mouse position.
         * Called with an array of items that have just stopped colliding.
         */
        onCollisionEnd: PropTypes.func,
        /**
         * Render prop to render contents inside **DragBoxSelect**.
         * Supports all callbacks that **DragBoxSelect** itself supports as well as the following props:
         *
         * *collisions*: The **Set** of keys that are currently being collided with
         *
         * *getRef*: A function that should be passed into the `ref` property of each child
         * that can be selected by **DragBoxSelect**. It should be called with a unique key
         * for each component. For example, `<button ref={getRef("uniquekey")} key="uniquekey" />`.
         */
        renderContents: PropTypes.func,
        /**
         * Render prop to render the draggable rectangle. It is passed an object with the left, top, width, and height of
         * the rectangle to be drawn should return the component to render.
         */
        renderRect: PropTypes.func,
      };

      renderDragBox = selectableProps => {
        const {
          props: { renderContents },
        } = this;
        return (
          <DragBox
            {...this.props}
            onCollisionBegin={items => items.forEach(selectableProps.toggleItem)}
            onCollisionEnd={items => items.forEach(selectableProps.toggleItem)}
            renderContents={dragBoxProps =>
              renderContents({
                ...dragBoxProps,
                ...selectableProps,
              })
            }
          />
        );
      };

      render() {
        return <Selectable render={this.renderDragBox} />;
      }
    }

    export default DragBoxSelect;