@quillforms/blocklib-welcome-screen-block
Version:
Welcome screen block for quillforms
266 lines (260 loc) • 8.78 kB
JavaScript
/**
* QuillForms Dependencies
*/
import { Button, HTMLParser, useBlockTheme, useMessages, useFormContext } from '@quillforms/renderer-core';
/**
* WordPress Dependencies
*/
import { useState, useLayoutEffect, useRef, useEffect } from 'react';
import { useSelect, useDispatch } from '@wordpress/data';
/**
* External Dependencies
*/
import { noop } from 'lodash';
import { css } from 'emotion';
import classNames from 'classnames';
import { useMediaQuery } from "@uidotdev/usehooks";
import Attachment from './attachment';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const WelcomeScreenOutput = ({
attributes
}) => {
var _attributes$layout, _attributes$label, _attributes$descripti;
const {
isPreview,
deviceWidth,
editor
} = useFormContext();
const [isActive, setIsActive] = useState(false);
const [stickyFooter, setStickyFooter] = useState(false);
const theme = useBlockTheme(attributes.themeId);
const screenWrapperRef = useRef();
const screenContentRef = useRef();
const isSmallDevice = 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
} = useDispatch('quillForms/renderer-core');
const {
walkPath
} = useSelect(select => {
return {
walkPath: select('quillForms/renderer-core').getWalkPath()
};
});
// useLayoutEffect( () => {
// if (
// screenContentRef.current.clientHeight + 150 >
// screenWrapperRef.current.clientHeight
// ) {
// setStickyFooter( true );
// } else {
// setStickyFooter( false );
// }
// } );
useEffect(() => {
setIsActive(true);
return () => setIsActive(false);
}, []);
let next = noop;
if (walkPath[0] && walkPath[0].id && editor.mode === 'off') {
next = () => goToBlock(walkPath[0].id);
}
return /*#__PURE__*/_jsx("div", {
className: css`
height: 100%;
position: relative;
outline: none;
`,
ref: screenWrapperRef,
tabIndex: "0",
onKeyDown: e => {
if (e.key === 'Enter') {
e.stopPropagation();
next();
}
},
children: /*#__PURE__*/_jsxs("div", {
className: classNames('qf-welcome-screen-block__wrapper', `blocktype-welcome-screen-block`, `renderer-core-block-${attributes?.layout}-layout`, {
'with-sticky-footer': stickyFooter,
active: isActive
}, 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__*/_jsx("div", {
className: 'qf-welcome-screen-block__content-wrapper',
children: /*#__PURE__*/_jsxs("div", {
className: "qf-welcome-screen-block__content",
ref: screenContentRef,
children: [layout === 'stack' && /*#__PURE__*/_jsx(Attachment, {
isPreview: isPreview,
attributes: attributes
}), /*#__PURE__*/_jsxs("div", {
className: css`
margin-top: 25px;
`,
children: [(attributes?.label || editor.mode === 'on') && /*#__PURE__*/_jsx("div", {
className: classNames('renderer-components-block-label', css`
color: ${theme.questionsColor};
font-family: ${theme.questionsLabelFont};
@media ( min-width: 768px ) {
font-size: ${theme.questionsLabelFontSize.lg} ;
line-height: ${theme.questionsLabelLineHeight.lg} ;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsLabelFontSize.sm} ;
line-height: ${theme.questionsLabelLineHeight.sm} ;
}
`),
children: editor?.mode === 'on' ? /*#__PURE__*/_jsx(editor.editLabel, {}) : /*#__PURE__*/_jsx(HTMLParser, {
value: (_attributes$label = attributes?.label) !== null && _attributes$label !== void 0 ? _attributes$label : ''
})
}), (attributes?.description && attributes.description !== '' || editor.mode === 'on') && /*#__PURE__*/_jsx("div", {
className: classNames('renderer-components-block-description', css`
color: ${theme.questionsColor};
font-family: ${theme.questionsDescriptionFont};
@media ( min-width: 768px ) {
font-size: ${theme.questionsDescriptionFontSize.lg} ;
line-height: ${theme.questionsDescriptionLineHeight.lg} ;
}
@media ( max-width: 767px ) {
font-size: ${theme.questionsDescriptionFontSize.sm} ;
line-height: ${theme.questionsDescriptionLineHeight.sm} ;
}
`),
children: editor?.mode === 'on' ? /*#__PURE__*/_jsx(editor.editDescription, {}) : /*#__PURE__*/_jsx(HTMLParser, {
value: (_attributes$descripti = attributes.description) !== null && _attributes$descripti !== void 0 ? _attributes$descripti : ''
})
}), attributes.customHTML && /*#__PURE__*/_jsx("div", {
className: classNames('renderer-components-block-custom-html', css`
color: ${theme.questionsColor};
`),
dangerouslySetInnerHTML: {
__html: attributes?.customHTML
}
})]
}), /*#__PURE__*/_jsx(ScreenAction, {
theme: theme,
next: next,
isSticky: stickyFooter,
buttonText: attributes.buttonText
})]
})
}), layout !== 'stack' && /*#__PURE__*/_jsx("div", {
className: classNames('renderer-core-block-attachment-wrapper', css`
img {
object-position: ${
// @ts-expect-error
attributes?.attachmentFocalPoint?.x * 100}%
${
// @ts-expect-error
attributes?.attachmentFocalPoint?.y * 100}%;
}
`),
children: /*#__PURE__*/_jsx(Attachment, {
isPreview: isPreview,
attributes: attributes
})
})]
})
});
};
const ScreenAction = ({
isSticky,
buttonText,
next,
theme
}) => {
const messages = useMessages();
const isTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
return /*#__PURE__*/_jsxs("div", {
className: classNames('qf-welcome-screen-block__action-wrapper', {
'is-sticky': isSticky
}, 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__*/_jsx("div", {
className: "qf-welcome-screen-block__action",
children: /*#__PURE__*/_jsx(Button, {
theme: theme,
onClick: next,
children: buttonText
})
}), /*#__PURE__*/_jsx("div", {
className: classNames('qf-welcome-screen-block__action-helper-text', css`
color: ${theme.questionsColor};
font-size: 12px;
`),
children: !isTouchScreen && /*#__PURE__*/_jsx(HTMLParser, {
value: messages['label.hintText.enter']
})
})]
});
};
export default WelcomeScreenOutput;
//# sourceMappingURL=display.js.map