Top 10 Examples of "react-beautiful-dnd in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'react-beautiful-dnd' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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.placeholderdefaultClassNameDragged: 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({