@quillforms/block-editor
Version:
114 lines (111 loc) • 3.34 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { BlockIconBox, SelectControl } from '@quillforms/admin-components';
/**
* WordPress Dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { memo } from 'react';
/**
* External Dependencies
*/
import { css } from 'emotion';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BlockControlsHeader = memo(({
id,
currentBlockName,
isChildBlock,
parentId
}) => {
const {
blockTypes,
welcomeScreensLength
} = useSelect(select => {
return {
blockOrder: select('quillForms/block-editor').getBlockOrderById(id),
currentBlockType: select('quillForms/blocks').getBlockType(currentBlockName),
blockTypes: select('quillForms/blocks').getBlockTypes(),
welcomeScreensLength: select('quillForms/block-editor').getWelcomeScreensLength()
};
});
if (currentBlockName === 'group') {
return /*#__PURE__*/_jsx("div", {
className: "block-editor-block-controls-header",
children: /*#__PURE__*/_jsx("div", {
className: css`
background: #fff;
border-radius: 5px;
border: 1px solid #e3e3e3;
font-size: 14px;
width: 100%;
height: 45px;
display: inline-flex;
padding: 16px;
justify-content: space-between;
`,
children: /*#__PURE__*/_jsxs("div", {
className: "block-controls-blocktype-select",
children: [/*#__PURE__*/_jsx(BlockIconBox, {
icon: blockTypes['group']?.icon,
color: blockTypes['group']?.color
}), /*#__PURE__*/_jsx("span", {
children: "Group"
})]
})
})
});
}
const {
replaceBlockName
} = useDispatch('quillForms/block-editor');
const blockTypesOptions = Object.keys(blockTypes).filter($blockName => {
// Always include current block type
if ($blockName === currentBlockName) {
return true;
}
// Exclude specific blocks
const excludedBlocks = ['partial-submission-point', 'group'];
if (welcomeScreensLength > 0 || isChildBlock) {
excludedBlocks.push('welcome-screen');
}
if (isChildBlock) {
excludedBlocks.push('thankyou-screen');
}
if (excludedBlocks.includes($blockName)) {
return false;
}
return true; // Include all other blocks
}).map($blockName => ({
key: $blockName,
name: /*#__PURE__*/_jsxs("div", {
className: "block-controls-blocktype-select",
children: [/*#__PURE__*/_jsx(BlockIconBox, {
icon: blockTypes[$blockName]?.icon,
color: blockTypes[$blockName]?.color
}), /*#__PURE__*/_jsx("span", {
children: blockTypes[$blockName].title
})]
})
}));
return /*#__PURE__*/_jsx("div", {
className: "block-editor-block-controls-header",
children: /*#__PURE__*/_jsx(SelectControl, {
value: blockTypesOptions.find(option => option.key === currentBlockName),
options: blockTypesOptions,
onChange: ({
selectedItem
}) => {
if (selectedItem) {
if (isChildBlock) {
replaceBlockName(id, selectedItem.key, parentId);
} else {
replaceBlockName(id, selectedItem.key);
}
}
}
})
});
});
export default BlockControlsHeader;
//# sourceMappingURL=index.js.map