@quillforms/blocklib-welcome-screen-block
Version:
Welcome screen block for quillforms
257 lines (248 loc) • 8.54 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _rendererCore = require("@quillforms/renderer-core");
var _data = require("@wordpress/data");
var _lodash = require("lodash");
var _emotion = require("emotion");
var _classnames = _interopRequireDefault(require("classnames"));
var _attachment = _interopRequireDefault(require("./attachment"));
/**
* QuillForms Dependencies
*/
/**
* WordPress Dependencies
*/
/**
* External Dependencies
*/
const WelcomeScreenOutput = ({
attributes
}) => {
const {
isPreview,
deviceWidth
} = (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 {
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) {
next = () => goToBlock(walkPath[0].id);
}
return (0, _react.createElement)("div", {
className: (0, _emotion.css)`
height: 100%;
position: relative;
outline: none;
`,
ref: screenWrapperRef,
tabIndex: "0",
onKeyDown: e => {
if (e.key === 'Enter') {
e.stopPropagation();
next();
}
}
}, (0, _react.createElement)("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;
${(attributes.layout === 'stack' || deviceWidth === 'mobile' && (attributes.layout === 'float-left' || attributes.layout === 'float-right')) && `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%;
}
`)
}, (0, _react.createElement)("div", {
className: 'qf-welcome-screen-block__content-wrapper'
}, (0, _react.createElement)("div", {
className: "qf-welcome-screen-block__content",
ref: screenContentRef
}, (attributes.layout === 'stack' || deviceWidth === 'mobile' && (attributes.layout === 'float-left' || attributes.layout === 'float-right')) && (0, _react.createElement)(_attachment.default, {
isPreview: isPreview,
attributes: attributes
}), (0, _react.createElement)("div", {
className: (0, _emotion.css)`
margin-top: 25px;
`
}, attributes?.label && (0, _react.createElement)("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;
}
`)
}, (0, _react.createElement)(_rendererCore.HTMLParser, {
value: attributes.label
})), attributes?.description && attributes.description !== '' && (0, _react.createElement)("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;
}
`)
}, (0, _react.createElement)(_rendererCore.HTMLParser, {
value: attributes.description
})), attributes.customHTML && (0, _react.createElement)("div", {
className: (0, _classnames.default)('renderer-components-block-custom-html', (0, _emotion.css)`
color: ${theme.questionsColor};
`),
dangerouslySetInnerHTML: {
__html: attributes?.customHTML
}
})), (0, _react.createElement)(ScreenAction, {
theme: theme,
next: next,
isSticky: stickyFooter,
buttonText: attributes.buttonText
}))), (attributes.layout !== 'stack' && deviceWidth !== 'mobile' || deviceWidth === 'mobile' && (attributes.layout === 'split-left' || attributes.layout === 'split-right')) && (0, _react.createElement)("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}%;
}
`)
}, (0, _react.createElement)(_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 (0, _react.createElement)("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;
`)
}, (0, _react.createElement)("div", {
className: "qf-welcome-screen-block__action"
}, (0, _react.createElement)(_rendererCore.Button, {
theme: theme,
onClick: next
}, buttonText)), (0, _react.createElement)("div", {
className: (0, _classnames.default)('qf-welcome-screen-block__action-helper-text', (0, _emotion.css)`
color: ${theme.questionsColor};
font-size: 12px;
`)
}, !isTouchScreen && (0, _react.createElement)(_rendererCore.HTMLParser, {
value: messages['label.hintText.enter']
})));
};
var _default = exports.default = WelcomeScreenOutput;
//# sourceMappingURL=display.js.map