@micromag/screen-keypad 0.3.263 → 0.3.266
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/styles.css +1 -1
- package/es/index.js +111 -76
- package/lib/index.js +108 -73
- package/package.json +16 -16
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.micromag-screen-keypad-popupButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-keypad-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{position:relative;padding:6px}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{margin-top:inherit;margin-bottom:inherit;font-weight:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-inner{position:relative;z-index:2;height:100%}.micromag-screen-keypad-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;height:100%;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{width:100%;margin:10px auto}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{position:relative;height:100%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0;overflow:hidden;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);font-weight:inherit}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{width:100%;margin:0}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{width:100%;padding:5px}.micromag-screen-keypad-empty{width:100%;margin-bottom:10px;padding:10px}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-popupBackdrop{z-index:2;pointer-events:none}.micromag-screen-keypad-popupButton{position:relative;z-index:3;width:100%;height:100%;padding:52px 15px 30px;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);text-align:left}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{overflow:hidden;background-color:#1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{margin-top:0;margin-bottom:0;font-weight:inherit}.micromag-screen-keypad-popupWrapper{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;margin-bottom:.5em}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{margin-bottom:.25em;font-weight:inherit}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{width:100%!important;height:100%}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{width:100%!important;max-height:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{display:block;z-index:2;top:auto;bottom:0;height:auto;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75))}
|
|
1
|
+
.micromag-screen-keypad-popupButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-keypad-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{position:relative;padding:6px}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{margin-top:inherit;margin-bottom:inherit;font-weight:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-inner{position:relative;z-index:2;height:100%}.micromag-screen-keypad-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;height:100%;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{width:100%;margin:10px auto}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{position:relative;height:100%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0;overflow:hidden;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);font-weight:inherit}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{width:100%;margin:0}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{width:100%;padding:5px}.micromag-screen-keypad-empty{width:100%;margin-bottom:10px;padding:10px}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-popupBackdrop{z-index:2;pointer-events:none}.micromag-screen-keypad-popupButton{position:relative;z-index:3;width:100%;height:100%;padding:52px 15px 30px;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);text-align:left}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{overflow:hidden;background-color:#1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{margin-top:0;margin-bottom:0;font-weight:inherit}.micromag-screen-keypad-popupWrapper{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;margin-bottom:.5em}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{margin-bottom:.25em;font-weight:inherit}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{width:100%!important;height:100%}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{width:100%!important;-o-object-fit:cover;object-fit:cover;max-height:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{display:block;z-index:2;top:auto;bottom:0;height:auto;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75))}
|
package/es/index.js
CHANGED
|
@@ -9,10 +9,10 @@ import PropTypes from 'prop-types';
|
|
|
9
9
|
import React, { useMemo, useState, useCallback, useEffect } from 'react';
|
|
10
10
|
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
11
11
|
import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
|
|
12
|
-
import { usePlaybackContext, usePlaybackMediaRef, useScreenSize, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
|
|
12
|
+
import { usePlaybackContext, usePlaybackMediaRef, useScreenSize, useViewerContext, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
|
|
13
13
|
import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
|
|
14
|
-
import { getStyleFromBox, getStyleFromText
|
|
15
|
-
import Background from '@micromag/element-background';
|
|
14
|
+
import { getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
|
|
15
|
+
import Background, { Background as Background$1 } from '@micromag/element-background';
|
|
16
16
|
import Button from '@micromag/element-button';
|
|
17
17
|
import Container from '@micromag/element-container';
|
|
18
18
|
import Heading from '@micromag/element-heading';
|
|
@@ -96,6 +96,7 @@ var propTypes = {
|
|
|
96
96
|
boxStyle: PropTypes$1.boxStyle
|
|
97
97
|
})),
|
|
98
98
|
layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
99
|
+
spacing: PropTypes.number,
|
|
99
100
|
keypadSettings: PropTypes.shape({
|
|
100
101
|
layout: PropTypes.shape({
|
|
101
102
|
columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
|
|
@@ -111,7 +112,8 @@ var propTypes = {
|
|
|
111
112
|
}),
|
|
112
113
|
popupStyles: PropTypes.shape({
|
|
113
114
|
layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
|
|
114
|
-
|
|
115
|
+
headingTextStyle: PropTypes$1.textStyle,
|
|
116
|
+
contentTextStyle: PropTypes$1.textStyle,
|
|
115
117
|
boxStyle: PropTypes$1.boxStyle
|
|
116
118
|
}),
|
|
117
119
|
background: PropTypes$1.backgroundElement,
|
|
@@ -122,6 +124,7 @@ var propTypes = {
|
|
|
122
124
|
var defaultProps = {
|
|
123
125
|
items: null,
|
|
124
126
|
layout: null,
|
|
127
|
+
spacing: 20,
|
|
125
128
|
keypadSettings: null,
|
|
126
129
|
buttonStyles: null,
|
|
127
130
|
popupStyles: null,
|
|
@@ -132,10 +135,11 @@ var defaultProps = {
|
|
|
132
135
|
};
|
|
133
136
|
|
|
134
137
|
var KeypadScreen = function KeypadScreen(_ref) {
|
|
135
|
-
var
|
|
138
|
+
var _ref16;
|
|
136
139
|
|
|
137
140
|
var items = _ref.items,
|
|
138
141
|
layout = _ref.layout,
|
|
142
|
+
spacing = _ref.spacing,
|
|
139
143
|
keypadSettings = _ref.keypadSettings,
|
|
140
144
|
buttonStyles = _ref.buttonStyles,
|
|
141
145
|
popupStyles = _ref.popupStyles,
|
|
@@ -153,8 +157,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
153
157
|
var _useScreenSize = useScreenSize(),
|
|
154
158
|
width = _useScreenSize.width,
|
|
155
159
|
height = _useScreenSize.height,
|
|
156
|
-
resolution = _useScreenSize.resolution;
|
|
160
|
+
resolution = _useScreenSize.resolution;
|
|
157
161
|
|
|
162
|
+
var _useViewerContext = useViewerContext(),
|
|
163
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
164
|
+
viewerBottomHeight = _useViewerContext.bottomHeight;
|
|
158
165
|
|
|
159
166
|
var _useScreenRenderConte = useScreenRenderContext(),
|
|
160
167
|
isView = _useScreenRenderConte.isView,
|
|
@@ -177,7 +184,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
177
184
|
_ref3$columns = _ref3.columns,
|
|
178
185
|
columns = _ref3$columns === void 0 ? null : _ref3$columns,
|
|
179
186
|
_ref3$spacing = _ref3.spacing,
|
|
180
|
-
|
|
187
|
+
columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
|
|
181
188
|
_ref3$withSquareItems = _ref3.withSquareItems,
|
|
182
189
|
withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
|
|
183
190
|
|
|
@@ -194,8 +201,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
194
201
|
popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
|
|
195
202
|
_ref5$backdrop = _ref5.backdrop,
|
|
196
203
|
popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
|
|
197
|
-
_ref5$
|
|
198
|
-
|
|
204
|
+
_ref5$headingTextStyl = _ref5.headingTextStyle,
|
|
205
|
+
headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
|
|
206
|
+
_ref5$contentTextStyl = _ref5.contentTextStyle,
|
|
207
|
+
contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
|
|
199
208
|
_ref5$boxStyle = _ref5.boxStyle,
|
|
200
209
|
popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
201
210
|
|
|
@@ -223,11 +232,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
223
232
|
|
|
224
233
|
var _ref7 = popupHeading || {},
|
|
225
234
|
_ref7$body = _ref7.body,
|
|
226
|
-
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body
|
|
235
|
+
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
|
|
236
|
+
_ref7$textStyle = _ref7.textStyle,
|
|
237
|
+
popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
|
|
227
238
|
|
|
228
239
|
var _ref8 = popupContent || {},
|
|
229
240
|
_ref8$body = _ref8.body,
|
|
230
|
-
popupContentBody = _ref8$body === void 0 ? null : _ref8$body
|
|
241
|
+
popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
|
|
242
|
+
_ref8$textStyle = _ref8.textStyle,
|
|
243
|
+
popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
|
|
244
|
+
|
|
245
|
+
var _ref9 = popupBackdrop || {},
|
|
246
|
+
_ref9$color = _ref9.color,
|
|
247
|
+
backdropColor = _ref9$color === void 0 ? null : _ref9$color,
|
|
248
|
+
_ref9$image = _ref9.image,
|
|
249
|
+
backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
|
|
231
250
|
|
|
232
251
|
var onItemClick = useCallback(function (e, item) {
|
|
233
252
|
e.stopPropagation();
|
|
@@ -239,12 +258,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
239
258
|
setShowPopup(0);
|
|
240
259
|
trackScreenEvent('close_modal');
|
|
241
260
|
}, [setShowPopup]);
|
|
242
|
-
var computePopupProgress = useCallback(function (
|
|
243
|
-
var dragActive =
|
|
244
|
-
|
|
245
|
-
my =
|
|
246
|
-
|
|
247
|
-
vy =
|
|
261
|
+
var computePopupProgress = useCallback(function (_ref10) {
|
|
262
|
+
var dragActive = _ref10.active,
|
|
263
|
+
_ref10$movement = _slicedToArray(_ref10.movement, 2),
|
|
264
|
+
my = _ref10$movement[1],
|
|
265
|
+
_ref10$velocity = _slicedToArray(_ref10.velocity, 2),
|
|
266
|
+
vy = _ref10$velocity[1];
|
|
248
267
|
|
|
249
268
|
var damper = 0.5;
|
|
250
269
|
var p = Math.max(0, my) / window.innerHeight;
|
|
@@ -278,37 +297,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
278
297
|
|
|
279
298
|
var gridItems = useMemo(function () {
|
|
280
299
|
return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
|
|
281
|
-
var
|
|
282
|
-
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
id =
|
|
286
|
-
|
|
287
|
-
label =
|
|
288
|
-
|
|
289
|
-
visual =
|
|
290
|
-
|
|
291
|
-
textStyle =
|
|
292
|
-
|
|
293
|
-
boxStyle =
|
|
294
|
-
|
|
295
|
-
heading =
|
|
296
|
-
|
|
297
|
-
content =
|
|
298
|
-
|
|
299
|
-
popupLargeVisual =
|
|
300
|
-
|
|
301
|
-
var
|
|
302
|
-
|
|
303
|
-
visualUrl =
|
|
304
|
-
|
|
305
|
-
var
|
|
306
|
-
_ref12$body = _ref12.body,
|
|
307
|
-
headingBody = _ref12$body === void 0 ? null : _ref12$body;
|
|
308
|
-
|
|
309
|
-
var _ref13 = content || {},
|
|
300
|
+
var _ref15;
|
|
301
|
+
|
|
302
|
+
var _ref11 = item || {},
|
|
303
|
+
_ref11$id = _ref11.id,
|
|
304
|
+
id = _ref11$id === void 0 ? null : _ref11$id,
|
|
305
|
+
_ref11$label = _ref11.label,
|
|
306
|
+
label = _ref11$label === void 0 ? null : _ref11$label,
|
|
307
|
+
_ref11$visual = _ref11.visual,
|
|
308
|
+
visual = _ref11$visual === void 0 ? null : _ref11$visual,
|
|
309
|
+
_ref11$textStyle = _ref11.textStyle,
|
|
310
|
+
textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
|
|
311
|
+
_ref11$boxStyle = _ref11.boxStyle,
|
|
312
|
+
boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
|
|
313
|
+
_ref11$heading = _ref11.heading,
|
|
314
|
+
heading = _ref11$heading === void 0 ? null : _ref11$heading,
|
|
315
|
+
_ref11$content = _ref11.content,
|
|
316
|
+
content = _ref11$content === void 0 ? null : _ref11$content,
|
|
317
|
+
_ref11$largeVisual = _ref11.largeVisual,
|
|
318
|
+
popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
|
|
319
|
+
|
|
320
|
+
var _ref12 = visual || {},
|
|
321
|
+
_ref12$url = _ref12.url,
|
|
322
|
+
visualUrl = _ref12$url === void 0 ? null : _ref12$url;
|
|
323
|
+
|
|
324
|
+
var _ref13 = heading || {},
|
|
310
325
|
_ref13$body = _ref13.body,
|
|
311
|
-
|
|
326
|
+
headingBody = _ref13$body === void 0 ? null : _ref13$body;
|
|
327
|
+
|
|
328
|
+
var _ref14 = content || {},
|
|
329
|
+
_ref14$body = _ref14.body,
|
|
330
|
+
contentBody = _ref14$body === void 0 ? null : _ref14$body;
|
|
312
331
|
|
|
313
332
|
var key = label || visualUrl || id;
|
|
314
333
|
var isEmpty = label === null && visual === null;
|
|
@@ -317,7 +336,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
317
336
|
key: key,
|
|
318
337
|
className: styles.item
|
|
319
338
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
320
|
-
className: classNames([styles.button, (
|
|
339
|
+
className: classNames([styles.button, (_ref15 = {}, _defineProperty(_ref15, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref15, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref15, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref15, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref15, styles.isEmpty, isEmpty), _defineProperty(_ref15, styles.isPopupEmpty, isPopupEmpty), _ref15)]),
|
|
321
340
|
style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
|
|
322
341
|
onClick: !isPopupEmpty ? function (e) {
|
|
323
342
|
return onItemClick(e, item);
|
|
@@ -384,7 +403,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
384
403
|
}
|
|
385
404
|
}, [screenState, items]);
|
|
386
405
|
return /*#__PURE__*/React.createElement("div", {
|
|
387
|
-
className: classNames([styles.container, (
|
|
406
|
+
className: classNames([styles.container, (_ref16 = {}, _defineProperty(_ref16, className, className !== null), _defineProperty(_ref16, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref16, styles.withSquareItems, withSquareItems), _ref16)]),
|
|
388
407
|
"data-screen-ready": true
|
|
389
408
|
}, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
|
|
390
409
|
background: background,
|
|
@@ -402,31 +421,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
402
421
|
className: styles.inner
|
|
403
422
|
}, /*#__PURE__*/React.createElement(Layout, {
|
|
404
423
|
className: styles.layout,
|
|
405
|
-
verticalAlign: layout
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
// (current && !isPreview ? viewerBottomHeight : 0) + spacing,
|
|
412
|
-
// }
|
|
413
|
-
// : null
|
|
414
|
-
// }
|
|
415
|
-
|
|
424
|
+
verticalAlign: layout,
|
|
425
|
+
style: !isPlaceholder ? {
|
|
426
|
+
padding: spacing,
|
|
427
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
428
|
+
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
|
|
429
|
+
} : null
|
|
416
430
|
}, /*#__PURE__*/React.createElement(Keypad$1, {
|
|
417
431
|
className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
|
|
418
432
|
align: columnAlign,
|
|
419
433
|
columns: isPlaceholder ? 3 : columns,
|
|
420
|
-
spacing: isPlaceholder ? 2 :
|
|
434
|
+
spacing: isPlaceholder ? 2 : columnSpacing,
|
|
421
435
|
items: gridItems
|
|
422
436
|
})), /*#__PURE__*/React.createElement(animated.div, {
|
|
423
437
|
className: classNames([styles.popupBackdrop]),
|
|
424
|
-
style:
|
|
438
|
+
style: {
|
|
425
439
|
opacity: popupSpring.to(function (p) {
|
|
426
440
|
return p;
|
|
427
441
|
})
|
|
428
|
-
}
|
|
429
|
-
}
|
|
442
|
+
}
|
|
443
|
+
}, /*#__PURE__*/React.createElement(Background$1, {
|
|
444
|
+
width: width,
|
|
445
|
+
height: height,
|
|
446
|
+
resolution: resolution,
|
|
447
|
+
playing: backgroundPlaying,
|
|
448
|
+
media: backdropMedia,
|
|
449
|
+
color: backdropColor,
|
|
450
|
+
muted: true
|
|
451
|
+
})), /*#__PURE__*/React.createElement(animated.div, Object.assign({
|
|
430
452
|
className: styles.popup,
|
|
431
453
|
style: {
|
|
432
454
|
transform: popupSpring.to(function (p) {
|
|
@@ -446,7 +468,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
446
468
|
}
|
|
447
469
|
}, /*#__PURE__*/React.createElement("div", {
|
|
448
470
|
className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
|
|
449
|
-
style: _objectSpread(_objectSpread(
|
|
471
|
+
style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
|
|
450
472
|
}, /*#__PURE__*/React.createElement("div", {
|
|
451
473
|
className: styles.popupWrapper
|
|
452
474
|
}, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
@@ -463,7 +485,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
463
485
|
}, /*#__PURE__*/React.createElement(Heading, Object.assign({
|
|
464
486
|
className: styles.popupHeading,
|
|
465
487
|
body: "Lorem ipsum"
|
|
466
|
-
}, popupHeading
|
|
488
|
+
}, popupHeading, {
|
|
489
|
+
textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
|
|
490
|
+
}))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
467
491
|
placeholder: "popupContent",
|
|
468
492
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
469
493
|
id: "JRZoe6",
|
|
@@ -477,7 +501,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
477
501
|
}, /*#__PURE__*/React.createElement(Text, Object.assign({
|
|
478
502
|
className: styles.popupContent,
|
|
479
503
|
body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
|
|
480
|
-
}, popupContent
|
|
504
|
+
}, popupContent, {
|
|
505
|
+
textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
|
|
506
|
+
}))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
|
|
481
507
|
placeholder: "popupVisual",
|
|
482
508
|
emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
483
509
|
id: "z4Pr+g",
|
|
@@ -613,7 +639,6 @@ var definition = [{
|
|
|
613
639
|
fields: [{
|
|
614
640
|
name: 'layout',
|
|
615
641
|
type: 'card-layout',
|
|
616
|
-
// defaultValue: 'content-top',
|
|
617
642
|
label: defineMessage({
|
|
618
643
|
id: "OPxJx/",
|
|
619
644
|
defaultMessage: [{
|
|
@@ -622,33 +647,43 @@ var definition = [{
|
|
|
622
647
|
}]
|
|
623
648
|
})
|
|
624
649
|
}, {
|
|
625
|
-
name: '
|
|
650
|
+
name: 'headingTextStyle',
|
|
651
|
+
type: 'text-style-form',
|
|
652
|
+
label: defineMessage({
|
|
653
|
+
id: "zrK6ak",
|
|
654
|
+
defaultMessage: [{
|
|
655
|
+
"type": 0,
|
|
656
|
+
"value": "Heading text style"
|
|
657
|
+
}]
|
|
658
|
+
})
|
|
659
|
+
}, {
|
|
660
|
+
name: 'contentTextStyle',
|
|
626
661
|
type: 'text-style-form',
|
|
627
662
|
label: defineMessage({
|
|
628
|
-
id: "
|
|
663
|
+
id: "z9nSIG",
|
|
629
664
|
defaultMessage: [{
|
|
630
665
|
"type": 0,
|
|
631
|
-
"value": "
|
|
666
|
+
"value": "Content text style"
|
|
632
667
|
}]
|
|
633
668
|
})
|
|
634
669
|
}, {
|
|
635
670
|
name: 'boxStyle',
|
|
636
671
|
type: 'box-style-form',
|
|
637
672
|
label: defineMessage({
|
|
638
|
-
id: "
|
|
673
|
+
id: "p1pghO",
|
|
639
674
|
defaultMessage: [{
|
|
640
675
|
"type": 0,
|
|
641
|
-
"value": "
|
|
676
|
+
"value": "Box style"
|
|
642
677
|
}]
|
|
643
678
|
})
|
|
644
679
|
}, {
|
|
645
680
|
name: 'backdrop',
|
|
646
|
-
type: '
|
|
681
|
+
type: 'background',
|
|
647
682
|
label: defineMessage({
|
|
648
|
-
id: "
|
|
683
|
+
id: "cDj1mZ",
|
|
649
684
|
defaultMessage: [{
|
|
650
685
|
"type": 0,
|
|
651
|
-
"value": "
|
|
686
|
+
"value": "Background"
|
|
652
687
|
}]
|
|
653
688
|
})
|
|
654
689
|
}]
|
package/lib/index.js
CHANGED
|
@@ -119,6 +119,7 @@ var propTypes = {
|
|
|
119
119
|
boxStyle: core.PropTypes.boxStyle
|
|
120
120
|
})),
|
|
121
121
|
layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
|
|
122
|
+
spacing: PropTypes__default["default"].number,
|
|
122
123
|
keypadSettings: PropTypes__default["default"].shape({
|
|
123
124
|
layout: PropTypes__default["default"].shape({
|
|
124
125
|
columnAlign: PropTypes__default["default"].oneOf(['left', 'right', 'middle']),
|
|
@@ -134,7 +135,8 @@ var propTypes = {
|
|
|
134
135
|
}),
|
|
135
136
|
popupStyles: PropTypes__default["default"].shape({
|
|
136
137
|
layout: PropTypes__default["default"].oneOf(['content-top', 'content-split', 'content-bottom']),
|
|
137
|
-
|
|
138
|
+
headingTextStyle: core.PropTypes.textStyle,
|
|
139
|
+
contentTextStyle: core.PropTypes.textStyle,
|
|
138
140
|
boxStyle: core.PropTypes.boxStyle
|
|
139
141
|
}),
|
|
140
142
|
background: core.PropTypes.backgroundElement,
|
|
@@ -145,6 +147,7 @@ var propTypes = {
|
|
|
145
147
|
var defaultProps = {
|
|
146
148
|
items: null,
|
|
147
149
|
layout: null,
|
|
150
|
+
spacing: 20,
|
|
148
151
|
keypadSettings: null,
|
|
149
152
|
buttonStyles: null,
|
|
150
153
|
popupStyles: null,
|
|
@@ -155,10 +158,11 @@ var defaultProps = {
|
|
|
155
158
|
};
|
|
156
159
|
|
|
157
160
|
var KeypadScreen = function KeypadScreen(_ref) {
|
|
158
|
-
var
|
|
161
|
+
var _ref16;
|
|
159
162
|
|
|
160
163
|
var items = _ref.items,
|
|
161
164
|
layout = _ref.layout,
|
|
165
|
+
spacing = _ref.spacing,
|
|
162
166
|
keypadSettings = _ref.keypadSettings,
|
|
163
167
|
buttonStyles = _ref.buttonStyles,
|
|
164
168
|
popupStyles = _ref.popupStyles,
|
|
@@ -176,8 +180,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
176
180
|
var _useScreenSize = contexts.useScreenSize(),
|
|
177
181
|
width = _useScreenSize.width,
|
|
178
182
|
height = _useScreenSize.height,
|
|
179
|
-
resolution = _useScreenSize.resolution;
|
|
183
|
+
resolution = _useScreenSize.resolution;
|
|
180
184
|
|
|
185
|
+
var _useViewerContext = contexts.useViewerContext(),
|
|
186
|
+
viewerTopHeight = _useViewerContext.topHeight,
|
|
187
|
+
viewerBottomHeight = _useViewerContext.bottomHeight;
|
|
181
188
|
|
|
182
189
|
var _useScreenRenderConte = contexts.useScreenRenderContext(),
|
|
183
190
|
isView = _useScreenRenderConte.isView,
|
|
@@ -200,7 +207,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
200
207
|
_ref3$columns = _ref3.columns,
|
|
201
208
|
columns = _ref3$columns === void 0 ? null : _ref3$columns,
|
|
202
209
|
_ref3$spacing = _ref3.spacing,
|
|
203
|
-
|
|
210
|
+
columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
|
|
204
211
|
_ref3$withSquareItems = _ref3.withSquareItems,
|
|
205
212
|
withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
|
|
206
213
|
|
|
@@ -217,8 +224,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
217
224
|
popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
|
|
218
225
|
_ref5$backdrop = _ref5.backdrop,
|
|
219
226
|
popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
|
|
220
|
-
_ref5$
|
|
221
|
-
|
|
227
|
+
_ref5$headingTextStyl = _ref5.headingTextStyle,
|
|
228
|
+
headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
|
|
229
|
+
_ref5$contentTextStyl = _ref5.contentTextStyle,
|
|
230
|
+
contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
|
|
222
231
|
_ref5$boxStyle = _ref5.boxStyle,
|
|
223
232
|
popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
|
|
224
233
|
|
|
@@ -246,11 +255,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
246
255
|
|
|
247
256
|
var _ref7 = popupHeading || {},
|
|
248
257
|
_ref7$body = _ref7.body,
|
|
249
|
-
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body
|
|
258
|
+
popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
|
|
259
|
+
_ref7$textStyle = _ref7.textStyle,
|
|
260
|
+
popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
|
|
250
261
|
|
|
251
262
|
var _ref8 = popupContent || {},
|
|
252
263
|
_ref8$body = _ref8.body,
|
|
253
|
-
popupContentBody = _ref8$body === void 0 ? null : _ref8$body
|
|
264
|
+
popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
|
|
265
|
+
_ref8$textStyle = _ref8.textStyle,
|
|
266
|
+
popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
|
|
267
|
+
|
|
268
|
+
var _ref9 = popupBackdrop || {},
|
|
269
|
+
_ref9$color = _ref9.color,
|
|
270
|
+
backdropColor = _ref9$color === void 0 ? null : _ref9$color,
|
|
271
|
+
_ref9$image = _ref9.image,
|
|
272
|
+
backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
|
|
254
273
|
|
|
255
274
|
var onItemClick = React.useCallback(function (e, item) {
|
|
256
275
|
e.stopPropagation();
|
|
@@ -262,12 +281,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
262
281
|
setShowPopup(0);
|
|
263
282
|
trackScreenEvent('close_modal');
|
|
264
283
|
}, [setShowPopup]);
|
|
265
|
-
var computePopupProgress = React.useCallback(function (
|
|
266
|
-
var dragActive =
|
|
267
|
-
|
|
268
|
-
my =
|
|
269
|
-
|
|
270
|
-
vy =
|
|
284
|
+
var computePopupProgress = React.useCallback(function (_ref10) {
|
|
285
|
+
var dragActive = _ref10.active,
|
|
286
|
+
_ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
|
|
287
|
+
my = _ref10$movement[1],
|
|
288
|
+
_ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
|
|
289
|
+
vy = _ref10$velocity[1];
|
|
271
290
|
|
|
272
291
|
var damper = 0.5;
|
|
273
292
|
var p = Math.max(0, my) / window.innerHeight;
|
|
@@ -301,37 +320,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
301
320
|
|
|
302
321
|
var gridItems = React.useMemo(function () {
|
|
303
322
|
return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
|
|
304
|
-
var
|
|
305
|
-
|
|
306
|
-
var
|
|
307
|
-
|
|
308
|
-
id =
|
|
309
|
-
|
|
310
|
-
label =
|
|
311
|
-
|
|
312
|
-
visual =
|
|
313
|
-
|
|
314
|
-
textStyle =
|
|
315
|
-
|
|
316
|
-
boxStyle =
|
|
317
|
-
|
|
318
|
-
heading =
|
|
319
|
-
|
|
320
|
-
content =
|
|
321
|
-
|
|
322
|
-
popupLargeVisual =
|
|
323
|
-
|
|
324
|
-
var
|
|
325
|
-
|
|
326
|
-
visualUrl =
|
|
327
|
-
|
|
328
|
-
var
|
|
329
|
-
_ref12$body = _ref12.body,
|
|
330
|
-
headingBody = _ref12$body === void 0 ? null : _ref12$body;
|
|
331
|
-
|
|
332
|
-
var _ref13 = content || {},
|
|
323
|
+
var _ref15;
|
|
324
|
+
|
|
325
|
+
var _ref11 = item || {},
|
|
326
|
+
_ref11$id = _ref11.id,
|
|
327
|
+
id = _ref11$id === void 0 ? null : _ref11$id,
|
|
328
|
+
_ref11$label = _ref11.label,
|
|
329
|
+
label = _ref11$label === void 0 ? null : _ref11$label,
|
|
330
|
+
_ref11$visual = _ref11.visual,
|
|
331
|
+
visual = _ref11$visual === void 0 ? null : _ref11$visual,
|
|
332
|
+
_ref11$textStyle = _ref11.textStyle,
|
|
333
|
+
textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
|
|
334
|
+
_ref11$boxStyle = _ref11.boxStyle,
|
|
335
|
+
boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
|
|
336
|
+
_ref11$heading = _ref11.heading,
|
|
337
|
+
heading = _ref11$heading === void 0 ? null : _ref11$heading,
|
|
338
|
+
_ref11$content = _ref11.content,
|
|
339
|
+
content = _ref11$content === void 0 ? null : _ref11$content,
|
|
340
|
+
_ref11$largeVisual = _ref11.largeVisual,
|
|
341
|
+
popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
|
|
342
|
+
|
|
343
|
+
var _ref12 = visual || {},
|
|
344
|
+
_ref12$url = _ref12.url,
|
|
345
|
+
visualUrl = _ref12$url === void 0 ? null : _ref12$url;
|
|
346
|
+
|
|
347
|
+
var _ref13 = heading || {},
|
|
333
348
|
_ref13$body = _ref13.body,
|
|
334
|
-
|
|
349
|
+
headingBody = _ref13$body === void 0 ? null : _ref13$body;
|
|
350
|
+
|
|
351
|
+
var _ref14 = content || {},
|
|
352
|
+
_ref14$body = _ref14.body,
|
|
353
|
+
contentBody = _ref14$body === void 0 ? null : _ref14$body;
|
|
335
354
|
|
|
336
355
|
var key = label || visualUrl || id;
|
|
337
356
|
var isEmpty = label === null && visual === null;
|
|
@@ -340,7 +359,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
340
359
|
key: key,
|
|
341
360
|
className: styles.item
|
|
342
361
|
}, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
343
|
-
className: classNames__default["default"]([styles.button, (
|
|
362
|
+
className: classNames__default["default"]([styles.button, (_ref15 = {}, _defineProperty__default["default"](_ref15, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref15, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref15, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref15, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref15, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref15, styles.isPopupEmpty, isPopupEmpty), _ref15)]),
|
|
344
363
|
style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonBoxStyle)), utils.getStyleFromText(buttonTextStyle)), utils.getStyleFromBox(boxStyle)), utils.getStyleFromText(textStyle)),
|
|
345
364
|
onClick: !isPopupEmpty ? function (e) {
|
|
346
365
|
return onItemClick(e, item);
|
|
@@ -407,7 +426,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
407
426
|
}
|
|
408
427
|
}, [screenState, items]);
|
|
409
428
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
410
|
-
className: classNames__default["default"]([styles.container, (
|
|
429
|
+
className: classNames__default["default"]([styles.container, (_ref16 = {}, _defineProperty__default["default"](_ref16, className, className !== null), _defineProperty__default["default"](_ref16, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref16, styles.withSquareItems, withSquareItems), _ref16)]),
|
|
411
430
|
"data-screen-ready": true
|
|
412
431
|
}, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
|
|
413
432
|
background: background,
|
|
@@ -425,31 +444,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
425
444
|
className: styles.inner
|
|
426
445
|
}, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
|
|
427
446
|
className: styles.layout,
|
|
428
|
-
verticalAlign: layout
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
// (current && !isPreview ? viewerBottomHeight : 0) + spacing,
|
|
435
|
-
// }
|
|
436
|
-
// : null
|
|
437
|
-
// }
|
|
438
|
-
|
|
447
|
+
verticalAlign: layout,
|
|
448
|
+
style: !isPlaceholder ? {
|
|
449
|
+
padding: spacing,
|
|
450
|
+
paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
|
|
451
|
+
paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
|
|
452
|
+
} : null
|
|
439
453
|
}, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
|
|
440
454
|
className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
|
|
441
455
|
align: columnAlign,
|
|
442
456
|
columns: isPlaceholder ? 3 : columns,
|
|
443
|
-
spacing: isPlaceholder ? 2 :
|
|
457
|
+
spacing: isPlaceholder ? 2 : columnSpacing,
|
|
444
458
|
items: gridItems
|
|
445
459
|
})), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
|
|
446
460
|
className: classNames__default["default"]([styles.popupBackdrop]),
|
|
447
|
-
style:
|
|
461
|
+
style: {
|
|
448
462
|
opacity: popupSpring.to(function (p) {
|
|
449
463
|
return p;
|
|
450
464
|
})
|
|
451
|
-
}
|
|
452
|
-
}
|
|
465
|
+
}
|
|
466
|
+
}, /*#__PURE__*/React__default["default"].createElement(Background.Background, {
|
|
467
|
+
width: width,
|
|
468
|
+
height: height,
|
|
469
|
+
resolution: resolution,
|
|
470
|
+
playing: backgroundPlaying,
|
|
471
|
+
media: backdropMedia,
|
|
472
|
+
color: backdropColor,
|
|
473
|
+
muted: true
|
|
474
|
+
})), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
|
|
453
475
|
className: styles.popup,
|
|
454
476
|
style: {
|
|
455
477
|
transform: popupSpring.to(function (p) {
|
|
@@ -469,7 +491,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
469
491
|
}
|
|
470
492
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
471
493
|
className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
|
|
472
|
-
style: _objectSpread__default["default"](_objectSpread__default["default"](
|
|
494
|
+
style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
|
|
473
495
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
474
496
|
className: styles.popupWrapper
|
|
475
497
|
}, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
@@ -486,7 +508,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
486
508
|
}, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
|
|
487
509
|
className: styles.popupHeading,
|
|
488
510
|
body: "Lorem ipsum"
|
|
489
|
-
}, popupHeading
|
|
511
|
+
}, popupHeading, {
|
|
512
|
+
textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), popupHeadingTextStyle)
|
|
513
|
+
}))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
490
514
|
placeholder: "popupContent",
|
|
491
515
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
492
516
|
id: "JRZoe6",
|
|
@@ -500,7 +524,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
500
524
|
}, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
|
|
501
525
|
className: styles.popupContent,
|
|
502
526
|
body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
|
|
503
|
-
}, popupContent
|
|
527
|
+
}, popupContent, {
|
|
528
|
+
textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
|
|
529
|
+
}))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
|
|
504
530
|
placeholder: "popupVisual",
|
|
505
531
|
emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
506
532
|
id: "z4Pr+g",
|
|
@@ -636,7 +662,6 @@ var definition = [{
|
|
|
636
662
|
fields: [{
|
|
637
663
|
name: 'layout',
|
|
638
664
|
type: 'card-layout',
|
|
639
|
-
// defaultValue: 'content-top',
|
|
640
665
|
label: reactIntl.defineMessage({
|
|
641
666
|
id: "OPxJx/",
|
|
642
667
|
defaultMessage: [{
|
|
@@ -645,33 +670,43 @@ var definition = [{
|
|
|
645
670
|
}]
|
|
646
671
|
})
|
|
647
672
|
}, {
|
|
648
|
-
name: '
|
|
673
|
+
name: 'headingTextStyle',
|
|
674
|
+
type: 'text-style-form',
|
|
675
|
+
label: reactIntl.defineMessage({
|
|
676
|
+
id: "zrK6ak",
|
|
677
|
+
defaultMessage: [{
|
|
678
|
+
"type": 0,
|
|
679
|
+
"value": "Heading text style"
|
|
680
|
+
}]
|
|
681
|
+
})
|
|
682
|
+
}, {
|
|
683
|
+
name: 'contentTextStyle',
|
|
649
684
|
type: 'text-style-form',
|
|
650
685
|
label: reactIntl.defineMessage({
|
|
651
|
-
id: "
|
|
686
|
+
id: "z9nSIG",
|
|
652
687
|
defaultMessage: [{
|
|
653
688
|
"type": 0,
|
|
654
|
-
"value": "
|
|
689
|
+
"value": "Content text style"
|
|
655
690
|
}]
|
|
656
691
|
})
|
|
657
692
|
}, {
|
|
658
693
|
name: 'boxStyle',
|
|
659
694
|
type: 'box-style-form',
|
|
660
695
|
label: reactIntl.defineMessage({
|
|
661
|
-
id: "
|
|
696
|
+
id: "p1pghO",
|
|
662
697
|
defaultMessage: [{
|
|
663
698
|
"type": 0,
|
|
664
|
-
"value": "
|
|
699
|
+
"value": "Box style"
|
|
665
700
|
}]
|
|
666
701
|
})
|
|
667
702
|
}, {
|
|
668
703
|
name: 'backdrop',
|
|
669
|
-
type: '
|
|
704
|
+
type: 'background',
|
|
670
705
|
label: reactIntl.defineMessage({
|
|
671
|
-
id: "
|
|
706
|
+
id: "cDj1mZ",
|
|
672
707
|
defaultMessage: [{
|
|
673
708
|
"type": 0,
|
|
674
|
-
"value": "
|
|
709
|
+
"value": "Background"
|
|
675
710
|
}]
|
|
676
711
|
})
|
|
677
712
|
}]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-keypad",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.266",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -54,20 +54,20 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@babel/runtime": "^7.13.10",
|
|
57
|
-
"@micromag/core": "^0.3.
|
|
58
|
-
"@micromag/element-background": "^0.3.
|
|
59
|
-
"@micromag/element-button": "^0.3.
|
|
60
|
-
"@micromag/element-call-to-action": "^0.3.
|
|
61
|
-
"@micromag/element-container": "^0.3.
|
|
62
|
-
"@micromag/element-grid": "^0.3.
|
|
63
|
-
"@micromag/element-heading": "^0.3.
|
|
64
|
-
"@micromag/element-keypad": "^0.3.
|
|
65
|
-
"@micromag/element-layout": "^0.3.
|
|
66
|
-
"@micromag/element-scroll": "^0.3.
|
|
67
|
-
"@micromag/element-text": "^0.3.
|
|
68
|
-
"@micromag/element-urbania-author": "^0.3.
|
|
69
|
-
"@micromag/element-visual": "^0.3.
|
|
70
|
-
"@micromag/transforms": "^0.3.
|
|
57
|
+
"@micromag/core": "^0.3.265",
|
|
58
|
+
"@micromag/element-background": "^0.3.266",
|
|
59
|
+
"@micromag/element-button": "^0.3.265",
|
|
60
|
+
"@micromag/element-call-to-action": "^0.3.265",
|
|
61
|
+
"@micromag/element-container": "^0.3.265",
|
|
62
|
+
"@micromag/element-grid": "^0.3.265",
|
|
63
|
+
"@micromag/element-heading": "^0.3.265",
|
|
64
|
+
"@micromag/element-keypad": "^0.3.265",
|
|
65
|
+
"@micromag/element-layout": "^0.3.265",
|
|
66
|
+
"@micromag/element-scroll": "^0.3.265",
|
|
67
|
+
"@micromag/element-text": "^0.3.265",
|
|
68
|
+
"@micromag/element-urbania-author": "^0.3.265",
|
|
69
|
+
"@micromag/element-visual": "^0.3.265",
|
|
70
|
+
"@micromag/transforms": "^0.3.265",
|
|
71
71
|
"@react-spring/core": "^9.1.1",
|
|
72
72
|
"@react-spring/web": "^9.1.1",
|
|
73
73
|
"@use-gesture/react": "^10.2.4",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "562d67e6a6146225391a02d951a98b1b5deeb06e"
|
|
86
86
|
}
|