@quillforms/block-editor
Version:
151 lines (146 loc) • 4.44 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { BaseControl, ControlWrapper, ControlLabel, Button, SelectControl } from '@quillforms/admin-components';
// @ts-expect-error.
import { ThemeCard, ThemeListItem } from '@quillforms/theme-editor';
/**
* WordPress Dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState } from 'react';
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
/**
* External Dependencies
*/
import classnames from 'classnames';
import { css } from 'emotion';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const BlockThemeControl = ({
blockTheme,
setAttributes
}) => {
const [showThemeModal, setShowThemeModal] = useState(false);
const [inherit, setInherit] = useState(blockTheme ? false : true);
useEffect(() => {
if (blockTheme) {
setInherit(false);
} else {
setInherit(true);
}
}, [blockTheme]);
const {
themesList
} = useSelect(select => {
return {
// @ts-expect-error
themesList: select('quillForms/theme-editor').getThemesList()
};
});
const {
setCurrentPanel
} = useDispatch('quillForms/builder-panels');
const themeOptions = [{
key: 'inherit',
name: __('Inherit', 'quillforms')
}, {
key: 'override',
name: __('Override', 'quillforms')
}];
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(BaseControl, {
children: [/*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Theme', 'quillforms')
}), /*#__PURE__*/_jsx(SelectControl, {
label: "",
className: css`
margin-top: 5px;
`,
onChange: ({
selectedItem
}) => {
if (selectedItem?.key === 'inherit') {
setAttributes({
themeId: undefined
});
setInherit(true);
} else {
setInherit(false);
}
},
options: themeOptions,
value: themeOptions.find(option => option.key === (inherit === true ? 'inherit' : 'override'))
})]
}), !inherit && /*#__PURE__*/_jsxs(ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/_jsx(ControlLabel, {
label: __('Select theme', 'quillforms')
}), themesList?.length === 0 ? /*#__PURE__*/_jsx(Button, {
isSecondary: true,
isButton: true,
isDefault: true,
onClick: () => {
setCurrentPanel('theme');
},
children: __('Create a theme first!', 'quillforms')
}) : /*#__PURE__*/_jsx(Button, {
isPrimary: true,
isButton: true,
isDefault: true,
onClick: () => {
setShowThemeModal(true);
},
children: __('Select a theme', 'quillforms')
})]
})]
}), showThemeModal && /*#__PURE__*/_jsx(Modal, {
className: classnames('block-editor-block-theme-modal', css`
border: none ;
min-width: 500px ;
border-radius: 10px;
z-index: 1111111;
.components-modal__content {
background: #eee;
}
.components-modal__header {
background: #a120f1;
.components-modal__header-heading {
color: #fff;
}
.components-button.has-icon svg {
fill: #fff;
}
}
`)
// Because focus on editor is causing the click handler to be triggered
,
shouldCloseOnClickOutside: false,
title: __('Select a theme!', 'quillforms'),
onRequestClose: () => {
setShowThemeModal(false);
},
children: /*#__PURE__*/_jsx("div", {
className: "theme-editor-themes-list",
children: themesList.map((theme, index) => {
return /*#__PURE__*/_jsx(ThemeCard, {
index: index,
isSelected: theme.id === blockTheme,
children: /*#__PURE__*/_jsx(ThemeListItem, {
theme: theme,
onClick: () => {
setAttributes({
themeId: theme.id
});
}
})
}, theme.id);
})
})
})]
});
};
export default BlockThemeControl;
//# sourceMappingURL=index.js.map