@quillforms/block-editor
Version:
114 lines (112 loc) • 4.14 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _adminComponents = require("@quillforms/admin-components");
var _lodash = require("lodash");
var _emotion = require("emotion");
var _blockDragging = _interopRequireDefault(require("../block-dragging"));
var _blockListItem = _interopRequireDefault(require("../block-list-item"));
var _data = require("@wordpress/data");
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
// const BlockDragIndexLine = () => {
// return <div className="block-drag-index-line"></div>;
// };
const BlockChildrenContainer = ({
id,
index,
innerBlocks,
parentColor
}) => {
const {
formBlocks,
currentChildBlockId
} = (0, _data.useSelect)(select => {
return {
formBlocks: select('quillForms/block-editor').getBlocks(),
currentChildBlockId: select('quillForms/block-editor').getCurrentChildBlockId()
};
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.__experimentalDroppable, {
type: `container-${id}`,
droppableId: `PARENT_${id}_${index}`,
renderClone: (provided, _snapshot, rubric) => {
const item = formBlocks[index]?.innerBlocks?.[rubric.source.index];
if (item?.id && item?.name) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...provided.draggableProps,
...provided.dragHandleProps,
ref: provided.innerRef,
style: {
...provided.draggableProps.style,
height: undefined,
padding: 12
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockDragging.default, {
id: item?.id,
name: item?.name
})
});
} else {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
}
},
children: (provided, snapshot) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('block-editor-children-container', {
'disable-hover-highlight': snapshot.isDraggingOver
}),
...provided.droppableProps,
ref: provided.innerRef,
children: [!innerBlocks || (0, _lodash.size)(innerBlocks) === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _emotion.css)`
display: flex;
align-items: center;
padding: 20px;
`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.BlockTypesListDropdown, {
destinationIndex: 0
//@ts-ignore
,
parent: id,
color: "primary"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _emotion.css)`
font-size: 14px;
`,
children: "Add your first question"
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [innerBlocks.map((block, $index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('block-editor-child-wrapper', {
isSelected: block.id === currentChildBlockId
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockListItem.default, {
id: block.id,
name: block.name,
index: $index,
parentId: id,
parentIndex: index
}, block.id), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('block-editor-child-connection-point', (0, _emotion.css)`
background: ${parentColor};
`)
})]
}, block.id);
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('block-editor-children-connection-line', (0, _emotion.css)`
background: ${parentColor};
`)
})]
}), provided.placeholder]
})
});
};
var _default = exports.default = BlockChildrenContainer;
//# sourceMappingURL=index.js.map