@quillforms/block-editor
Version:
106 lines • 3.5 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { BlockTypesListDropdown, __experimentalDroppable as Droppable } from '@quillforms/admin-components';
import { size } from 'lodash';
import { css } from 'emotion';
import BlockDragging from '../block-dragging';
import BlockListItem from '../block-list-item';
import { useSelect } from '@wordpress/data';
import classNames from 'classnames';
// const BlockDragIndexLine = () => {
// return <div className="block-drag-index-line"></div>;
// };
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const BlockChildrenContainer = ({
id,
index,
innerBlocks,
parentColor
}) => {
const {
formBlocks,
currentChildBlockId
} = useSelect(select => {
return {
formBlocks: select('quillForms/block-editor').getBlocks(),
currentChildBlockId: select('quillForms/block-editor').getCurrentChildBlockId()
};
});
return /*#__PURE__*/_jsx(Droppable, {
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__*/_jsx("div", {
...provided.draggableProps,
...provided.dragHandleProps,
ref: provided.innerRef,
style: {
...provided.draggableProps.style,
height: undefined,
padding: 12
},
children: /*#__PURE__*/_jsx(BlockDragging, {
id: item?.id,
name: item?.name
})
});
} else {
return /*#__PURE__*/_jsx(_Fragment, {});
}
},
children: (provided, snapshot) => /*#__PURE__*/_jsxs("div", {
className: classNames('block-editor-children-container', {
'disable-hover-highlight': snapshot.isDraggingOver
}),
...provided.droppableProps,
ref: provided.innerRef,
children: [!innerBlocks || size(innerBlocks) === 0 ? /*#__PURE__*/_jsxs("div", {
className: css`
display: flex;
align-items: center;
padding: 20px;
`,
children: [/*#__PURE__*/_jsx(BlockTypesListDropdown, {
destinationIndex: 0
//@ts-ignore
,
parent: id,
color: "primary"
}), /*#__PURE__*/_jsx("span", {
className: css`
font-size: 14px;
`,
children: "Add your first question"
})]
}) : /*#__PURE__*/_jsxs("div", {
children: [innerBlocks.map((block, $index) => {
return /*#__PURE__*/_jsxs("div", {
className: classNames('block-editor-child-wrapper', {
isSelected: block.id === currentChildBlockId
}),
children: [/*#__PURE__*/_jsx(BlockListItem, {
id: block.id,
name: block.name,
index: $index,
parentId: id,
parentIndex: index
}, block.id), /*#__PURE__*/_jsx("div", {
className: classNames('block-editor-child-connection-point', css`
background: ${parentColor};
`)
})]
}, block.id);
}), /*#__PURE__*/_jsx("div", {
className: classNames('block-editor-children-connection-line', css`
background: ${parentColor};
`)
})]
}), provided.placeholder]
})
});
};
export default BlockChildrenContainer;
//# sourceMappingURL=index.js.map