@quillforms/blocklib-welcome-screen-block
Version:
Welcome screen block for quillforms
275 lines (266 loc) • 9.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _rendererCore = require("@quillforms/renderer-core");
var _react = require("react");
var _data = require("@wordpress/data");
var _lodash = require("lodash");
var _emotion = require("emotion");
var _classnames = _interopRequireDefault(require("classnames"));
var _usehooks = require("@uidotdev/usehooks");
var _attachment = _interopRequireDefault(require("./attachment"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* QuillForms Dependencies
*/
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
const WelcomeScreenOutput = ({
attributes
}) => {
var _attributes$layout, _attributes$label, _attributes$descripti;
const {
isPreview,
deviceWidth,
editor
} = (0, _rendererCore.useFormContext)();
const [isActive, setIsActive] = (0, _react.useState)(false);
const [stickyFooter, setStickyFooter] = (0, _react.useState)(false);
const theme = (0, _rendererCore.useBlockTheme)(attributes.themeId);
const screenWrapperRef = (0, _react.useRef)();
const screenContentRef = (0, _react.useRef)();
const isSmallDevice = (0, _usehooks.useMediaQuery)("only screen and (max-width : 768px)");
const layout = isSmallDevice ? 'stack' : (_attributes$layout = attributes?.layout) !== null && _attributes$layout !== void 0 ? _attributes$layout : 'stack';
const {
goToBlock
} = (0, _data.useDispatch)('quillForms/renderer-core');
const {
walkPath
} = (0, _data.useSelect)(select => {
return {
walkPath: select('quillForms/renderer-core').getWalkPath()
};
});
// useLayoutEffect( () => {
// if (
// screenContentRef.current.clientHeight + 150 >
// screenWrapperRef.current.clientHeight
// ) {
// setStickyFooter( true );
// } else {
// setStickyFooter( false );
// }
// } );
(0, _react.useEffect)(() => {
setIsActive(true);
return () => setIsActive(false);
}, []);
let next = _lodash.noop;
if (walkPath[0] && walkPath[0].id && editor.mode === 'off') {
next = () => goToBlock(walkPath[0].id);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _emotion.css)`
height: 100%;
position: relative;
outline: none;
`,
ref: screenWrapperRef,
tabIndex: "0",
onKeyDown: e => {
if (e.key === 'Enter') {
e.stopPropagation();
next();
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('qf-welcome-screen-block__wrapper', `blocktype-welcome-screen-block`, `renderer-core-block-${attributes?.layout}-layout`, {
'with-sticky-footer': stickyFooter,
active: isActive
}, (0, _emotion.css)`
& {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
display: flex;
${layout === 'stack' && `flex-direction: column;
.qf-welcome-screen-block__content-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
}`}
justify-content: center;
width: 100%;
height: 100%;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
&.active {
opacity: 1;
visibility: visible;
}
// &.with-sticky-footer {
// display: block;
// .qf-welcome-screen-block__content-wrapper {
// height: calc(100% - 70px);
// }
// }
.qf-welcome-screen-block__content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 700px;
padding: 30px;
word-wrap: break-word;
text-align: center;
margin-right: auto;
margin-left: auto;
min-height: 100%;
}
`),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: 'qf-welcome-screen-block__content-wrapper',
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "qf-welcome-screen-block__content",
ref: screenContentRef,
children: [layout === 'stack' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_attachment.default, {
isPreview: isPreview,
attributes: attributes
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _emotion.css)`
margin-top: 25px;
`,
children: [(attributes?.label || editor.mode === 'on') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('renderer-components-block-label', (0, _emotion.css)`
color: ${theme.questionsColor};
font-family: ${theme.questionsLabelFont};
@media ( min-width: 768px ) {
font-size: ${theme.questionsLabelFontSize.lg} !important;
line-height: ${theme.questionsLabelLineHeight.lg} !important;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsLabelFontSize.sm} !important;
line-height: ${theme.questionsLabelLineHeight.sm} !important;
}
`),
children: editor?.mode === 'on' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(editor.editLabel, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_rendererCore.HTMLParser, {
value: (_attributes$label = attributes?.label) !== null && _attributes$label !== void 0 ? _attributes$label : ''
})
}), (attributes?.description && attributes.description !== '' || editor.mode === 'on') && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('renderer-components-block-description', (0, _emotion.css)`
color: ${theme.questionsColor};
font-family: ${theme.questionsDescriptionFont};
@media ( min-width: 768px ) {
font-size: ${theme.questionsDescriptionFontSize.lg} !important;
line-height: ${theme.questionsDescriptionLineHeight.lg} !important;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsDescriptionFontSize.sm} !important;
line-height: ${theme.questionsDescriptionLineHeight.sm} !important;
}
`),
children: editor?.mode === 'on' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(editor.editDescription, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_rendererCore.HTMLParser, {
value: (_attributes$descripti = attributes.description) !== null && _attributes$descripti !== void 0 ? _attributes$descripti : ''
})
}), attributes.customHTML && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('renderer-components-block-custom-html', (0, _emotion.css)`
color: ${theme.questionsColor};
`),
dangerouslySetInnerHTML: {
__html: attributes?.customHTML
}
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenAction, {
theme: theme,
next: next,
isSticky: stickyFooter,
buttonText: attributes.buttonText
})]
})
}), layout !== 'stack' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('renderer-core-block-attachment-wrapper', (0, _emotion.css)`
img {
object-position: ${
// @ts-expect-error
attributes?.attachmentFocalPoint?.x * 100}%
${
// @ts-expect-error
attributes?.attachmentFocalPoint?.y * 100}%;
}
`),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_attachment.default, {
isPreview: isPreview,
attributes: attributes
})
})]
})
});
};
const ScreenAction = ({
isSticky,
buttonText,
next,
theme
}) => {
const messages = (0, _rendererCore.useMessages)();
const isTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _classnames.default)('qf-welcome-screen-block__action-wrapper', {
'is-sticky': isSticky
}, (0, _emotion.css)`
& {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
// &.is-sticky {
// position: absolute;
// bottom: 0;
// right: 0;
// left: 0;
// width: 100%;
// background-color: rgba(0, 0, 0, 0.05);
// box-shadow: rgba(0, 0, 0, 0.1) 0 -1px;
// height: 70px;
// display: flex;
// align-items: center;
// justify-content: center;
// .qf-welcome-screen-block__action {
// margin: 0 auto;
`),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "qf-welcome-screen-block__action",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_rendererCore.Button, {
theme: theme,
onClick: next,
children: buttonText
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)('qf-welcome-screen-block__action-helper-text', (0, _emotion.css)`
color: ${theme.questionsColor};
font-size: 12px;
`),
children: !isTouchScreen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_rendererCore.HTMLParser, {
value: messages['label.hintText.enter']
})
})]
});
};
var _default = exports.default = WelcomeScreenOutput;
//# sourceMappingURL=display.js.map