app-base-react
Version:
react development common base package.
436 lines (371 loc) • 14.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _regenerator = require('babel-runtime/regenerator');
var _regenerator2 = _interopRequireDefault(_regenerator);
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _icons = require('@ant-design/icons');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDnd = require('react-dnd');
var _utils = require('../../../utils');
var _hooks = require('../../../utils/hooks');
require('../../../../../../css/generator/Wrapper.css');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
function Wrapper(_ref) {
var _this = this;
var $id = _ref.$id,
item = _ref.item,
_ref$inside = _ref.inside,
inside = _ref$inside === undefined ? false : _ref$inside,
children = _ref.children,
style = _ref.style;
var _useState = (0, _react.useState)(),
_useState2 = _slicedToArray(_useState, 2),
position = _useState2[0],
setPosition = _useState2[1];
var _useStore = (0, _hooks.useStore)(),
flatten = _useStore.flatten,
onFlattenChange = _useStore.onFlattenChange,
selected = _useStore.selected,
userProps = _useStore.userProps,
errorFields = _useStore.errorFields,
fieldWrapperRender = _useStore.fieldWrapperRender;
var controlButtons = userProps.controlButtons,
_userProps$canDrag = userProps.canDrag,
_canDrag = _userProps$canDrag === undefined ? true : _userProps$canDrag,
_userProps$canDelete = userProps.canDelete,
canDelete = _userProps$canDelete === undefined ? true : _userProps$canDelete,
hideId = userProps.hideId,
getId = userProps.getId;
var setGlobal = (0, _hooks.useGlobal)();
var schema = item.schema;
var type = schema.type;
var boxRef = (0, _react.useRef)(null);
var _useDrag = (0, _reactDnd.useDrag)({
type: 'box',
item: { $id: inside ? 0 + $id : $id },
canDrag: function canDrag() {
return typeof _canDrag === 'function' ? _canDrag(schema) : _canDrag;
},
collect: function collect(monitor) {
return {
isDragging: monitor.isDragging()
};
}
}),
_useDrag2 = _slicedToArray(_useDrag, 3),
isDragging = _useDrag2[0].isDragging,
dragRef = _useDrag2[1],
dragPreview = _useDrag2[2];
var _useDrop = (0, _reactDnd.useDrop)({
accept: 'box',
drop: function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee(item, monitor) {
var didDrop, _dropItem, _dropItem2, newFlatten, newId;
return _regenerator2.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
// 如果 children 已经作为了 drop target，不处理
didDrop = monitor.didDrop();
if (!(didDrop || errorFields.length)) {
_context.next = 3;
break;
}
return _context.abrupt('return');
case 3:
_dropItem = (0, _utils.dropItem)({
dragId: item.$id, // 内部拖拽用dragId
dragItem: item.dragItem, // 从左边栏过来的，用dragItem
dropId: $id,
position: position,
flatten: flatten
}), _dropItem2 = _slicedToArray(_dropItem, 2), newFlatten = _dropItem2[0], newId = _dropItem2[1];
onFlattenChange(newFlatten);
setGlobal({ selected: newId });
case 6:
case 'end':
return _context.stop();
}
}
}, _callee, _this);
}));
return function drop(_x, _x2) {
return _ref2.apply(this, arguments);
};
}(),
hover: function hover(item, monitor) {
// 只检查被hover的最小元素
var didHover = monitor.isOver({ shallow: true });
if (didHover) {
// Determine rectangle on screen
var hoverBoundingRect = boxRef.current && boxRef.current.getBoundingClientRect();
// Get vertical middle
var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
// Determine mouse position
// const clientOffset = monitor.getClientOffset();
var dragOffset = monitor.getSourceClientOffset();
// Get pixels to the top
var hoverClientY = dragOffset.y - hoverBoundingRect.top;
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (inside) {
setPosition('inside');
} else {
if (hoverClientY <= hoverMiddleY) {
setPosition('up');
}
// Dragging upwards
if (hoverClientY > hoverMiddleY) {
setPosition('down');
}
}
}
},
collect: function collect(monitor) {
return {
isOver: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop()
};
}
}),
_useDrop2 = _slicedToArray(_useDrop, 2),
_useDrop2$ = _useDrop2[0],
canDrop = _useDrop2$.canDrop,
isOver = _useDrop2$.isOver,
dropRef = _useDrop2[1];
var isActive = canDrop && isOver;
dragPreview(dropRef(boxRef));
var handleClick = function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee2(e) {
var _id;
return _regenerator2.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
e.stopPropagation();
if (!errorFields.length) {
_context2.next = 3;
break;
}
return _context2.abrupt('return');
case 3:
_id = inside ? '0' + $id : $id;
setGlobal({ selected: _id });
case 5:
case 'end':
return _context2.stop();
}
}
}, _callee2, _this);
}));
return function handleClick(_x3) {
return _ref3.apply(this, arguments);
};
}();
var deleteItem = function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee3(e) {
var newFlatten, newSelect, parent, siblings, idx, _canDelete;
return _regenerator2.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.stopPropagation();
newFlatten = _extends({}, flatten);
newSelect = '#';
// 计算删除后新被选中的元素：
// 1. 如果是第一个，选第二个
// 2. 如果不是第一，选它前一个
// 3. 如果同级元素没了，选parent
try {
parent = newFlatten[$id].parent;
siblings = newFlatten[parent].children;
idx = siblings.indexOf($id);
if (idx > 0) {
newSelect = siblings[idx - 1];
} else {
newSelect = siblings[1] || parent;
}
} catch (error) {
console.error(error, 'catch');
}
_canDelete = canDelete;
if (!(typeof canDelete === 'function')) {
_context3.next = 9;
break;
}
_context3.next = 8;
return Promise.resolve(canDelete(newFlatten[$id].schema));
case 8:
_canDelete = _context3.sent;
case 9:
if (_canDelete) {
_context3.next = 11;
break;
}
return _context3.abrupt('return');
case 11:
delete newFlatten[$id];
onFlattenChange(newFlatten);
setGlobal({ selected: newSelect });
case 14:
case 'end':
return _context3.stop();
}
}
}, _callee3, _this);
}));
return function deleteItem(_x4) {
return _ref4.apply(this, arguments);
};
}();
var handleItemCopy = function handleItemCopy(e) {
e.stopPropagation();
if (errorFields.length) return;
var _copyItem = (0, _utils.copyItem)(flatten, $id, getId),
_copyItem2 = _slicedToArray(_copyItem, 2),
newFlatten = _copyItem2[0],
newId = _copyItem2[1];
onFlattenChange(newFlatten);
setGlobal({ selected: newId });
};
// 一些computed
var isSelected = selected === $id && !inside;
if (selected && selected[0] === '0') {
isSelected = selected.substring(1) === $id && inside;
}
var overwriteStyle = {
backgroundColor: '#fff',
opacity: isDragging ? 0 : 1
};
if (inside) {
overwriteStyle = _extends({}, overwriteStyle, {
borderColor: '#777',
// marginLeft: 12,
padding: '12px 12px 0',
backgroundColor: '#f6f5f6'
});
} else if ($id === '#') {
overwriteStyle = _extends({}, overwriteStyle, {
borderColor: '#777',
padding: 12,
height: '100%',
overflow: 'auto',
backgroundColor: '#f6f5f6'
});
} else if (type === 'object') {
overwriteStyle = _extends({}, overwriteStyle, { paddingTop: 12 });
}
if (isActive) {
if (inside) {
overwriteStyle = _extends({}, overwriteStyle, {
boxShadow: '0 -3px 0 red'
});
} else if (position === 'up') {
overwriteStyle = _extends({}, overwriteStyle, {
boxShadow: '0 -3px 0 red'
});
} else if (position === 'down') {
overwriteStyle = _extends({}, overwriteStyle, {
boxShadow: '0 3px 0 red'
});
}
}
if (isSelected) {
overwriteStyle = _extends({}, overwriteStyle, {
outline: '2px solid #409eff',
borderColor: '#fff',
zIndex: 1
});
}
if (style && (typeof style === 'undefined' ? 'undefined' : _typeof(style)) === 'object') {
overwriteStyle = _extends({}, overwriteStyle, style);
}
if ($id === '#' && inside) return children;
// 展示的id
var shownId = (0, _utils.getKeyFromUniqueId)(schema.$id);
// 操作按钮
var _controlButtons = Array.isArray(controlButtons) ? controlButtons : [true, true];
var _showDefaultBtns = _controlButtons.filter(function (item) {
return ['boolean', 'function'].includes(typeof item === 'undefined' ? 'undefined' : _typeof(item));
}).map(function (item) {
if (typeof item === 'boolean') return item;
return item(schema);
});
var _extraBtns = _controlButtons.filter(function (item) {
return (0, _utils.isObject)(item) && (item.text || item.children);
});
var _showDefaultBtns$conc = _showDefaultBtns.concat(_extraBtns).filter(Boolean),
_numOfBtns = _showDefaultBtns$conc.length;
var hasDuplicateId = Object.keys(flatten).map(function (key) {
return flatten[key].schema.$id;
}).filter(function (key) {
return key === schema.$id;
}).length > 1;
var originNode = _react2.default.createElement(
'div',
{
ref: boxRef,
style: overwriteStyle,
className: 'field-wrapper ' + ($id !== '#' && isSelected ? 'selected-field-wrapper' : '') + ' relative w-100',
onClick: handleClick
},
children,
_react2.default.createElement(
'div',
{ className: 'absolute top-0 right-1 f7' },
!inside && $id !== '#' && !hideId && _react2.default.createElement(
'span',
{ className: hasDuplicateId ? 'red' : 'blue' },
shownId
),
schema.hidden && _react2.default.createElement(
'span',
{ style: { color: '#666', marginLeft: '6px' } },
'[hidden]'
)
),
!inside && $id !== '#' && isSelected && _react2.default.createElement(
'div',
{ className: 'pointer-move', ref: dragRef },
_react2.default.createElement(_icons.DragOutlined, null)
),
!inside && $id !== '#' && isSelected && _numOfBtns > 0 && _react2.default.createElement(
'div',
{ className: 'pointer-wrapper' },
_showDefaultBtns[0] !== false && _react2.default.createElement(
'div',
{ className: 'pointer', onClick: deleteItem },
_react2.default.createElement(_icons.DeleteOutlined, null)
),
_showDefaultBtns[1] !== false && _react2.default.createElement(
'div',
{ className: 'pointer', onClick: handleItemCopy },
_react2.default.createElement(_icons.CopyOutlined, null)
),
_extraBtns.map(function (item, idx) {
return _react2.default.createElement(
'div',
{
key: idx.toString(),
className: 'pointer',
onClick: function onClick(e) {
return item.onClick && item.onClick(e, schema);
}
},
item.text || item.children
);
})
)
);
if (!fieldWrapperRender) return originNode;
return fieldWrapperRender(schema, isSelected, children, originNode);
}
exports.default = Wrapper;