How to use react-beautiful-dnd - 10 common examples

renderedEl = _renderItem.renderedEl;

      if (filter && filter.trim() && !_this4.matchFilter(renderedText, item)) {
        return null;
      }

      // all show items
      totalDataSource.push(item);

      if (!item.disabled) {
        filteredDataSource.push(item);
      }

      var checked = checkedKeys.indexOf(item.key) >= 0;
      return _react2["default"].createElement(
        _reactBeautifulDnd.Draggable,
        { key: item.key, index: index, draggableId: '' + item.key, isDragDisabled: draggable ? item.disabled : !draggable },
        function (provided, snapshot) {
          return _react2["default"].createElement(
            'div',
            _extends({
              ref: provided.innerRef
            }, provided.draggableProps, provided.dragHandleProps, {
              // onClick={(event) =>this.handleDrag(event, provided, snapshot, item)}
              onKeyDown: function onKeyDown(event) {
                return _this4.onKeyDown(event, provided, snapshot, item);
              }
              // className={classnames({
              //     ...getClass(this.props,snapshot.isDragging).drag
              //   })}
              , style: _extends({}, provided.draggableProps.style) }),
            _react2["default"].createElement(_item2["default"]

exports.default = function (_ref) {
  var children = _ref.children,
      id = _ref.id,
      onClick = _ref.onClick,
      props = _objectWithoutProperties(_ref, ['children', 'id', 'onClick']);

  return _react2.default.createElement(
    _reactBeautifulDnd.Draggable,
    { draggableId: id },
    function (provided, snapshot) {
      var onClickNew = onClick ? function () {
        // dragHandleProps might be null
        if (!provided.dragHandleProps) {
          return onClick;
        }
        return function (event) {
          provided.dragHandleProps.onClick(event);
          onClick(event);
        };
      }() : provided.dragHandleProps.onClickDrag;
      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(

rightDataSource = _state3.rightDataSource,
        droppableId = _state3.droppableId;

    // const { leftDataSource, rightDataSource } = this.splitDataSource(this.props);

    var leftActive = targetSelectedKeys.length > 0;
    var rightActive = sourceSelectedKeys.length > 0;

    var cls = (0, _classnames2["default"])(className, prefixCls);

    var titles = this.getTitles();
    return _react2["default"].createElement(
      'div',
      { className: cls },
      _react2["default"].createElement(
        _reactBeautifulDnd.DragDropContext,
        { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart },
        _react2["default"].createElement(_list2["default"], {
          titleText: titles[0] //左侧标题
          , dataSource: leftDataSource //左侧数据源
          , filter: leftFilter //搜索框中输入的内容
          , filterOption: filterOption //搜索过滤方法 参数(inputValue, option)
          , style: listStyle //自定义的columns的样式表
          , checkedKeys: sourceSelectedKeys //左侧已勾选的item的keys
          , handleFilter: this.handleLeftFilter //左侧搜索框值更改事件
          , handleClear: this.handleLeftClear //清空左侧搜索框内容
          , handleSelect: this.handleLeftSelect //点击左侧列表中的item，改变选中或取消选中状态
          , handleSelectAll: this.handleLeftSelectAll //点击左侧全选
          , render: render,
          showSearch: showSearch //是否显示搜索框
          , searchPlaceholder: searchPlaceholder //搜索框placeholder
          , notFoundContent: notFoundContent //当没有相关内容的显示内容

data.map(function (item, index) {
            return _react2.default.createElement(
              _reactBeautifulDnd.Draggable,
              { key: item.id, draggableId: item.id, type: listType },
              function (dragProvided, dragSnapshot) {
                return _react2.default.createElement(
                  'div',
                  null,
                  _react2.default.createElement(_Item2.default, {
                    key: item.id,
                    index: index,
                    item: item,
                    isDragging: dragSnapshot.isDragging,
                    provided: dragProvided,
                    autoFocus: _this.props.autoFocusId === item.id,
                    selected: selectedId && selectedId === item.id,
                    onClick: function onClick() {
                      return onClickItem(item, index);
                    },

_this2.state.items.map(function (item, index) {
                                return _react2["default"].createElement(
                                    _reactBeautifulDnd.Draggable,
                                    {
                                        key: '1' + index,
                                        draggableId: '1' + index,
                                        index: index },
                                    function (provided, snapshot) {
                                        return _react2["default"].createElement(
                                            'div',
                                            _extends({
                                                ref: provided.innerRef
                                            }, provided.draggableProps, provided.dragHandleProps, {
                                                className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
                                                style: _extends({}, provided.draggableProps.style) }),
                                            showKey ? item[showKey] : item
                                        );
                                    }
                                );

_this2.state.selected.map(function (item, index) {
                                return _react2["default"].createElement(
                                    _reactBeautifulDnd.Draggable,
                                    {
                                        key: '2' + index,
                                        draggableId: '2' + index,
                                        index: index },
                                    function (provided, snapshot) {
                                        return _react2["default"].createElement(
                                            'div',
                                            _extends({
                                                ref: provided.innerRef
                                            }, provided.draggableProps, provided.dragHandleProps, {
                                                className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
                                                style: _extends({}, provided.draggableProps.style) }),
                                            showKey ? item[showKey] : item
                                        );
                                    }
                                );

_this2.state.items.map(function (item, index) {
              return _react2["default"].createElement(
                _reactBeautifulDnd.Draggable,
                { key: index, draggableId: '' + index, index: index },
                function (provided, snapshot) {
                  return _react2["default"].createElement(
                    'div',
                    _extends({
                      ref: provided.innerRef
                    }, provided.draggableProps, provided.dragHandleProps, {
                      className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDragging).drag)),
                      style: _extends({}, provided.draggableProps.style)
                    }),
                    showKey ? item[showKey] : item
                  );
                }
              );
            }),
            provided.placeholder

defaultClassNameDragged: this.props.draggedClass
                }, this.props),
                self.props.children
            )
        );
    };

    return Dnd;
}(_react.Component);

Dnd.propTypes = propTypes;
Dnd.defaultProps = defaultProps;
Dnd.Drag = _reactDraggable2["default"];
Dnd.DragDropContext = _reactBeautifulDnd.DragDropContext;
Dnd.Droppable = _reactBeautifulDnd.Droppable;
Dnd.Draggable = _reactBeautifulDnd.Draggable;
Dnd.GridLayout = _GridLayout2["default"];
exports["default"] = Dnd;
module.exports = exports['default'];

const DND = require('react-beautiful-dnd');

exports.dragDropContextClass = DND.DragDropContext;
exports.draggableClass = DND.Draggable;
exports.droppableClass = DND.Droppable;

onDrag = _props.onDrag,
        onStop = _props.onStop,
        onDragUpdate = _props.onDragUpdate,
        dropClass = _props.dropClass,
        dropOverClass = _props.dropOverClass,
        dragClass = _props.dragClass,
        dragingClass = _props.dragingClass,
        showKey = _props.showKey,
        type = _props.type;


    return _react2["default"].createElement(
      _reactBeautifulDnd.DragDropContext,
      { onDragEnd: this.onDragEnd, onDragStart: this.onDragStart, onDragUpdate: onDragUpdate },
      _react2["default"].createElement(
        _reactBeautifulDnd.Droppable,
        { droppableId: 'droppable', direction: type },
        function (provided, snapshot) {
          return _react2["default"].createElement(
            'div',
            {
              ref: provided.innerRef,
              className: (0, _classnames2["default"])(_extends({}, (0, _util.getClass)(_this2.props, snapshot.isDraggingOver).drop))
            },
            _this2.state.items.map(function (item, index) {
              return _react2["default"].createElement(
                _reactBeautifulDnd.Draggable,
                { key: index, draggableId: '' + index, index: index },
                function (provided, snapshot) {
                  return _react2["default"].createElement(
                    'div',
                    _extends({