@quillforms/block-editor
Version:
159 lines (152 loc) • 5.13 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 _themeEditor = require("@quillforms/theme-editor");
var _data = require("@wordpress/data");
var _react = require("react");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _classnames = _interopRequireDefault(require("classnames"));
var _emotion = require("emotion");
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
// @ts-expect-error.
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
const BlockThemeControl = ({
blockTheme,
setAttributes
}) => {
const [showThemeModal, setShowThemeModal] = (0, _react.useState)(false);
const [inherit, setInherit] = (0, _react.useState)(blockTheme ? false : true);
(0, _react.useEffect)(() => {
if (blockTheme) {
setInherit(false);
} else {
setInherit(true);
}
}, [blockTheme]);
const {
themesList
} = (0, _data.useSelect)(select => {
return {
// @ts-expect-error
themesList: select('quillForms/theme-editor').getThemesList()
};
});
const {
setCurrentPanel
} = (0, _data.useDispatch)('quillForms/builder-panels');
const themeOptions = [{
key: 'inherit',
name: (0, _i18n.__)('Inherit', 'quillforms')
}, {
key: 'override',
name: (0, _i18n.__)('Override', 'quillforms')
}];
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.BaseControl, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Theme', 'quillforms')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.SelectControl, {
label: "",
className: (0, _emotion.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__*/(0, _jsxRuntime.jsxs)(_adminComponents.ControlWrapper, {
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.ControlLabel, {
label: (0, _i18n.__)('Select theme', 'quillforms')
}), themesList?.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.Button, {
isSecondary: true,
isButton: true,
isDefault: true,
onClick: () => {
setCurrentPanel('theme');
},
children: (0, _i18n.__)('Create a theme first!', 'quillforms')
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_adminComponents.Button, {
isPrimary: true,
isButton: true,
isDefault: true,
onClick: () => {
setShowThemeModal(true);
},
children: (0, _i18n.__)('Select a theme', 'quillforms')
})]
})]
}), showThemeModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
className: (0, _classnames.default)('block-editor-block-theme-modal', (0, _emotion.css)`
border: none !important;
min-width: 500px !important;
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: (0, _i18n.__)('Select a theme!', 'quillforms'),
onRequestClose: () => {
setShowThemeModal(false);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "theme-editor-themes-list",
children: themesList.map((theme, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeEditor.ThemeCard, {
index: index,
isSelected: theme.id === blockTheme,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_themeEditor.ThemeListItem, {
theme: theme,
onClick: () => {
setAttributes({
themeId: theme.id
});
}
})
}, theme.id);
})
})
})]
});
};
var _default = exports.default = BlockThemeControl;
//# sourceMappingURL=index.js.map