Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CARBON-865] CustomDragLayer component for enabling Drag & Drop ghost row #1439

Merged
merged 10 commits into from Aug 29, 2017

Commits on Aug 21, 2017

  1. CustomDragLayer component for enabling Drag & Drop ghost row

    In order to enable this you need to define the `draggableNode` prop on
    the `<WithDrag>` component. For example:
    
    ```
    class DraggableItems extends React.Component {
      render() {
        return (
          <DraggableContext onDrag={ onItemMoved }>
            <ol>
              {
                items.map((item, index) => {
                  return (
                    <WithDrop key={ index } index={ index }>
                      <DraggableItem />
                    </WithDrop>
                  );
                });
              }
            </ol>
          </DraggableContext>
        );
      }
    }
    
    ...
    
    class DraggableItem extends React.Component {
      render() {
        return (
          <li ref={ (node) => { this._listItem = node; } } >
            <WithDrag draggableNode={ () => { return this._listItem; } }>
              <span>{ item.content }</span>
            </WithDrag>
          </li>
        );
      }
    }
    ```
    
    Note that the `draggableNode` is passed as a function because the ref
    `_listItem` is undefined until the component is mounted.
    Paul Sturgess committed Aug 21, 2017
    Configuration menu
    Copy the full SHA
    19b052b View commit details
    Browse the repository at this point in the history

Commits on Aug 22, 2017

  1. Configuration menu
    Copy the full SHA
    791f069 View commit details
    Browse the repository at this point in the history
  2. cache onselectstart

    SeanArmstrong committed Aug 22, 2017
    1 Configuration menu
    Copy the full SHA
    3cd91b5 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    9623bf7 View commit details
    Browse the repository at this point in the history

Commits on Aug 24, 2017

  1. CustomDragLayer component for enabling Drag & Drop ghost row

    In order to enable this you need to define the `draggableNode` prop on
    the `<WithDrag>` component. For example:
    
    ```
    class DraggableItems extends React.Component {
      render() {
        return (
          <DraggableContext onDrag={ onItemMoved }>
            <ol>
              {
                items.map((item, index) => {
                  return (
                    <WithDrop key={ index } index={ index }>
                      <DraggableItem />
                    </WithDrop>
                  );
                });
              }
            </ol>
          </DraggableContext>
        );
      }
    }
    
    ...
    
    class DraggableItem extends React.Component {
      render() {
        return (
          <li ref={ (node) => { this._listItem = node; } } >
            <WithDrag draggableNode={ () => { return this._listItem; } }>
              <span>{ item.content }</span>
            </WithDrag>
          </li>
        );
      }
    }
    ```
    
    Note that the `draggableNode` is passed as a function because the ref
    `_listItem` is undefined until the component is mounted.
    Paul Sturgess committed Aug 24, 2017
    Configuration menu
    Copy the full SHA
    1b36110 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    7eb9e54 View commit details
    Browse the repository at this point in the history
  3. Prevent Safari from changing the mouse cursor on drag

    Use 'selectstart' event listener to call preventDefault if the user is
    dragging a dom node or is already dragging.
    Paul Sturgess committed Aug 24, 2017
    Configuration menu
    Copy the full SHA
    aeed752 View commit details
    Browse the repository at this point in the history

Commits on Aug 25, 2017

  1. Configuration menu
    Copy the full SHA
    ab8187e View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    b2dba8b View commit details
    Browse the repository at this point in the history

Commits on Aug 29, 2017

  1. Merge pull request #1494 from Sage/CARBON-865-safari-fix

    Fix Safari cursor for drag and drop
    andrewjtait committed Aug 29, 2017
    Configuration menu
    Copy the full SHA
    f33a17f View commit details
    Browse the repository at this point in the history